ADF Mobile - Create Drill Down Graph Reports

Drill Down Graph Report - Scenario here is to show all the cars sales report for this year in Pie Chart and when user click a individual car in pie chart slice, a drill through report opens, which accepts the car type as a parameter, and then displays car models sale in Bar Chart.

In ADF Mobile, "clickListener" method is not provided for DVT components. Click listener interface will receive click events on the gauge components and can do further data process in BC4J.  In ADF Mobile "Action" method is supported on DataItem in the graphs. Action defines a reference to the an action method sent by the command button component, or static outcome of an action. So in this article I'm explaining how to build drill down reports using <dvtm:pieChart> and <dvtm:barChart>.

Application screen looks like below when it deployed and run on Android Device/Emulator. Displays the Cars Sales Reports in first screen.

In above screen, slide the screen towards right. Notice only check boxes are displayed and attributes values(Legends) are not getting displayed for the pie chart slices, this could be an error. 

Next click on any pie chart slice and respective car models will be displayed in Bar Chart screen.

You can download the sample workspace from here

[Runs with Oracle JDeveloper 11.1.2.3.0]

Implementation Steps

Create an ADF Mobile Application, the application consists of two projects. Application Controller project of Application LifeCycle, Listeners, Device Features DataControl and ViewController project contains mobile features content like AMX Files, Task Flows and DataControl.

In ViewController project, locate and expand the Application Sources folder, create a Cars.java file and add the below code.

public class Cars {
    private String carName;
    private int carSalesCount;
    private transient PropertyChangeSupport propertyChangeSupport = new PropertyChangeSupport(this);

    public Cars() {
        super();
    }

    public Cars(String carName, int carSalesCount) {
        this.carName = carName;
        this.carSalesCount = carSalesCount;
    }

    public void setCarName(String carName) {
        String oldCarName = this.carName;
        this.carName = carName;
        propertyChangeSupport.firePropertyChange("carName", oldCarName, carName);
    }

    public String getCarName() {
        return carName;
    }

    public void setCarSalesCount(int carSalesCount) {
        int oldCarSalesCount = this.carSalesCount;
        this.carSalesCount = carSalesCount;
        propertyChangeSupport.firePropertyChange("carSalesCount", oldCarSalesCount, carSalesCount);
    }

    public int getCarSalesCount() {
        return carSalesCount;
    }

    public void setPropertyChangeSupport(PropertyChangeSupport propertyChangeSupport) {
        this.propertyChangeSupport = propertyChangeSupport;
    }

    public PropertyChangeSupport getPropertyChangeSupport() {
        return propertyChangeSupport;
    }
}

Create CarModels.java file and add the below code.

public class CarModels extends Cars {
    private String modelName;
    private int modelSalesCount;
    private transient PropertyChangeSupport propertyChangeSupport = new PropertyChangeSupport(this);

    public CarModels() {
        super();
    }

    public CarModels(String carName, String modelName, int modelSalesCount) {
        super();
        setCarName(carName);
        this.modelName = modelName;
        this.modelSalesCount = modelSalesCount;
    }

    public void setModelName(String modelName) {
        String oldModelName = this.modelName;
        this.modelName = modelName;
        propertyChangeSupport.firePropertyChange("modelName", oldModelName, modelName);
    }

    public String getModelName() {
        return modelName;
    }

    public void setModelSalesCount(int modelSalesCount) {
        int oldModelSalesCount = this.modelSalesCount;
        this.modelSalesCount = modelSalesCount;
        propertyChangeSupport.firePropertyChange("modelSalesCount", oldModelSalesCount, modelSalesCount);
    }

    public int getModelSalesCount() {
        return modelSalesCount;
    }

    public void setPropertyChangeSupport(PropertyChangeSupport propertyChangeSupport) {
        this.propertyChangeSupport = propertyChangeSupport;
    }

    public PropertyChangeSupport getPropertyChangeSupport() {
        return propertyChangeSupport;
    }
}

Create Generic.java file and add the below code, create DataControl based on Generic.java file.

public class Generic {
    private static List s_cars = null;
    private static List s_carModels = null;
    private static List s_filterCarModels = null;
    private transient ProviderChangeSupport providerChangeSupport = new ProviderChangeSupport(this);
    private transient PropertyChangeSupport propertyChangeSupport = new PropertyChangeSupport(this);

    public Generic() {
        super();
        if (s_cars == null) {
            s_cars = new ArrayList();
            s_cars.add(new Cars("Audi", 2000));
            s_cars.add(new Cars("BMW", 2500));
            s_cars.add(new Cars("Honda", 5000));
            s_cars.add(new Cars("Mitsubishi", 1000));
            s_cars.add(new Cars("Toyota", 4000));
            s_cars.add(new Cars("Volkswagen", 3000));
        }
        if (s_carModels == null) {
            s_carModels = new ArrayList();
            s_carModels.add(new CarModels("Audi", "A3", 300));
            s_carModels.add(new CarModels("Audi", "A4", 1000));
            s_carModels.add(new CarModels("Audi", "Quattro", 700));
            s_carModels.add(new CarModels("BMW", "BMW128", 1000));
            s_carModels.add(new CarModels("BMW", "BMW528", 800));
            s_carModels.add(new CarModels("BMW", "Gran Coupe", 700));
            s_carModels.add(new CarModels("Honda", "Accord", 1200));
            s_carModels.add(new CarModels("Honda", "Civic", 2000));
            s_carModels.add(new CarModels("Honda", "Hybrid", 1800));
            s_carModels.add(new CarModels("Mitsubishi", "Lancer", 400));
            s_carModels.add(new CarModels("Mitsubishi", "Evolution", 300));
            s_carModels.add(new CarModels("Mitsubishi", "Outlander", 300));
            s_carModels.add(new CarModels("Toyota", "Camry", 1800));
            s_carModels.add(new CarModels("Toyota", "Corolla", 1200));
            s_carModels.add(new CarModels("Toyota", "Cruiser", 1000));
            s_carModels.add(new CarModels("Volkswagen", "Beetle", 1300));
            s_carModels.add(new CarModels("Volkswagen", "Jetta", 800));
            s_carModels.add(new CarModels("Volkswagen", "Tiguan", 900));
        }

    }

    public void addPropertyChangeListener(PropertyChangeListener l) {
        propertyChangeSupport.addPropertyChangeListener(l);
    }

    public void removePropertyChangeListener(PropertyChangeListener l) {
        propertyChangeSupport.removePropertyChangeListener(l);
    }

    public void addProviderChangeListener(ProviderChangeListener l) {
        providerChangeSupport.addProviderChangeListener(l);
    }

    public void removeProviderChangeListener(ProviderChangeListener l) {
        providerChangeSupport.removeProviderChangeListener(l);
    }

    /**
     * Method will populate the result list to s_cars.
     */
    public Cars[] getCars() {
        Cars c[] = null;
        c = (Cars[])s_cars.toArray(new Cars[s_cars.size()]);
        return c;
    }

    /**
     * Method will populate the result list to s_carModels.
     */
    public CarModels[] getCarModels() {
        CarModels cm[] = null;
        cm = (CarModels[])s_carModels.toArray(new CarModels[s_carModels.size()]);
        return cm;
    }

    /**
     * Method will filter the result from s_carModels list.
     */
    public CarModels[] filteredCarModels(String carType) {
        CarModels cm[] = null;
        s_filterCarModels = new ArrayList();
        for (Iterator i = s_carModels.iterator(); i.hasNext(); ) {
            CarModels curCM = (CarModels)i.next();
            if (curCM.getCarName().equals(carType)) {
                s_filterCarModels.add(new CarModels(curCM.getCarName(), curCM.getModelName(),
                                                    curCM.getModelSalesCount()));
            }
        }
        cm = (CarModels[])s_filterCarModels.toArray(new CarModels[s_filterCarModels.size()]);
        providerChangeSupport.fireProviderRefresh("carModels");
        return cm;
    }
}

