how to guide-mobile application for handheld

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com

© 2011 SAP AG 1

How to Guide-Mobile Application

for Handheld

Applies to:

SAP NetWeaver Mobile 7.3. For more information, visit the Mobile homepage.

Summary

This article is mainly for the newbie‟s in NWM 7.3 which provides step by step procedure to develop mobile applications for handheld using Netweaver Developer Studio.

Author: Suma S

Company: SAP Labs India Pvt Ltd

Created on: 21 Jan 2011

Author Bio

Suma S is working in the SAP NetWeaver Mobile team from past 5 years at SAP Labs India Pvt. Ltd.

https://www.sdn.sap.com/irj/sdn/nw-mobile

How to Guide-Mobile Application for Handheld


© 2011 SAP AG 2

Table of Contents

Description .......................................................................................................................................................... 3

Preparation ......................................................................................................................................................... 3

Application Creation ............................................................................................................................................ 4

Configuration ................................................................................................................................................... 4

Service Explorer: ............................................................................................................................................. 8

Handhelds UI Explorer .................................................................................................................................. 16 1. Go to File->New->Mobile Components for UI Handhelds .................................................................................... 16

2. Add dependency between service component and UI component ...................................................................... 17

3. Creating Application, Component and View ........................................................................................................ 18

4. Create Model ....................................................................................................................................................... 22

5. Apply template to generate the supply function and queries ............................................................................... 24

6. Context Binding ................................................................................................................................................... 27

7. UI Design ............................................................................................................................................................. 29

Sample Code Snippet ................................................................................................................................... 42

Application Explorer: ..................................................................................................................................... 47

Debugging Application ...................................................................................................................................... 56

Related Content ................................................................................................................................................ 59

Copyright........................................................................................................................................................... 60



© 2011 SAP AG 3

Description

This Document helps to create Mobile Application for handhelds, which runs on SAP Netweaver Mobile Client.

Preparation

1. Install Netweaver Developer Studio, and configure the IDE with the mobile plug-ins as mentioned in the following link:

http://help.sap.com/saphelp_nw73/helpdata/en/ed/c104cc51584e7789fc7b3869dccb98/frameset.htm

2. User must have some basic concepts of Webdynpro for java / mobile Webdynpro offline

3. User must have created

Backend Design - Table Creation,

Backend Design - BAPI Wrapper Creation,

Middleware Design - SWCV Creation.

Refer to the following article to create model in DOE

http://www.sdn.sap.com/irj/scn/index?rid=/library/uuid/309f0f26-ccc4-2d10-5099-e26050c47cf4

http://help.sap.com/saphelp_nw73/helpdata/en/ed/c104cc51584e7789fc7b3869dccb98/frameset.htm

http://www.sdn.sap.com/irj/scn/index?rid=/library/uuid/309f0f26-ccc4-2d10-5099-e26050c47cf4



© 2011 SAP AG 4

Application Creation

Mobile Application for handhelds has three components, Service Explorer, Handhelds UI Explorer, and Application Explorer.

Configuration

1. Start SapNetweaverDeveloperStudio.exe, create a new workspace.

2. Navigate to Windows->Open Perspective->Other->Mobile Application for Handhelds



© 2011 SAP AG 6

3. Configure the DOE system details, by navigating to Windows->preferences

In Preferences window, Mobile->General->Data Orchestration Engine.

Provide the DOE server details



© 2011 SAP AG 7

4. Configuring client details:

Go to Windows->preferences, In Preferences Window Mobile->Handhelds->Runtime Settings

Provide the client runtime settings.

By default client will be available in com.sap.tc.mobile.dt.oca.rt plugin. This can be changed to the client in the local system as well, by un-checking the „Use default‟ check box.



© 2011 SAP AG 8

Service Explorer:

In the service Explorer, Create the Model



© 2011 SAP AG 9

Select the Required Data Objects

Click on Next,



© 2011 SAP AG 10

In the next screen click on Finish Button.

Go to Service Component, create service under services

Provide the name for the service and click on finish.



© 2011 SAP AG 11

Select the Query (Create an operation that queries data), click on next



© 2011 SAP AG 12

Select the node for which the query is created e.g.: OrderSsordhdr and click on finish.

Similarly create for other nodes.



© 2011 SAP AG 13

In the query for Child node, provide the input parameter as shown below

And the filter as shown below:

And Order By as Shown below:



© 2011 SAP AG 14

After addition of all the data query looks like this:



© 2011 SAP AG 15

4. Update Project Settings and Build Service Component

Right click on the Service component, select Development component, Update Project Settings, and again build the Development component



© 2011 SAP AG 16

Handhelds UI Explorer

1. Go to File->New->Mobile Components for UI Handhelds

Click on Next

Provide the name of the ui component and click on finish.



© 2011 SAP AG 17

2. Add dependency between service component and UI component

(Windows show view development infrastructure component properties)

a) Go to the “Component Properties” View,

b) Select Dependencies tab

c) Click Add

d) Select Service Component created, click on next



© 2011 SAP AG 18

e) Select “Design Time”, “Deploy Time” and “Run Time” check boxes

3. Creating Application, Component and View

Right Click on the Application, Select Create Application



© 2011 SAP AG 19

Provide the name of the application in the next screen and click on the “Next” button

Click on the Next button to follow the wizard and create component and view



© 2011 SAP AG 22

4. Create Model

Right Click on the Models Create Model

Follow the wizard, select Mobile Service Component Model, and click on Next



© 2011 SAP AG 23

Provide the name for the model

Select the required Service, and click on next

Click on Finish



© 2011 SAP AG 24

5. Apply template to generate the supply function and queries

Select Component ControllerApply Template

Select Mobile Service Component and click on next



© 2011 SAP AG 25

Click on Next

Select the required services for which the template needs to be created, and click on Finish.



© 2011 SAP AG 26

Build the UI component



© 2011 SAP AG 27

6. Context Binding

Right Click on the Application and select “Open Data Modeler”

a) Click on Data link, Drag from View to the component controller

b) In the next screen, drag the sc component form Val_Sc_Comp to the Val_Sc_CompView.

c) In the next screen, select the required nodes and uncheck the SyncKeyMmw, PSyncKey, As1SyncKeyMmw(Association SyncKey)

d) Click on Finish.



© 2011 SAP AG 28

Context mapping looks like this. Click on Finish.



© 2011 SAP AG 29

7. UI Design

Select the Application View, In the Outline View (Windowsshow viewGeneralOutline) right click on Apply template and create tables to display data

Provide the Table Name



© 2011 SAP AG 30

Click on Next, follow the wizard to select the required fields



© 2011 SAP AG 31

Click on Next, order the fields and click on Finish



© 2011 SAP AG 32

In the View Table will be created

Similarly create for all the nodes, and provide the label for the table



© 2011 SAP AG 33

Select the OrderHeader Node, Go to the properties window, select the “Events” and For OnLeadSelect Create an event



© 2011 SAP AG 34

Similarly create on lead select event for all the header node.

Note: Onleadselect is used to get the child data for the selected header node record.

Create Buttons to Create, Modify, and delete Order header and Order Item

Insert an UI Element button



© 2011 SAP AG 36

Select the created button, in the Properties tab, select Events and “onAction” Event Create a new action as below:



© 2011 SAP AG 37

Create Order View:

a) Create a new view for the OrderHeader

b) Open the Window, Select Existing View and click on the window

c) Select the new view created and click on finish

Create Inbound and Outbound plugs from view to navigate between the views

a) Select the Inbound plug and click on the view in which it need to be created

b) Provide the name of the inbound plug and click on finish



© 2011 SAP AG 38

Similarly create outbound plug

Similarly create views for Create Order Item, Modify Order and Order Item. And create inbound and outbound plugs on all the views.

On the Main view create separate inbound and outbound plugs to navigate to all the views.

Inbound Plugs on MainView:

a) FromCreateOrderHeader

b) FromModifyOrderHeader

c) FromCreateOrderItem

d) FromModifyOrderItem

Outbound Plugs on MainView:

a) ToCreateOrderHeader

b) ToModifyOrderHeader

c) ToCreateOrderItem

d) ToModifyOrderItem

Layout design in CreateOrderHeader View

Go to the ApplicationRight Click and Open Data Modeler

a) Edit the data link between Component Controller and Model

b) Provide the link between OrderHeader node

c) Create data link between CreateOrderHeaderview and Component controller.

d) Drag oca_sce_val_sc from Val_Sc_Comp to CreateOrderHeaderView

e) Unckeck SyncKeyMmw

f) Click on Finish



© 2011 SAP AG 39

Go to Outline, rightclick on the Rootelement and Select Apply Template and Select “Form”

Click on Next



© 2011 SAP AG 40

Order the fields and click on finish



© 2011 SAP AG 41

Add a Button to Save.

Similarly Do for Other views



© 2011 SAP AG 42

Sample Code Snippet

Content in the “Val_Sc_CompView”

Oca_sce_val_scModel model = (Oca_sce_val_scModel)OcaRoot.getInstance().getModel(Oca_sce_val_scModel.class);

In the “On Lead Select” Methods put the following code to display the child content properly:

public void onActionProduct (Event wdEvent) {

//@@begin onActionProduct(ServerEvent)

Val_Sc_Comp.getInstance().GetSupplier();

//@@end

}

/**

* Event handler [onActionCreateOrderItem].

*/

public void onActionCreateOrderItem (Event wdEvent) {

//@@begin onActionCreateOrderItem(ServerEvent)

wdThis.wdFirePlugToCreateOrderItem();

//@@end

Code Snippet for Delete OrderHeader:

public void onActionDeleteOrder (Event wdEvent) {

//@@begin onActionDeleteOrder(ServerEvent)

try{

OrderSsordhdr ord_head = (OrderSsordhdr)wdContext.nodeoca_sce_val_sc().nodeGetOrderHeader().nodeGetOrderHeaderOutput().currentGetOrderHeaderOutputElement().model();

model.removeOrderSsordhdr(ord_head);

OcaRoot.getInstance().commit();

WDLite.showStatusMessage(0,"OrderDeleted");

wdGetVal_Sc_CompController().GetOrderHeader();

wdContext.nodeoca_sce_val_sc().nodeGetOrderHeader().nodeGetOrderHeaderOutput().setLeadSelection(0);

}catch (Exception e){}

//@@end



© 2011 SAP AG 43

Code Snippet for Delete OrderItem:

public void onActionDeleteOrderItem (Event wdEvent) {

//@@begin onActionDeleteOrderItem(ServerEvent)

try{


OrderOrditem ord_item = (OrderOrditem)wdContext.nodeoca_sce_val_sc().nodeGetOrderItem().nodeGetOrderItemOutput().currentGetOrderItemOutputElement().model();

ord_head.removeFromOrditems(ord_item);


WDLite.showStatusMessage(0,"OrderItemDeleted");

wdGetVal_Sc_CompController().GetOrderItem();

}catch (Exception e){}

//@@end

Component Controller

Following coding is required in Component Controller:

SupplyFunction Content:

Supply function for OrderHeader put the following code

GetOrderHeader.execute();

Code Snippet in GetOrderItem query:

public void GetOrderItem() {

//@@begin GetOrderItem()

//$$begin(Mobile Service Component)

if(wdContext.nodeoca_sce_val_sc().nodeGetOrderHeader().nodeGetOrderHeaderOutput().currentGetOrderHeaderOutputElement()!=null){

GetOrderItem.setPKey(wdContext.nodeoca_sce_val_sc().nodeGetOrderHeader().nodeGetOrderHeaderOutput().currentGetOrderHeaderOutputElement().getKeys());

wdContext.nodeoca_sce_val_sc().nodeGetOrderItem().nodeGetOrderItemOutput().bind(GetOrderItem.execute());

wdContext.nodeoca_sce_val_sc().nodeGetOrderItem().reload();

Create Order View

Following code has to be written in CreateOrder view

Create Code Snippet:

In the CreateOrderHeader view perform the following:

Create the following global variables: (To capture the input data entered in the Inputfields)

//@@begin others

InputFieldViewItem key;

InputFieldViewItem custcode;



© 2011 SAP AG 44

InputFieldViewItem custName;

InputFieldViewItem region;

InputFieldViewItem salesemp;

//@@end

Place the following code snippet in the wdModifyView: (Get the respective fields)

public void wdDoModifyView(CreateOrderHeaderViewView view, boolean firstTime)

//@@begin wdDoModifyView()

key = view.getKeysViewItem();

custcode = view.getCustCodeViewItem();

custName = view.getCustNameViewItem();

region = view.getRegionViewItem();

salesemp = view.getSalesEmpViewItem();

//@@end

In the onActionSave: (Set the values from the fields)

public void onActionSave (Event wdEvent) {

//@@begin onActionSave(ServerEvent)

Oca_sce_val_scModel model = (Oca_sce_val_scModel)OcaRoot.getInstance().getModel(Oca_sce_val_scModel.class);

OrderSsordhdr ord_hdr = model.createOrderSsordhdr();

ord_hdr.setKeys(key.getValue().toString());

ord_hdr.setCustCode(custcode.getValue().toString());

ord_hdr.setCustName(custName.getValue().toString());

ord_hdr.setRegion(region.getValue().toString());

ord_hdr.setSalesEmp(salesemp.getValue().toString());

wdContext.bind(Collections.singleton(ord_hdr));


//@@end



© 2011 SAP AG 45

ModifyOrderHeader Code Snippet:

In the ModifyOrderHeader view, put the following contents in the onActionSave:


WDLite.showStatusMessage(0, "Order Modified");

Create OrderItem View

Create the following global variables: (To capture the input data entered in the Inputfields)

//@@begin others

InputFieldViewItem PKey;

InputFieldViewItem ItemCode;

InputFieldViewItem ProductCode;

InputFieldViewItem Shiptoparty;

InputFieldViewItem Amount;

InputFieldViewItem Qunatity;

//@@end

Place the following code snippet in the wdModifyView: (Get the respective fields)

public void wdDoModifyView(CreateOrderItemViewView view, boolean firstTime)

{

//@@begin wdDoModifyView()

ItemCode = view.getItemCodeViewItem();

ProductCode = view.getProductCodeViewItem();

Shiptoparty = view.getShiptopartyViewItem();

Amount = view.getAmountViewItem();

Qunatity = view.getQuantityViewItem();

//@@end

In the onActionSave: (Set the values from the fields)

public void onActionSave (Event wdEvent) {

//@@begin onActionSave(ServerEvent)


OrderOrditem ord_item = ord_head.createNewOrditems();

ord_item.setPkey(ord_head.getKeys());

ord_item.setItemCode(ItemCode.getValue().toString());



© 2011 SAP AG 46

ord_item.setProductCode(ProductCode.getValue().toString());

ord_item.setShiptoparty(Shiptoparty.getValue().toString());

String amt = Amount.getValue().toString();

ord_item.setAmount(Integer.parseInt(amt));

String quty = Qunatity.getValue().toString();

ord_item.setQuantity(Integer.parseInt(quty));

ord_head.addToOrditems(ord_item);


wdGetVal_Sc_CompController().GetOrderItem();

WDLite.showStatusMessage(0,"Order Item Created");

//@@end

}



© 2011 SAP AG 47

Application Explorer:

FileNewMobile Application

Provide the name of the application and click on finish



© 2011 SAP AG 48

Go to Component Properties View, Select Dependencies and Add the service and UI component and click on Next.

Select design Time, Deploy time and Runtime and click on Finish



© 2011 SAP AG 49

Right click on the ApplicationDevelopment ComponentUpdate Project Settings

Again, Right click on the ApplicationDevelopment ComponentBuild

Once the application is created,

It can be either deployed locally on the client installed in that system or it can be uploaded in to the DOE to perform server deployment on multiple devices.

Server Deployment:

To upload into the DOE, go to the transaction SDOE_UPLOAD_ARCHIVE, get the application sda file, and upload it. On upload MCD name and its version specified during the application creation will be displayed. This has to be used while application deployment to the device.

Application sda file will be available in the workspace as shown below

<workspace.jdi>\LocalDevelopment\DCs\demo.sap.com\<app_name>\_comp\gen\default\deploy

Get the sda files from all the three components: Service, UI and Application and upload to the DOE.



© 2011 SAP AG 51

Select “Local deployment to NW Mobile Client for Handhelds”

Note: 1. One can also deploy the application directly on to the PDA after installing the power toys

(WindowsMobilePowerToys.msi) and windows mobile device center (Active Sync for Windows Vista) or Microsoft Windows Active Sync (Windows XP).

2. Link to Power Toys installation: http://www.microsoft.com/downloads/details.aspx?FamilyID=74473fd6-1dcc-47aa-ab28-6a2b006edfe9&DisplayLang=en#filelist

3. Set the path of Power Toys & Active Sync under IDE->Preferences->Mobile Application for handhelds

http://www.microsoft.com/downloads/details.aspx?FamilyID=74473fd6-1dcc-47aa-ab28-6a2b006edfe9&DisplayLang=en#filelist

http://www.microsoft.com/downloads/details.aspx?FamilyID=74473fd6-1dcc-47aa-ab28-6a2b006edfe9&DisplayLang=en#filelist



© 2011 SAP AG 55

Launch the application

Note: If the query is changed in service component, to get this query reflected in the UI component, re-import the model to the UI component.



© 2011 SAP AG 56

Debugging Application

Go to the startup.bat file in the client

Open in edit mode, Remove „REM‟ from the line

„REM set MOBILE_JVM_OPTS=%MOBILE_JVM_OPTS% -agentlib:jdwp=transport=dt_socket,server=y,address=45102,suspend=n‟

Save the file.

In the IDE, Select Debug Configuration



© 2011 SAP AG 57

Create New configuration under „SAP Application‟, and provide Module, Module Type and Module Artifact details as shown below:

Set the breakpoint where ever necessary, click on the created debug configuration

Once Debug configuration is running, it will launch the client and returns to the Debug point once it hits on the client.



© 2011 SAP AG 59

Related Content

For more information, visit the Mobile homepage

https://www.sdn.sap.com/irj/sdn/nw-mobile



© 2011 SAP AG 60

Copyright

© Copyright 2011 SAP AG. All rights reserved.

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. The information contained herein may be changed without prior notice.

Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors.

Microsoft, Windows, Excel, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation.

IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x, System z, System z10, System z9, z10, z9, iSeries, pSeries, xSeries, zSeries, eServer, z/VM, z/OS, i5/OS, S/390, OS/390, OS/400, AS/400, S/390 Parallel Enterprise Server, PowerVM, Power Architecture, POWER6+, POWER6, POWER5+, POWER5, POWER, OpenPower, PowerPC, BatchPipes, BladeCenter, System Storage, GPFS, HACMP, RETAIN, DB2 Connect, RACF, Redbooks, OS/2, Parallel Sysplex, MVS/ESA, AIX, Intelligent Miner, WebSphere, Netfinity, Tivoli and Informix are trademarks or registered trademarks of IBM Corporation.

Linux is the registered trademark of Linus Torvalds in the U.S. and other countries.

Adobe, the Adobe logo, Acrobat, PostScript, and Reader are either trademarks or registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.

Oracle is a registered trademark of Oracle Corporation.

UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group.

Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or registered trademarks of Citrix Systems, Inc.

HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C®, World Wide Web Consortium, Massachusetts Institute of Technology.

Java is a registered trademark of Sun Microsystems, Inc.

JavaScript is a registered trademark of Sun Microsystems, Inc., used under license for technology invented and implemented by Netscape.

SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP Business ByDesign, and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and other countries.

Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius, and other Business Objects products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of Business Objects S.A. in the United States and in other countries. Business Objects is an SAP company.

All other product and service names mentioned are the trademarks of their respective companies. Data contained in this document serves informational purposes only. National product specifications may vary.

These materials are subject to change without notice. These materials are provided by SAP AG and its affiliated companies ("SAP Group") for informational purposes only, without representation or warranty of any kind, and SAP Group shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP Group products and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty.

how to guide-mobile application for handheld

Documents