Enabling Mobile Access to Blackberry and Pocket PC Devices by e-One Group

Session ID: MCA151 Enabling Mobile Access to Blackberry and Pocket PC Devices

Contributing Speaker(s) For TechEd US Wei-Guo Peng Web Dynpro Development, SAP NetWeaver Mobile, SAP AG

Markus Cherdron Development Architect, NWF Application UI, SAP AG

For TechEd Munich Karin Schattka Product Management, SAP NetWeaver Mobile, SAP AG

Fridtjof Gräf Web Dynpro Development, SAP NetWeaver Mobile, SAP AG

Agenda

Introduction into Web Dynpro Programming Model Development Environment

Multichannel access How to extend Web Dynpro applications for desktop browser to support Pocket PC devices BlackBerry devices

Summary

ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 3

Agenda

Introduction into Web Dynpro Programming Model Development Environment

Multichannel access How to extend Web Dynpro applications for desktop browser to support Pocket PC devices BlackBerry devices

Summary

ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 4

SAP NetWeaverTM The total integration and appllication platform for lower TCO SAP NetWeaver PEOPLE INTEGRATION

Portal

Collaboration

INFORMATION INTEGRATION Bus. Intellig.

Knowledge Mgmt

Master Data Management PROCESS INTEGRATION Integration Broker

Bus. Process Mgmt

APPLICATION PLATFORM J2EEJ2EE

ABAP

DB and OS Abstraction .. ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 5

LIFE CYCLE MANAGEMENT

COMPOSITE APPLICATION FRAMEWORK

Multi channel access

''Web Dynpro is SAP's development and runtime environment to create professional user interfaces for business applications powered by SAP NetWeaver''

Web Dynpro – End-to-end J2EE Framework Implements standard J2EE best practices Model-View-Controller (MVC) Design Pattern for decoupling presentation layer and the business layer Web Clients

Wireless Clients

Smart Clients

Browser technology

Mobile Devices, e.g. BlackBerry

Web Dynpro Client for Java

View View

Controller Model © SAP AG 2004, SAP TechEd / MCA151 / 6

Future Technologies …

Model View Controller (MVC) Handles Handles events events Updates Updates application application data data Defines Defines control control flow flow

Request

Controller

Defines Defines application application data data Usually Usually connected connected to to business business functionality functionality

Model

Response

ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 7

View

Visualizes Visualizes the the application application data data

Web Dynpro Programming Paradigm Reach a Wide Audience Bring the power of J2EE to the application developers

Increase Productivity and Ease of Use Visual and declarative development by using the SAP Developer Network based on the powerful Eclipse framework Reusable components, less coding Underlying code is always accessible

Complete and Integrated SAP NetWeaver Development Infrastructure delivers support the full development lifecycle

Focus on the application Building professional business application

ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 8

Web Dynpro Components Web Dynpro Application

Web Dynpro Application

Reuse

Web Dynpro Component 1 (Root)

Reuse Component 2

Component Component 33

Component 44 Component

Component 5

Web Dynpro Components allow structuring complex Web applications and developing reusable, interacting entities => Save costs and developer resources by using and providing reusable components

ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 9

Controllers for Data Flow Within WD Application Bind data to UI elements

View Controller Context RootNode MyFirstNode ... MyScndNode FirstAttr ScndAttr ThrdAttr ... MyThrdNode ...

Custom Coding Event handlers Methods Supply functions

Bind data to backend model

Model

Custom Controller Context RootNode MyFirstNode ... MyScndNode FirstAttr ScndAttr ThrdAttr ... MyThrdNode ...

Custom Coding Event handlers Methods Supply functions

Map data

ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 10

Logical Web Dynpro Application Structure

Work on logical entities instead of physical files

Highly structured Web Dynpro application

Web Dynpro Explorer as starting point for any edit process

Quick navigation through WD application ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 11

SAP NetWeaver Developer Studio Standard and SAP technology

Logical Display of Web Dynpro Application

Work online and offline Graphical Application Implementation

Direct Navigation to Data Definition

Plug-in additional tools Graphical View Design ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 12

SAP toolsets for complete development lifecycle

Graphical Application Design and Implementation

Simply draw a line for defining navigation between application elements

Easily implement the application entities via drag & drop function

ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 13

Embed layout entities, or create new ones

View Designer - WYSIWYG Specific number of user interface elements for mobile application development

Data source display within View Designer Large number of user interface elements

ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 14

Data Modeler

Nest components with graphical support

Define data flow between WD application entities

Overview tab for complex applications ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 15

Graphical Model Binding

Context tree

Drag & Drop

Structure Mapping

Attribute Mapping

ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 16

Backend Model

