<Insert Picture Here>

Terrence BarrSenior Technologist, Mobile & Embedded

Beyond Smartphones:Rich Applications and Services for the Mobile Masses

Important Note

"THE FOLLOWING IS INTENDED TO OUTLINE OUR GENERAL PRODUCT DIRECTION. IT IS INTENDED

FOR INFORMATION PURPOSES ONLY, AND MAY NOT BE INCORPORATED INTO ANY CONTRACT. IT IS NOT A COMMITMENT TO DELIVER ANY MATERIAL, CODE, OR FUNCTIONALITY, AND SHOULD NOT BE RELIED

UPON IN MAKING PURCHASING DECISION. THE DEVELOPMENT, RELEASE, AND TIMING OF ANY

FEATURES OR FUNCTIONALITY DESCRIBED FOR ORACLE'S PRODUCTS REMAINS AT THE SOLE

DISCRETION OF ORACLE."

Goals Of This Talk

Java ME has all the tools to build rich and compelling smartphone-like applications -

Learn how to build the basics of a cool, good-looking social networking mash-up

Note:Due to time constraints we will glance over many details. More info and full source code will be online for further

learning.

<Insert Picture Here>

Program Agenda

• Rich Applications for Mass Markets• Quick Intros

• UI (LWUIT - Lightweight User Interface Toolkit)• Search + Map (Mobile Ajax for Java ME)• Twitter (Twitter API ME + OAuth)

• Demo Scenario and Flows• Code!• Appendix• Q & A

Rich Applications for the Mass MarketUser Experience Drives Emotion, Satisfaction

• User Experience Matters• Smartphones have raised the bar• In todays market, applications and content

must be visually rich and engaging• Good design drives users satisfaction,

productivity, and ultimately, value

• Going after the numbers• Java ME-based deployments (~3 billion)

dwarf smartphones• For many content developers this is where

the bulk of the revenue is

• Java ME lets you deliver to billions

What is LWUIT?Lightweight User Interface Toolkit

• Advanced, lightweight UI library• Compelling UI

• Consistent across different devices

• For todays handsets (and more ...)• Portable

• MIDP, Blackberry, Android, CDC, SE, TV, ...

• Inspired by Swing• Tools support• Open Source!

• GPLv2 + Classpath Exception, free for commercial use• Active community

DemoRich Mobile Java with LWUIT

LWUITKey Benefits

• Rapid development• Familiar API• Clean & simple

• Easy deployment• One jar, many devices

• Consistent & flexible• Customizable, extendable

• “Filthy Rich” UI• Brand-able• Designed for mass market devices

• Tested on broad range of hardware

LWUITKey Features

• Swing-like MVC• Layouts• Fonts• Rich widgets• 3D & SVG integration• Touch screen support• Animations & transitions• Pluggable Look & Feel, theming• I18N/L10N support• ... more

• Identical application code, multiple platforms

Mobile EmulatorMobile Emulator Sony Ericsson G705 HTC Touch Diamond

Cross-Platform ContentLWUIT handles many device-specific details

LWUIT application skeleton

VKBImplementationFactory.init();

Display.init(this);

….

Resources res = Resources.open(“/businessTheme.res");

UIManager.getInstance().setThemeProps(res.getTheme(…));

….

Form searchForm = new SearchForm(…);

searchForm.addCommand(new Command("Search") {

public void actionPerformed(ActionEvent ev) {

showMap(…);

}

});

• RESTful Web Services made easy• Easily consume and integrate RESTful

web services into your mobile app• Open sourced under BSD license

• Mobile Ajax Libraries• Streaming atom, JSON,

expression language, async I/O, blogreading, and more

• Sample Applications• GPS client, Flickr client, Yahoo! Local

search & mapping, Twitter access,more

Mobile Ajax for Java MERESTful Web Services For Your Applications

• Application authentication and authorization• OAuth: Open protocol for flexible and secure authentication

and authorization to Internet services• Increasingly used across the web (Twitter, Facebook,

Yahoo, ...)

• However, an OAuth client is non-trivial to implement• Twitter API ME makes building Twitter clients easy

• Simple API for Java ME, Android, and BlackBerry platforms• Register your app with Twitter• Use the Twitter API ME to log into Twitter and access

authorized resources with a few lines of code

Twitter API ME + OAuthEasy access to Twitter services

DemoDevice & Web Services Mash-Up

• Goal: Build a social networking & LBS mash-up• Combines several popular web services and device features

(GPS, camera, address book) + compelling UI

• Scenario• User is in the city, wants to meet up with friends for dinner• Chooses highly rated restaurant convenient for everyone• Map

• Current user location• The locations of nearby friends• Restaurants in the vicinity

• Directions to selected restaurant overlaid on map• Send out a geo-located Tweet with restaurant information• (Optional) Post camera pic, send SMS

Demo Scenario“Meet Me For Dinner”

1. Get current location of user via device built-in GPS

2. Get current locations of friends via 3rd party server3. Do local business search with keyword4. Get and display map with markers: user, friends, restaurants 5. Let user browse restaurant details and select a restaurant6. Get directions to restaurant and overlay in map7. (Optional) User takes picture of restaurant8. Tweet “Meet me for dinner” (with optional URL to picture)9. (Optional) Access device address book and send SMS to

friend(s) without Twitter access

Demo FunctionalityHigh-Level Application Flow

• Get locations• Device location via built-in GPS (JSR 172)• Friend locations via 3rd party service• Business POIs via local business search

• Get map centered on user location• Create LWUIT image from map png, use

as background via custom painter

• For each location create a marker• Translate lat/long coordinates into pixel

positions in map• Position marker images (LWUIT labels) in

map using CoordinateLayout

• Display map in LWUIT form

Map Screen

Get current location

//Option 1: JSR-179

LocationProvider lp = LocationProvider.getInstance(null);

Location loc = lp.getLocation(10);

QualifiedCoordinates qc = loc.getQualifiedCoordinates();

//Option 2: by CellID (eg Nokia, SEMC, Samsung, OJWC etc)

String cellid = System.getProperty(X_CELLID_PROP_KEY);

restUrl = http://www.opencellid.org/cell/get? [params]

//Send and parse response

//Option 3: Network APIs, provider specific

Search business

private static final String APPID = ...

private static String LOCAL_BASE =

"http://local.yahooapis.com/LocalSearchService/V3/localSearch";

...

Arg[] args = new Arg[] { ... }; // json, appid, lat, lon, ...

Response response = Request.get(LOCAL_BASE, args, ...);

Result result = response.getResult();

for (i < resultCount) {

poi.address =

result.getAsString("ResultSet.Result["+i+"].Address");

poi.title = ...

...

}

Getting the map

private static final String MAP_BASE =

"http://maps.google.com/maps/api/staticmap";

...

String loc = MAP_BASE + "?" + “center=” +

lat + “,” + lon + “&zoom=” + zoom + ... <params> ;

HttpConnection conn = HttpConnection)Connector.open(loc);

