2. who (the hell) am I?!?
• Java, Flex, GWT, iOS, Android developer
• Principle Mentor at Eteration
• Eclipse Committer
• GDG (GTUG) Istanbul Organizer
• Conference Speaker
Saturday, June 15, 13
3. Me as an Android Developer
Saturday, June 15, 13
4. Me as an Android Developer
Saturday, June 15, 13
5. Me as an Android Developer
Saturday, June 15, 13
6. Me as an Android Developer
Saturday, June 15, 13
7. Me as an Android Developer
Saturday, June 15, 13
8. Me as an Android Developer
Saturday, June 15, 13
9. Me as an Android Developer
Saturday, June 15, 13
10. Me as an Android Developer
Saturday, June 15, 13
11. Me as an Android Developer
Saturday, June 15, 13
12. what (the hell) is the fifth
element?!?
Saturday, June 15, 13
13. what (the hell) is the fifth
element?!?
• Activities
Saturday, June 15, 13
14. what (the hell) is the fifth
element?!?
• Activities
• Intents
Saturday, June 15, 13
15. what (the hell) is the fifth
element?!?
• Activities
• Intents
• Services
Saturday, June 15, 13
16. what (the hell) is the fifth
element?!?
• Activities
• Intents
• Services
• Widgets
Saturday, June 15, 13
17. what (the hell) is the fifth
element?!?
• Activities
• Intents
• Services
• Widgets
• ... and the WebView (hybrid apps, web
apps)
Saturday, June 15, 13
18. 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?
Saturday, June 15, 13
19. 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?
Saturday, June 15, 13
20. 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
Saturday, June 15, 13
21. 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
Saturday, June 15, 13
22. but it is slow!
• building games?
• 3d physics?
• image processing?
• ...?
Saturday, June 15, 13
23. but it is slow!
• building games?
• 3d physics?
• image processing?
• ...?
Saturday, June 15, 13
24. but it is slow!
• building games?
• 3d physics?
• image processing?
• ...?
Nooo! We just build lists and detail pages!!
(well, most of the time...)
Saturday, June 15, 13
25. “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)
Saturday, June 15, 13
26. “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)
Saturday, June 15, 13
27. “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)
Saturday, June 15, 13
37. 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>
Saturday, June 15, 13
38. 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);
}
}
Saturday, June 15, 13
39. Add a little spice:
Phonegap
• Geolocation
• Camera
• Accelerometer
• Compass
• Phonebook
• File System
• even NFC
Saturday, June 15, 13
40. Add a little spice:
Phonegap
• Geolocation
• Camera
• Accelerometer
• Compass
• Phonebook
• File System
• even NFC
Basically
any
Native
API
!!
Saturday, June 15, 13
41. Phonegap
Button button = new Button("Hello mgwt");
button().addTapHandler(new TapHandler() {
@Override
public void onTap(TapEvent event) {
phoneGap.getNotification().alert("Done!!");
}
});
layoutPanel.add(button);
Saturday, June 15, 13
42. 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");
}
});
Saturday, June 15, 13
43. 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
Saturday, June 15, 13
44. even more...
public void onTap(TapEvent event) {
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...
}
});
}
}
Saturday, June 15, 13
45. even more...
public void onTap(TapEvent event) {
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!!
Saturday, June 15, 13
48. mvp?!?
• Code your UI in View
• and logic in Acitivity
classes
• sound familiar?!?
• easy navigation
• a bit of boilerplate
code
Saturday, June 15, 13
49. mvp?!?
• Code your UI in View
• and logic in Acitivity
classes
• sound familiar?!?
• easy navigation
• a bit of boilerplate
code
Saturday, June 15, 13
50. 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);
}
});
Saturday, June 15, 13
51. 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
Saturday, June 15, 13
52. 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();
}-*/;
Saturday, June 15, 13
53. 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);
}
});
}
Saturday, June 15, 13
54. 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("yourcssfile.css");
Saturday, June 15, 13
56. debugging
• First Class Java Debugging on your IDE
• Gwt Pretty Compile! and debug
Javascript in your browser
Saturday, June 15, 13
57. What about other OSs
• iOS, works like charm
• Blackberry
• Windows Phone
• Tablets?!
• Desktop?!?
Saturday, June 15, 13
58. What can I really build?
• Anything!
• but why not going native for games
• lists, carousels, forms...
• make use of current js
• windows phone?? seriously?!?
Saturday, June 15, 13