Server-side mobile application development with IBM Worklight: Part 4. Integrate the IBM Worklight adapter with SCA 1.1 services

This is Part 4 of a series that explains how to use IBM® Rational® Application Developer for WebSphere® Software and IBM® Worklight together to develop applications for mobile devices, including those that run Android, iOS, BlackBerry, and Microsoft Windows Metro operating systems. This part demonstrates how to extend and transform existing server-side business logic assets to the mobile domain without re-engineering. Bhargav Perepa first shows how to use Rational Application Developer workbench to develop and test a JAX-WS application. Then he explains how to use Worklight Studio to develop and test a mobile application that uses the logic developed in the web service application.

Share:

Bhargav Perepa (bvperepa@us.ibm.com), WebSphere Architect and IT Specialist, IBM Japan

Bhargav PerepaBhargav Perepa is a WebSphere architect and IT specialist in the IBM Federal Software Group in Washington DC area. Previously, he was a developer in the Austin WebSphere Development Lab and had Smalltalk and C++ development experience at IBM Chicago. Bhargav holds a master's degree in Computer Science from the Illinois Institute of Technology, Chicago, and a master's in business administration (MBA) from the University of Texas, Austin.



18 June 2013

Introduction

Note about the use case architecture

This article builds on the previous ones and uses the same use case that you developed in the first part. It incorporates the same programming artifacts. Be sure to read Part 1 to get acquainted with the use case and programming artifacts (you can also simply click "More in this series" to find the previous parts).

In Part 4, you learn how to take the Java application that you developed in Part 1 to create and test an SCA 1.1 service application using Rational Application Developer for WebSphere 8.5.1 developer workbench. You will then learn to incorporate this SCA 1.1 service application logic in a server-side mobile application that features an HTTP adapter. You then learn how to test the mobile application, end-to-end.


Use case implementation approach

The use case implementation consists of six distinct activities, broadly identified as these steps:

  1. Develop the SCA 1.1 service application in Rational Application Developer.
  2. Test the SCA 1.1 service application by using Rational Application Developer.
  3. Package the SCA 1.1 service application logic as a Java archive (.jar) for mobile application use.
  4. Develop the mobile application by in Worklight Studio.
  5. Incorporate the SCA 1.1 service application logic provided as a SCA 1.1 service archive library in the mobile application.
  6. Test the mobile application with Worklight Studio by invoking SCA 1.1 service application logic developed in previous steps, using Worklight Adapter. This constitutes end-to-end testing.

Develop an SCA application using Rational Application Developer

The following steps outline the SCA 1.1 service application development using Rational Application Developer for WebSphere, Version 8.5.1.

  1. Launch Rational Application Developer, and specify the location of the workspace on your file system:
    C:\temp\RADWS\RADWSUsecasesSCA
  2. Open the Java Enterprise Edition perspective, if it is not open already, by selecting Window > Open Perspective > Other > Java EE (default), and then click OK.
  3. Create a new SCA1.1 service project:
    1. Select File > New > Other > Service Component Architecture 1.1 > SCA 1.1 Project > Next to open New SCA Project Wizard.
    2. Enter the following information in the New SCA Project Wizard:
      • Project name:RADUsecasesSCAProject
      • Use default location checkbox: Check
      • Target Runtime: WebSphere Application Server v8.5
      • Facet Configuration: WebSphere v8.5 SCA 1.1
      • Project Settings > Available Component Implementation Types > Composite: Check
      • Project Settings > Available Component Implementation Types > Java: Check
    3. Click Finish (see Figure 1).
Figure 1. Launch the New SCA Project Wizard
Dialog window to enter new SCA project details
  1. Create a new Java package:
    1. Select RADUsecasesSCAProject > src.
    2. Right-click, and select New > Package.
    3. In the New Java Package Wizard, add the required information:
      • Source folder: RADUsecasesSCAProject/src
      • Name: com.worklight.customcode
    4. Click Finish (Figure 2).
