- Create the Worklight application
- Update the custom WebSphere Portal theme to provide Worklight Resources
- Build a Portal App that uses Worklight
- Test the hybrid application with the Windows Phone Emulator
PrerequisitesTo build the sample mobile hybrid application described here, you must have these software products and features properly installed and operational:
- WebSphere Portal 8.5 See the WebSphere Portal documentation for installation instructions. This article was tested with WebSphere Portal V8.5 CF02.
- Eclipse Download Eclipse. This sample is based on Eclipse 4.2.2 (Juno), and was tested with Eclipse IDE for Java EE Developers. (The Eclipse Classic and Eclipse IDE for Java Developers might work also, although they have not been tested with this sample.)
- Microsoft Visual Studio Worklight generates Windows Phone apps as Windows Phone 8 Microsoft Visual Studio projects, which must be built using Microsoft Visual Studio. This article was written using Microsoft Visual Studio Express 2012 for Windows Phone 8, which is included with the Windows Phone SDK 8.0.
- Worklight This sample requires IBM Worklight 6.2. You can download IBM Worklight Developer Edition 6.2 for development use at no cost. Details on how to update Eclipse with the plugin are available in the Setup modules of the Getting started with IBM Worklight documentation.
Create the Worklight application
- Start Eclipse.
- To begin building the application, you need to create a new Worklight project. From Eclipse, navigate to New -> Other -> Worklight Project, then click Next (Figure 1).
- Name your project. In Figure 2, the project is called
WLPortal. Keep Hybrid Application selected as the default and click Next.
- Name the hybrid application in the Worklight project, in this case
- Click Finish. The project and application artifacts are created. This might take a few minutes. When completed, you might be asked to switch to the Design perspective and view the project in the Project Explorer (Figure 4).
- Next, create a Worklight environment to build the hybrid application. Right click on the WLPortalApp in the apps folder, then select New > Worklight Environment (Figure 5).
- The New Worklight Environment panel displays (Figure 6). Because this particular sample is for a hybrid Windows Phone application only, select Windows Phone 8. If you needed to create environments for other device operating systems, this is the panel where you would specify those additional options. Click Finish.
- Worklight Studio generates a Microsoft Visual Studio project that will be compiled within Visual Studio to generate the final app (Figure 7). The native project is located in Worklight Project\apps\WorklightApplication\windowsphone8. Worklight Studio manages the lifecycle of this application, and you shouldn’t make changes to it. When the web application you initially created in the project is built and deployed, the copy in the native application will be overwritten with any application changes.
- Modify your application to connect to WebSphere Portal from the native wrapper. On other platforms, this is done by setting the mainFile attribute in application-Descriptor.xml. Worklight on Windows Phone requires this to be set in the StartPageUri attribute in windowsphone8\native\MainPage.xaml (Figure 8).
- Now that you’ve got the application set up, build the Windows environment to update the native Visual Studio Project. You can build the environment by right right-clicking on windowsphone8 and selecting Run As -> Build WindowsPhone8 Environment (Figure 9).
- As the build process begins, you can see the progress in the lower right status banner in Eclipse. When the process completes, you should see the message Application ‘YourApp’ with environment ‘windowsphone8’ build finished. in the Worklight console (Figure 10).
Update the custom WebSphere Portal theme to provide Worklight Resources
- Create a local file called WindowsPhoneDeviceClasses.xml and place the contents of Listing 1 into this file. It will be used to create the iemobile device class.
- Create a local file called WindowsPhoneClients.xml and place the contents of Listing 2 into this file. It will be used to match Windows Phone devices with the iemobile and worklight device classes.
- Log into Portal and navigate to Administration -> Portal User Interface (Figure 11).
- Click on Portal Settings -> Import XML (Figure 12).
- Click Choose file. Select WindowsPhoneDeviceClasses.xml. Click Open, then click Import. This will set a new device class called iemobile. Click Choose file again. This time, Select WindowsPhoneClients.xml. Click Open, then click Import. This will set the iemobile device class for all Windows Phone devices, and set the worklight device class for Worklight-enabled Windows Phone devices.
- Ensure the sample theme is installed. You will need to use a WebDAV utility to:
- Create modules that will be defined in a new theme profile.
Start your WebDAV utility (we used AnyClient for this sample) and connect to the fs-type1 entry point (http://
: /wps/mycontenthandler/dav/fs-type1). When it loads, it displays the folder structure shown in Figure 13.
Navigate to the sample WebDAV theme, located at fs-type1:themes/CustomDAVTheme85. Create a folder named worklight within the theme (Figure 14).
- Copy the worklight_wp8.json file to your local machine and place the contents of Listing 10 into this file.
- Open the profile_worklight_wp8.json file and add the module wl_client_wp8 that you defined as a contribution (Listing 11).
- Rename the profile so you can easily identify it when selecting in the page properties dialog. To do this, find the English title (or the locale you plan to work with) and change the title from “Deferred” to “Worklight WP8” (Listings 12 and 13).
- Copy the profile_worklight_wp8.json file back to the
/themes/CustomDAVTheme85/profiles/ directory on WebDAV. Clear
the browser cache and restart WebSphere Portal to make sure
the new profile is enabled.
Build a Portal App that uses Worklight
- Create a page with the sample DAV theme applied if you have not already done so. (See Page creation and navigation for more about creating pages.)
You can now take the profile that has defined the modules to include the Worklight artifacts and apply it to the page. There are two ways to do this – you can either:
- Set the profile as the theme default.
- Set it specifically for a particular page.
Either way will work so you can see your changes, but setting the profile on a particular page is the easiest. To do this, open the Page Properties dialog that is available within the customization shelf and find the drop down menu for available theme profiles on the Advanced tab (Figure 15). (See Changing the theme profile for more information.)
- This example uses the IBM Script Portlet to display a web page that uses Worklight. Add the Script Portlet to the new page (Figure 16).
- Create a file on your local machine called WLPortalAppUI.html and place the contents of Listing 14 into this file. This is the HTML source of the demo application the client will run.
- The Script Portlet requires the web application it display to be packaged as a zip file. Create a new zip file called WLPortalAppUI.zip and add WLPortalAppUI.html to it.
- Within the Script Portlet, click Import. Figure 17.
- Click choose file. Select WLPortalAppUI.zip. Click Import. Close the dialog when it says Import Complete.
Test the hybrid application with the Windows Phone Emulator
Now that you have created the Portal Web Application that uses Worklight, you can test the application using the Windows Phone emulator:
- Open the hybrid application’s project within Visual Studio. This may be done by right clicking the application’s .csproj file and clicking open Figure 18.
The project may also be opened directly from Visual Studio by selecting File -> Open Project and selecting the .csproj file.
- Make sure that the Windows Phone emulator is selected (Figure 19).
- Click the green play button or press F5 to launch the application. The application will display the WebSphere Portal URL entered in MainPage.xaml.
- After the application has rendered the WebSphere Portal application, if the new page to which you applied the Worklight profile does not have anonymous access, then login and navigate to the page. You should then see the sample application displayed within the IBM Script Portlet, as shown in Figure 20.