SEP 806: Advanced Mobile Application Building Techniques

1. SEP 806: Advanced Mobile Application Building Techniques Jagdish Bansiya, Ph.D. Director Of Engineering jbansiya@sybase.com August 15-19, 2004

2. Agenda • The Unwired Enterprise • Introducing the Unwired Accelerator (UA) 6.1 • Platform and Devices • Architecture • Mobile Web Studio – Feature Overview • Building Mobile Apps • FAQ • Trouble Shooting • Resources and Documentations

3. The Enterprise. Unwired.

4. The Enterprise. Unwired. Industry and Cross Platform Solutions Manage Information Unwire Information Unwire People • Adaptive Server Enterprise • Adaptive Server Anywhere • Sybase IQ • Dynamic Archive • Dynamic ODS • Replication Server • OpenSwitch • Mirror Activator • PowerDesigner • Connectivity Options • EAServer • Industry Warehouse Studio • Unwired Accelerator • Unwired Orchestrator • Unwired Toolkit • Enterprise Portal • Real Time Data Services • SQL Anywhere Studio • M-Business Anywhere • Pylon Family (Mobile Email) • Mobile Sales • XcelleNet Frontline Solutions • PocketBuilder • PowerBuilder Family • AvantGo Sybase Workspace

5. Unwired Accelerator a revolutionary solution for accelerating the mobilization of enterprise applications and data sources for always-available access

6. Trends Towards Mobility – Market Statistics • “There will be 1.1 billion shipments of mobile phones in Asia-Pacific 2006” - DataMonitor • “There will be 300.9 million shipments of Hand-held mobile devices in Asia-Pacific 2006” – DataMonitor • “The mobile market continues to grow at nearly twice the rate of the desktop market.” - GIGA Group • IDC reports the European Mobile Device Market Grew 25 percent in First Quarter of 2004

7. Unwired Accelerator - Benefits • Empower your mobile workers and business professionals by giving them access to the applications and tools on their mobile devices to maintain their productivity outside the office. • Empower your sales force by giving them access to critical sales information and other content sources from their mobile devices – this will lead to increased customer satisfaction. • Gain a competitive advantage by extending the reach of your customer base to mobile users • Create new mobile business opportunities

8. Unwired Accelerator – Value Proposition • The only solution in market for mobilizing existing web applications, web site content, or creating new mobile applications bases on your enterprise data sources without programming • No changes to the legacy applications or data sources are required • A powerful visual development tool for creating new mobile applications to accelerate the development process • Build once and deliver to most mobile devices (PocketPC, Palm, Symbian, Smart Phones, Tablets, Laptops) • No programming is required. • Gives mobile users an always available experience • Supports connected, disconnected and occasionally connected modes • Easy-to-use, easy-to-develop and easy-to-administer • Manage and administer mobile applications, users, and security

9. Build Once – Access Anywhere • Connected/Online access • Laptop/Tablet using Internet Explorer 5.5/6.0 and Netscape 7.1 • PocketPC Internet Explorer • Blackberry/RIM Browser • SmartPhones (WAP enabled) such as • Palm Treo 600 (PalmOne based OS) • Motorola MPx200 (Windows Mobile OS) • Sony Ericsson P900 (Symbian OS) • Or any other phones with WML 1.3/2.0 (OpenWave compliant or cHTML) capable browser • Disconnected Access • Pocket PC based devices using M-Business AnyWhere Client (PDA) • Palm based devices using M-Business AnyWhere Client (PDA/SmartPhones) • Windows Mobile 2003 based SmartPhones using M-Business Client • Symbian based phones • Laptops and TabletPC (next release)

10. Solves Challenges with Mobility

11. UA Conceptual Architecture Unwired Information/Application Unwired Accelerator Data Environment Applications Mobile Portal Server Web Services JSP / ASP Applications Mobile Web Studio XML Doc/Datafeeds HTML Documents M-Business Anywhere Documents Databases

12. UA Solution Architecture Web App Capture Online Browsing XML / Web Services Intranet / Internet Mobile Portal Server Enterprise Applications Online & Offline Browsing ActiveSync Database Access using JDBC GPRS Mobile Web Studio Offline Browsing JSP / Web Application Hotsync Sybase, IBM DB2 Oracle, MS SQL ….etc. M-Business Server (Optional) Online & Offline Browsing PowerBuilder App.

13. UA Built with Proven Technologies • Content Capture • Sybase patented technology for re-purposing web based applications and content • Based on concepts of Fuzzy logic, pattern recognitions, and digital signatures • Mobile Web Studio • Easy to use web based development tool for mobile applications • Wizard driven point and click approach to creating mobile apps using web, database, web services, XML, JSP and ASP content sources • No Programming; Can be used by line of business users • Mobile Portal Server • Handles request from devices and delivers mobile application content • Coordinates interactions with backend systems for SSO and personalization • J2EE based application (web container compliant) • M-Business Anywhere Server (optional) • Reliable, scalable, secure platform for delivering mobile apps and content for occasionally or disconnected usage • Foundation for the 10 Million subscriber AvantGo consumer service for PDA’s

14. Mobile Web Studio • Web based development tool for building and administrating • Mobile application • Templates for device presentation • Composite mobile applications • Organize and manage apps using catalogs, pages and page groups • Role based administration and versioning of apps and templates • Rules based automation • Mobile alerts (SMS) • Schedule tasks • Single-Sign-On and Personalization • User management and security administration • Manage apps and channel subscription and provisioning

15. Mobile Web Studio Runs from Internet Explorer 5.5 and 6.0 • http://<server-name>.<domain>/onepage/index.html or • http://<server-name>.<domain>/onepage/loader.html • Stock login username/password - masuper/m8super

16. Mobile Application Builder • Full build, edit, preview, and debug capabilities for mobile apps • Build mobile app once and use/access from a variety of mobile devices using wizards and dialogs • Build mobile app pages from existing web apps or web site content using • Content Capture • Continuous Content Capture • Build new mobile apps from enterprise data sources such as: • Databases • Web Services • XML feeds and • Microsoft Excel (csv), delimited files • Define device – template associations • Parameterize and personalize

17. Mobile Application Builder

18. Mobile Application Template Builder • Build, customize, and preview templates for mobile devices • Point and click wizards for PDA and SmartPhone template definitions • Templates can be developed as • HTML • XSL • JSP • Provide a number of pre-build default templates out-of-box

19. Mobile Application Template Customization

20. Composite Mobile Application Builder • Build full business solution oriented mobile application • Combine multi app pages into a single composite apps • Organization provides a unit for administration • Provides a common navigation scheme for organizing mobile apps using ‘tabs’ and ‘drop downs’ • Rich interface for consolidated mobile app pages • Connect page interaction using Server-Side Click Across • Tabular data • Text processing • Define charts for presentation • Customize presentation by allowing for post processing operations • Using JSP template based filtering

21. Composite Application Builder - Picture

22. M-Business Anywhere Server 5.5 • Makes mobile applications and channels available in disconnected mode by off lining data, business logic, and presentation to device • Reduces sync times and optimizes on device memory usage by using data compression features • On device form management - Provides capability to make changes on device and synchronize changes back to enterprise • Provision mobile applications and channels • Allows for defining synchronization schedules

23. UA - M-Business Server 5.5 Integrated • M-Business Anywhere Server 5.5 is used like an OEM component by UA • Mobile Web Studio provides seamless options to deploy applications and channels to M-Business • Mobile Web Studio provides full capabilities for administration of mobile apps, channels and groups defined in M-Business • Integrated user management • UA users can automatically be created in M-Business server • Default UA license allows for 5 user development license of M-Business Anywhere server

24. Simulate Preview & Test Refine Mobile Web Studio Deploy & Test Define Web App / Web Site Mobile App / Channel Re-define & Refine Actual Device Data Based Web Service Mobile Application Development Process • Procedure: • Define – Data Extraction / Sub Setting / User Profiling • Refine Presentation – Customization / Template • Iterate

25. Mobile Applications Types • Structured/Tabular data Mobile Apps – Read-Only • All pages have tabular data • Used the ‘Grid’ split/define/filter wizard to define the content for the app pages • Can include images • Tabular data mobile apps with Update • Local data is changed instantaneously • Enterprise data is changed at sync time using offline form submission • Optimistic concurrency control implemented for multi-user update • HTML channels • Read only spider-ed html pages • Form based channels • Fill forms that are submitted at sync time • Drill-down charting apps • Deployed as channels • Linked Image maps

26. Mobilizing an Existing Web App - CustomerView • Create a mobile app for the enterprise customer view app • http://localhost:4040/custview/Search.jsp • Login as demo/demo, do a search for ‘Wells Fargo’ • Include fields 1-3 • Click on the ‘Continuous capture’ button and repeat the process on 2 records • Save application – CustomerView • Parameterize the ‘companyName’ parameter to be of select type with default value of Wells Fargo,Morgan Stanley,Oracle • Create a database personalization key called ‘MyCustomers’ and associate this to the ‘companyName’ parameter • This application demonstrates the following features • Use of Continuous Capture for tabular data • Parameterization/externalization of a form field, making it a select field with default options defined and Personalization of a parameter for use with user profile • Segmentation of data for mobile application based on user profile

27. Deploying CustomerView As Mobile App • A Mobile Application is characterized by • Data on device – local database • M-Business Anywhere uses a plugin technology called POD for this purpose • Business logic (written in Java script) transferred and executed on the device • Presentation generated using html that was transferred and rendered offline • For Disconnected/Occasionally connected usage deploy app to M-Business • Select a MBusiness group to deploy the application • Three URL references are created in M-business server for the mobile application that refer back to the UA Mobile Portal Server, Click on the Additional Information Icon to see and preview these references • XML Location - http://demo.sybase.com:4040/onepage/servlet/UWPServlet?wid=231&rid=21&cmd=mapp-xml • XSD Location - http://demo.sybase.com:4040/onepage/servlet/UWPServlet?wid=231&rid=21&cmd=mapp-xsd • BLUI Location - http://demo.sybase.com:4040/onepage/servlet/UWPServlet?wid=231&rid=21&cmd=mapp-blui • Structured/Tabular data

28. Deploying CustomerView as Mobile Channel • Channels are made-up of 1 or more HTML pages which are locally available on the device • Channels are defined by a URL reference that returns html content • Channels can be configured to spider links and images on html pages • Deployed to a group or as public channel

29. Mobile Apps vs Channel

30. Troubleshooting Mobile App • If deploying the mobile app as an Mbusiness enterprise app, then the content pages all need have tabular data I.e. the data should have been processed through the GridRules screens • If you get a message ‘No XML Data’ on the ‘BLUI’ preview or on the PDA, chances are your app data contains accented or special characters; change the content character set of the app in the properties screen to be ‘utf-8’, save, and retry • Don’t check the ‘Protected’ check-box when deploying the mobile app • If you see the warning message ‘There is an error in this applications content’ on the PDA, chances are the app could not reach its data source, or the defined data doesn’t exist • ‘avantgo.db is not installed’ – The app requires a local database POD. The POD is available for PocketPC and Palm V based devices only. • Set content cache to real-time

31. Troubleshooting Mobile Channels • For channels with tabular data you can assign the JSP filter template ‘MBChannel-basic’ • You may need to up your channel size because of the style tags inserted for each data element • Check the channel properties such as • Spider/link depth • Max size for the channel • Include images/include off site images

32. Mobilize content from a Web Site – Yahoo Actives • Create a mobile app that gets the most actives list from yahoo and then allows for drilling down on details of each stock in the actives list • http://localhost:4040/finance/index.jsp • Split ‘column 3 and 6’ on a space separator • Edit record 1, field 3 to change value to ‘last trade’ • Include fields 1,3,6,8 • ‘Continue’ with ‘Continuous Capture’ to define the contents for the link (active details • Select the table, in the Define screen select ‘Record Layout’ as Columns and ‘Records contain labels’ set to 1 • This use cases demonstrates the use of following features • Navigation to any page on a web site • Capturing data (tabular in this example) for the first page • Defining/refining the drill down page’s content using Continuous capture • Use of ‘Split’, ‘Define’, ‘Filter’ screens to customize structure/tabular data to make it suitable for small form factor devices

33. Yahoo Actives with Server-Side ClickAcross • Create a mobile app that gets the most actives list from yahoo and then allows for drilling down on details of each stock in the actives list • First build the actives mobile app (lets name this ‘MostActive’) • http://localhost:4040/finance/index.jsp • Split ‘column 3 and 6’ on a space separator • Edit record 1, field 3 to change value to ‘last trade’ • Include fields 1,3,6,8 • Next build the mobile app for getting the stock detail quote (lets name this ‘Quote’) • http://localhost:4040/finance/quote.jsp?s=MSFT • Parameterize the ‘s’ cgi parameter • Approve the ‘Quote’ app • Connect the ‘MostActive’ app to ‘Quote’ app using Server-Side CA wizard • Un-check the ‘Client-Side’ check box • Deploy ‘MostActives’ as a mobile app • This use cases demonstrates the use of following features • Navigation to any page on a web site • Use of ‘Split’, ‘Define’, ‘Filter’ screens to customize structure/tabular data to make it suitable for small form factor devices • Linking two mobile apps into a composite mobile app using ‘Server-Side Click Across’ • Internal spidering of all required data for offline usage

34. Mortgage Rates – Cendant • Mortgage Rates Pages • Century21 http://www.netmovein.com/home/landscape?cid=83331 • ColdWell Banker http://www.netmovein.com/home/landscape?cid=81408 • ERA http://www.netmovein.com/home/landscape?cid=80141 • Get Rates – Parameterize ‘cid’ parameter - http://www.cendantmortgage.com • Mortgage Tools Pages • AffordAbility • Mortgage Loan Status App • jpsid = @OPCOOKIE[jplchk] • Target = %3D @OPCOOKIEENC[jplchk] %26 (not including %26)

35. Form Applications • Deploy the app as a Group or Public channel • If the results of posting the form is tabular data, attach the JSP Template ‘Mbchannelbasic’ that will add row/column styling to the output • Users can define a custom setup page to refine the layout of form fields • Example ‘Affordability’ app from cendant mortgage.com

36. KPI Charting Mobile App • Build a mobile data page using the following csv - Revenues • C:\UA6.1\tomcat\webapps\onepage\portlets\csv\Revenues.csv • Insert column 7, use function value =sum($R0F2:R0F6) for rows 2-6 • Optionally Insert record, use function =sum($R2F0:R6F0) to sum column data • Exclude row 1 • Build a drill down data page using the same csv - RevenuesByRegion • C:\UA6.1\tomcat\webapps\onepage\portlets\csv\Revenues.csv • Select a row of data for charting using the rule include record where @OP["region"="Europe"] • Make ‘region’ as a ‘None’ display type parameter • Include record 1 and exclude column 1 • Define 3D Bar chart for Revenues • 280x200 • Define Category event name ‘region’ and link this to the ‘RevenuesByRegion’ by using sever side CA, exclude legend • Category Label in ‘Column1’, Series data in ‘Column 7’

37. Update Application

38. Optimistic Concurrency Control

39. Personal Mobile Channels • UA’s Portal Interface allows end-users to define personal mobile channel • Using the patented ‘One-Click’ capture technology end-users can point-navigate and capture sections of any web (http) accessible content and create a channels from them • These channels can mark for online or offline usage • End-users can manage and administer their personal channels • Users can share their channels with other registered UA users via email using the ‘Share Page’ functionality

40. Creating Personal Channels • Connect to the UA’s Portal Interface (PI) using • http://<server-name>.<domain>:<port>/onepage/mpindex.jsp • Login or self register • User need to create a page group and page to add their personal channels • Start the ‘Create Portlet’ wizard to define personal channel • http://localhost:4040//finance/index.jsp capture the market summary table • Click on the icon in the title to make a offline channel of the portlet • Go to ‘MyInfo->Mbusiness’ to see a list of your offline channels

41. Adding Support for New WAP-SmartPhones • Add an entry in oem.xml for the new device template • Name a default template • Add an entry in ‘UserAgentMapping.xml’ • Name of the content style for the new device must begin with ‘WAP-’ • Add a default template • For existing portlet to support the new device, edit the portlet, select the device type and assign a template for the new device type

42. Custom WAP template • Use user-agent parameter from http request to decide on which template to use for the request • Extend and implement a known interface • Return the name of the template to use

43. Custom Setup Page • Used to define custom layout for parameters

44. Configuring UA for Machine and Port Changes • \onepage\config\Global.properties.xml • Change host name from demo to ua • Change http port from 4040 to 80 • Change https port from 4443 to 443 • Change jdbc port from 4747 to 4750 • tomcat\server.xml • Change http port from 4040 to 80 • change https port from 4443 to 443 • change server port from 4005 to 5005 • Change WrapConnectorto 4008 to 5008 • change JDBCRealm port from 4747 to 4750 • startdb.bat • Change the db start port to 4750 • Change the servername to UWADB_database • M-Business server ports • 8091 - Admin port • 8092 - Sync port • 8443 - Secure Sync port

45. Adding new Resource/Cobrand in UA • Create a new resource in Mobile Web Studio, note the resrc id • Edit the config\oem.xml to add an entry for the new resrc id • <OEMDef rid="211" name="MobileApps" dir="oem/mstudio" styles="/oem/mstudio/defaultStyles.xml" messages="/oem/mstudio/messages.xml" charset="UTF-8“ .. > </OEMDef> • Edit the config\cobrands.xml • Add entry for the new ‘211’ cobrand • Copy the mpindex.jsp to <new-name>.jsp (i.e. cendant.jsp) • Change the default rid to ‘211’ • Copy the mp.jsp to <new-short-name>.jsp (ex. cd.jsp) • Change the default rid to ‘211’ • Import the Login and Welcome portlets • Create a Welcome page and Guest Page group with login and welcome portlets

46. Import/Export • When importing you typically should enable • Override existing entities • Import entities as active and • Set defered update for all portal users • Carefully look at the ‘Log’ after an import and export is performed