Designer 10.5 | webMethods CAF and OpenUI Development | User Interface Controls Concepts | Hideable Controls
 
Hideable Controls
Visibility (hideable) controls switch a Composite Application Framework control from visible and hidden through the use of JavaScript code. You manage the visibility of the Composite Application Framework controls with the visibility feature using toggle controls. For more information about using toggle controls, see Toggle Controls.
Server-Side Properties
Visibility controls have a server-side visible Boolean property that indicates whether the control is rendered as initially visible when the page containing the control is displayed in response to a user request. You can use the visibility properties to return the page results based on the user request and display only the controls needed to fulfill the request.
Visibility controls also have a disableWhenHidden Boolean property that makes controls contained within the parent control invisible. When a Composite Application Framework user interface control is disableWhenHidden, the control’s values are not submitted to the server.
In addition, the defaultFocus property of visibility controls sets the focus on a specified Control ID Reference referenced in the property’s value.
You can also manage a user interface control’s visibility with properties called Scriptaculous Effects. Composite Application Framework controls do not use Scriptaculous effects as their default behavior. For more information, see Scriptaculous Effects.
Client-Side Functionality
You can manage the control’s visibility on the client side using the Composite Application Framework client-side model. When you change the client-side visibility of a control, you also change the control’s server-side visibility property.
You can use the following methods to affect the control's client-side visibility:
*isVisible() returns true if the control is visible.
*setVisible(visible) sets the control to display as visible or hidden.
*show() makes the control visible if hidden.
*hide() makes the control hidden if visible.
*toggle() makes the control visible if hidden, or hidden if visible.
To use a client-side method to set the value of a myHideableControlId check box’s onclick property, do the following:
CAF.model('#{myPageBean.clientIds'myHideableControlId'}').toggle();
The result switches a separate myHideableControlId hideable control between visible and hidden when the user clicks the check box. For more information, see About the Client-Side Model.
Lazy Loading
Many hideable controls have lazy loading capabilities that enable using a hidden request that loads the control's content asynchronously. The panel's lazy load properties controls this capability. Setting lazy to true enables it, while setting lazy to false, disables lazy loading. The default setting for the lazy loading capability is false. For information on using lazy load, see About Ajax.
refreshOnShow Property
Composite Application Framework provides properties to modify a hideable control's lazy-loading capabilities. These properties have no effect unless the control's lazy property is true.The refreshOnShow property refreshes the content contained within the control when the control changes from hidden to visible. When you set refreshOnShow to true, it makes the control retrieve its content again, using a secondary request each time visibility changes to visible. When you set refreshOnShow to false, the control's content is not updated (refreshed) if the control’s visibility changes from hidden to visible.
twoPass Property
The twoPass property forces a hideable control to retrieve its content using a secondary request. Setting the twoPass property to true prevents the control's content from rendering with the initial page. The control’s content is retrieved by a secondary request when the page is loaded by the browser. Setting twoPass to false makes the control's content render synchronously with the page when the control is initially visible. If the control is not initially visible, the twoPass property has no effect.
supressInputs Property
When a secondary request is made to the server to retrieve the content of a lazy loaded control, and the control is part of a form, the state of all the form's controls are: posted to the server; the controls are validated; and the control values are updated the data models to which they are bound. This behavior is not desirable in all cases. You can use the supressInputs property to specify a comma-separated list of IDs of the controls you do not want validated or updated. The descendants of any control in the list of suppressed inputs is also suppressed, for example, if you want to suppress the validation and update processing of all the controls in a property-group control, you can simply specify the ID of the property-group instead of the ID of each individual control in the group. However, any direct ancestor of the hideable control in the list of suppressed inputs is ignored so you cannot add the ID of the form to the suppressed list.
Progress Bar Customization
A progress bar automatically appears when a hideable control's content is loaded asynchronously. You can configure the progress bar's display with the following hideable control properties:
*progressDelay: Milliseconds to delay before showing progress bar, defaults to 0. A -, negative one, suppresses the progress bar completely.
*progressFlashOnComplete: True to flash control when control's content finishes loading; defaults to true.
*progressMsg: Progress bar message; defaults to localized value; in English, for example, Loading...
*progressUseHideShowEffect: Use effects specified by hideEffect, hideEffectOptions, showEffect, and showEffectOptions properties to hide and show progress bar; defaults to false.
Hideable Control Instances
The server-side component object model of controls that are hideable implement the com.webmethods.caf.faces.component.IHideablePanel interface. These controls include the following:
*Hideable Panel
*Inline Hideable Panel
*Modal Dialog
*Modeless Dialog
*Overlay Panel
*Progress Dialog