The slides I was using when delivering my talk about how to develop hybrid applications using WordPress.
More information about the FED course I deliver can be found at fed.course.lifemichael.com
Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...
Hybrid App using WordPress
1. Hybrid App using WordPress
Haim Michael
June 9th
, 2016
All logos, trademarks and brand names used in this presentation, such as the logo of Google
or any of its products, belong to their respective owners. Haim Michael and LifeMichael
are independent and not related, affiliated or connected neither with Google, TinyURL, Facebook
or any of the companies and the technologies mentioned in this presentation.
LifeMichael.com
2. Table of Content
LifeMichael.com
● Haim Michael Introduction
● Hybrid Applications Overview
● The WebView Class
● JavaScript Libraries
● JavaScript Calling Java
● Java Calling JavaScript
● Handling The Back Button
● Handling External Links
● Chrome DevTools Debugging
● Other Platforms
● PhoneGap Framework
● Simple Solutions
● Learning Resources
● Questions & Answers
3. Haim Michael Introduction
● Snowboarding. Learning. Coding. Teaching. More than
18 years of Practical Experience.
LifeMichael.com
4. Haim Michael Introduction
● Professional Certifications
Zend Certified Engineer in PHP
Certified Java Professional
Certified Java EE Web Component Developer
OMG Certified UML Professional
● MBA (cum laude) from Tel-Aviv University
Information Systems Management
LifeMichael.com
5. Hybrid Applications Overview
● The hybrid applications include code written in a native
programming language and code written in various client
side web technologies, such as HTML, CSS and JS.
LifeMichael.com
Device Display
Web Browser Object
6. The Android WebView Class
● Instantiating WebView class we have when developing
for the android platform we will get an object that
functions as a web browser.
● WebView extends View. We can treat the object as any
other view.
● As of Android 4.4, WebView is based on the Chromium
open source project.
● The other mobile platforms have a similar class.
LifeMichael.com
7. The Android WebView Class
LifeMichael.com
public class SimpleHybridDemo extends Activity
{
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
WebView ob = new WebView(this);
WebView.setWebContentsDebuggingEnabled(true);
ob.getSettings().setJavaScriptEnabled(true);
ob.loadUrl("file:///android_asset/demo.html");
setContentView(ob);
}
}
MainActivity.java
SimpleHybridDemo
8. The Android WebView Class
LifeMichael.com
<form name="myform">
<br/>num 1: <input type="text" name="num_a"/>
<br/>num 2: <input type="text" name="num_b"/>
<br/><input type="button" onclick="calc()" value="+"/>
<br/>result: <input type="text" name="result"/>
</form>
<script>
function calc()
{
var a = parseInt(document.myform.num_a.value,10);
var b = parseInt(document.myform.num_b.value,10);
var sum = a+b;
document.myform.result.value = sum;
}
</script>
demo.html
10. The Android WebView Class
● Calling the getSettings() method on our WebView
object we will get a WebSettings object through which
we can configure the behavior of our WebView.
…
WebView ob;
…
WebSettings settings = ob.getSettings();
settings.setJavaScriptEnabled(true);
settings.setDatabaseEnabled(true);
…
LifeMichael.com
11. JavaScript Libraries
● There are many JavaScript libraries optimized for touch
screen devices we can use.
LifeMichael.com
12. JavaScript Libraries
● You can find samples for hybrid applications developed
using SenchaTouch at
http://dev.sencha.com/deploy/touch/examples/
● You can find samples for hybrid applications developed
using jQueryMobile at
http://www.jqmgallery.com
LifeMichael.com
13. JavaScript Libraries
● When displaying content in our web view we better add
the viewport meta element.
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<meta name="viewport"
content="initial-scale=1.0, user-scalable=no" />
LifeMichael.com
14. JavaScript Calling Java
● Calling the addJavaScriptInterface() method on
the WebView object we can bind an object to the
JavaScript execution code allowing code in JavaScript to
call methods on that object.
LifeMichael.com
15. JavaScript Calling Java
● We should mark the methods defined in Java we want to
allow their execution from code written in JavaScript with
the @android.webkit.JavascriptInterface
annotation.
LifeMichael.com
class CalculateObject
{
@android.webkit.JavascriptInterface
public int calculateSum(int numA, int numB)
{
return numA + numB;
}
}
16. JavaScript Calling Java
LifeMichael.com
public class HybridActivity extends Activity
{
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
WebView ob = new WebView(this);
WebView.setWebContentsDebuggingEnabled(true);
ob.getSettings().setJavaScriptEnabled(true);
ob.addJavascriptInterface(new CalculateObject(),"ob");
ob.loadUrl(
"http://www.abelski.com/courses/android/simple.html");
setContentView(ob);
}
class CalculateObject
{
@android.webkit.JavascriptInterface
public int calculateSum(int numA, int numB)
{
return numA + numB;
}
}
}
HybridActivity
17. JavaScript Calling Java
LifeMichael.com
<form name="myform">
<br/>number 1: <input type="text" name="num_a"/>
<br/>number 2: <input type="text" name="num_b"/>
<br/><input type="button" onclick="calc()" value="+"/>
<br/>result: <input type="text" name="result"/>
</form>
<script>
function calc()
{
var a = parseInt(document.myform.num_a.value,10);
var b = parseInt(document.myform.num_b.value,10);
var sum = window.ob.calculateSum(a,b);
document.myform.result.value = sum;
}
</script>
simple.html
19. Java Calling JavaScript
● We can use the loadUrl method passing over a string
that starts with “javascript:” in order to invoke a specific
function in JavaScript.
webView.loadUrl("javascript:increment()");
LifeMichael.com
20. Java Calling JavaScript
LifeMichael.com
public class JavaCallingJavaScript extends Activity
{
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
LinearLayout layout = new LinearLayout(this);
final WebView webView = new WebView(this);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("file:///android_asset/demo3.html");
Button bt = new Button(this);
bt.setText("count");
bt.setOnClickListener(new View.OnClickListener()
{
@Override
public void onClick(View v)
{
webView.loadUrl("javascript:increment()");
}
});
layout.addView(bt);
layout.addView(webView);
setContentView(layout);
}
}
23. Handling The Back Button
LifeMichael.com
● When the user presses the device's back button he is taken to
the previous activity.
● We can override this normal behavior by overriding the
onBackPresses() function, that was defined in Activity.
…
public onBackPresses() {
webView.loadUrl(…);
}
24. Handling External Links
LifeMichael.com
● When the user presses a URL link displayed inside the web
view the user will be forwarded to the web browser.
● We can set a different behavior by setting our own
implementation for WebViewClient.
ob.setWebViewClient(new WebViewClient() {
public void shouldOverrideUrlLoading (
WebView view, String url) {
view.loadUrl(… );
}
});
30. Chrome DevTools Debugging
LifeMichael.com
● We can use the Chrome DevTools debugger for debugging
the code in JavaScript running inside the WebView.
● We should call the setWebContentDebuggingEnabled
static method (defined in WebView) passing over true in order
to enable the debugging.
WebView.setWebContentDebuggingEnabled(true);
● We should open Chrome web browser and browse at the
following URL address:
chrome://inspect/#devices
34. The PhoneGap Framework
● The PhoneGap framework assists with the
development of hybrid applications for mobile
platforms.The PhoneGap framework includes two
parts. The JavaScript library that includes the
definition of functions that allow using the platform
native capabilities. The native code developed
specifically separately for each and every mobile
platform.
LifeMichael.com
35. The PhoneGap Framework
● The implementation of the JavaScript library is
different for each and every platform. It includes
invocation of functions that belong to the native part.
● You can find detailed documentation for PhoneGap
capabilities at http://docs.phonegap.com.
● The simplest way for using PhoneGap would be
using the http://build.phonegap.com website.
LifeMichael.com
36. The PhoneGap Framework
LifeMichael.com
package org.apache.cordova.example;
import android.app.Activity;
import android.os.Bundle;
import org.apache.cordova.*;
public class cordovaExample extends DroidGap
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
}
42. Learning Resources
● The Android Platform main learning resource is the
http://developer.android.com website.
● You can find my free online course about software
development in my website at http://abelski.lifemichael.com
● Short video clips in hebrew together with short tutorials in
hebrew for learning Java can be found at
http://www.javabook.co.il
LifeMichael.com
43. Learning Resources
● Short video clips in hebrew together with short tutorials in
hebrew for learning PHP can be found at
http://www.phpbook.co.il
● Short video clips in hebrew together with short tutorials in
hebrew for learning Android development can be found at
http://www.androidbook.co.il
LifeMichael.com
47. My Coming Courses
140 Academic Hours. 28 Weekly Meetings. Delivered
in Holon Institute of Technology. On Going Project.
Multiple Tiny Projects. All Meetings are Available on
Video. Attractive Price of 6700 Shekels.
tinyurl.com/lifemichaelhitcourses
48. Questions & Answers
If you enjoyed my seminar please leave me a comment
at http://speakerpedia.com/speakers/life-michael.
Thanks for your time!
Haim.