Integration into SAP Java Development Infrastructure Tool Integration Framework – SAP NetWeaver Developer Studio SAP JDI Change Management Service (CMS)

Component Build Service (CBS)

Java

J2EE

Java Dictionary

SQLJ

Web Services Check-in, check-out

Web Dynpro

SAP Integration Framework Eclipse Plugin Framework © SAP AG 2004, SAP TechEd / MCA151 / 17

Design Time Repository (DTR)

Deploy

SAP Web Application Server

Exercise 1 “Hello World” Web Dynpro Application Create your first Web Dynpro application

Hello World Web Dynpro Application – 1 Create a Web Dynpro project Project name: “Hello_World”

Create a Web Dynpro Component with an embedded view Component name: “HelloWorldComponent” Package name: “com.sap.helloworld” View name: “HelloWorldView”

Change the TextView-child Open the perspective of the HelloWorldView Change the text property of the text view in “Hello World!”

Hello World Web Dynpro Application – 2 Create an application Application name: “HelloWorldApplication” Package name: “com.sap.helloworld”

Deploy and run Alternate mouse button click on the new HelloWorldApplication Deploy and run

Enter SDM password For TechEd in Munich it is “sapsap” For TechEd in San Diego it is “admin”

Agenda

Introduction into Web Dynpro Programming Model Development Environment

Multichannel access How to extend Web Dynpro applications for desktop browser to support Pocket PC devices BlackBerry devices

Summary

ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 21

SAP NetWeaver – Multichannel Capabilties SAP NetWeaver™ SAP NetWeaver Mobile

PEOPLE INTEGRATION

Multi-channel access Collaboration

Mobile Browser Client INFORMATION INTEGRATION Bus. Intelligence

Knowledge Mgmt

Master Data Mgmt PROCESS INTEGRATION Integration Broker

Business Process Mgmt

APPLICATION PLATFORM J2EE

Life Cycle Mgmt

Composite Application Framework

Portal

Mobile Java Client

Mobile .Net Client (mySAP CRM) Auto-ID SMS, Fax, Email Web-based GUI Voice Application Framework *)

ABAP

DB and OS Abstraction

*) not in NW04 © SAP AG 2004, SAP TechEd / MCA151 / 22

SAP NetWeaver Mobile â&#x20AC;&#x201C; Technology Overview Mobile Java Client Optimized for handheld based disconnected applications with lean function set and small footprint, such as Mobile Asset Management Technology: SAP Mobile Infrastructure

Mobile .Net Client (mySAP CRM) Designed for windows-based disconnected applications with a rich function set, such as mySAP CRM Field Applications Technology: CRM Mobile Client Component

Mobile Browser Client Optimized for mobile devices with online connectivity without client footprint, such as SAP Mobile Sales Online Technology: Mobile Web Dynpro WebSAPConsole

ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 23

Agenda

Introduction into Web Dynpro Programming Model Development Environment

Multi-channel access How to extend Web Dynpro applications for desktop browser to support Pocket PC devices BlackBerry devices

Summary

ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 24

Technology: Mobile Web Dynpro „Mobile Web Dynpro as part of SAP NetWeaver implements Mobile Browser Client capabilities“

Connected Operation Device Recognition Web Dynpro Rendering / Eventing Different markup languages Mobile Device (Browser)

Development Environment Web Dynpro metadata model

Web Dynpro Runtime

SAP NetWeaver Dev Studio

Solution Management

Web Application Server

Based on Web Application Server BI XI CRM CRM

ERP … Third Party Systems

BI SCM Reports

SAP NetWeaver 2004 Mobile Architecture

SAP NetWeaver Admin & Monitoring

WebConsole CCMS Agent

Handheld

MI 2.5 (offline)

RFID

Web SAPConsole (online)

Laptop

Mobile Web Dynpro (online)

Web Application Server 6.40

Auto-ID

Voice

Fax, Email, SMS

MDK

Web-based GUI

SAP NetWeaver Multichannel Access ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 26

SAP NW 2004 Mobile

SAP NetWeaver Developer Studio

Phones

online offline

Mobile Web Dynpro Architecture – Overview Browserbased Devices

Backend

Web Application Server http request

Device and Browser Recognition

CRM CRM Model Layer PIE Client

WML Client (RIM)

<Other> Client

Renderer Events UI Tree

Renderer Renderer Events Events

SCM SCM RFC BAPI Web Service …

PLM PLM

UI Tree Data Data

UI Tree Data

http response

R/3 R/3 R/3 R/3 Unified Rendering Web Dynpro Runtime

Mobile Web Dynpro Architecture for BlackBerry SAP NetWeaver Developer Studio

Deploy

RIM Simulator

Test Use Firewall

SAP Web Application Server

Backend