Figure 2. Launch the New Java Package creation wizard
Screen to enter new Java package details
  1. Create a new Java interface:
    1. Select the custom code package: RADUsecasesSCAProject > src > com.worklight.customcode.
    2. Right-click and select New > Interface.
    3. Complete the fields in the New Java Interface Wizard:
      • Source folder: RADUsecasesSCAProject/src
      • Package: com.worklight.customcode
      • Name: UsecasesSCAService
    4. Click Finish (Figure 3).
Figure 3. Launch the New Java Interface wizard
Screen to enter new Java Interface details
  1. Now, create a Java class named UsecaseException in the com.worklight.customcode package, using the New Java Class wizard:
    1. Select Java package under RADUsecasesSCAProject > src > com.worklight.customcode
    2. Right-click and select New > Class.
    3. Provide the fields in the New Java Class Wizard:
      • Source folder: RADUsecasesSCAProject/src
      • Package: com.worklight.customcode
      • Name: UsecaseException
      • Superclass: java.lang.Exception
    4. Click Finish (Figure 4).
Figure 4. Launch wizard to create the UsecaseException class
Screen showing UsecaseException class creation
  1. Create a new Java class:
    1. Select the package: RADUsecasesSCAProject > src > com.worklight.customcode
    2. Right-click to select New > Class.
    3. Provide the information required in the New Java Class Wizard:
      • Source folder: RADUsecasesSCAProject/src
      • Package: com.worklight.customcode
      • Name:Usecase
      • Interfaces:java.io.Seriazable
    4. Click Add button to add interfaces.
    5. Click Finish (Figure 5).
Figure 5. Launch wizard to create the Usecase class
Java Class creation dialog screen
  1. Create a new Java class:
  1. Select the package: RADUsecasesSCAProject > src > com.worklight.customcode
  2. Right-click and select New > Class.
  3. Provide the information for fields in the New Java Class Wizard:
    • Source folder: RADUsecasesSCAProject/src
    • Package: com.worklight.customcode
    • Name: Usecases
    • Interfaces:
      • java.io.Seriazable
      • com.worklight.customcode.UsecasesSCAService
  4. Click Finish (Figure 6).
Figure 6. Launch wizard to create a Usecases class
Screen showing Usecases class creation
  1. Create a new SCA 1.1 composite:
    1. Select RADUsecasesSCAProject > src > com.worklight.customcode package.
    2. Right-click and select New > Service Component Architecture 1.1 > SCA 1.1 Composite > Next.
    3. Provide the following information in the New Composite Wizard:
      • Project: RADUsecasesSCAProject
      • Composite name:UsecasesSCAComponent.
      • Target namespace:http://usecases
      • Composite path: /RADUsecasesSCAProject/UsecasesSCAComponent.composite
    4. Click Finish (Figure 7).
Figure 7. Launch the new SCA 1.1 composite
new SCA Composite dialog window
  1. Select Component from the UsecasesSCAComponent.oasis_composite_diagram > Palette > Component, and it onto the palette area (Figure 8).
Figure 8. Composite diagram
Screen shows composite diagram with palette
  1. Click the Component object on the canvas, select Properties View > General > Component Name (see Figure 9).
  2. Enter this name for the Component Name field: UsecasesSCAComponent
Figure 9. Properties view, General tab of the composite diagram
Screen to show composite general properties
  1. Select Properties View > Implementation > Implementation type: Java, Class:com.worklight.customcode.Usecases
Figure 10. Properties view, Implementation tab of composite diagram
Screen to show composite implementation properties
  1. Select Service from the UsecasesSCAComponent.oasis_composite_diagram > Palette > Service, and drag it onto UsecasesSCAComponent. Observe the canvas icon change, with the service port attached on the inbound side of UsecasesSCAComponent object (Figure 11).
Figure 11. Component with service port attached
composite object, service port attached to front
  1. Click on ComponentService port of UsecasesSCAComponent > ComponentService > Properties View > General > Name:UsecasesSCAService (Figure 12).
