Please disable your adblock and script blockers to view this page

Search this blog

Wednesday 10 September 2014

Dynamic (parameterize) model level validation using message token -Oracle ADF

Hello all
This post falls under ADF Basics category (about a little trick in model layer) but about a common development requirement
How can we create dynamic ADF BC validation ? means it takes a parameter at run time and append it to validation message

Read previous post on model level validation-
Conditional Execution of Model (EO) level Validation- Oracle ADF
ViewObject Validation rules for transient attributes (Model level validation in ADF)

In this post I am using Departments table of oracle HR Schema



  • First step is same , prepare model (EO,VO and AM) using Departments table



  • Creating a business rule that DepartmentName can not be duplicate, for this created a alternate key in EntityObject 



  • Nnow creating unique key business rule for this alternate key and message that appears on validation failure (this is how we apply EO level validations)




  • Run AM and check in BC4J tester, create a new row and on entering duplicate DepartmentName this validation message appears -"Duplicate Department Name"


  • now my requirement is this message should be like - Duplicate Department Name <Administration> , so for this i have to pass parameter in message that shows entered DepartmentName on run-time. ADF provides built in feature to pass tokens in message and on run time it is replace with groovy expression value

  •  On running see desired output



  • to pass more than one parameter just add another token and set groovy for it, see the screens
 Output-


Thanks - Happy Learning :)

Sunday 7 September 2014

Show message (Invoke FacesMessage) using JavaScript in ADF Faces

Hello all
This post is about use of JavaScript in ADF Faces to show a simple message notification , it may be error/warning/information/critical error message
so this is simple, as we have to just invoke default FacesMessage using JavaScript

So for this i have used an af:inputText on page and use case is that this field should only take characters


How to validate characters (alphabet) only  using javascript ?





So for this i have taken a simple regular expression that check that entered value is alphabetic or not
see this JavaScript function that is added to page, here it1 is the id of inputText for that FacesMessage is invoked, i am using Jspx page so i use actual id of component, if you try this in region,dynamic region or inside pageTemplate then check and change the id of component .
It will be something like r1:0:it1 or pt1:0:it1, because that is nested page structure.
you can get this id using componentBinding.getClientId();


 <af:resource type="javascript">
              function validateStringOnKeyPress(event) {
                  //Regular Expression to validate String
                  var letters = /^[A-Za-z]+$/;
                  //Get value of input text
                  var charCode = event.getSource().getSubmittedValue();

                  if (charCode != '') {
                      if (charCode.match(letters)) {
                          // IF matches then no problem
                      }
                      else {
                          //Invoke FacesMessage
                          AdfPage.PAGE.addMessage('it1', new AdfFacesMessage(AdfFacesMessage.TYPE_ERROR, "Invalid Value", "Enter Characters Only"));
                          AdfPage.PAGE.showMessages('it1');
                          event.cancel();
                      }
                  }
              }
            </af:resource>


Added a clientListener to inputText that executes this JavaScript function on keyPress event





Run page and see how it works-
Here you see that 2 is not a character so it showing error message as FacesMessage is defined for TYPE_ERROR




So it's done but now problem is - when user input a wrong value a error message is displayed and after this validation alert if user keeps entering wrong values then every time a new FacesMessage is created and added to page, It appears on page like this (duplicate messages - really weird)


To remove additional messages , i have added one more line in JavaScript to clear previous validation message

JavaScript to clear validation message-


 // Clear all validation message 
              AdfPage.PAGE.clearAllMessages();

now JavaScript function is like this


function validateStringOnKeyPress(event) {
                  //Regular Expression to validate String
                  var letters = /^[A-Za-z]+$/;
                  //Get value of input text
                  var charCode = event.getSource().getSubmittedValue();
                  // Clear all validation message 
                  AdfPage.PAGE.clearAllMessages();
                  if (charCode != '') {
                      if (charCode.match(letters)) {
                          // IF matches then no problme
                      }
                      else {
                          //Invoke FacesMessage
                          AdfPage.PAGE.addMessage('it1', new AdfFacesMessage(AdfFacesMessage.TYPE_ERROR, "Invalid Value", "Enter Characters Only"));
                          AdfPage.PAGE.showMessages('it1');
                          event.cancel();
                      }
                  }
              }

