Currently Being Moderated
Midhun VP

HWC Customization: Buttons with icon

Posted by Midhun VP in SAP for Mobile on Oct 23, 2013 8:18:50 PM

I was looking for quick and easy ways to make the HWC ( Hybrid web container ) app beautiful. Finally I got some tricks to add icons to the jQuery buttons that we are using in the HWC application.

The JQuery Mobile framework includes a selected set of icons most often needed for mobile apps. jQuery Mobile includes a single white icon sprite, and automatically adds a semi-transparent black circle to ensure that it has good contrast on any background color.

jquery-mobile-icon-only-buttons.pngjqm-buttons-controlgroup.png

An icon can be added to a button by adding a data-icon attribute on the anchor specifying the icon to display. For example, the following markup:

 

<a href="index.html" data-role="button" data-icon="refresh">My button</a>

 

Creates this button with an icon:

ScreenHunter_125 Oct. 23 23.10.jpg

 

In our case we are going to change the button icons dynamically while the app loads. Open the file workflow_jQueryMobileLookAndFeel.html

You can find below codes inside these file that represents menu buttons in an IOS.

 

//  Back button

<a href="javascript:void(0)"  id="Time_Sheet_Day_DetailsScreenDivBack" name="Back" onclick="menuItemCallbackTime_Sheet_Day_DetailsScreenDivBack();"> Back</a>

 

 

//  Refresh button

<a href="javascript:void(0)"  id="Purchase_RequisitionsScreenDivRefresh" name="Refresh" onclick="menuItemCallbackPurchase_RequisitionsScreenDivRefresh();"> Refresh</a>


 

To make these menu buttons with icons on it, below lines of code need to be added inside the function customBeforeNavigateForward

 

function customBeforeNavigateForward(screenKey, destScreenKey) {

 

          $("#Time_Sheet_Day_DetailsScreenDivBack").attr('data-icon','back');

          $("#Purchase_RequisitionsScreenDivRefresh").attr('data-icon','refresh');

 

return true;

 

}

 

The result given in my Ipad is given below:

 

photo (12).PNG

 

photo (13).PNG

 

Feel free to share your feedback in the Comments section.

 

Related Links:

HWC App with Custom List View

Custom Attachment Icon in HWC App

HWC mobile app development for dummies - Part 1

 

Regards,

Midhun VP; LinkedIn, Twitter


Comments

Actions

Filter Blog

By author:
By date:
By tag: