Wednesday Jan 23, 2013

How-to programmatically display a popup message

For an ADF mobile sample I needed to display a confirmation message upon successful upload of an image. Because I could not see how to do this from Java using the ADF Mobile popup dialog, I used JavaScript. The JavaScript function I called is part of PhoneGap, which is neat because this ensures I don't have to maintain custom JavaSCript code in my AMX page.  To call the PhoneGap notification dialog, I  added

20-October 2013: important. Since I've written this sample, the libraries have been changed from PhoneGap to Cordova. Make sure the script below is changed to the Cordova JS (!!!)

Script sample

to the AMX page. I added this script tag to the body section of  the amx:panelPage component tag. Note that the relative addressing /../.../.../ in the JS reference is for AMX pages that are in the public_html folder. If your page is in a sub folder, you will need to add an extra "/.." for each folder

In my Java bean, which I called from a method binding, I used the ADF Mobile AdfmfContainerUtilities.invokeContainerJavaScriptFunction(...) call to invoke the PhoneGap "navigator.notification.alert" function

navigator.notification.alert(message, alertCallback, [title], [buttonName])

See: http://docs.phonegap.com/en/1.0.0/phonegap_notification_notification.md.html

The Java call is shown below:

 AdfmfContainerUtilities.invokeContainerJavaScriptFunction(
           "adf.sample.mobile.PhotoUpload",
            "navigator.notification.alert",
            new Object[] {"Image uploaded: \n " +
            "File Name: "+fileName+"\n File Type: "+fileType,"",
            "Image Uploaded to Server", "Ok"});

Note the use of the object array to pass multiple arguments to the JavaScript function. The "adf.sample.mobile.PhotoUpload" string is the ADF Mobile feature Id of the feature that contains the AMX page with the JavaScript reference.

The result is shown in the image below:

PhoneGap dialog displayed in ADF Mobile

Using the same technique you can call any other PhoneGap JavaScript function from ADF Mobile (and your custom JavaScripts as well)
See also:

http://docs.oracle.com/cd/E35521_01/doc.111230/e24475/phgapfeatures.htm#BABJGDIG
http://docs.phonegap.com/en/1.0.0/index.html


Friday Jan 04, 2013

JavaScript function to intercept or listen for tab remove event

The af:panelTabbed component allows you to remove tabs from display using the tabRemoval property

tabRemoval Valid Values: none, all, allExceptLast

determines if tab removal is enabled.

This attribute supports these tabRemoval types:

  • none - tab removal is not enabled.
  • all - tab removal is enabled on all tabs, regardless if they are disclosed. The last tab in the panelTabbed can be removed.
  • allExceptLast - tab removal is enabled on all tabs, regardless if they are disclosed. The last tab in the panelTabbed cannot be removed.

 src: http://docs.oracle.com/cd/E35521_01/apirefs.111230/e17491/tagdoc/af_panelTabbed.html

Because tab removal is not automatic in ADF Faces, developers configure an item listener on the af:showDetailItem component that make the tabs within a panel tab

 

itemListener javax.el.MethodExpression Only EL a method reference to an item listener

src: http://docs.oracle.com/cd/E35521_01/apirefs.111230/e17491/tagdoc/af_showDetailItem.html

"Choosing to remove a tab will cause an ItemEvent of type 'remove' to be launched. This event can be listened for on a showDetailItem using the itemListener attribute. It is up to the developer to handle this event and code the actual removal of the tab. This is because of the dynamic nature of the panelTabbed component, which may have dynamic children. This also allows a finer level of control by the developer, who can then choose a custom implementation that may (for example) include warning dialogs, and control of which tab gains focus after a tab is removed."

src: http://docs.oracle.com/cd/E35521_01/apirefs.111230/e17491/tagdoc/af_panelTabbed.html

This apparently works with logic written in Java saved on the server. A question on OTN was how to handle or intercept this remove event on the client side using JavaScript. This information - unfortunately - is a bit hidden in our documentation and you have to look into the JavaScript documentation for this.

src: http://docs.oracle.com/cd/E35521_01/apirefs.111230/e17489/oracle/adf/view/js/event/AdfItemEvent.html

If there is an AdfItemEvent that fires on the ADF Faces client side, then there also must be a configuration available on the af:clientListener to listen for such an event. And there is (just not obvious)

 <af:panelTabbed id="pt1" tabRemoval="all">  
    <af:showDetailItem text="TAB 1" id="sdi1" stretchChildren="first" clientComponent="false">
         ...
         <af:clientListener method="alertTabClose" type="item"/>
     </af:showDetailItem>
</af:panelTabbed
 

The JavaScript function to this looks similar to

function alertTabClose (closureEvent){
     var tab = closureEvent.getSource();  
     ...

This allows you to handle (and suppress) the tab remove event on the client using JavaScript in ADF Faces

About

The Oracle JDeveloper forum ranks in the Top 5 of the most active forums on the Oracle Technology Network (OTN).



The OTN Harvest blog is a summary of selected topics posted on the OTN Oracle JDeveloper forum.



It is an effort to turn knowledge exchange into an interesting read for developers who enjoy little nuggets of wisdom





Frank Nimphius

Search

Archives
« January 2013 »
SunMonTueWedThuFriSat
  
1
2
3
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
24
25
26
27
28
29
30
31
  
       
Today