and yes you can change type of message, use TYPE_ERROR, TYPE_INFO, TYPE_WARNING, TYPE_FATAL to change message type

see different output-
Warning Message (TYPE_WARNING)-

Informational Message (TYPE_INFO)-

Fatal Error Message (TYPE_FATAL)-


Thanks Happy Learning :)

Thursday 4 September 2014

Customize af:button (font, shape, size, color etc) using skinning -Oracle ADF (12.1.3)

Hello all
this post is about styling af:button component in ADF 12.1.3
how can we customize a button , change it's color, background color, shape ,size, font and many more
In 12.1.3 Jdeveloper, some features are supported like width of button directly from inline style property (this was not supported in 11g)

you can see new features for client side css- http://www.oracle.com/technetwork/developer-tools/jdev/documentation/1213nf-2222743.html

So let's start
I hope everyone know how to create css (skin) file in jdeveloper , if don't then follow this

Right click on viewController project New from Gallery Categories Web Tier JSF/Facelets ADF Skin



Dropped 3 buttons on page, third one is disabled



Changing button properties (width, font, color for different client event) -

I think no description needed as tags are self-descriptive

af|button {
    width: 150px;
    text-align: center;
    vertical-align: bottom;
    color: blue;
    border: skyblue 2.0px solid;
    font-style: italic;
    font-family: cursive;
}

Output-

Now change background color - to do this we have to use af|button::link  selector

af|button::link {
    border: skyblue 2.0px solid;
    background-color: #feffd5;
}

Output-

In same way we can change button behavior for hover, disabled and depressed client event

Hover event-

af|button:hover::link {
    background-color: #c7660b;
    border: skyblue 2.0px solid;
    color: White;
}

af|button:disabled::link {
      background-color: Gray;
    border: skyblue 2.0px solid;
    color: White;
}

Output- (hover on first button)


Depressed event- (Select )
 

af|button:depressed::link {
    background-color: maroon;
    border: skyblue 2.0px solid;
    color: White;
}


Changing shape of button-

1.Rounded corner (oval shape)
just change af|button and af|button::link selectors

