Adding ADF Face Components to the View Page Fragment

In the Projects panel located on the left, expand the ViewController, Web Content, and Fragments nodes and double-click the page fragment generated for the View object you added to the bounded task flow in section B.6.

This will display the page fragment in the design panel in the middle.

Select the Source tab at the bottom of the panel. Insert a Panel Stretch Layout between the ui:composition tags from the Components palette and set the following attribute:

dimensionsFrom: parent

Insert a Panel Group Layout component inside the top facet of the Panel Stretch Layout. Set the following attributes:

layout: scroll
halign: end

Insert a Panel Group Layout component inside the first Panel Group layout. Set the following attribute:

layout: horizontal

From the Data Controls panel, drag the groupByFilter in EquipWorkOrderDC into the inner panelGroupLayout component.

You will be prompted to specify the type of component to add.

Select Text > ADF> ADF Output Text. This will add an outputText component to the page fragment and create a page binding for the groupByFilter field.

From the Components panel, drag a Radio Group component inside the inner panelGroupLayout component after the outputText component.

On the Insert Radio Group form, select the Create List radio button and add the following entries to the list using the green '+' button:

Item Label	Item Value
Equipment	0
Assigned To	1
Supervisor	2

Click Finish. A selectOneRadio component is added to the fragment with a selectItem component for each valid radio button value.

Delete the label attribute from the selectOneRadio component.

Copy the value attribute from the outputText component to the selectOneRadio component to bind the radio button group to the groupByFilter field in the data control.

Set the following attributes on the selectOneRadio component:

layout: horizontal
autoSubmit: true
simple: true
inlineStyle: margin: 10px 10px 0 10px;

Set focus on the selectOneRadio component and then select the Edit option next to the ValueChangeListener property in the Properties panel.

On the Edit Property: ValueChangeListener form, click the New button next to the Managed Bean drop-down list, and set the following fields:

Bean Name: workOrderListenerBean
Class Name: WorkOrderListenerBean
Scope: request (Use default)

Click OK to create the class and the managed bean declaration in the page flow XML file.

Select the New button next to the Method drop-down list and set the following field:

Method Name: radioGroupValueChanged

Click OK to create the method and click OK again to close the Edit Property form.

In the Projects panel, expand the ViewController and Application Sources nodes, and open the WorkOrderListenerBean.java class in the Editor window.

Add the code shown below to WorkOrderListenerBean.java:

public void radioGroupValueChanged(ValueChangeEvent event)
	{
	    // Execute data control method to refresh data.
	    DCBindingContainer bindings = (DCBindingContainer) BindingContext.getCurrent().getCurrentBindingsEntry();
	    DCIteratorBinding iter = bindings.findIteratorBinding("EquipWorkOrderDCIterator");
	    if (iter != null)
	    {
	        DCDataControl dc = iter.getDataControl();
	        EquipWorkOrderDC equipWorkOrderDC = (EquipWorkOrderDC) dc.getDataProvider();
 
	        if (equipWorkOrderDC != null)
	        {
	            equipWorkOrderDC.refreshChartData(event.getNewValue().toString());
 
	            OperationBinding refreshOverstatedChart = bindings.getOperationBinding("Execute");
	            OperationBinding refreshUnderstatedChart = bindings.getOperationBinding("Execute1");
	            if (refreshOverstatedChart != null && refreshUnderstatedChart != null)
	            {
	                refreshOverstatedChart.execute();
	                refreshUnderstatedChart.execute();
	            }
	        }
	    }
}
 
public void displayLocalMessage(String title, String msg)
{
    FacesContext.getCurrentInstance().addMessage("E1ADFApp", new FacesMessage(FacesMessage.SEVERITY_ERROR, title, msg));
}

Save the changes to the class.

From the Data Controls panel, drag the equipmentNumberItemText, assignedToItemText, and supervisorItemText fields in EquipWorkOrderDC into the inner panelGroupLayout component below the selectOneRadio component and create an Output Text component for each field. Again, this will create a page binding for each field.

Copy the value of the value attribute for the equipmentNumberItemText outputText component and paste the value into the label attribute of the Equipment selectItem component in the selectOneRadio component.

Copy the value of the value attribute for the assignedToItemText outputText component and paste the value into the label attribute of the Assigned To selectItem component in the selectOneRadio component.

Copy the value of the value attribute for the supervisorItemText outputText component and paste the value into the label attribute of the Supervisor selectItem component in the selectOneRadio component.

From the Components palette, insert a Panel Grid Layout component inside the center facet of the Panel Stretch Layout.

On the Create Panel Grid Layout form, set the following values:

Columns: 2
Rows: 1

Click Finish.

Set the following attribute of the panelGridLayout component:

dimensionsFrom: parent

Set focus on the panelGridLayout component and then select the Edit option next to the PartialTriggers property in the Properties panel.

On the Edit Property: PartialTriggers form, expand the top facet and both panelGroupLayout components, and double-click selectOneRadio-sor1 from the Available panel to move it to the Selected Panel.

Click OK to set the attribute value.

Set the following attribute of the gridRow component:

height: 100%

Set the following attributes of the first gridCell component:

marginEnd: 15px
width: 50%
halign: stretch
valign: stretch

Set the following attributes of the second gridCell component:

marginStart: 15px
width: 50%
halign: stretch
valign: stretch

From the Data Controls panel, drag the overstatedChartTitle, underStatedChartTitle, chartXAxisTitle, and chartYAxisTitle fields into the first gridCell component and create Output Text components for each field. Again, this will create a page binding for each field.

From the Data Controls panel, drag the overstatedChartData field into the first gridCell component.

You are prompted to specify the type of component to add.

Select Chart.

On the Component Gallery form, select Bar from the Categories list on the left, choose Stacked Bar from the Chart Types section at the top, pick the second layout in the Quick Start Layouts section at the bottom, and click OK.

On the Create Stacked Bar Chart form, drag the x field from the Available list on the left to the Bars field on the right. Then drag the group field from the Available list to the X Axis field on the right.

Click OK.

Set the following attributes for the barChart component:

titleHalign: center
inlineStyle: "font-weight:bold;"

Copy the value of the value attribute for the overstatedChartTitle outputText component and paste it into the title attribute of the barChart component.

Set the following attribute for the chartDataItem component:

series: #{item.series}

From the Components palette, add the chartLegend component to the barChart component and set the rendered attribute to false.

From the Components palette, add the chartXAxis and chartYAxis components to the barChart component.

Copy the value of the value attribute for the chartXAxisTitle outputText component and paste it into the title attribute of the chartXAxis component.

Copy the value of the value attribute for the chartYAxisTitle outputText component and paste it into the title attribute of the chartYAxis component.

From the Data Controls panel, drag the understatedChartData field into the second gridCell component.

You will be prompted to specify the type of component to add.

Select Chart. On the Component Gallery form, select Bar from the Categories list on the left, choose Stacked Bar from Chart Types section at the top, pick the second layout in the Quick Start Layouts section at the bottom, and click OK.

On the Create Stacked Bar Chart form, drag the x field from the Available list on the left to the Bars field on the right. Then drag the group field from the Available list to the X Axis field on the right. Click OK.

Set the following attributes for the barChart component:

titleHalign: center
inlineStyle: "font-weight:bold;"

Copy the value of the value attribute for the underStatedChartTitle outputText component and paste it into the title attribute of the barChart component.

Set the following attribute for the chartDataItem component:

series: #{item.series}

From the Components palette, add the chartLegend component to the barChart component and set the rendered attribute to false.

From the Components palette, add the chartXAxis and chartYAxis components to the barChart component.

Copy the value of the value attribute for the chartXAxisTitle outputText component and paste it into the title attribute of the chartXAxis component.

Copy the value of the value attribute for the chartYAxisTitle outputText component and paste it into the title attribute of the chartYAxis component.

Delete all outputText components from the page fragment.

Select the Bindings tab at the bottom of the panel.

In the Bindings list on the left, click the green '+' icon to add a new binding

On the Insert Item form, select action from the list and click OK.

On the Create Action Binding form, expand the EquipWorkOrderDC, overstatedChartData, and Operations nodes and select the Execute operation.

Click OK to add the action binding.

Click the green '+' icon again to add a second binding.

On the Insert Item form, select action from the list and click OK.

