Getting Started with Kapsel - SAP Fiori Client Plugins -- Toolbar

[Dan_vL]

Toolbar (New in SP04)

This plugin adds a hideable native toolbar.  The toolbar is displayed using a double tap gesture.  The last button in the toolbar on Android displays items that do not fit or are less commonly used.
To learn more about icons have a look at Icons on Android, iOS Toolbar and Navigation Bar Buttons, iOS Content Views and Apache Cordova Icons and Splash Screens.

For additional details on the Toolbar plugin see C:\SAP\MobileSDK3\KapselSDK\docs\api\sap.Toolbar.html or Using the Toolbar Plugin.

This plugin is intended to be used with the SAP Fiori Client.  The plugin is needed in the SAP Fiori Client as the Fiori Apps that run within it are online apps that normally run in a browser that has back and reload buttons which are not present in a regular cordova app.

The following steps will demonstrate how to modify the sample used in the logon plugin section to have the buttons such as read, lock, unlock, register and unregister be moved to the toolbar.

• Run the app discussed in the Logon section.
  
• Add the toolbar plugin.

  cordova plugin add kapsel-plugin-toolbar --searchpath %KAPSEL_HOME%/plugins
  
  or
  
  cordova plugin add kapsel-plugin-toolbar --searchpath $KAPSEL_HOME/plugins
  
  

• Note that the following message is shown for Android when running the above command.

  For Android you need to modify the activity theme in the AndroidManifest.xml to be android:theme="@android:style/Theme.Holo".
  
  The minSdkVersion must also be changed to at least 11.
  
  

  To make the change, modify the file C:\Kapsel_Projects\LogonDemo\platforms\android\AndroidManifest.xml and change

  <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/app_name" android:launchMode="singleTop" android:name="LogonDemo" android:theme="@android:style/Theme.Black.NoTitleBar">

  to

  <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/app_name" android:launchMode="singleTop" android:name="LogonDemo" android:theme="@android:style/Theme.Holo">
  
  

  and

  <uses-sdk android:minSdkVersion="10" android:targetSdkVersion="19" />

  to

  <uses-sdk android:minSdkVersion="11" android:targetSdkVersion="19" />

• Modify index.html and comment out the buttons by adding <!-- and --> around the register, read, unregister, lock and unlock buttons.
  
  
• Add the following method to handle adding and removing toolbar items depending on the state of the app.

  function addToolbarMenuItems(screenID) {
  
      sap.Toolbar.clear();
  
      if (screenID == "LoadingDiv") {
  
          //Do not add any toolbar items.            
  
      }
  
      else if (screenID == "LockedDiv") {
  
          sap.Toolbar.addItem({"label" : "UnLock", "icon" : "ic_action_not_secure", "showAsAction" : sap.Toolbar.SHOW_AS_ACTION_ALWAYS }, function() {unlock();});
  
      }
  
      else if (screenID == "MainDiv") {
  
          sap.Toolbar.addItem({"label" : "Read", "icon" : "ic_action_refresh", "showAsAction" : sap.Toolbar.SHOW_AS_ACTION_ALWAYS | sap.Toolbar.SHOW_AS_ACTION_WITH_TEXT }, function() {clearTable();read();});
  
          if (applicationContext == null) {
  
              sap.Toolbar.addItem({"label" : "Register", "icon" : "ic_action_add_person", "showAsAction" : sap.Toolbar.SHOW_AS_ACTION_ALWAYS }, function() {register();});
  
          }
  
          else {
  
              sap.Toolbar.addItem({"label" : "UnRegister", "icon" : "no_icon", "showAsAction" : sap.Toolbar.SHOW_AS_ACTION_WITH_TEXT }, function() {unRegister();});
  
          }
  
          sap.Toolbar.addItem({"label" : "Lock", "icon" : "ic_action_secure", "showAsAction" : sap.Toolbar.SHOW_AS_ACTION_ALWAYS }, function() {lock();});
  
      }
  
  }
  
  

  Add the below line to the showScreen method.

  addToolbarMenuItems(screenIDToShow);

  Add the below line to the end of the method logonUnregisterSuccessCallback(result).

  showScreen("MainDiv");

• For Android, download the icons that will be added to the toolbar from Android Action Bar Icon Pack.
  
  The following files are used for the icons.

  Action Bar Icons\holo_dark\01_core_refresh
  
  Action Bar Icons\holo_dark\06_social_add_person
  
  Action Bar Icons\holo_dark\10_device_access_secure
  
  Action Bar Icons\holo_dark\10_device_access_not_secure
  
  

  Copy the child folders into C:\Kapsel_Projects\LogonDemo\platforms\android\res.
  
  For iOS, under General > App Icons > click on the button Use Asset Catalog to migrate the app to use an asset catalog.  Then under LogonDemo > Resources > Images.xcassets, create a new image set and rename it to ic_action_refresh.  Drag and drop the icons for 1x and 2x from the below folder.

  ~/SAP/MobileSDK3/KapselSDK/plugins/fioriclient/ios/SMPToolbar.xcassets/smp_reload.imageset

  
  
  
  iOS provides a set of standard icons that should be used if possible at UIBarButtonItem Constants.  I don't believe these can directly be used though with the Kapsel toolbar plugin.
  
  
• Prepare, build and deploy the app with the following commands.

  cordova run android
  
  or
  
  cordova run ios

  Note that after adding icons a clean may be needed to ensure the new icons are added.
  
  
  After double tapping, the toolbar appears.
  
  
  Note below that the button at the end of the toolbar was clicked on to show the menuitem named UnRegister.  On older Android devices, the hardware menu button is used as mentioned in Say Goodbye to the Menu Button.
  
  Note that on Android, the menu item Read contains both an icon and text because of the Android only parameter sap.Toolbar.SHOW_AS_ACTION_ALWAYS was ORed with sap.Toolbar.SHOW_AS_ACTION_WITH_TEXT.  Depending on the resolution of the device, the text may only appear in landscape mode.
  
  Note, that on Android if the option SHOW_AS_ACTION_IF_ROOM is used, the rules defined under section named Action overflow apply.
  
  Note, that on Android, the title shown in the toolbar can be modified by changing app_name in the file assets\res\values\strings.xml.  This will also change the name shown beneath the app icon.
  
  Note, that on iOS, once a toolbar item is selected, the toolbar is hidden.

Back to Getting Started With Kapsel