Functional Patterns
Pattern
Pattern
Revision
Technologies
Keywords
Forum
Publish date
Enable/Disable a UI component
1.0
JDeveloper TP4
Enable Disable
Pattern Team
May 2008
Problem Description
A rich client User Interface may have by default, a component or part of a page that is set
to a disabled state until a user action, such as changing the state of a different component,
forces the disabled component or part of a page to become enabled or active. Presently,
there is no out of the box general ADF approach for achieving this behavior.
Technical Pattern Description
This pattern shows how to create a typical rich client User Interface to create behavior,
which by default sets components or part of a page to a disabled state unless or until a
user action, such as changing the state of a component, forces a component or part of a
page to become enabled or active. For instance, many rich client User Interfaces keep the
“Save” button in a disabled state until the user makes changes that require persistence. At
that point the “Save” button becomes enabled. The reverse rich client User Interface
scenario from enabled to disabled is also applicable. That is, elements on the screen can
become disabled based on user actions.
ADF technologies used in this pattern include an inputNumberSpinbox and a
selectBooleanCheckbox along with various layout components. The implementation is
achieved by setting a combination of autoSubmit, partialTriggers, and EL binding the
disabled attribute.
Enable/Disable a UI component
Functional Patterns
The User Experience
Step1: In the demo above, increase the number of copies from 1 to 2 and notice that
the ‘collate’ checkbox has been enabled. In other words, the ‘collate’ checkbox is
enabled or disabled based on the number of copies. This applies to both the Disabled
and Rendered demo.
Enable/Disable a UI component
Functional Patterns
Step2: Notice that the ‘collate’ checkbox is now enabled in both the Disabled and
Rendered demo above since the Number of copies has been incremented by 1.
The Artifacts
Following is a list of the artifacts used in this pattern.
User Interface Elements
ADF Input Number Spinbox: The af:inputNumberSpinbox is an input
component that presents the user with an input field for numerical values and a set
of up and down arrow keys to increment or decrement the current value in the
input field.
ADF Select Boolean Checkbox: The af:selectBooleanCheckbox component
allows more flexibility in how the checkbox components are laid out on the page.
For example, selectBooleanCheckbox components can be laid out in a grid by
using h:panelGrid. The value attribute should be set to a boolean. The required
attribute whether a non-null, non-empty value must be entered. If false, validators
will not be executed when the value is null or empty. Having the required
attribute set to true, does not mean that the user must check the checkbox before
submitting. False is a valid value, even if the required attribute is true.
Enable/Disable a UI component
Functional Patterns
Code Snippets
af:inputNumberSpinbox – add the
EL binding, #{test.copies}, to the Value property of the Common Tab within the
Property Inspector. Ensure that the AutoSubmit element within the Behavior tab
of the Property Inspector is set to true.
EnableDisable.jspx: Collate af:selectBooleanCheckbox – add
the EL binding, #{test.collateDisabled}, to the
Disabled element in the Behavior Tab of the Property
Inspector. Ensure that the PartialTriggers element is
set to copies within the Behavior tab.
EnableDisable.jspx: Number of copies
Implementing the Pattern
Note: This pattern is implemented via a combination of autoSubmit, partialTriggers and
EL binding the disabled attribute.
The reference implementation of the Enable / Disable pattern can be broken down into 4
fundamental steps:
Create the Application Workspace, Project and a simple enableDisable.jspx page.
Create the User Interface.
Create a Managed Bean and add the required EL Bindings within the ADF UI
Components.
Run the Application.
Create the Application Workspace, Project and a simple
enableDisable.jspx page
1. Select New Application to create a new application workspace.
2. Enter enabledisable or other appropriate name for the Application Name and
select Generic Application for the Application Template.
3. Enter enabledisable or other appropriate name for the Project Name.
4. Right select on the project name of enabledisable and select Project
Properties from context.
5. Select Technology Scope and shuttle ADF Faces from Available
Technologies to Selected Technologies.
6. Select OK to save the Project Properties modifications.
Enable/Disable a UI component
Functional Patterns
7. Open the faces-config.xml from the WEB-INF folder within the Web
Content folder of the enabledisable project.
8. Create a JSF Page by dragging and dropping the JSF Page from the
component pallet onto the faces-config.xml page. Give the page a appropriate
name (i.e. enabledisable.jspx).
9. Double click on the enabledisable.jspx icon within the faces-config.xml
diagram and accept the defaults to create the enableDisable.jspx page.
10. For details on creating an application workspace, project, and jspx page,
please refer to the OBEs (Oracle By Example) section on OTN.
Create the User Interface
1. Add a Panel Group Layout component, selected from the Layout section of the
Component palette, to the enableDisable.jspx page and within the Common
section of the Property Inspector, set the Layout attribute to horizontal.
Enable/Disable a UI component
Functional Patterns
2. Add an Input Number Spinbox component within the Panel Group Layout
component. This component is found in the Common Components of the
Component Palette.
3. Set the Id attribute within the Common section of the Input Number Spinbox –
Property Inspector to copies and change the Label attribute to Number of
copies.
4. Select the Data section within the Input Number Spinbox – Property Inspector
and set the Minimum: attribute to 1.
5. Select the Behavior tab within the Input Number Spinbox – Property
Inspector and set the AutoSubmit: attribute to true.
6. Add a Select Boolean Checkbox component to the right of the Input Number
Spinbox.
7. Within the Common tab of the Select Boolean Checkbox – Property Inspector,
clear the Label: attribute.
8. Select the Appearance tab within the Select Boolean Checkbox – Property
Inspector and set the Text: attribute to collate.
Enable/Disable a UI component
Functional Patterns
Create a Managed Bean and add the required EL Bindings
within the ADF UI Components
1. Within the Input Number Spinbox – Property Inspector, select the down arrow
to the right of the Value attribute within the Common section and start the
Expression Builder.
2. Select the JSF Managed Beans folder followed by clicking on the Create
Managed Bean button.
Enable/Disable a UI component
Functional Patterns
3. Create the Managed Bean with the information above.
a. Note: since this managed bean is utilized with the application session, the
Scope: is set to session.
4. Once the Managed Bean has been created, properties can be added to it within the
Expression Builder by selecting the Create Property button. Ensure that the
managed bean that was created is selected and select Create Property.
a. Create a property with the following credentials.
i. Name: copies
ii. Type: int
b. Create a second property with the following credentials.
i. Name: collateDisabled
ii. Type: boolean
5. Now that the Managed Bean has been created, select the property copies and
insert the following EL Binding, #{test.copies}, into the Expression if not already
there. This inserts the EL Binding, #{test.copies}, into the Value attribute within
the Common section of the Input Number Spinbox.
6. Select the Disabled: attribute within the Behavior tab of the Select Boolean
Checkbox – Property Inspector and launch the Expression Builder by selecting
the down arrow. Select the property collateDisabled and insert the following EL
Binding, #{test.collateDisabled}, into the Expression if not already there.
a. The EL Binding, #{test.collateDisabled}, is now set for the Disable
attribute.
Enable/Disable a UI component
Functional Patterns
7. Select the down arrow to the right of the PartialTriggers property within the
Behavior tab of the Select Boolean Checkbox – Property Inspector and select
Edit. Shuttle inputNumberSpinbox – copies to Selected.
a. Setting the Partial Triggers property within the Select Boolean
Checkbox to the Input Number Spinbox ID will create a dependency
between the Checkbox and the Spinbox. If the Spinbox is incremented
beyond 1, the checkbox receives an event that will cause it to update, or in
this case, set it to enabled.
8. Open the Managed Bean, under Application Sources / enabledisable package,
TestBean.java that was created earlier and you can take it full screen by doubleclicking on the TestBean.java tab within the Source Editor. Make any necessary
modifications so as resemble the code above.
Enable/Disable a UI component
Functional Patterns
Run the application
Right select enableDisable.jspx and choose run from context to test the implemented
pattern. Notice that with the Number of copies set to 1, the collate checkbox is disabled.
When the Number of copies has been incremented such that it is greater than 1, the
collate checkbox is enabled and can be selected.
Enable/Disable a UI component
Functional Patterns
Related Documentation

Oracle Fusion Middleware Web User Interface Developer’s Guide for Oracle
Application Development Framework 11g Release 1 (11.1.1)
Documentation Related to the Pattern Artifacts
Input Number Spinbox
Select Boolean Checkbox
How to Add an InputNumberSpinbox
Component in the Oracle Fusion
Middleware Web User Interface
Developer’s Guide for Oracle Application
Development Framework 11g Release 1
(11.1.1)
How to Add an Select Boolean Checkbox
in the Oracle Fusion Middleware Web
User Interface Developer’s Guide for
Oracle Application Development
Framework 11g Release 1 (11.1.1)
Appendix – Object Definitions Used by the
Prototype
In order to test this pattern out, included is a JDeveloper 11g Application called
enabledisable that can be unzipped into your designated work area and explored /
executed from within JDeveloper. Simply download enabledisable.zip, unzip the archive,
open the enabledisable.jws within JDeveloper 11g and explore.
Enable/Disable a UI component