Android WebView, The Fifth Element

Android, The Fifth
Element
Murat Yener, eteration
@yenerm
Saturday, June 15, 13

who (the hell) am I?!?
• Java, Flex, GWT, iOS, Android developer
• Principle Mentor at Eteration
• Eclipse Committer
• GDG (GTUG) Istanbul Organizer
• Conference Speaker

Me as an Android Developer

what (the hell) is the ﬁfth
element?!?

element?!?
• Activities

element?!?
• Activities
• Intents

element?!?
• Activities
• Intents
• Services

element?!?
• Activities
• Intents
• Services
• Widgets

element?!?
• Activities
• Intents
• Services
• Widgets
• ... and the WebView (hybrid apps, web
apps)

an HTML5 talk?!?
• Facebook killed HTML5 app, Zuckerberg
said HTML5 is not there yet!!
• Sencha Built FastBook
fb.html5isready.com
• LinkedIn moved to native
• anybody think its better now?

wait its too complicated!
• How many of you have web development
experience?
• How many of you develop native mobile
apps?
• How many of you don’t like web
development just because javascript

but it is slow!
• building games?
• 3d physics?
• image processing?
• ...?

but it is slow!
• building games?
• 3d physics?
• image processing?
• ...?
Nooo! We just build lists and detail pages!!
(well, most of the time...)

“We started with the existing Jake2 Java port of the Quake II
engine, then used the Google Web Toolkit (along with WebGL,
WebSockets, and a lot of refactoring) to cross-compile it into
Javascript. You can see the results in the video above — we
were honestly a bit surprised when we saw it pushing over 30
frames per second on our laptops (your mileage may vary)!”
from Google Code Blog...
Wait!! Is this web?!?
• Angry Birds for Chrome (GWT)
• Quake on Mobile http://media.tojicode.com/q3bsp/
(requires Chrome Beta with WebGL)

Mobile HTML5
Frameworks
• jQueryMobile
• Sencha
• Zepto
• mGWT, hey wait! no javascript?!? Seriously?!!

Java to Javascript?!?
• GWT Compiler does the magic
• Optimized, high performance js
• Cross browser compability (upto ie6)

Android vs iOS

Setup
• get the source from https://code.google.com/p/mgwt/
• or download the jar
• or use Maven!
<dependency>
<groupId>com.googlecode.mgwt</groupId>
<artifactId>mgwt</artifactId>
<version>1.1.2</version>
</dependency>

Hello World
public class MGWTEntryPoint implements EntryPoint {
public void onModuleLoad() {
// set viewport and other settings for mobile
MGWT.applySettings(MGWTSettings.getAppSetting());
// build animation helper and attach it
AnimationHelper animationHelper = new AnimationHelper();
RootPanel.get().add(animationHelper);
// build some UI
LayoutPanel layoutPanel = new LayoutPanel();
Button button = new Button("Hello mgwt");
layoutPanel.add(button);
// animate
animationHelper.goTo(layoutPanel, Animation.SLIDE);
}
}

Add a little spice:
Phonegap
• Geolocation
• Camera
• Accelerometer
• Compass
• Phonebook
• File System
• even NFC

Add a little spice:
Phonegap
• Geolocation
• Camera
• Accelerometer
• Compass
• Phonebook
• File System
• even NFC
Basically
any
Native
API
!!

Phonegap
Button button = new Button("Hello mgwt");
button().addTapHandler(new TapHandler() {
@Override
public void onTap(TapEvent event) {
phoneGap.getNotification().alert("Done!!");
}
});
layoutPanel.add(button);

more Phonegap
phoneGap.getGeolocation().watchPosition(geolocationOptions, new MyGeolocationCallback(){
@Override
public void onSuccess(Position position) {
// check accuracy
if (position.getCoordinates().getAccuracy() > 11) {
raceView.getLabel().setText("Error: Accuracy");
}
// geolocation returns mps, multiply with 3.6 to convert to kph
double speed = 3.6 * position.getCoordinates().getSpeed();
if (speed > 0.2) {// if going
raceView.getLabel().setText(speed + "km @" + position.getCoordinates().getAccuracy());
currentLocation = position;
// got the position now can start!
start();
// stop if the threshold is reached
if (isGoing && speed >= 60) {
MgwtAppEntryPoint.phoneGap.getGeolocation().clearWatch(geolocationWatcher);
endLocation = position;
calculate();
}
} else {// if stoped
raceView.getLabel().setText("get ready!!");
isGoing = false;
}
}
@Override
public void onFailure(PositionError error) {
MgwtAppEntryPoint.phoneGap.getNotification().alert("Problem getting location");
}
});

more Phonegap
phoneGap.getGeolocation().watchPosition(geolocationOptions, new MyGeolocationCallback(){
@Override
public void onSuccess(Position position) {
// check accuracy
if (position.getCoordinates().getAccuracy() > 11) {
raceView.getLabel().setText("Error: Accuracy");
}
// geolocation returns mps, multiply with 3.6 to convert to kph
double speed = 3.6 * position.getCoordinates().getSpeed();
if (speed > 0.2) {// if going
raceView.getLabel().setText(speed + "km @" + position.getCoordinates().getAccuracy());
currentLocation = position;
// got the position now can start!
start();
// stop if the threshold is reached
if (isGoing && speed >= 60) {
MgwtAppEntryPoint.phoneGap.getGeolocation().clearWatch(geolocationWatcher);
endLocation = position;
calculate();
}
} else {// if stoped
raceView.getLabel().setText("get ready!!");
isGoing = false;
}
}
@Override
public void onFailure(PositionError error) {
MgwtAppEntryPoint.phoneGap.getNotification().alert("Problem getting location");
}
});
yes, you can really do that
with mgwt/phonegap