SAP Web Application Server with Web Dynpro runtime

ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 28

BlackBerry Mobile Data Service (MDS) RIM BlackBerry Enterprise Server

Mobile Developer and Mobile User

Desktop Developer

Mobile Developer

Desktop User

Intranet 10MB - 100MB

Mobile User

Intranet 10MB - 100MB

Mobile Device

Wireless 9.6K - 64K - 1MB

J2EE Web AS

ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 29

WML XHTMLBasic

HTML

NetWeaver Developer Studio

Deploy Web Dynpro Java Runtime

SAP NetWeaver Developer Studio

ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 30

UI Elements on different browsers Pocket PC

BlackBerry Button • displayed as a link

CheckBox • displayed as a WML tag <select> • Selection by pressing spacebar

DropDown

UI Elements on different browsers Pocket PC

BlackBerry Group

InputField • Uses the full screen width

Link

UI Elements on different browsers Pocket PC

BlackBerry RadioButton

TextView

TextEdit

ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 33

UI Elements on different browsers Pocket PC

BlackBerry Image

Table

ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 34

UI Elements provided for Pocket PC and BlackBerry BlackBerry UI Elements Button, Caption, CheckBox, CheckBoxGroup, DropDownByIndex, DropDownByKey, Group, Image, InputField, Label, LinkToAction, LinkToURL, RadioButton, RadioButtonGroupByIndex, RadioButtonGroupByKey, Table, TextEdit, TextView, TransparentContainer, ViewContainerUIElement Pocket PC UI Elements Button, Caption, CheckBox, CheckBoxGroup, DropDownByIndex, DropDownByKey, Group, Image, InputField, Label, LinkToAction, LinkToURL, RadioButton, RadioButtonGroupByIndex, RadioButtonGroupByKey, Table, TabStrip,TextEdit, TextView, TransparentContainer, Tray, ViewContainerUIElement, BarCodeReader, FunctionKey, RFIDReader

ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 35

A working Example…

…on MS IE 6.0

…on a Pocket PC

…on a BlackBerry Wirless Handheld

Installing BlackBerry Emulator http://www.blackberry.net/developers/na/java/tools/index.shtml Install 1) BlackBerry JDE v3.7, Date Posted: 16/09/03 2) BlackBerry 7200 Simulator for JDE v3.7.0.54, Date Posted: 25/09/03 Using 1) Open first MDS Simulator 2) And then the Device Simulator

ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 37

Basic handling hints Highlighting of application icons and links is done by either turning the wheel of your wheel mouse or by pressing cursor-down / cursor-up. Selection is done by either pressing the wheel of your wheel mouse or by pressing the return-key of your keyboard. When selecting a link the new page is not called immediately but a kind of context menu is raised. This menu can be raised as well by pressing the wheel of your wheel mouse elsewhere on the screen. Highlighting a menu item in the context menu is done by either turning the wheel of your wheel mouse or by pressing cursor-down / cursor-up. Selection of a menu item is done by either pressing the wheel of your wheel mouse or by pressing the return-key of your keyboard. ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 38

Exercise 2 1) Learn how to use the emulator 2) Type in the URL from „Hello World“ by using the keyboard

BlackBerry Emulator Select browser using cursor down or up

ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 40

BlackBerry Emulator Open the browser by using cursor left

ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 41

BlackBerry Emulator Press cursor left in order to get the menu Use cursor down in order to choose „Add Bookmark“ Enter

Exercise 2 Type in the URL from „Hello World“ by using the keyboard

Exercise 2 If the keyboard does not work, choose the symbol key on the emulator and use the symbols on the screen

ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 44

Exercise 2 Create a title and choose ADD

ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 45

Exercise 2

Exercise 3 Please visit the exercise book!

ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 47

Mobile Web Dynpro Architecture – Mobile App Development

For Mobile Online Applications Development you … use the same Web Dynpro Meta-Data-Model … use the same IDE SAP NetWeaver Developer Studio … use the same UI elements … use the same features like backend connection

Agenda

Introduction into Web Dynpro Programming Model Development Environment

Multichannel access How to extend Web Dynpro applications for desktop browser to support Pocket PC devices BlackBerry devices

Summary

ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 49

