Mitkees & Webcenter

Into the charm of Oracle Webcenter and ADF

Category Archives: ADF

Hide Bind Variables to appear in Af:query


We all faced this problem  where we have a view object with bind variables that appears automatically in the query for this view object.

here is a small till how to hide it.

  1. open your view object
  2. double click on your bind variable under the query tab it will open a new popup
  3. On the control hints > display Hint >hideCapture
Advertisements

Call a bean method after ajax call


Many requirements asks to call external service using ajax or do some javascript like using js calendars and on user click send the response to the bean to save it in database or to do some business validation.

The way to do that is using serverListener & clientListener .

The serverListener tag is a declarative way to register a server-side listener that should be executed when a custom client event is fired.

while The clientListener tag is a declarative way to register a client-side listener script to be executed when a specific event type is fired.

I have created a small demo application that calls ajax call & jquery to get location & ip and then we will send it to back bean which will be printed in the console.

Lets see the steps

1.create a jspx page and add a button like this

 <af:panelGroupLayout id="pgl1" layout="vertical">
<af:commandButton text="Get My Location" id="cb1">
<af:clientListener type="action" method="callAjaxAndNotifyServer"/>
<af:serverListener type="servListener"
method="#{backingBeanScope.DemoBB.getAjaxCallbackValue}"/>
</af:commandButton>
</af:panelGroupLayout>

2. add af:resource with the code below

 var actionbtn;
 var response_Json
 function callAjaxAndNotifyServer(actionEvent) {
 actionEvent.cancel();
 actionbtn = actionEvent.getSource();//
 alert(actionbtn);
 $.ajax( {
 url : "http://ip-api.com/json/", data : '', type : "GET", error : function (XMLHttpRequest, textStatus, errorThrown) {

 alert('error');
 ajaxError(XMLHttpRequest, textStatus, errorThrown);
 },
 success : function (data) {

 response_Json = JSON.stringify(data);

 console.log(response_Json);
 AdfCustomEvent.queue(actionEvent.getSource(), "servListener",
 {
 fvalue : response_Json
 },true);
 return false;
 },
 error : function (xhr, status, err) {

 console.log('error');
 var err = eval("(" + xhr.responseText + ")");
 alert('' + err.Message);
 console.log('Error in Ajax
 call:' + err.Message);
 }
 });
 }

where
actionEvent.cancel(); is needed if you are using commandbutton without partialsubmit=”true”
and
AdfCustomEvent.queue(actionEvent.getSource(), “servListener”,
{
fvalue : response_Json
},true);
return false;
registers the custom event and set parameter “fvalue” with the json string value

3.create a bean for example backbean demoBB with method name getAjaxCallbackValue 

that you already referenced in your serverListner in step 1 & add the code to this method as follows to print the value

public void getAjaxCallbackValue(ClientEvent clientEvent) {
System.out.println("-----------------------------------------");
System.out.println(clientEvent.getParameters().get("fvalue"));
System.out.println("-----------------------------------------");
}

 

 


			

Webcenter portal & ADF Responsive


After implementing ADF & portal responsive I have concluded many hints to follow while implementing
The main problem of the responsive it that adf components render as table
1- Limit the use of the components that render tables in the html dom and use html code if needed in verbatim tag
2- Limit the use of layout component that has tables or horizontal layout as it render in tables
Hints
• Preferably use bootstrap templates.
• Create templates with panelgrouplayout vertical & default and create a custom style class to make it to horizontal example ;

.VTOH{
width:100%;
float:left;
margin:0;
padding:0;
} 

• In portal use panel customizable under each other don’t implement it horizontal preferably add it in panelgrouplautout and use the above class & css to draw your page.
• Do the responsive in one CSS file and import it in your template and use media queries inside it.
• All width should in percentage. You may use with for small components on the page but that would be difficult in responsive.
• If you are obliged or have to use component that have fixed width use java script to change the width in responsive.

Resetting form in ADF popup / Reset Any component


While developing a Form on ADF pop-up I have learned that the pop-up is fetched once on page load. On canceling the pop-up & open it again it still persists its data which is not what we all need.
I have tried many ways to reset the form as setting contentDelivery=”lazyUncashed” , resetting all the fields programmatically , delete dirty data & clear VO cache associated with the form. Until i found the magic line which resets the component as it wasn’t fetched before
UIComponent myPopupComponent = actionEvent.getComponent();
oracle.adf.view.rich.util.ResetUtils.reset(myPopupComponent);

Getting selected time in ADF calendar


It took me about 6 hrs to know how ADF calendar component set the time in the popup form the project posted here.

But it didn’t satisfy the implementation needs as it passes the time automatically through the calendarModel behind the scene,after some investigations , i found that there are some events associated with the calendar that can helps.

I used the Calendar event  listener property and created a method that takes CalendarEvent as a parameter and used the CalendarEvent object to get the triggered time as below.

 

 

    public void calEvent(CalendarEvent ce){
       System.out.println(ce.getTriggerDate().clone());
        
    }

    <af:calendar value="#{bindings.CalendarView1.calendarModel}" id="c1" availableViews="all"
                         view="month" startDayOfWeek="mon" startHour="9"
                         listCount="356"
                         calendarActivityListener="#{Business.activityListener}"
               calendarListener="#{Business.calEvent}"/>

%d bloggers like this: