How to Create Bonus Attributes

3-16 Web User Interface Developers Guide for Oracle Application Development Framework Example 3–10 shows how you might achieve the same functionality as shown in Example 3–9 , but in this example, the visible attribute is used to determine which component is displayed the rendered attribute is true by default, it does not need to be explicitly set. Example 3–10 Visible and Not Visible Components af:panelGroupLayout layout=horizontal af:inputText label=Input some text id=input value={myBean.inputValue} af:commandButton text=Enter af:panelGroupLayout af:panelGroupLayout layout=horizontal af:outputLabel value=You entered: af:outputText value=No text entered id=output1 visible={myBean.inputValue==null} af:outputText value={myBean.inputValue} visible={myBean.inputValue =null} af:panelGroupLayout However, because using the rendered attribute instead of the visible attribute improves performance on the server side, you may instead decide to have JavaScript handle the visibility. Example 3–11 shows the page code for JavaScript that handles the visiblity of the components. Example 3–11 Using JavaScript to Turn On Visibility function showText { var output1 = AdfUIComponent.findComponentoutput1 var output2 = AdfUIComponent.findComponentoutput2 var input = AdfUIComponent.findComponentinput if input.getValue == { output1.setVisibletrue; } else { output2.setVisibletrue } }

3.8.1 How to Set Visibility Using JavaScript

You can create a conditional JavaScript function that can toggle the visible attribute of components. To set visibility: 1. Create the JavaScript that can toggle the visibility. Example 3–11 shows a script that turns visibility on for one outputText component if there is no value; otherwise, the script turns visibility on for the other outputText component. 2. For each component that will be needed in the JavaScript function, expand the Advanced section of the Property Inspector and set the ClientComponent Using ADF Faces Architecture 3-17 attribute to true. This creates a client component that will be used by the JavaScript. 3. For the components whose visibility will be toggled, set the visible attribute to false. Example 3–12 shows the full page code used to toggle visibility with JavaScript. Example 3–12 JavaScript Toggles Visibility f:view af:resource function showText { var output1 = AdfUIComponent.findComponentoutput1 var output2 = AdfUIComponent.findComponentoutput2 var input = AdfUIComponent.findComponentinput if input.value == { output1.setVisibletrue; } else { output2.setVisibletrue } } af:resource af:document af:form af:panelGroupLayout layout=horizontal af:inputText label=Input some text id=input value={myBean.inputValue} clientComponent=true immediate=true af:commandButton text=Enter clientComponent=true af:clientListener method=showText type=action af:commandButton af:panelGroupLayout af:panelGroupLayout layout=horizontal af:outputLabel value=You entered: clientComponent=false af:outputText value=No text entered id=output1 visible=false clientComponent=true af:outputText value={myBean.inputValue} id=output2 visible=false clientComponent=true af:panelGroupLayout af:form af:document f:view

3.8.2 What You May Need to Know About Visible and the isShowing Function

If the parent of a component has its visible attribute set to false, when the isVisible function is run against a child component whose visible attribute is set to true, it will return true, even though that child is not displayed. For example, say you have a panelGroupLayout component that contains an outputText component as a child, and the panelGroupLayout component’s visible attribute is set to false, while the outputText component’s visible attribute is left as the default true. On the client, neither the panelGroupLayout nor the outputText