About Mobile-Specific Renderers Dependent on jQuery Mobile APIs

This topic describes on how to change existing customizations based on Siebel Open UI Mobile Renderers. It contains the following information:

• "Restructuring Mobile Classes"

• "Parsing for jQuery Mobile Usage"

• "Modifying Third-party Dependencies"

Restructuring Mobile Classes

Beginning in Siebel Innovation Pack 2014, jQuery Mobile library has been replaced by jQuery library. Since jQuery Mobile library is considered a lighter version of jQuery library, most calls that are supported by the jQuery Mobile library will continue to work on the jQuery library.

This content in this topic is complimentary to the content in "About Mobile-Specific Renderers Independent of jQuery Mobile APIs". In Siebel Innovation Pack 2014 and later, mobile-specific renderers extended from mobile classes are obsolete. Existing renderer customizations that are based on the jQuery Mobile classes will need to be restructured.

Before addressing the tasks in "Parsing for jQuery Mobile Usage" and "Modifying Third-party Dependencies", it is recommended that you complete the following tasks:

1. Examine the new hierarchies to understand the classes that have been deprecated in Siebel Innovation Pack 2014 and later.

   For more information about deprecated classes, see "About Restructuring Mobile Classes".

2. Go through your customizations to verify if classes from which you are extending are deprecated, and identify areas where your customization requires modifications.

3. Consult the translation tables to identify the new hierarchies.

   For more about class equivalencies, see "About Class Equivalency".

4. Modify your customizations based on your observations in Step 1 through Step 3.

Parsing for jQuery Mobile Usage

This topic describes various patterns of jQuery Mobile-specific use that might appear in your customized renderers. The descriptions in this topic are neither definitive nor exhaustive, and therefore a careful examination of your existing customizations coupled with comparisons with jQuery Mobile documentation is recommended.

For jQuery Mobile documentation, refer to the following site:

http://api.jquerymobile.com/

jQuery Mobile is a UI and theme library that works on top of jQuery. Therefore, everything customized through the former renderers, can likely be restructured to work using jQuery.

The following is a list of common areas in which you might observe problems as you parse through your customizations:

• "API Usage"

• "Properties"

• "Widgets"

• "Events"

• "HTML Markup"

Identification of the types of occurrences in your custom code and replacing them with code that works based on the jQuery and jQuery-UI libraries is essential for the transition of the customization to Siebel Innovation Pack 2014.

API Usage

jQuery Mobile exposes the $.mobile object which contains several APIs that have mobile specific functions. The base jQuery library does not contain this object, so any APIs that you may have used with this object are no longer available. Consequently, the code must be substituted with a jQuery equivalent. The following are examples of APIs to consider:

• buttonMarkup()

• jqmData()

• silentScroll()

Properties

jQuery Mobile exposes a single property on the $.mobile object called activePage, which is no longer available.

Widgets

jQuery Mobile extends the jQuery-UI widget set to provide $.mobile.widget objected, which provides mobile-specific widgets for usage in jQuery mobile environments. The following are examples of widgets to consider:

• Controlgroup

• Listview

• Loader

• Slider

Events

jQuery Mobile builds on native events to provide mobile-oriented events with which to bind. All such bindings will no longer run in Siebel Innovation Pack 2014. The following are examples of events to consider:

• mobileinit

• orientationchange

• scrollstart

• swipe

• tap

• v* (virtual keyboard events)

In Siebel Innovation Pack 2014 and later, the EventHelper object homogenizes events between devices and platforms. All bindings happen using the EventHelper APIs and the bindings are done on events that are homogenized. For more information about the EventHelper objects, see Chapter 3, "Architecture of Siebel Open UI."

HTML Markup

jQuery Mobile UI identifies certain HTML patterns, such as data attributes, and uses them to render the UI in specific ways. If your customized code contains the creation of HTML markup, you will need to parse for these types of occurrences and modify them as needed. The automatic styling and theme application that the markup generates will no longer occur. The following are examples of HTML markup to consider:

• data-role

• data-theme

• data-title

• data-icon

• data-inline

Modifying Third-party Dependencies

This topic considers the use of 3rd-party jQuery Mobile specific plug-ins in customized renderers. In mobile-specific customizations prior to Siebel Innovation Pack 2013, external plug-ins may have been used that work on top of the jQuery Mobile library.

All deprecated 3rd-party plug-ins must be identified and replaced with equivalent plug-ins in jQuery and jQuery-UI. jQuery-UI includes many widgets for both touch and non-touch devices, and is capable of satisfying most requirements to replace your 3rd-party plug-ins. In cases, where you cannot find equivalents, other 3rd-party plug-ins based on jQuery may need to be sourced for providing the expected functionality.

The most likely candidates of plug-ins related to jQuery Mobile are listed below:

• Scrolling / Swiping

• Device Detection

• Menus and Navigation

• Calendar / Date / Time pickers

• Maps and Images

This list is not exhaustive and your customization may be using other external or self-written plug-ins that are based on the jQuery Mobile library.