Figure 12. Properties view, component service, General tab
Screen displays general tab details
  1. Click the ComponentService port of UsecasesSCAComponent > ComponentService > Properties View > Interface.
  2. Provide the information for these fields:
    • Interface type: Java
    • Interface:com.worklight.customcode.UsecasesSCAService
Figure 13. Properties view, component service, Interface tab
Screen to show component service interface details
  1. Click the ComponentService port ofUsecasesSCAComponent > ComponentService > Properties View > Binding > Bindings: Add > Web Service, and then click OK (Figure 14).
  2. Click File > Save.
Figure 14. Properties view, component service, bindings tab
Add ComponentService Web Service binding
  1. Select RADUsecasesSCAProject > New > SCA 1.1 Contribution > Deployable composites.
  2. Make sure that all three of these check boxes are checked:
    • RADUsecasesSCAProject
    • http://usecases
    • UsecasesSCAComponent
  3. Click Finish (Figure 15).
Figure 15. Launch the New Contribution wizard
Screen showing project, component and URL details

Figure 16 shows the completed RADUsecasesSCAProject in Enterprise Explorer view.

Figure 16. Completed project in the Enterprise Explorer view
Details of the RAD Usecases SCA Project

Deploy the SCA service application to WebSphere Application Server

The following steps outline the deployment of SCA 1.1 service application that you developed Rational Application Developer for WebSphere 8.5.1 and deployed to WebSphere Application Server runtime, v8.5.0.2.

  1. Select Servers View > WebSphere Application Server v8.5 at localhost.
  2. Right-click Add and Remove and select RADUsecasesSCAProject > Add, and then click Finish.
Figure 17. Deployment of the application to the server
Add and Remove view, project under Configured
  1. Select Servers View > WebSphere Application Server v8.5 at localhost.
  2. Right-click Administration and select Run Administrative Console.
  3. In the left pane, expand Applications > Application Types > Business-level applications, confirm that the RADUsecasesSCAProject application status shows a green arrow (Figure 18).
Figure 18. Successfully running SCA 1.1 service application
State shows successfully running application
  1. In the left pane, expand Applications > Application Types > Assets, confirm that the RADUsecasesSCAProject.jar asset has been deployed (Figure 19).
Figure 19. Successfully deployed SCA 1.1 asset
Assets view shows it ready to administer
  1. Click the check box next to RADUsecasesSCAProject.jar file, and the Export button above it (Figure 20).
Figure 20. Export the SCA composite asset
Assets view, Export selected, project checked
  1. Click the RADUsecasesSCAProject.jar file to download it (Figure 21).
Figure 21. SCA composite asset download screen
Export asset view shows link to file
  1. Click Save > Location to save: C:\Users\IBM_ADMIN\Downloads.
  2. For File name, select RADUsecasesSCAProject.jar, accept the default, Executable Jar File, for the "Save as type field," and then click Save (Figure 22).
Figure 22. SCA composite asset save screen
Save As options: location, file name, file type
  1. In the left pane options of the Admin Console, expand Service providers, and make sure that UsecasesSCAComponent_UsecasesSCAService is deployed and running, as indicated by a green arrow (Figure 23).
Figure 23. Admin Console service provider view
service provider details

Test the SCA service application in Rational Application Developer

The following steps outline testing of the SCA 1.1 service application that you developed in Rational Application Developer. You can use either the browser included in the software or an external browser running on your operating system.

  1. Open a browser and type or paste this address in the URL field:
    http://localhost:9080/UsecasesSCAComponent/UsecasesSCAService
Figure 24. Browser testing of SCA service
Successful running of SCA service in browser
  1. Click the Generic Service Client icon to launch the client from the workbench.
  2. Right-click WSDLs and select Add WSDL from URL from the drop-down menu.
Figure 25. Launching the generic service client
Services tab view, Request library section
  1. Enter the URL in the Import WSDL from URL wizard:
    http://localhost:9080/UsecasesSCAComponent/UsecasesSCAService?wsdl
  2. Click OK.
Figure 26. Importing SCA service WSDL from URL
Screen to import SCA service WSDL from URL
  1. To view and reveal the two introspected methods populated by the tool, expand WSDLs > UsecasesSCAServiceService. You can now see the methods named getUsecase and getAllUsecases.
  2. Select WSDLs > UsecasesSCAService > getUsecase, and for argo0, enter 1.
  3. Click Invoke (Figure 27).
Figure 27. Testing getUsecase method
Screen to test getUsecase method
  1. Click the View Response tab (Figure 28) to review the successful response. Notice that there is only one row of the record being retrieved.
Figure 28. View response screen – getUsecase method invocation
Screen showing getUsecase test response
  1. Select WSDLs > UsecasesSCAService > getAllUsecases, and click Invoke (Figure 29).
Figure 29. Testing the getAllUsecases method invocation
Screen to test getAllUsecases method
  1. Review the successful response under the View Response tab (Figure 30). Notice that an array of rows is being retrieved.
Figure 30. View response screen – getAllUsecases method
Screen showing getAllUsecases test response

Package SCA 1.1 service application logic for a mobile application use

Follow these steps to package a SCA 1.1 service application so that its logic is usable in a mobile application:

  1. Navigate to the downloads folder: c:\bvperepa\downloads
  2. Repackage the contents of the RADUsecasesSCAProject.jar file to have only the class files under the com\worklight\customercode folder (see Figure 31).

The files in the RADUsecasesSCAProject.jar are now organized in this hierarchy:

com
    worklight
        customcode
            Usecase.class
            UsecaseException.class
            Usecases.class
            UsecasesSCAService.class
Figure 31. Packaging the SCA 1.1 service application as a usable library
SCA 1.1 service application archive contents

Develop a mobile application using Worklight Studio

The following steps outline mobile application development using Worklight Studio Version 5.0.6.1:

  1. Launch Worklight Studio, and specify this location for the workspace in the file system:
    C:\temp\WRKLGHT\WLWSUsecasesSCA
  2. Create a new Worklight project:
    1. To start the New Worklight Project creation wizard, click File > New > Worklight Project.
    2. Specify the Worklight project name: WLHTTPAdapterCall2SCAProject
    3. Specify the Worklight project template: HybridApplication
    4. Click Next.
    5. Specify the application name: WLHTTPAdapterCall2SCAApp
    6. Select the rest of default values on this screen, and then click Finish.
  3. Create a new Worklight adapter:
    1. To launch new Worklight adapter creation wizard, select WLHTTPAdapterCall2SCAProject > adapters > Worklight Adapter.
    2. Start the new Worklight adapter creation wizard by clicking New > Worklight Adapter.
    3. Specify the project name: WLHTTPAdapterCall2SCAProject
    4. Specify the adapter type: HTTP Adapter
    5. Specify the adapter name adapter name: Call2SCAAdapter
    6. Click Finish.

Figure 32 shows the configured adapter metadata file in the editor.

Figure 32. Worklight adapter metadata in editor
Content of the adapter configuration file

Figure 33 shows the completed implementation of adapter logic in the editor. The adapter implements two methods in the JavaScript functions, and each of these functions calls the SCA 1.1 service application logic developed in previous steps. The application logic is made available to the mobile application in a Java archive (JAR) library. The implementation demonstrates how to invoke SCA 1.1 service application instance methods named getUsecase(id) and getAllUsecases().

Figure 33. Worklight adapter implementation in the editor
Adapter function implementations in JavaScript
  1. Start the Worklight server:
    1. Select WLHTTPAdapterCall2SCAProject.
    2. Click the Start Worklight Server option.
  2. Deploy the Worklight adapter to the Worklight server:
    1. Select WLHTTPAdapterCall2SCAProject > adapters > Call2SCAAdapter.
    2. Select Run As > Deploy Worklight Adapter.

Figure 34 shows successful deployment of the Worklight adapter in the Worklight Studio console view.

Figure 34. Verifying adapter deployment, Worklight Studio Console tab view
Console tab says adapter deployed successfully

Figure 35 shows successful deployment of the Worklight adapter in the Worklight admin console.

  1. Verify the deployment by entering this address in the Google Chrome browser:
    http://localhost:8080/console
Figure 35. Verifying adapter deployment, Worklight admin console view
Browser display of successful adapter deployment

Incorporate SCA service application logic in a mobile application

The following steps describe how to import the SCA service application library to be used in mobile application being developed in Worklight Studio:

  1. Launch the import wizard to import the Java application library into the Worklight Studio workspace to be deployed to Worklight server.
    1. Navigate to WLHTTPAdapterCall2SCAProject > server > java folder.
    2. Right-click and select Import > File System > Next to get to file system import wizard.
    3. Specify the Java application library to be used in the mobile application by selecting the .jar file to import from the file system by selecting:
      c:\temp\ RADUsecasesSCAProject.jar
    4. Click Finish.

Figure 36 shows completed Worklight application project, ready for testing.

Figure 36. Completed Worklight project
Project Explorer display of completed project

Test the mobile application by using Worklight Studio

The following steps explain end-to-end testing of a mobile application. The SCA service application logic is invoked from the adapter component of the mobile application.

Invoke the getUsecase instance method

  1. Select WLHTTPAdapterCall2SCAProject > adapters > Call2SCAAdapter.
  2. Select Run As > Invoke Worklight Procedure.
  3. In the Edit Configuration wizard, provide this information:
    1. Project name: WLHTTPAdapterCall2SCAProject
    2. Adapter name: Call2SCAAdapter
    3. Procedure name: getUsecase
    4. Parameters (comma-separated):4
  4. Click Apply, and then click Run (see Figure 37).
Figure 37. Procedure testing, getUsecase
Invocation steps of getUsecase(4)

Figure 38 shows successful invocation of the getUsecase(4) instance adapter method.

Figure 38. Successful invocation, getUsecase(4)
Invocation results

Invoke the getAllUsecases instance method

  1. Select WLHTTPAdapterCall2SCAProject > adapters > Call2SCAAdapter.
  2. Select Run As > Invoke Worklight Procedure.
  3. In the Edit Configuration wizard, provide this information:
    • Project name: WLHTTPAdapterCall2SCAProject
    • Adapter name: Call2SCAAdapter
    • Procedure name: getAllUsecase
    • Parameters (comma-separated): [no action necessary]
  4. Click Apply, and then click Run (see Figure 39).
Figure 39. Procedure testing, getAllUsecases()
Invocation steps for getAllUsecases()

Figure 40 shows successful invocation of the getAllUsecases() instance adapter method.

Figure 40. Successful invocation, getAllUsecases()
Results screen

Summary

Part 4 of this series shows how to use the Rational Application Developer for WebSphere workbench to develop and test an SCA 1.1 service application. Then it shows how to use IBM Worklight Studio to develop and test a mobile application that uses logic previously developed in that application. It also demonstrates how to extend and transform the existing server-side business logic assets to the mobile domain without wholesale re-engineering by using workbench tools in both applications.


Acknowledgments

The author gratefully acknowledges receiving review feedback, constructive suggestions, support, and productive teamwork from IBMers Sujatha Perepa, Roger Snook, Parker Behseta, and Mark Smith.


Download

DescriptionNameSize
Application sample, configuration and log filesRAD_WL_ArticleBundle_Part4_May122013.zip303KB

Resources

Learn

Get products and technologies

Discuss

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Rational software on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Rational, Mobile development, WebSphere, DevOps
ArticleID=934295
ArticleTitle=Server-side mobile application development with IBM Worklight: Part 4. Integrate the IBM Worklight adapter with SCA 1.1 services
publish-date=06182013