InputStream is = conn.openInputStream();

Image mapImage = Image.createImage(is);

• Improving the user experience• Point-and-click access to all relevant information

within Map Screen• Reduce number of screen transitions• Transparency maintains visual relationship to map

• LWUIT Dialog• Modal• Partly transparent• Smooth fade-in and fade-out transitions• Automatic timeout reduces number of user clicks• Slightly customized (added timeout callback)

Pop-Up Dialogs

• Scrollable list of POIs• Vertical LWUIT list

• Custom fish-eye renderer• Unselected item: Single line POI name• Selected item: Expands to picture, POI

name, and additional info• “Bevel-raised” border• Scrolling behavior is “one margin from the

edge” for better legibility

• Smooth pixel-based & kinetic scrolling out of the box

POI List Screen

• When user clicks on restaurant marker set label state to “selected”• Show restaurant pop-up, allow user to

select POI

• Get map with directions• Get route from user to POI, save returned

list of path segments• Get map image as before, but with

embedded route using path segments

• Update on-screen form• Replace background map with new map• Existing markers remain in place

POI Selection and Directions in Map

• Pre-populate announcement text with restaurant details

• User enters meeting time• Pop up virtual keyboard

• Tweet using Twitter API ME• Secure log in and authentication (https)• Post geo-located tweet

• (Optional) Tweet with picture• Allow user to take picture of restaurant

using JSR 135 (MMAPI)• Post picture to web service, add URL to

tweet

Announce Screen

Tweet

private final String ... //0Auth keys and secrets

...

Token token = new Token(oauth_token, oauth_token_secret);

Credential crd = new Credential(key, secret, token);

UserAccountManager uam = UserAccountManager.getInstance(crd)

uam.verifyCredential();

...

TweetER tweeter = TweetER.getInstance(userAccMgr);

Tweet tweet = new Tweet(message, tweetLocation);

tweeter.post(tweet);

• Friends might not have Twitter access• Use SMS as notification mechanism

• Access phone book to get phone numbers of friends• Using JSR 75 (PIM)

• Send SMS with info similar to tweet• Use JSR 205 (WMA)

(Optional) Send SMS

• Splash screen, animations (marker selection, pop-up animation, POI details bubble, list scrolling, ...)

• Map zooming and scrolling• Moving map (real-time tracking of user location)• Integration with HTML/XHTML content• Integration with other web services (fire eagle,

foursquare, etc)• Integrate with payment, advertising• Deeper integration with platform features (e.g. Nokia

gesture API, SonyEricsson JSR-211/CHAPI, etc) • ...

Additional IdeasSpice it up!

• The Mass Market is where the numbers and the revenue for many developers are

• You can deliver smartphone-like applications and user experiences to mass market phones

• LWUIT makes creating and deploying rich and compelling user interfaces easy

• Mobile Ajax libraries enable you to access and consume a variety of popular web services easily

• Twitter API ME makes building Twitter clients a snap• Get started today!

SummaryIt's not always about smartphones

• Full project sources on my blog: http://terrencebarr.wordpress.com/2011/05/06/beyond-smartphones-source-code-video-released/(or search for “Beyond Smartphones”)

• LWUIT article and info: http://tinyurl.com/2erwc3x

• Mobile Ajax project: http://meapplicationdevelopers.dev.java.net/mobileajax.html

• Twitter API ME: http://kenai.com/projects/twitterapime/pages/Home

Where To Find Out MoreResources

Thank You!Q & A

PS: Thanks to • Ernandes Mourão Júnior for Twitter API ME• Ronan O. Ciosoig for review and input