Mobile Web Dynpro in a Nutshell Support for connected browser-based devices No installation on the device Available with SAP NetWeaver `04 Based on Web Dynpro Fully integrated into the SAP NetWeaver Developer Studio Supports UI elements for Pocket PC devices and BlackBerry Wireless Handheld devices Standard Web Dynpro UI elements, e.g. InputField, Table Device specific UI Elements, e.g. BarcodeReader, RFIDReader

First mobile online application on BlackBerry devices: Mobile Sales Online (based on CRM 3.0)

ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 50

SAP Custom Development

SAP Custom Development Mission

MISSION To provide globally best-in-class custom software development services for innovative business solutions, enabling our customers to achieve their business objectives and to better serve their customers.

ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 52

SAP Custom Development Today

6 development centers 600+ employees 50+ projects managed in parallel 45% growth in headcount expected in 2004 Headcount growth planned primarily in India and China

ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 53

SAP Customer Services Network

SAP Customer Services Network provides the most comprehensive SAP solution services, including Consulting Education Support Custom Development Hosting

ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 54

SAP Custom Development Service Offering

Custom Development Projects

Premium Custom Development Services

Custom Development Continuous Improvement

ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 55

SAP Custom Development Projects

SAP Custom Development Strategic Planning SAP Custom Development Project Management SAP Custom Development Quality Assurance SAP Custom Development Risk Assessment

SAP Custom Development Maintenance SAP Modification Clearing

Providing Custom Development Around the Globe

Walldorf St.Ingbert Chicago Newtown Square

Shanghai

Palo Alto

Tokyo Brussels Atlanta

Bangalore Development Sales Support ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 56

Excellence of Execution Excellence in execution of custom development projects is based on solidly defined phases and processes.

Evaluation

Contract Negotiation

Customer Acceptance and Delivery

Development and Test

Evaluation

Specification Design

Realization

Test

Component Validation / Assembly

Project, Quality and Risk Management

Definition of global processes and responsibilities

Defined deliverables per phase and service

Best of proven templates, standards and quality guidelines

ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 57

Customer Acceptance

Maintenance

Excellence of Execution Excellence in execution of custom development projects is based on solidly defined phases and processes.

Evaluation

Contract Negotiation

Customer Acceptance and Delivery

Development and Test

Evaluation

Specification Design

Realization

Test

Component Validation / Assembly

Project, Quality and Risk Management

Definition of global processes and responsibilities

Defined deliverables per phase and service

Best of proven templates, standards and quality guidelines

ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 58

Customer Acceptance

Maintenance

Benefits

By engaging SAP Custom Development, you ensure high-quality custom developed mobile solutions that: Enable you to remain innovative with your SAP investment Address your unique mobile business requirements Extend the reach of your existing SAP solutions with custom mobile solutions Maximize your mobility across the globe, across the country or in a location Accelerate your time to market with innovative mobile solutions Ensure quality and speed of delivery with proven development methodology Mitigate business risk by synchronizing with SAP release strategy Protect your custom mobile investment with long-term maintenance options

ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 59

For More Information…

Contact your local account executive or Mark Cordrey (mark.cordrey@sap.com) North America Latin America Asia Pacific

Andreas Schaefers (andreas.schaefers@sap.com) Europe Middle East Africa Japan

http://www.sap.com/services/customdev/

Further Information Public Web: www.sap.com SAP Developer Network: www.sdn.sap.com Mobile Infrastructure SAP Developer Network: www.sdn.sap.com Web Application Server Web Dynpro SAP Customer Services Network: www.sap.com/services/

Related SAP Education Training Opportunities http://www.sap.com/usa/education/

Related Workshops/Lectures at SAP TechEd 2004 MCA101 Implementing SAP Solutions for Mobile Business: Lessons Learned MCA102 Voice Enabled Warehouse Picking MCA151 Enabling Mobile Access to Blackberry and Pocket PC Devices Based on SAP NetWeaver '04 MCA201 Using WebSAPConsole for RF MCA203 Wireless Sensor Networks: Technology beyond Auto-ID MCA251 SAP NetWeaver Mobile - Mobile Client Technology MCA252 Developing Disconnected Mobile Apps Based on SAP NetWeaver '04 MCA351 SAP Mobile Asset Management: Overview and Custom Enhancements ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 61

SAP Developer Network Look for SAP TechEd ’04 presentations and videos on the SAP Developer Network. Coming in December. http://www.sdn.sap.com/

Questions?

Feedback Please complete your session evaluation. Be courteous — deposit your trash, and do not take the handouts for the following session.

Thank You !

Copyright 2004 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, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation. IBM, DB2, DB2 Universal Database, OS/2, Parallel Sysplex, MVS/ESA, AIX, S/390, AS/400, OS/390, OS/400, iSeries, pSeries, xSeries, zSeries, z/OS, AFP, Intelligent Miner, WebSphere, Netfinity, Tivoli, and Informix are trademarks or registered trademarks of IBM Corporation 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. MaxDB is a trademark of MySQL AB, Sweden. SAP, R/3, mySAP, mySAP.com, xApps, xApp, SAP NetWeaver 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 in several other countries all over the world. 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. ÂŠ SAP AG 2004, SAP TechEd / MCA151 / 65