In ViewController project. Locate and expand the Application Sources folder, then expand the META-INF folder. You will see the adfmf-feature.xml file, click on the adfmf-feature.xml file to launch the Feature editor. Add a new feature by clicking the green plus sign on the Features table near top of the editor this will launch the new Create ADF Mobile Feature dialog, modify the values as shown below.

In the Features table, select the newly created feature Graph. Under the Features table, click the Content tab, and locate the Content table. Notice that the content item Graph.1 is created by default. Next add a new file by clicking the green plus sign and select taskflow option, this will launch the new Create ADF Mobile Task Flow dialog, modify the value as shown below.

Click on the GraphTaskflow.xml to open the file in taskflow editor and follow the below steps.
1) Create two views and name them as carsView and carModelsView respectively.
 2) Draw the control flow case from carsView to carModelsView and Outcome as "carsModel", Behavior->Transition as "flipRight".
 3) Draw the control flow case from carModelsView to carsView and Outcome as "car", Behavior->Transition as "slideLeft".

Double click on carsView view will launch Create ADF Mobile AMX Page dialog. Open the carsView.amx page and to source tab and follow the below steps:

1) In Header facet, amx:outputText set the value as "Sales Report"
2) From DC palette drag and drop Generic->Cars->ADF Mobile Chart and in Component Gallery dialog, select Pie chart and click ok.
3) In Create Mobile Pie Chart dialog, select the values as shown in below image.

4) For dvtm:pieDataItem, set the action as "action" and drop amx:setPropertyListener and modify the values as shown in below code.

 <dvtm:pieChart var="row" value="#{bindings.cars.collectionModel}" id="pc1" animationOnDisplay="auto"
                       inlineStyle="width:400px; height:280px; float:left; background-color:white;" threeDEffect="on"
                       title="Car">
            <amx:facet name="dataStamp">
                <dvtm:pieDataItem sliceId="#{row.carName}" value="#{row.carSalesCount}" action="carsModel">
                    <amx:setPropertyListener from="#{row.carName}" to="#{pageFlowScope.carName}"/>
                </dvtm:pieDataItem>
            </amx:facet>
 </dvtm:pieChart>           

Double click on carModelsView view will launch Create ADF Mobile AMX Page dialog, in page facets select Header, Primary Action. Open the deptList.amx page and to source tab and follow the below steps:

1) In Header facet, amx:outputText set the value as "Sales Report"
2) In Seconday Action facet, for amx:commandButton modify the values text: Back, action: __back.
3) From DC palette drag and drop Generic->filteredCarModels->CarModels->ADF Mobile Chart and in Component Gallery dialog, select Bar chart and click ok.
4) In Create Mobile Bar Chart dialog, select the values as shown in below image.

Enter the carType parameter value as #{pageFlowScope.carName}.

Open the carModelsView.amx and modify the properties for dvtm:barChart as shown below.

<dvtm:barChart var="row" value="#{bindings.CarModels.collectionModel}" id="bc1"
      inlineStyle="width:400px; height:300px; float:left; background-color:white;"
      title="#{pageFlowScope.carName} Car Models">
 <amx:facet name="dataStamp">
  <dvtm:chartDataItem group="#{row.modelName}" value="#{row.modelSalesCount}" series="Sales Count"/>
 </amx:facet>
 <dvtm:legend position="end" id="l1"/>
</dvtm:barChart>

Click on Create Executable binding and select Invoke action and follow as shown in below image.

Edit invokeFilterdCarModels invoke actiion and set the Refresh to always, so when ever page loads employeesTotalRows method will get executed.

Note:- When the screen loads for the first time Bar Chart will get cached and for second time execution filteredCarModels method will not get executed at all even if the parameter value changed. To overcome this we have to set invoke Action for filteredCarModels method, this executes the  invokeAction every time a page is navigated to regardless of the state of the binding container.

Preview of the carsView.amx and carModelsView.amx will looks like below.

In the Application menu, select Deploy - New Deployment Profile to start the Create Deployment Profile dialog box. In the Profile Type drop-down list, ensure ADF Mobile for Android/IOS is selected and then click OK. Next select Deploy - New Deployment deployment profile. In the subsequent dialog box, select Deploy application to device/emulator/package, and click Finish.