Using the BlackBerry Custom Look and Feel

You can use a custom look and feel for BlackBerry instead of the default jQuery Mobile look and feel.

If you do not want to use the jQuery Mobile-based look and feel for your Hybrid App running on BlackBerry, an alternative look and feel offers compability with the look and feel that was provided for BlackBerry 5.0 (no longer supported) in earlier releases of SAP Mobile Platform.
  1. Generate your Hybrid App.
  2. Open Generated Hybrid App\hybridapp-name\manifest.xml for editing.
  3. Under BlackBerry/HTMLWorkflow, change the jQM look and feel XML file to the custom look and feel file.

    For example, for an application named onlinequery:

    • Original – <File>onlinequery_jQM.xml</File>
    • Custom – <File>onlinequery_Custom.xml</File>
  4. Under BlackBerry/HTMLWorkflow/HtmlFiles, replace the jQM-related files with custom files, adding any custom files of your own.
    Example: this fragment shows a minimal subset of custom files:
    <HtmlFiles>
  <HtmlFile>html/css/bb/checkbox.css</HtmlFile>
  <HtmlFile>html/css/bb/datepicker.css</HtmlFile>
  <HtmlFile>html/css/bb/editBox.css</HtmlFile>
  <HtmlFile>html/css/bb/img/btn_check_off.png</HtmlFile>
  <HtmlFile>html/css/bb/img/btn_check_on.png</HtmlFile>
  <HtmlFile>html/css/bb/img/btn_radio_off.png</HtmlFile>
  <HtmlFile>html/css/bb/img/btn_radio_on.png</HtmlFile>
  <HtmlFile>html/css/bb/img/buttonbackground.png</HtmlFile>
  <HtmlFile>html/css/bb/img/datepickerbackground.png</HtmlFile>
  <HtmlFile>html/css/bb/img/dateTextbackground.png</HtmlFile>
  <HtmlFile>html/css/bb/img/datetimepickerbackground.png</HtmlFile>
  <HtmlFile>html/css/bb/img/downButton.png</HtmlFile>
  <HtmlFile>html/css/bb/img/ic_dialog_menu_generic.png</HtmlFile>
  <HtmlFile>html/css/bb/img/ic_menu_attachment.png</HtmlFile>
  <HtmlFile>html/css/bb/img/inputBackground.png</HtmlFile>
  <HtmlFile>html/css/bb/img/select_background.png</HtmlFile>
  <HtmlFile>html/css/bb/img/select_dropdown.png</HtmlFile>
  <HtmlFile>html/css/bb/img/select_title_bg.png</HtmlFile>
  <HtmlFile>html/css/bb/img/tinyDownArrow.png</HtmlFile>
  <HtmlFile>html/css/bb/img/tinyUpArrow.png</HtmlFile>
  <HtmlFile>html/css/bb/img/upButton.png</HtmlFile>
  <HtmlFile>html/css/bb/img/verticalBarbg.png</HtmlFile>
  <HtmlFile>html/css/bb/listview.css</HtmlFile>
  <HtmlFile>html/css/bb/master.css</HtmlFile>
  <HtmlFile>html/css/bb/radiobutton.css</HtmlFile>
  <HtmlFile>html/css/bb/Stylesheet.css</HtmlFile>
  <HtmlFile>html/css/bb/valuepicker.css</HtmlFile>
  <HtmlFile>html/css/Stylesheet.css</HtmlFile>
  <HtmlFile>html/js/API.js</HtmlFile>
  <HtmlFile>html/js/Callbacks.js</HtmlFile>
  <HtmlFile>html/js/Camera.js</HtmlFile>
  <HtmlFile>html/js/Certificate.js</HtmlFile>
  <HtmlFile>html/js/Custom.js</HtmlFile>
  <HtmlFile>html/js/ExternalResource.js</HtmlFile>
  <HtmlFile>html/js/json2.js</HtmlFile>
  <HtmlFile>html/js/Resources.js</HtmlFile>
  <HtmlFile>html/js/SUPStorage.js</HtmlFile>
  <HtmlFile>html/js/Timezone.js</HtmlFile>
  <HtmlFile>html/js/Utils.js</HtmlFile>
  <HtmlFile>html/js/widgets/sy.ui.android.checkbox.js</HtmlFile>
  <HtmlFile>html/js/widgets/sy.ui.android.combobox.js</HtmlFile>
  <HtmlFile>html/js/widgets/sy.ui.android.listview.js</HtmlFile>
  <HtmlFile>html/js/widgets/sy.ui.android.radiobutton.js</HtmlFile>
  <HtmlFile>html/js/widgets/sy.ui.bb.picker.js</HtmlFile>
  <HtmlFile>html/js/widgets/sy.ui.bb.textbox.js</HtmlFile>
  <HtmlFile>html/js/widgets/sy.ui.js</HtmlFile>
  <HtmlFile>html/js/HybridApp.js</HtmlFile>
  <HtmlFile>html/js/WorkflowMessage.js</HtmlFile>
  <HtmlFile>html/hybridapp_Custom.html</HtmlFile>
</HtmlFiles>
  5. Rebuild the package zip file to include the modified manifest.xml.
  6. Deploy the package in SAP Control Center.
Parent topic: Generated Hybrid App Files