ADF Basics: How to invoke model layer methods from managed bean (Best Practice to write business logic in ADF)

Again a post about ADF Basics for those who are starting with ADF
This topic is posted multiple times and one of the most asked question on OTN

How to access AM method in bean ?
How to pass parameters to model from managed bean (viewController) ?
How to pass taskFlow parameter to model ?

Or sometimes I have to tell user that you should not access ApplicationModule or not update model from managed bean and then i post a link about this
I often post a link of Frank's blog
Best practice invoking business services methods from JSF beans
It is well explained but still user not able to do because he/she doesn't know about clientInterface, pageDef etc

So i thought to write a step by step implementation of this and if you want to know why it is best to call method through binding layer ?
Then please refer Frank's blog :)

What i am going to explain is How to call a method defined in ApplicationModule Impl class in managed bean ?
So for this first i need to define a method in ApplicationModule Impl class




Here i am using Departments table of HR Schema and i have created a method to create new row in Departments viewObject
See implementation part -

• To create AMImpl class--> Open ApplicationModule in editor--> Goto Java tab--> Click on edit (pencil) icon and check the checkbox to generate class
  
  
  
  
  
  


• Now write your logic and create method here so i have created a method to create department record and this method takes a parameter i;e DepartmentId



    /**
     *Custom Method to create row in departments viewObject
     */
    public void createDepartmentRecord(Integer deptId) {
        ViewObject deptVo = this.getDepartmentsVO1();
        Row newRow=deptVo.createRow();
        newRow.setAttribute("DepartmentId", deptId);
        deptVo.insertRow(newRow);
    }



• Next step is to add this method to client interface so that we can access this , Again open AM in editor -->Go to Java tab--> Click on edit icon of clientInterface--> Shuttle method to selected side





• Now to add this method in pageDef , Open page in editor--> Click on Bindings tab (bottom of editor)--> Click on green plus icon of bindings section--> Select methodAction and click on ok






Now select method name here and click ok





Now you can see this method is added in pageDef





• Now time to call this method in managed bean so for that added a button in page and created actionListener in bean . See the code 



    /**Method to get Binding Container of page
     * @return
     */
    public BindingContainer getBindings(){
        return BindingContext.getCurrent().getCurrentBindingsEntry();
    }

    /**Calling method defined in AMImpl class to create new Department
     * @param actionEvent
     */
    public void callAMMethodToCreateDepartmentAction(ActionEvent actionEvent) {
        //Get OperationBinding of method
        OperationBinding ob=getBindings().getOperationBinding("createDepartmentRecord");
        //Passing parameter to method -Get parameter map and use paramater name as key
        ob.getParamsMap().put("deptId", 9999);
        //Execute this method
        ob.execute();
        //Check for errors
        if(ob.getErrors().isEmpty()){
            // Successfully Executed
        }
    }



• Now run application and check , is it working ? ;)

On click a new row is inserted in table with DepartmentId 9999

All done :)
In same way you can call method defined in any model implementation class, remember don't access ApplicationModule or viewObject directly , make use binding layer

and again why it is best practice ?? to know this read Frank's blog :)

Cheers :) Happy Learning 

ADF Basics: Using contentStyle and inlineStyle property to change basic styling of component in ADF Faces

Hello All,
Again a post about ADF Basics for beginners
I have seen lots of thread on OTN about changing basic styles of component . for example,

How to change font size of inputText ?
How to change color of inputText/outputText ?
How to change color of link or button ?

and everyone starts creating a css/skin for these minor changes but there is no need of that
Skin should be used for complex styles or you have apply same style to all components of your application

If you will read API docs then you will know this, See what docs says about inlineStyle property-

The CSS styles to use for this component. This is intended for basic style changes; you should use the skinning mechanism if you require any complex style changes. The inlineStyle is a set of CSS styles that are applied to the root DOM element of the component. Be aware that because of browser CSS precedence rules, CSS rendered on a DOM element takes precedence over external stylesheets like the skin file. Therefore skins will not be able to override what you set on this attribute.

Difference between contentStyle and inlineStyle -

contentStyle property used to style content part of component like if you want to change color of inputText or any other input component then you have to specify this in contentStyle property of that component

inlineStyle is about whole component and also available in output (outputText) or collection (table, tree etc) component's property where contentStyle is not there. This can be use to set width, height ,border or color of output components etc.

So this is enough about theory , no one likes theory ;) , Everyone is looking for some code that is ready to use
Let's see some practical usage of both properties -

Change font, color, size(width), padding of input components (af:inputText, af:inputDate, af:selectOneChoice etc)-

Used this in contentStyle property of components
width:150px;color:white;font-weight:bold;font-size:small;background-color:red;padding:5px;
and check the output

you can also change input text to uppercase , lowercase, Initcap using contentStyle property, just use any of this -
text-transform:uppercase; // To change in uppercase
text-transform:lowercase; //To change in lowercase
text-transform:capitalize; //To change in initcap

Change properties of output components , color of link/button -

Output components doesn't have contentStyle property as there is not content part in component , here we make use of inlineStyle property
See what happens on applying same style in outputText and link using inlineStyle

It looks good :) , but same style doesn't work for button because button has multiple root element (we can only change width, color of text and font of button but background color and other styling can not be changed using inlineStyle property)
For more detail about button skinning check - Customize af:button (font, shape, size, color etc) using skinning -Oracle ADF (12.1.3)

Change data collection components (af:table, af:treeTable,etc) height, width -

just write in inlineStyle property like this
width:600px;height:200px;background-color:lightyellow;color:red;
background color will be applied on empty area of table and color will be applicable on column header and EmptyText
Remember to set table's height using inlineStyle ensure that autoHeightRows should be set to -1

In same way we can change color of columns too, see i have used different background colors (set background-color:colorName; in inlineStyle of af:column) for columns and it looks like this

Now it's your turn , try more combination on different components. you can do a lot using contentStyle and inlineStyle property. Remember all these changes can be done using skin also but if have some minor changes then why use skin , when framework provides these wonderful properties

Cheers :) Happy Learning

Insert and show whitespace in ADF Faces Components (panelBox, showDetailItem etc)

This post is about a small trick
How to show whitespace in ADF Faces component properly ?
Recently i found a question on OTN about this
 How can I and spaces in the text property of a showDetailItem?
so thought to document it here for future reference

There is one more post about showing whitespace , check it
Showing white-spaces properly in ADF table column- 11g & 12c

Sometimes we need to insert some whitespace in between of some text as panelBox name, tab name in showDetailItem etc
In this case space appears in page editor but it doesn't appear on page and you can not put spacer at these points because there is only one component



Suppose you have a panelBox and requirement is to show Oracle    ADF as it's header text . In this case providing space in propertyInspector doesn't work , HTML entity for space   also doesn't work because of no DOCTYPE declaration

See here i added normal spaces in property of panelBox

 But is doesn't work :(

Now what to do ?
After lots of hit and tries finally i found that it work with equivalent entity number for  
and this magic number is  -  
So tried this -

 <af:panelBox text="Oracle&#160;&#160;&#160;&#160;&#160;&#160;&#160;ADF" id="pb1">
                    <f:facet name="toolbar"/>
                </af:panelBox>

and output is

This is the small trick , sometimes you may need this :)
Cheers, Happy Learning :)