Terence Barr - beyond smartphones - 24mai2011
-
Upload
agora-group -
Category
Technology
-
view
111 -
download
2
description
Transcript of Terence Barr - beyond smartphones - 24mai2011
![Page 1: Terence Barr - beyond smartphones - 24mai2011](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c905674a7959c9648b456f/html5/thumbnails/1.jpg)
<Insert Picture Here>
Terrence BarrSenior Technologist, Mobile & Embedded
Beyond Smartphones:Rich Applications and Services for the Mobile Masses
![Page 2: Terence Barr - beyond smartphones - 24mai2011](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c905674a7959c9648b456f/html5/thumbnails/2.jpg)
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."
![Page 3: Terence Barr - beyond smartphones - 24mai2011](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c905674a7959c9648b456f/html5/thumbnails/3.jpg)
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.
![Page 4: Terence Barr - beyond smartphones - 24mai2011](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c905674a7959c9648b456f/html5/thumbnails/4.jpg)
<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
![Page 5: Terence Barr - beyond smartphones - 24mai2011](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c905674a7959c9648b456f/html5/thumbnails/5.jpg)
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
![Page 6: Terence Barr - beyond smartphones - 24mai2011](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c905674a7959c9648b456f/html5/thumbnails/6.jpg)
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
![Page 7: Terence Barr - beyond smartphones - 24mai2011](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c905674a7959c9648b456f/html5/thumbnails/7.jpg)
DemoRich Mobile Java with LWUIT
![Page 8: Terence Barr - beyond smartphones - 24mai2011](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c905674a7959c9648b456f/html5/thumbnails/8.jpg)
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
![Page 9: Terence Barr - beyond smartphones - 24mai2011](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c905674a7959c9648b456f/html5/thumbnails/9.jpg)
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
![Page 10: Terence Barr - beyond smartphones - 24mai2011](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c905674a7959c9648b456f/html5/thumbnails/10.jpg)
• Identical application code, multiple platforms
Mobile EmulatorMobile Emulator Sony Ericsson G705 HTC Touch Diamond
Cross-Platform ContentLWUIT handles many device-specific details
![Page 11: Terence Barr - beyond smartphones - 24mai2011](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c905674a7959c9648b456f/html5/thumbnails/11.jpg)
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(…);
}
});
![Page 12: Terence Barr - beyond smartphones - 24mai2011](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c905674a7959c9648b456f/html5/thumbnails/12.jpg)
• 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
![Page 13: Terence Barr - beyond smartphones - 24mai2011](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c905674a7959c9648b456f/html5/thumbnails/13.jpg)
• 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
![Page 14: Terence Barr - beyond smartphones - 24mai2011](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c905674a7959c9648b456f/html5/thumbnails/14.jpg)
DemoDevice & Web Services Mash-Up
![Page 15: Terence Barr - beyond smartphones - 24mai2011](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c905674a7959c9648b456f/html5/thumbnails/15.jpg)
• 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”
![Page 16: Terence Barr - beyond smartphones - 24mai2011](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c905674a7959c9648b456f/html5/thumbnails/16.jpg)
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
![Page 17: Terence Barr - beyond smartphones - 24mai2011](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c905674a7959c9648b456f/html5/thumbnails/17.jpg)
• 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
![Page 18: Terence Barr - beyond smartphones - 24mai2011](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c905674a7959c9648b456f/html5/thumbnails/18.jpg)
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
![Page 19: Terence Barr - beyond smartphones - 24mai2011](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c905674a7959c9648b456f/html5/thumbnails/19.jpg)
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 = ...
...
}
![Page 20: Terence Barr - beyond smartphones - 24mai2011](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c905674a7959c9648b456f/html5/thumbnails/20.jpg)
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);
![Page 21: Terence Barr - beyond smartphones - 24mai2011](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c905674a7959c9648b456f/html5/thumbnails/21.jpg)
• 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
![Page 22: Terence Barr - beyond smartphones - 24mai2011](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c905674a7959c9648b456f/html5/thumbnails/22.jpg)
• 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
![Page 23: Terence Barr - beyond smartphones - 24mai2011](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c905674a7959c9648b456f/html5/thumbnails/23.jpg)
• 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
![Page 24: Terence Barr - beyond smartphones - 24mai2011](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c905674a7959c9648b456f/html5/thumbnails/24.jpg)
• 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
![Page 25: Terence Barr - beyond smartphones - 24mai2011](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c905674a7959c9648b456f/html5/thumbnails/25.jpg)
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);
![Page 26: Terence Barr - beyond smartphones - 24mai2011](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c905674a7959c9648b456f/html5/thumbnails/26.jpg)
• 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
![Page 27: Terence Barr - beyond smartphones - 24mai2011](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c905674a7959c9648b456f/html5/thumbnails/27.jpg)
• 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!
![Page 28: Terence Barr - beyond smartphones - 24mai2011](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c905674a7959c9648b456f/html5/thumbnails/28.jpg)
• 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
![Page 29: Terence Barr - beyond smartphones - 24mai2011](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c905674a7959c9648b456f/html5/thumbnails/29.jpg)
• 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
![Page 30: Terence Barr - beyond smartphones - 24mai2011](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c905674a7959c9648b456f/html5/thumbnails/30.jpg)
Thank You!Q & A
PS: Thanks to • Ernandes Mourão Júnior for Twitter API ME• Ronan O. Ciosoig for review and input
![Page 31: Terence Barr - beyond smartphones - 24mai2011](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c905674a7959c9648b456f/html5/thumbnails/31.jpg)