af|button {
    width: 150px;
    text-align: center;
    vertical-align: bottom;
    color: blue;
    border: skyblue 2.0px solid;
    font-style: italic;
    font-family: cursive;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

af|button::link {
    border: skyblue 2.0px solid;
    background-color: #feffd5;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

Output-


2.Square Button-


af|button {
    text-align: center;
    vertical-align: middle;
    color: blue;
    border: skyblue 2.0px solid;
    font-style: italic;
    font-family: cursive;
    height: 50px;
    width: 50px;
}

af|button::text {
    padding-top: 12px;
}

af|button::link {
    border: skyblue 2.0px solid;
    background-color: #feffd5;
    height: 43px;
}

Output-
2.Round(Circle) Button-

changing shape is nothing just some hit and try in css, see the changes css other selectors remain same


af|button {
    text-align: center;
    vertical-align: middle;
    color: blue;
    border: skyblue 2.0px solid;
    font-style: italic;
    font-family: cursive;
    height: 50px;
    width: 50px;
    border-bottom-left-radius: 5em 5em;
    border-bottom-right-radius: 5em 5em;
    border-top-left-radius: 5em;
    border-top-right-radius: 5em;
}

af|button::text {
    padding-top: 12px;
}

af|button::link {
    border: skyblue 2.0px solid;
    background-color: #feffd5;
    height: 43px;
    border-bottom-left-radius: 5em 5em;
    border-bottom-right-radius: 5em 5em;
    border-top-left-radius: 5em;
    border-top-right-radius: 5em;
}


Output-


So purpose of this post is to give overview of skinning and different selectors, you can try it on any component. Jdeveloper provide built in skin editor for all component , there you can see all selector and pseudo element of a component
Thanks , Happy Learning

Thursday 28 August 2014

Create taskFlow and region binding at run-time , show n numbers of regions using multiTaskFlow- Oracle ADF

This is very specific development requirement to create taskFlow and region binding at run-time to show n numbers of region in page
In this case initially you don't know how much regions required in page as it depends on user activity .

you can see in http://irctc.co.in/ (Indian Railways) site
when user search for a train and check berth availability then a tab is generated at run-time with berth and fare details and it continues for each action , every time a new tab with new information is generated (n- number of tab and taskFlow)

A very good article is published in Oracle Magazine (July – August 2014) by Frank Nimphius on this requirement , article contains very good description of each and every step and a sample application with whole functionality
I found it very interesting and good so giving a quick overview of TaskFlow on Fly

this functionality is implemented using multiTaskFlow element that uses taskFlow binding from managed bean , taskFlow bindings in managed bean created using TaskFlowBindingAttributes
this class is used to set all properties of taskFlow binding at runtime



See Oracle docs (TaskFlowBindingAttributes)-
Set of attributes that define a TaskFlowBinding object. The taskFlowList attribute of the multiTaskFlow element of the page definition uses a list of object of this type to describe each taskflowBinding that the multiTaskflow binding contains. The order of this list defines the order of the region objects in the multiTaskflow binding. 

So in this post i am using Departments and Employees table of HR Schema(Oracle) to create business components for Model part


Create viewCriteria in both viewObjects (Departments and Employees) to filter data using DepartmentId




Applied viewCriteria to viewObject at AM level (Edit Vo instance and shuttle viewCriteria to selected side)
After this created methods in AMImpl class to set value in both viewCriteria's bind variables


    /**Method to filter Department ViewObject
     * @param deptId
     */
    public void filterDepartmentData(Integer deptId) {
        this.getDepartments1().setNamedWhereClauseParam("BindDeptId", deptId);
        this.getDepartments1().executeQuery();

    }

    /**Method to filter Employees Data
     * @param deptId
     */
    public void filterEmployeesData(Integer deptId) {
        this.getEmployees1().setNamedWhereClauseParam("BindDeptId", deptId);
        this.getEmployees1().executeQuery();

    }

Expose both methods to use in clientInterface

Now viewController part-

Created two bounded taskFlow with one input parameter for DepartmentId (this id will be used to filter Departments and Employess viewObject)
One for Departments and Second for Employees-

First taskFlow has a .jsff (facelets) page that has Departments viewObject as a form , just to show date with navigation buttons
filterDepartmentData method of AMImpl is used as Default Activity of this taskFlow
to filter data before entering in page
 
 
 

Second taskFlow has a .jsff (facelets) page that has Employees viewObject as a table
filterEmployeesData method of AMImpl is used as Default Activity of this taskFlow
to filter data before entering in page



Now basic configuration is complete, model is ready and bounded taskFlows are ready
then create a jsf page and manged bean (pageFlowScope) in adfc-config.xml, this page will make use of these two bounded taskFlows  and managed bean is responsible to generate taskFlow binding at runtime

Next Step is to prepare manged bean to hold taskFlowBinding-
Create a List of type TaskFlowBindingAttributes and it's accessors


import oracle.adf.controller.binding.TaskFlowBindingAttributes;    
private List<TaskFlowBindingAttributes> taskFlowBinding = new ArrayList<TaskFlowBindingAttributes>(5);

    public void setTaskFlowBinding(List<TaskFlowBindingAttributes> taskFlowBinding) {
        this.taskFlowBinding = taskFlowBinding;
    }

    public List<TaskFlowBindingAttributes> getTaskFlowBinding() {
        return taskFlowBinding;
    }

Create multiTaskFlow binding in executables of pgae-

  • Open jsf page, click on bindings tab of page editor
  • click on green plus icon of executables section
  • Select ADF TaskFlow Bindings in category and select multiTaskFlow


  • click on ok and provide an unique value for id attribute and reference of List created in managed bean as value for taskFlowList attribute


  • Configuration of  multiTaskFlow for this page is complete and now time to design page to render multiple regions. For this purpose add af:ForEach and a region inside it, forEach is responsible to add regions at run-time. here a little change i am using panelTabbed  to create tab at runtime and inside tab there will be region 
  • See this xml code- here nothing simple panelTabbed and forEach iterates over to list to identify number of items and varStatus of forEach is used to create id of showDetailItem at runtime as id must be unique. regionModel is referenced from var attributes of forEach as part of taskFlowBinding 

  •  <af:panelTabbed position="above" id="pt1" partialTriggers="b1">
                <af:forEach items="#{bindings.mtf1.taskFlowBindingList}" var="multiTF" varStatus="vs">
                   <af:showDetailItem id="Tab#{vs.index+1}" text="#{multiTF.name}" partialTriggers="b1">
                      <af:region value="#{multiTF.regionModel}" id="r1#{vs.index}" partialTriggers="::b1"/>
                   </af:showDetailItem>
                </af:forEach>
             </af:panelTabbed>
    

  • Now page is ready to show unknown (n) number of regions, here i am using two list and a button on page First List is of all departments and second one is static list to select information type (if user want to see Only Departments or Departments Wise Employees) and button to execute and add taskFlow from managed bean as per selected Department and 
  • Again a map is created in managed bean to store input parameters for taskFlow and it will used while setting and creating taskFlowBinding

  •     HashMap<String, Object> tfParam = new HashMap<String, Object>();
        public void setTfParam(HashMap<String, Object> tfParam) {
            this.tfParam = tfParam;
        }
    
        public HashMap<String, Object> getTfParam() {
            return tfParam;
        }
    

  • finally we will create taskFlow binding and set properties on button click (actionEvent of button), See this code-

  •     /**Method to create and set properties in TaskFlowBinding
         * @param actionEvent
         */
        public void displayDepartmentAction(ActionEvent actionEvent) {
            //Clear List to show newly created regions only
            taskFlowBinding.clear();
            System.out.println("List Cleared -Size>" + taskFlowBinding.size());
            //Check that user selects value in both List (Uses component binding to check)
            if (deptIdBindVal.getValue() != null && showTypeBind.getValue() != null) {
                //Put value in TaskFLow Parameter map, deptIdBindVal is binding of list of departments on page
                tfParam.put("DeptIdParam", deptIdBindVal.getValue());
    
                //Only Shows Departments taskFlow, if user selectes "Only Departments"
                if ("Only Departments".equalsIgnoreCase(showTypeBind.getValue().toString())) {
                    //Setting taskFlow properties
                    TaskFlowBindingAttributes tfAttr = new TaskFlowBindingAttributes();
                    //Creating Unique Id
                    tfAttr.setId("Department_" + deptIdBindVal.getValue());
                    //See bounded taskFlow name in WEB-INF and use here
                    tfAttr.setTaskFlowId(new TaskFlowId("/WEB-INF/DepartmentsBTF.xml", "DepartmentsBTF"));
                    //This EL refers parameter map created in this managedBean
                    tfAttr.setParametersMap("#{pageFlowScope.MultiTaskFlowBean.tfParam}");
                    //Finally add taskFlow to List
                    taskFlowBinding.add(tfAttr);
                } else { // Show both Departments and Employees
                    //Creating Departments TaskFlow binding
                    TaskFlowBindingAttributes tfAttr = new TaskFlowBindingAttributes();
                    tfAttr.setId("Department_" + deptIdBindVal.getValue());
                    tfAttr.setTaskFlowId(new TaskFlowId("/WEB-INF/DepartmentsBTF.xml", "DepartmentsBTF"));
                    tfAttr.setParametersMap("#{pageFlowScope.MultiTaskFlowBean.tfParam}");
                    taskFlowBinding.add(tfAttr);
                    //Creating Employee TaskFlow biniding
                    tfAttr = new TaskFlowBindingAttributes();
                    tfAttr.setId("Employees_" + deptIdBindVal.getValue());
                    tfAttr.setTaskFlowId(new TaskFlowId("/WEB-INF/EmployeesBTF.xml", "EmployeesBTF"));
                    tfAttr.setParametersMap("#{pageFlowScope.MultiTaskFlowBean.tfParam}");
                    taskFlowBinding.add(tfAttr);
                }
            }
        }
    

  • So Application with multiTaskFlow is ready , in this post i have used these two bounded taskFlow to show in two tabs at run-time, in same way you can call multiple TFs or a single taskFlow multiple time. Now runt application and see how it works

Initial page with two lists


Select Department and show type -click on button


Select Department and show type -click on button


  • Refer this post Region Extreme: Multi-Task-Flow Binding to learn more about multiTaskFlow binding. In this Frank also told about how to use dynamic viewObject instance to show different data at run-time, because if we use same instance of viewObject in multiple taskFlow at same time then it will not maintain state for each region to it is necessary to use dynamic instance and it's binding in pageDef
  • Read more about regions and taskFlows- Using Task Flows as Regions
Thanks - Happy Learning :) Sample ADF Application

Monday 25 August 2014

Using HashMap in EL expression to set component properties in Oracle ADF

Basic requirement while using EL on pages in ADF, we use bean variables, binding attributes, iterators in expression to check conditions , to set properties for components as Enable-Disable, Visible, inline style etc.
in the same way we can use collections (Array, HashMap) in expression, i know it is pretty simple but have seen many thread in OTN asking how to use HashMap in expression

So here i am taking a very simple example



I have 5 input text on page and i have to enable-disable some fields based on it's id value, there is two buttons on page


as you can see on click of first button , input field 1,3 and 5 should be disabled and on click of second button af:inputText 2 and 4 should be disabled
so for this purpose i have used a HashMap in managed bean


    private HashMap fieldVal = new HashMap();

    public void setFieldVal(HashMap fieldVal) {
        this.fieldVal = fieldVal;
    }

    public HashMap getFieldVal() {
        return fieldVal;
    }

values in HashMap are populated using id value of inputTexts on page as key, this id will be passed as parameter in HashMap in expression
see how expression used in disabled property of inputText-


in same way expression for all inputText is set


<af:panelFormLayout id="pfl1" partialTriggers="b1 b2">
                    <af:inputText label="Label 1" id="it1" disabled="#{EnableDisableBean.fieldVal['it1']}"/>
                    <af:inputText label="Label 2" id="it2"
                                  disabled="#{requestScope.EnableDisableBean.fieldVal['it2']}"/>
                    <af:inputText label="Label 3" id="it3"
                                  disabled="#{requestScope.EnableDisableBean.fieldVal['it3']}"/>
                    <af:inputText label="Label 4" id="it4"
                                  disabled="#{requestScope.EnableDisableBean.fieldVal['it4']}"/>
                    <af:inputText label="Label 5" id="it5" autoSubmit="true"
                                  disabled="#{requestScope.EnableDisableBean.fieldVal['it5']}"/>
                </af:panelFormLayout>

now see code on buttons, simply setting values against key


    /**Method to disable inputText (1,3,5) on basis of id value
     * @param actionEvent
     */
    public void disable135Action(ActionEvent actionEvent) {
        fieldVal.put("it1", true);
        fieldVal.put("it2", false);
        fieldVal.put("it3", true);
        fieldVal.put("it4", false);
        fieldVal.put("it5", true);

    }

    /**Method to disable inputText (2,4) on basis of id value
     * @param actionEvent
     */
    public void disable24Action(ActionEvent actionEvent) {
        fieldVal.put("it1", false);
        fieldVal.put("it2", true);
        fieldVal.put("it3", false);
        fieldVal.put("it4", true);
        fieldVal.put("it5", false);
    }

Run Application and see what is on page
On Click of First Button

On Click of Second Button

Thanks
Happy learning :)