In my previous post, “Developing SAP Android Apps is Just a Few Clicks Away”, we’ve seen how to generate a simple mobile application for Android using the SAP NW Gateway plugin for Eclipse. But what if you want to have a different look and feel for your generated apps? Or perhaps you want to have some additional logic be part of every app you generate? Luckily the SAP NW Gateway plugin for Eclipse enables anyone to modify the out-of-the-box templates and produce his/her own customized templates.
After generating the app and running it immediately in my emulator I noticed that I want to have my own customized List Details template. I’d like to have a different theme, to replace the default icons and to handle the proxy server configuration to all future generated apps based on my template. Let’s see how we can achieve that.
I’ll start with styling my app a bit by changing the theme and icons. To change the theme of my application activities, I open the AndroidManifest.xml file and edit the android:theme attribute of the <activity> tag for each activity that starts with the name “.Page”. Android provides pre-defined themes that you can use, to avoid writing them yourself. To simplify the example I’ll not create my own theme but rather use a pre-defined Theme Light.NoTitleBar:
<activity android:theme= "@android:style/Theme.Light.NoTitleBar"
Next thing I’ll do is to change the icon that appears to the left of every list item: I add my icon to the res/drawable folder and then I open the item_entry.xml file found under res/layout folder and edit the android:src attribute of the <ImageView> tag to point to the new icon:
<ImageView android:src= "@drawable/new_icon"
I can now run the application in the emulator and check it out.
It looks more like I want, and I wish that all future generated applications will look like this instead of the default look. To do this I’ll first need to import the plugin project of the Android templates by going in Eclipse to File > Import, select Plug-in Development > Plug-ins and Fragments as the import source, and click on Next until I get to the Selection page. I select the plug-in: com.sap.iw.gw.oc.eclipse.templates.android, add it and click on Finish.
Second step would be to do some renaming so that we’ll not get conflicted with the default templates. Rename the project, for example to: android.templates.customized.
I want to keep the default List Details template and have my customized template on top of it (see screenshot 2), so l also need to edit the plugin.xml file of the project to change the properties of that template. I go to the Extensions tab of the plugin.xml file and edit the ID and optionally the display name, description and icon. I save and close the file.
Now I want to apply the changes I’ve done in my generated app to the template documents so that they will take effect in all apps generated based on that customized List Details template. From the project, I open the templateDocs/list folder and open the AndroidManifest.vm. I skip the first two activity declarations (splash screen and login screen) and edit the android:theme attribute of the latter <activity> tags. This will affect all List activities and Details activities that will be generated.
The second change I did was to the icon of list entries, so I follow the same steps as before: I add my icon to the templateDocs/list/drawable folder and then I open the item_entry.xml file found under templateDocs/list/layout and edit the android:src attribute of the <ImageView> tag to the new icon.
Last change I want to make is to add the proxy configuration, since in the SAP network I’m required to always use a proxy for outside communication: from the project, I open the templateDocs/proxy folder and open the SDMConnectivityHelper.vm file. I add the proxy configuration in the constructor:
this.mPreferences.setStringPreference
(ISDMPreferences.SDM_CONNECTIVITY_PROXY_HOST,"<your proxy host>");
this.mPreferences.setIntPreference
(ISDMPreferences.SDM_CONNECTIVITY_PROXY_PORT, <proxy port>);
That’s it. I now have an additional template that is based on the List/Details template and contains my modifications. To try it out, right click on the plugin project and choose Run As > Eclipse Application. In the Eclipse runtime start the Starter Application wizard of the NW Gateway plugin.
We just saw how easy it is to modify an existing template in this post. You can take it further by applying more customizations to a template that will affect all generated apps based on that template. For example, modifying the splash screen and login screen, adding single-sign-on capabilities to the generated apps, and so on. Also, you probably noticed that some modifications were done to vm files. This is since the plugin uses code generation using a template engine (called Velocity). Velocity is a Java-based template engine. It permits anyone to use a simple yet powerful template language to reference objects defined in Java code.
Useful Links:
Developing SAP Android Apps is Just a Few Clicks Away
SAP NetWeaver Gateway plug-in for Eclipse – p.84 modifying a Template of a Toolkit
Apache Velocity Engine – on the apache.org site
You are invited to follow the SAP NetWeaver Gateway group on LinkedIn.
And on Twitter: To be updated on future #SAPGateway blogs and updates please follow us @shirilevil
- SAP Managed Tags:
