Android Web Wigets

www.it-ebooks.info For your convenience Apress has placed some of the front matter material after the index. Please use the Bookmarks and Contents at a Glance links to access them. www.it-ebooks.info iv Contents at a Glance Contents v About the Authors ix About the Technical Reviewer x Acknowledgments . xi Introduction xii ■Chapter 1: Harnessing the Power of the Mobile Web 1 ■Chapter 2: Twitter Applications: Who's That Tweet? 21 ■Chapter 3: Twitter Applications: I Love Ham . 39 ■Chapter 4: Basic Planning and Structuring of Your Application . 49 ■Chapter 5: Handling Multiple Screen Resolutions with CSS 3 . 65 ■Chapter 6: Handling Different Browser Platforms . 85 ■Chapter 7: Building an Impressive User Experience with jQuery Mobile 99 ■Chapter 8: Building Visually Rich Internet Applications 121 ■Chapter 9: HTML5 Location-Based Applications . 145 ■Chapter 10: Using Cloud Web Widgets on Android MobileMonday Developer Day, Dusseldorf, 23 February 2010 Status Quo: Ecosystem View • • • • Android is not YAMP! (Yet Another Mobile Platform) Pervasive, rich, attractive, (mostly) open Enjoys wide industry support Shipping 60,000 cell phones per day (but still competing for market share) • Used increasingly in non-mobile verticals, such as smart home • Paradigm shift for mobile Java Status Quo: Developer View • Android is YAMP in their portfolio! • Requires new porting efforts, knowledge, testing, devices, marketing • Avalanche of versions (1.0-2.1) in just two years! • OEMs & operators customize UI, features, APIs to bring value and differentiate • Different features and screen sizes to be addressed Porting for and within Android ecosystem is a full time job! Q: What happens in 2-5 years? Source: abcnews.go.com Hopefully not! Can web apps help? Mobile Web App Ecosystem Browser Web Server Web Server Web Server Traditional Approach to Mobile Web Apps Advantages: • Easy, easy, easy! • Common web technologies, portable, variety of tools • Lots of web developers  • Apps in the cloud easy to update Disadvantages: • No integration with phone functions, like location, messaging, PIM, address book, etc • Data bandwidth • No offline mode • Web page lifecycle doesn’t feel like native app How about web widgets? Web Widgets (for Mobile) Define web widget: • Application, written using common web technologies (HTML, JS, SVG, Flash, etc.) • Deployed as a single package file into the end user's browser • Processed and interpreted as a set of locally-hosted web pages • Obeying lifecycle, security and networking requirements • Lifecycle feels like a native app • Originally developed by Opera and called Opera Widgets: http://widgets.opera.com • Evolved further into W3C Widget specification: http://www.w3.org/TR/widgets/ Web Widget Ecosystem Widget Browser Web Server Web Servic e xyz Server Web Widgets (for Mobile) Advantages: • Easy, easy, easy! • Common web technologies, portable, several SDKs • Lots of web developers  • Works in offline mode • Lifecycle feels like a native app Disadvantages: • No integration with phone functions, like location, messaging, PIM, address book, etc What about JIL/BONDI/WAC? Beyond W3C Widgets • BONDI “uses web technologies and builds upon them to provide new APIs to the key mobile phone functionality like Contacts, Calendar, Messaging & Location” • JIL will “enable different widgets and applications to run seamlessly on different handset platforms and operating systems across different mobile operators, while safeguarding customer security, data privacy and billing systems” • Wholesale Applications Community (WAC) “aims to unite a fragmented marketplace by involving players from all related industries to create a community based on openness and transparency to the benefit of all” Translation please: cross-platform app model, based on W3C Widgets, extended by built-in JavaScript APIs for device access Use Cases • Social Address Book – Contact list from the native address book – Existing Facebook friends automatically detected – Direct access to the friend’s wall – Messaging editor with merged SMS and Facebook history – Buttons to initiate a voice/video call • Sticky GeoNotes – Paper notes are so lame  – Leave a text/voice/video message for your family and colleagues – Based on your current location Enriched Web Widget Ecosystem Browser Widget Web Server Web Servic e Camera Gallery Locatio n PIM File Messagin g xyz Server Why Should You Care? • • • • Too many BIG players pushing for it! JIL devices shipped in 2009 BONDI devices shipping in 2010 Cross-platform apps easier to develop! But beware of these pitfalls: • Browser-specifc workarounds • Screen sizes and orientation • Large amounts of business logic and networking code in JS may not be too much fun Beyond JIL/BONDI/WAC (Problem solved! What else can we ask for?) Beyond JIL/BONDI/WAC Wouldn’t you like to: … expose your own services to widgets? … write business logic in Java rather than JavaScript? … write networking code in Java rather than JavaScript? … leave the widget code to UI designers and developers? You’d be out of luck nowadays: current implementations don’t provide means to extend the device APIs Mobile OSGi But there are efforts in that direction based on mobile OSGi: • OSGi used on mobile, embedded, smart home, enterprise platforms, and spreading • Mobile OSGi (JSR 232) deployed on a wide variety of mobile platforms (Android, Symbian, WM, BREW) • Enables dynamic code deployment and update, dynamic service wiring, code reuse, versioning and more: http://www.osgi.org/About/WhyOSGi • OSGi complements, not replaces Android platform http://www.osgi.org/About/Technology Mobile OSGi + Web Widgets Browser Widget Web Server Web Server App Service Mobile OSGi Camera Gallery Locatio n PIM File Messagin g Web Servic e xyz Server Remote OSGi Services Mobile OSGi and Web Widgets? So, how does it work: Step 1: Design ...Oehlman Blanc Companion eBook Available Trim: 7.5 x 9.25 spine = 0.875" 392 page count 444ppi The “Build Once” Approach for Mobile App Development COMPANION eBOOK SEE LAST PAGE FOR DETAILS ON $10 eBOOK VERSION US $44.99 Shelve in Mobile Computing User level: Intermediate–Advanced www.apress.com SOURCE CODE ONLINE BOOKS FOR PROFESSIONALS BY PROFESSIONALS ® ISBN 978-1-4302-2629-1 9 781430 226291 54499 this print for content only—size & color not accurate CYAN MAGENTA YELLOW BLACK PANTONE 123 C SPOT MATTE D eveloping applications for Android and other mobile devices using web technologies is now well within reach. When the capabilities of HTML5 are combined with CSS3 and JavaScript, web application developers have an opportunity to develop compelling mobile applications using familiar tools. Not only is it possible to build mobile web apps that feel as good as native apps, but also to write an application once and have it run a variety of dier- ent devices. Pro Android Web Apps teaches developers already familiar with web appli- cation development how to code and structure a web app for use on the Android mobile platform. • Learn how to structure mobile web apps through real-world application examples. • Discover what cloud platforms such as Google App Engine have to oer Android web apps. • Get a real picture of the status of HTML5 on Android and other mobile devices. • Understand how to use native bridging frameworks such as PhoneGap to device-level features. • Explore the dierent UI frameworks that are available for building mobile web apps. • Learn how to include mapping and leverage Location-Based Services in mobile web apps. • Enable social integration with your Android web. After reading Pro Android Web Apps, you will have a greater understanding of not only the world of web apps on Android, but also how to leverage additional tools. Through the practical samples in the book, you will gain solid exposure of where the opportunities and challenges lie when building mobile apps the web way. ISBN 978-1-4302-3276-6 9 781430 232766 54499 Pro Android Web Apps Develop for Android Using HTML5, CSS3 & JavaScript Damon Oehlman | Sébastien Blanc Android Web Apps Pro iv For your convenience Apress has placed some of the front matter material after the index. Please use the Bookmarks and Contents at a Glance links to access them. iii Contents at a Glance ■Contents v ■About the Authors x ■About the Technical Reviewer xi ■Acknowledgments xii ■Introduction xiii ■Chapter 1: Getting Started 1 ■Chapter 2: Building a Mobile HTML Entry Form 21 ■Chapter 3: HTML5 Storage APIs 47 ■Chapter 4: Constructing a Multipage App 65 ■Chapter 5: Synchronizing with the Cloud 95 ■Chapter 6: Competing with Native Apps 111 ■Chapter 7: Exploring Interactivity 129 ■Chapter 8: Location-Based Services and Mobile Mapping 161 ■Chapter 9: Native Bridging with PhoneGap 193 ■Chapter 10: Integrating with Social APIs 221 ■Chapter 11: Mobile UI Frameworks Compared 255 ■Chapter 12: Polishing and Packaging an App for Release 299 ■Chapter 13: The Future of Mobile Computing 337 ■Appendix: Debugging Android Web Apps 351 ■Index 359 ■ CONTENTS xiii Introduction As we move into a world where mobile devices are becoming the primary mechanism for people to connect with the Internet, it should come as no surprise that the ability to develop applications for mobile devices is becoming a sought after skill. We also have very strong vendor competition in the space, resulting in a marketplace filled with a variety of [...]... " i n cy dg Wi dge et t s icon Widg t rc dg > =" s/i et g ht ml "/> "/ > Web Widget Ecosystem Widget Browser Web Server Web Servic e xyz Server Web Widgets (for Mobile) Advantages: • Easy, easy, easy! • Common web technologies, portable, several SDKs • Lots of web developers  • Works in offline mode • Lifecycle feels like a native app Disadvantages: • No integration... platforms (Android, Symbian, WM, BREW) • Enables dynamic code deployment and update, dynamic service wiring, code reuse, versioning and more: http://www.osgi.org/About/WhyOSGi • OSGi complements, not replaces Android platform http://www.osgi.org/About/Technology Mobile OSGi + Web Widgets Browser Widget Web Server Web Server App Service Mobile OSGi Camera Gallery Locatio n PIM File Messagin g Web Servic... RSR.bind(“MyService”); Step 4: Invoke a function on the proxy service object so.doSomething(“param”); Easy enough! Conclusion  Web Widgets increasingly seen as a crossplatform app model with huge market potential  Android- based devices supporting Web Widgets are shipping now  Web Widgets are empowered with rich device access capabilities  Mobile OSGi offers a middleware solution to allow dynamic APIs... initiate a voice/video call • Sticky GeoNotes – Paper notes are so lame  – Leave a text/voice/video message for your family and colleagues – Based on your current location Enriched Web Widget Ecosystem Browser Widget Web Server Web Servic e Camera Gallery Locatio n PIM File Messagin g xyz Server Why Should You Care? • • • • Too many BIG players pushing for it! JIL devices shipped in 2009 BONDI devices... mode • Lifecycle feels like a native app Disadvantages: • No integration with phone functions, like location, messaging, PIM, address book, etc What about JIL/BONDI/WAC? Beyond W3C Widgets • BONDI “uses web technologies and builds upon them to provide new APIs to the key mobile phone functionality like Contacts, Calendar, Messaging & Location” • JIL will “enable different widgets and applications to run... http://www.osgi.org/About/Technology Mobile OSGi + Web Widgets Browser Widget Web Server Web Server App Service Mobile OSGi Camera Gallery Locatio n PIM File Messagin g Web Servic e xyz Server Remote OSGi Services Mobile OSGi and Web Widgets? So, how does it work: Step 1: Design and implement your service in Java public interface MyService { public void doSomething(String param); } Step 2: Register in OSGi as “remotable” service.. .Web Widget Anatomy • • • • • Packaging format: single zip file, wgt extension Mime type: application/widget Configuration (manifest) file: config.xml Entry point: index.html or custom file Content: HTML, ... within Android ecosystem is a full time job! Q: What happens in 2-5 years? Source: abcnews.go.com Hopefully not! Can web apps help? Mobile Web App Ecosystem Browser Web Server Web Server Web Server... > Web Widget Ecosystem Widget Browser Web Server Web Servic e xyz Server Web Widgets (for Mobile) Advantages: • Easy, easy, easy! • Common web technologies, portable, several SDKs • Lots of web. .. • No offline mode • Web page lifecycle doesn’t feel like native app How about web widgets? Web Widgets (for Mobile) Define web widget: • Application, written using common web technologies (HTML,