even more...
final MCheckBox check = ((MCheckBox) event.getSource());
if (check.getValue()) {
if (TWITTER.equalsIgnoreCase(type))
profileView.getBrowser().showWebPage(Service.BASE_URL + "auth/twitter");
else if (FACEBOOK.equalsIgnoreCase(type))
profileView.getBrowser().showWebPage(Service.BASE_URL + "auth/facebook");
profileView.getBrowser().addLocationChangeHandler(new
ChildBrowserLocationChangedHandler() {
@Override
public void onLocationChanged(ChildBrowserLocationChangedEvent event) {
//Do the login...
}
});
}
}

even more...
final MCheckBox check = ((MCheckBox) event.getSource());
if (check.getValue()) {
if (TWITTER.equalsIgnoreCase(type))
profileView.getBrowser().showWebPage(Service.BASE_URL + "auth/twitter");
else if (FACEBOOK.equalsIgnoreCase(type))
profileView.getBrowser().showWebPage(Service.BASE_URL + "auth/facebook");
profileView.getBrowser().addLocationChangeHandler(new
ChildBrowserLocationChangedHandler() {
@Override
public void onLocationChanged(ChildBrowserLocationChangedEvent event) {
//Do the login...
}
});
}
}
Make use of the
Phonegap Plugins!!

mgwt experienced
• MVP
• Model
• View
• Presenter
• Maven Archetype

mvp?!?
• Code your UI in View
• and logic in Acitivity
classes
• sound familiar?!?
• easy navigation
• a bit of boilerplate
code

calling the backend
• GWT-RPC
• JSONP & AutoBean
JsonpRequestBuilder jsonp = new JsonpRequestBuilder();
String url = URL.encode(JSON_URL + "/sendData/" + “HelloWorld”);
jsonp.requestObject(url, new AsyncCallback<JavaScriptObject>() {
@Override
public void onFailure(Throwable caught) {
MgwtAppEntryPoint.phoneGap.getNotification().alert(caught.getMessage());
}
@Override
public void onSuccess(JavaScriptObject result) {
JSONObject jsObj = new JSONObject(result);
AutoBean<Score[]> bean = AutoBeanCodex.decode(factory, MyModel[].class, jsObj.toString());
Score[] scores = bean.as();
scoresCallback.onResponse(scores);
}
});

Calling Native JS
• Use any existing Javascript
• Use Javascript in a type safe way
• BUT dont mess touch events
• AND beware you are not in safe zone
anymore

JSNI
public native static String key(int index) /*-{
return $wnd.localStorage.key(index);
}-*/;
public native static void setItem(String key, String value) /*-{
$wnd.localStorage.setItem(key, value);
}-*/;
public native static String getItem(String key) /*-{
return $wnd.localStorage.getItem(key);
}-*/;
public native static void removeItem(String key) /*-{
$wnd.localStorage.removeItem(key);
}-*/;
public native static void clear() /*-{
$wnd.localStorage.clear();
}-*/;

gwtquery
public void onModuleLoad() {
//Hide the text and set the width and append an h1 element
$("#text").hide()
.css("width", "400px")
.prepend("<h1>GwtQuery Rocks !</h1>");

//add a click handler on the button
$("button").click(new Function(){
public void f() {
//display the text with effects and animate its background color
$("#text").as(Effects)
.clipDown()
.animate("backgroundColor: 'yellow'", 500)
.delay(1000)
.animate("backgroundColor: '#fff'", 1500);
}
});
}

skinning
• offers default themes for
• android
• iOS/iOS Retina
• Blackberry
• easy to create yours
https://code.google.com/p/mgwt/wiki/Styling
//append your own css as last thing in the head
MGWTStyle.injectStyleSheet("yourcssﬁle.css");

wait! css in java??
.mgwt-Button {
display: inline-block;
float: left;
width: 145px;
height: 100px;
border: 1px solid rgba(0,0,0,0.23);
background: #ff6600;
border-radius: 6px;
box-shadow: inset -1px 0px 0px rgba(255,255,255,0.41), inset
1px 0px 0px rgba(255,255,255,0.21), inset 0px -1px 0px
rgba(0,0,0,0.21), inset 0px 1px 0px rgba(255,255,255,0.41), 0px 1px
2px rgba(0,0,0,0.21);
text-align: center;
font-size: 14px;
margin: 5px;
font-weight: bold;
text-shadow: 0px 1px 1px rgba(0,0,0,0.49);
color: white;
line-height: 124px;
}

debugging
• First Class Java Debugging on your IDE
• Gwt Pretty Compile! and debug
Javascript in your browser

What about other OSs
• iOS, works like charm
• Blackberry
• Windows Phone
• Tablets?!
• Desktop?!?

What can I really build?
• Anything!
• but why not going native for games
• lists, carousels, forms...
• make use of current js
• windows phone?? seriously?!?

thanks to...

special thanks to my
mentor Naci Dai

</slides>
murat@muratyener.com
blogs.eteration.com
devchronicles.com
@yenerm
114028338330916709688
like what you see??
click to download!
@gdgistanbul

Android WebView, The Fifth Element

More Related Content

Similar to Android WebView, The Fifth Element

More from Murat Yener

Recently uploaded

Android WebView, The Fifth Element