How to implement Custom Navigation bar when Unable to display the Images for the Features in the Navigation bar.

When I configure the image for the Feature in the adfmf-feature.xml file as below, the image will be displayed as very smaller than its original size when executed in the Emulator or in the mobile device.

CustomNavigationBar1So I did not use the default settings in the adfmf-feature.xml file. As I want to display the image with its actual size, I have to use the gotoFeature() method and use the images in the Footer facet in all the AMX pages.

<amx:facet name=”footer“>

<amx:commandLink inlineStyle=”float:left; margin:0px; padding:0px;” text=”” id=”glCustomer”

actionListener=”#{pageFlowScope.SearchHomeBean.goToCustomerFeature}”>

<amx:image id=”navCustomer” source=”/images/nbtn_a_customers.gif

inlineStyle=”float:left; height:50px; width:80px; margin:0px 0px 20px 0px;”/>

</amx:commandLink>

<amx:commandLink inlineStyle=”float:left; margin:0px; padding:0px;” text=”” id=”clServices”

actionListener=”#{pageFlowScope.SearchHomeBean.goToServiceFeature}”>

<amx:image id=”navServices” source=”/images/nbtn_a_services.gif

inlineStyle=”float:left; height:50px; width:80px; margin:0px 0px 20px 0px;”/>

</amx:commandLink>

<amx:commandLink inlineStyle=”float:left; margin:0px; padding:0px;” text=”” id=”clNews”

actionListener=”#{pageFlowScope.SearchHomeBean.goToNewsFeature}”>

<amx:image id=”navNews” source=”/images/nbtn_a_news.gif

inlineStyle=”float:left; height:50px; width:80px; margin:0px 0px 20px 0px;”/>

</amx:commandLink>

<amx:commandLink inlineStyle=”float:left; margin:0px; padding:0px;” text=”” id=”clSetting”

actionListener=”#{pageFlowScope.SearchHomeBean.goToSettingsFeature}”>

<amx:image id=”navSetting” source=”/images/nbtn_a_setting.gif

inlineStyle=”float:left; height:50px; width:80px; margin:0px 0px 20px 0px;”/>

</amx:commandLink>

</amx:facet>

Method Reference:

public void goToCustomerFeature(ActionEvent actionEvent){

try {

AdfmfContainerUtilities.gotoFeature(“mobile.searchassist.Customers“);

}catch(AdfException e) {

// handle the exception

e.printStackTrace();

}

}

Here ‘mobile.searchassist.Customers’ is the Feature ID from the adfmf-feature.xml file.

Now you will view the full image for each feature in the mobile application when executed in the Emulator or in the mobile device.

 

Advertisements
This entry was posted in ADF Mobile and tagged , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s