Using Star Rating component (dvt:ratingGauge) in ADF 12c (12.1.3 new component)

Hello all
As ADF 12.1.3. is out , there is lot of enhancement in UI layer, component for Rating is available in this release i;e rating gauge (dvt:ratingGauge)
see how this rating gauge look like-

1.XML Source- Simple Rating Gauge with Star Symbol

<dvt:ratingGauge id="ratingGauge2" value="2" minimum="1" maximum="5" inlineStyle="width:300px;height:80px;"/>

2. XML Source- Rating Gauge with Circular Symbol

<dvt:ratingGauge id="ratingGauge2" value="2" minimum="1" maximum="5" inlineStyle="width:300px;height:80px;"
                     shape="circle" inputIncrement="half" readOnly="false"/>

2. XML Source- Rating Gauge with Circular Symbol, Rectangular Unselected Symbol

<dvt:ratingGauge id="ratingGauge2" value="2" minimum="1" maximum="5" inlineStyle="width:300px;height:80px;"
                     shape="circle" inputIncrement="half" readOnly="false" unselectedShape="rectangle"/>

Sample Application Based on Departments Table of Default HR Schema

• Added a column in HR's Departments table for Rating





• now create model using Departments table and drop on page (page fragment in bounded taskflow)as table and form, select Rating attribute from Data Control and drop as Gauge-->Rating Gauge(Minimum-0 Maximum-9)
• see on page it is ready to show Rating of Department, but still not able to take input





• By default rating gauge is readonly means it doesn't take input from user, set readonly to false and set increment (full or half) values
• So i have tried this, but when i select any rating and commit data, it doesn't reflect changes in Database table, it is still showing previously saved value
• i don't know why this is happening, so i have used valueChangeListener and set new rating in current row of Department, in this way it is working fine



    /**ValueChange Listener to SetRating
     * @param vce
     */
    public void ratingVCE(ValueChangeEvent vce) {
        if (vce.getNewValue() != null) {
            System.out.println("New Rating -" + vce.getNewValue());
            DCIteratorBinding iter = (DCIteratorBinding) getBindings().get("Departments1Iterator");
            iter.getViewObject().getCurrentRow().setAttribute("Rating", vce.getNewValue());
        }
    }



• Now run and enjoy new rating gauge :)

Happy Learning :) Download- Sample ADF Application

Oracle JDeveloper and Oracle ADF 12c (12.1.3.0.0) out (bug fixed and lots of new features introduced)

hello all
ADF & Jdeveloper 12c (12.1.3.0) released with lots of new features and previous (12.1.2.0) bugs are fixed

Bugs Fixed in 12c (12.1.3.0)-

related to af:query, af:tabel filter and scrolling, property inspector, inputlistofvalues, radioGroup, af:message, checkbox, table pagination, context menu, autosuggest in inputlistofValues, shuttle component
Check out complete list of fixed bugs- Bug Fix List

New Features introduced in 12c (12.1.3.0)-

Enjoy some very cool ADF Faces components

• 30+ chart types, thematic map with zoom and rotation feature
• new gauge and awaited rating gauge
• new component af:deck ,like CSS image slider to show multiple child details one by one with slide and fade effect
• CSS rule for changing button's color and width
• Export to CSV feature, mouse hover in list view

Check out complete list of features- New In This Release

Happy Learning , Enjoy new Jdev :)

Navigating to (open) specific tab in af:panelTabbed programmatically -Oracle ADF

Hello All,
This post is about a development requirement - how to move (navigate or open) to a specific tab in panel tabbed  in Oracle ADF?
Suppose i have to open second tab of af:panelTabbed on a button click, so see how to do this using ADF Faces

• Create a Fusion Web application and a page to drop panel tabbed and a button





• now bind panel tabbed and it's showDetailItem to managed bean, in order to use disclosed property and to get client id
See the code to open (disclose) a specific tab of af:panelTabbed


    //Binding of Panel Tabbed
    private RichPanelTabbed panelTabBind;

    public void setPanelTabBind(RichPanelTabbed panelTabBind) {
        this.panelTabBind = panelTabBind;
    }

    public RichPanelTabbed getPanelTabBind() {
        return panelTabBind;
    }

    /**
     * @Method to disclose (open) specific tab
     * Pass the binding of af:showDetailItem that you want to open
     */
    public void setDisclosedFirstTab(RichShowDetailItem tabBind) {
        RichPanelTabbed richPanelTabbed = getPanelTabBind();
        for (UIComponent child : richPanelTabbed.getChildren()) {
            RichShowDetailItem sdi = (RichShowDetailItem) child;
            if (sdi.getClientId().equals(tabBind.getClientId())) {
                sdi.setDisclosed(true);
            } else {
                sdi.setDisclosed(false);
            }
        }
        AdfFacesContext.getCurrentInstance().addPartialTarget(panelTabBind);
    }



