Over a million developers have joined DZone.

Navigating Between Pages in ADF Mobile with Swipe Gestures

· Java Zone

Check out this 8-step guide to see how you can increase your productivity by skipping slow application redeploys and by implementing application profiling, as you code! Brought to you in partnership with ZeroTurnaround.

Mobile users are getting used to specific touch gestures, such as swipe, in their applications. And sometimes you might want to incorporate those gestures as a means for navigating between pages in your ADF Mobile application.

You can do this by using the amx:actionListener component and having it bind to a method in your backing bean.

The basic ingredients:

In an AMX page, add an actionListner to a component. For example:

<amx:listItem id="li1">
            <amx:outputText value="#{row.name}" id="ot3"/>
            <amx:actionListener id="al1" type="swipeLeft" binding="#{viewScope.ma.navigateMethod}"/>
          </amx:listItem>

The binding edit function in the property inspector can help you create the above managed bean (ma).

In the managed bean, you can code this:

 public void navigateMethod(ActionEvent actionEvent) {
        AdfmfContainerUtilities.invokeContainerJavaScriptFunction(AdfmfJavaUtilities.getFeatureName(), "adf.mf.api.amx.doNavigation", new Object[] { "go" });
    } 

In your taskflow for the feature, have a navigation rule like this:

<control-flow-case id="__3">
        <from-outcome>go</from-outcome>
        <to-activity-id>camera</to-activity-id>
      </control-flow-case>

Now, with a swipe to the right on the list item, you'll navigate to the camera page.

The Java Zone is brought to you in partnership with ZeroTurnaround. Check out this 8-step guide to see how you can increase your productivity by skipping slow application redeploys and by implementing application profiling, as you code!

Topics:

Published at DZone with permission of Shay Shmeltzer, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}