On the Create Action Binding form, expand the EquipWorkOrderDC, understatedChartData, and Operations nodes and select the Execute operation.

Click OK to add the action binding.

In the Bindings list, select overstatedChartData and press the pencil icon to edit the binding.

On the Edit Tree Binding form, move series from the Available Attributes list to the Display Attributes list. Click OK to save changes.

In the Bindings list, select understatedChartData and press the pencil icon to edit the binding.

On the Edit Tree Binding form, move series from the Available Attributes list to the Display Attributes list. Click OK to save changes.

Perform a final Save for the page fragment.

The page fragment should look like this:

<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:af="http://xmlns.oracle.com/adf/faces/rich" xmlns:f="http://java.sun.com/jsf/core"
                xmlns:dvt="http://xmlns.oracle.com/dss/adf/faces">
    <af:panelStretchLayout id="psl1" dimensionsFrom="parent">
        <f:facet name="bottom"/>
        <f:facet name="center">
            <af:panelGridLayout id="pgl3" dimensionsFrom="parent" partialTriggers="sor1">
                <af:gridRow marginTop="5px" height="100%" marginBottom="5px" id="gr1">
                    <af:gridCell marginStart="5px" width="50%" id="gc1" marginEnd="15px" halign="stretch" valign="stretch">
                        <dvt:barChart stack="on" id="barChart1" var="row" value="#{bindings.overstatedChartData.collectionModel}"
                                         titleHalign="center" inlineStyle="font-weight:bold;" title="#{bindings.overstatedChartTitle.inputValue}">
                            <dvt:chartLegend id="cl1" rendered="false"/>
                            <dvt:chartXAxis id="cxa1" title="#{bindings.chartXAxisTitle.inputValue}"/>
                            <dvt:chartYAxis id="cya1" title="#{bindings.chartYAxisTitle.inputValue}"/>
                            <f:facet name="dataStamp">
                                <dvt:chartDataItem id="di1" value="#{row.x}" group="#{row.group}" series="#{row.series}"/>
                            </f:facet>
                        </dvt:barChart>
                    </af:gridCell>
                    <af:gridCell marginStart="15px" width="50%" marginEnd="5px" id="gc2" halign="stretch" valign="stretch">
                        <dvt:barChart stack="on" id="barChart2" var="row" value="#{bindings.understatedChartData.collectionModel}"
                                     titleHalign="center" inlineStyle="font-weight: bold;" title="#{bindings.underStatedChartTitle.inputValue}">
                            <dvt:chartLegend id="cl2" rendered="false"/>
                            <dvt:chartXAxis id="cxa2" title="#{bindings.chartXAxisTitle.inputValue}"/>
                            <dvt:chartYAxis id="cya2" title="#{bindings.chartYAxisTitle.inputValue}"/>
                            <f:facet name="dataStamp">
                                <dvt:chartDataItem id="di2" value="#{row.x}" group="#{row.group}" series="#{row.series}"/>
                            </f:facet>
                        </dvt:barChart>
                    </af:gridCell>
                </af:gridRow>
            </af:panelGridLayout>
        </f:facet>
        <f:facet name="start"/>
        <f:facet name="end"/>
        <f:facet name="top">
            <af:panelGroupLayout id="pgl1" layout="scroll" halign="end">
                <af:panelGroupLayout id="pgl2" layout="horizontal">
                    <af:selectOneRadio id="sor1" value="#{bindings.groupByFilter.inputValue}"
                                 layout="horizontal" autoSubmit="true" simple="true" inlineStyle="margin: 10px 10px 0 10px;"
                                       valueChangeListener="#{workOrderListenerBean.radioGroupValueChanged}">
                        <af:selectItem label="#{bindings.equipmentNumberItemText.inputValue}" value="0" id="si1"/>
                        <af:selectItem label="#{bindings.assignedToItemText.inputValue}" value="1" id="si2"/>
                        <af:selectItem label="#{bindings.supervisorItemText.inputValue}" value="2" id="si3"/>
                    </af:selectOneRadio>
                </af:panelGroupLayout>
            </af:panelGroupLayout>
        </f:facet>
    </af:panelStretchLayout>
</ui:composition>