• Now see the code written on button action- here i have checked that which tab is currently disclosed? and based on that i have passed next tab binding to this method





    /**Method to be called on Navigate Button
     * @param actionEvent
     */
    public void naviGateButtonAction(ActionEvent actionEvent) {
        if (firstTabBind.isDisclosed()) {
            setDisclosedFirstTab(secTabBind);
        } else if (secTabBind.isDisclosed()) {
            setDisclosedFirstTab(thirdTabBind);
        } else {
            setDisclosedFirstTab(firstTabBind);
        }
    }



• now run your page and see navigation in af:panelTabbed

 Cheers Happy Learning :) Sample ADF Application

Detect browser & platform information (name,version), server and client IP details in Oracle ADF

Hello All,
This is post is about getting browser details (version, name ) , platform details (Operating System details) ,server and client IP addresses in Oracle ADF Application
sometimes we need these small but important details -

Code to get this information-

        RequestContext requestCtx = RequestContext.getCurrentInstance();
        Agent agent = requestCtx.getAgent();
        String version = agent.getAgentVersion();
        String browser = agent.getAgentName();
        String platform = agent.getPlatformName();
        String platformVersion = agent.getPlatformVersion();
        FacesContext fctx = FacesContext.getCurrentInstance();
        HttpServletRequest request = (HttpServletRequest) fctx.getExternalContext().getRequest();
        StringBuilder detailMsg = new StringBuilder("<html><body><b>Browser Agent and Ip address details</b><br>");
        detailMsg.append("<ul><li><b>Browser-</b>" + browser + "</li><li><b>Version-</b>" + version +
                         "</li><li><b>Plateform-</b>" + platform + "</li>");
        detailMsg.append("<li><b>Plateform Version-</b>" + platformVersion + "</li><li><b>Server IP-</b>" +
                         request.getLocalAddr() + "</li><li><b>Client IP-</b>" + request.getRemoteAddr() +
                         "</li></ul>");
        detailMsg.append("</body></html>");
        FacesMessage errMsg = new FacesMessage(detailMsg.toString());
        errMsg.setSeverity(FacesMessage.SEVERITY_INFO);
        fctx.addMessage(null, errMsg);

See the output-
Application running on Mozilla-

Application running on Chrome-

Application running on Internet Explorer-

Cheers :) Happy Learning

Post by Oracle JDeveloper.

Creating and Exporting hierarchical data to excel using dvt:pivotTable & dvt:exportPivotTableData in Oracle ADF

Hello All,
This post is about exporting tree structured(hierarchical ) data to an excel file.
suppose we have export department wise detail of employees , we can achieve this in ADF using pivot table (<dvt:pivotTable>)

What is pivot tabel (oracle docs)- 
 
UIComponent class: oracle.adf.view.faces.bi.component.pivotTable.UIPivotTable
Component type: oracle.dss.adf.pivotTable.PivotTable
The Pivot Table supports the display of multiple nested attributes on a row and column header. In addition, the Pivot Table supports the ability to dynamically change the layout of the attributes displayed in the row or column headers via drag and drop pivoting.
now see the implementation part -

• Create a Fusion Web Application using HRSchema , for this sample app i have created a view (Department Wise Employees) to export data



CREATE OR REPLACE FORCE EDITIONABLE VIEW "APP_USR"."DEPT_EMP" ("DEPARTMENT_NAME", "EMPLOYEE_NAME", "SALARY") AS 
  SELECT A.DEPARTMENT_NAME, B.FIRST_NAME,B.SALARY FROM DEPARTMENTS A, EMPLOYEES B WHERE A.DEPARTMENT_ID=B.DEPARTMENT_ID (+);



• Prepare model using this view





• Create a page and drop this view as pivot table (ADF Faces component) from data control





• Now configure pivot table (set row & column attributes, insert appropriate drilling) - see the snaps











• Now run your page and see working pivot table - here pivot table is created successfully 





• Drop a button  and a <dvt:exportPivotTableData> under button to export pivot table



<af:commandButton text="Export" id="b1">
                    <dvt:exportPivotTableData type="excelHTML" exportedId="pt1" filename="Dep_Empl.xls"
                                              title="PivotTable export"/>
                </af:commandButton>



• Run your page and click on export button and see your tree structured data in exported excel file

Cheers :) Happy Learning Sample ADF Application

Export ViewObject dataset to XML, Generate customized XML file using ViewObject in Oracle ADF

Hello All,
this post is about exporting a viewObject data to a XML document.
Sometimes we need to generate XML document with the same data in ViewObject, for this ADF provides a facility to directly export data to a XML document using ViewObjectImpl class

See the steps to generate XML for a ViewObject

• Create a Fusion Web application and model using HR schema (Departments & Employees) table (master detail relation using viewLink)





• Now to generate XML, i have used writeXML method of ViewObjectImpl class, it produce XML using two parameters



from oracle docs-
writeXML(int depthCount, long options)
here depthCount - no. of ViewLink levels that should be traversed to produce XML
options- how many rows you want to export, It can be set any of flags given below
XMLInterface.XML_OPT_ALL_ROWS
Includes all rows in the view object's row set in the XML.

XMLInterface.XML_OPT_LIMIT_RANGE
Includes only the rows in the current range in the XML.


• created a method in DepartmentsVOImpl class to export data to XML, added it to client Interface



    /**Method to generate XML from ViewObject data
     * @param level
     * @return
     */
    public String writeVoToXml(int level) {
        FileOutputStream out;
        ByteArrayOutputStream opStream = new ByteArrayOutputStream();
        try {
            // Generating XML for All rows and adding it to Output Stream
            ((XMLNode) this.writeXML(level, XMLInterface.XML_OPT_ALL_ROWS)).print(opStream);
            System.out.println(opStream);
            // Creating a XML document in D Drive
            out = new FileOutputStream("D://Departments.xml");
            out.close();

        } catch (Exception e) {
            System.out.println(e.getMessage());
        }

        return opStream.toString();

    }






• Now run application module to execute method and see generated XML on console








• i have created a simple page with a af:codeEditor to show generated XML , button to generate XML and a spinner to pass depth level of viewLink accessor

In case depth level is '0' , it export data only for Departments viewObject



Change level to '1' , Now it generate XML for Departments --> Employess relation





• now to how to customize XML ? How to change default tags for attribute names and rows ?
• To change attribute label (tag in xml)- Suppose i have to change DepartmentName to Name in XML
• Add attribute level custom property named XML_ELEMENT to a value AnyOtherName to change the XML element name used for that attribute





• To change Row label (tag in xml)- Suppose i have to change DepartmentsVORow to DepartmentLine in XML
• Add ViewObject level custom property named XML_ROW_ELEMENT to a value AnyOtherName to change the XML element name used for that Row





• Now Run and see generated XML -

Cheers :-) Happy Learning

ADF Basics: Using CSS to change appearance of application (Skins and Styles in ADF Faces)

Hello All
This is a basic post about using CSS in ADF applications, how can you change appearance of ADF application using Skins (.css file)
See the steps to create and apply css in your ADF applications

• Create a Fusion Web Application and create a page
• Add Some ADF Faces component (input text,button,panel box, panel collection etc)
• Now to change appearance of default ADF Faces components , create an ADF Skin
•  Right click on ViewController--->New--->Web Tier--->JSF/Facelets--->ADF Skin 





• By default ADF Skin name is like skin1,2 etc




• After creating ADF Faces skin open it and, on left you will see all components as Button, Layouts, Output text and so on. this is ADF Skin Editor





• Now expand the components that you want to change , change it's color(on active, focus , hover etc) and other properties. See in image below





• After creating your ADF Skin ,open trinidad-config.xml file in Jdeveloper editor and your will see like this



<skin-family>skin1</skin-family>

This means that skin1 is applied on Application

• now if you another ADF Skin file- skin2 then in trinidad-config.xml, it will be changed to



<skin-family>skin2</skin-family>



• ADF automatically choose the most recent skin, so here this is done , now create and configure your ADF Skin and customize appearance of application
• For more details see Oracle Docs- http://docs.oracle.com/cd/E16764_01/web.1111/b31973/af_skin.htm

Cheers :-) Happy Learning

ADF Basics : Implementing auto suggest behavior in ADF Faces lov (list of values)

Auto Suggest behavior is best understand by Google Instant, as in google when we type something and it starts showing suggestion instantly.

 This effect can be implemented in ADF using autoSuggestBehaviour
To use the auto-suggest functionality in a declarative way you need to define a model-driven list of values on your model project, which will be the base for the suggestedItems list. Select the Department Name attribute from the Department VO and create a List of Values. here i am using HR schema and predefined table Department to implement this

• Create a Fusion Web Application
• Now create EO and VO of Department table.(Business Components)





• Now create List of values(LOVs)on DepartmentName





• Create page in ViewController and drag the DepartmentName on page as ADF Lov ChoiceList or Lov Input
  


• Now go to Component Palette and select Auto Suggest Behaviour and drop it inside DepartmentName Lov
  
  
  
  


• Now select af:autoSuggestBehavior from Page structure and go to PropertyInspector and Open Expression Builder at SuggestedItems and select from bindings #{bindings.DepartmentName.suggestedItems} if you are using different tables and Lov select according to that








• Now run your page and enjoy autosuggest behavior (ADF Instant) 

Cheers :-) Happy Learning

Read Next Post in Series- Implement contains/endswith behavior in model based autoSuggest Lov (Input list and combo box)