ExternalBox Component

Description

The externalBox Component is a container based on the standard HTML tag <IFrame>.

The externalBox Component has the following capabilities :

  • ILoadEventCapability
  • IOverStyleClassCapability


The default externalBox renderer is link to the f_externalBox javascript class. f_externalBox extends f_component


Table of component style classes :

Style Name Description
f_externalBox Defines styles for the wrapper Frame element

Screen Shot

Syntax

jsp : 
		<vh:javaScript src="$context/js/iframe.js" />
	
		<v:button text="Afficher/cacher" selectionListener="return visible(event, 'if1')"/>	
		<v:button text="Actualiser" selectionListener="return refresh(event, 'if1')"/>	
		<v:textEntry id="contentURL" width="680"  value="http://www.google.fr"/> 
		<v:button text="GO" selectionListener="return naviguer(event, 'if1', 'contentURL')"/>	
		
		<v:externalBox id="if1" value="#{navigationBean.uneUrl}" width="712"  scrolling="auto"
		height="300" loadListener="return changeUrl(event, 'if1', 'contentURL')"/>
iframe.js : 
	
	function visible(event, id) {
		var component = event.f_findComponent(id);
		component.f_setVisible(!component.f_isVisible());
		component.f_refresh();
	}
	function refresh(event, id) {
		var component = event.f_findComponent(id);
		component.f_refresh();
	}

	function naviguer(event, idFrame, idInput) {
		var input = event.f_findComponent(idInput);
		var iframe = event.f_findComponent(idFrame);
		var url = input.f_getValue();
		iframe.f_setContentURL(url);
	}

	function changeUrl(event, idFrame, idInput) {
		
		if(event.f_getDetail() == f_externalBox.FIRST_LOAD ){
			return;
		}
		var input = event.f_findComponent(idInput);
		var iframe = event.f_findComponent(idFrame);
		var url;
		
		try {
			url = frames[iframe.f_getId()].document.location;
		} catch (e) {
			
		}
		
		if (url){
			input.f_setValue(url.href);
		}
		
	}

Instructions