mercoledì 19 dicembre 2012

Embed HTML5 in Android

E' possibile sfruttare l'HTML5 anche per creare applicazioni Android
La tecnica consiste nel creare una pagina con una WevView e farla puntare ad una pagina HTML5

Di seguito i file necessari per il progetto (in cui e' stato usato il generatore di insieme di Mandelbrot in HTML5 visto nei precedenti post)



Attenzione : il browser di default di Android non e' pienamente compatibile con Android per cui alcune pagine HTML5 semplicemente non funzionano (vedi l'esempio di GUI con HTML5 presentato nei post precedenti)

activity_main.xml
-------------------------------------

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    
    <WebView
        android:id="@+id/webView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" />

</RelativeLayout>

-------------------------------------
MainActivity.java
-------------------------------------

package com.web.html5;

import android.os.Bundle;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.view.Menu;
import android.webkit.WebChromeClient;
import android.webkit.WebView;

@SuppressLint("SetJavaScriptEnabled")
public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView html5 = (WebView) findViewById(R.id.webView1);
html5.getSettings().setJavaScriptEnabled(true);
html5.setWebChromeClient(new WebChromeClient());
html5.loadUrl("file:///android_asset/www/index.html");
 
}

}

-------------------------------------
index.html
la pagina index.html deve essere inserita in asset/www/ quindi dentro alla directory asset
si deve creare il folder www e poi creare il file index.html. Dentro Eclipse, facendo doppio clic sul file html, il file viene visulizzato all'interno di un browser e quindi non e' editabile, si deve invece scegliere Apri con
-------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            body { margin: 0; font-size: 2em; background-color: white; }
            #quit { background-color: gray; color: white; font-weight: bold; display: block; text-align: right; }
        </style>
        <script type="text/javascript">
            window.onload = function()
            {
            var canvas = document.getElementById("esempio");
                if (canvas.getContext) {
                  var context = canvas.getContext("2d");
                    var re_min = -2.0;
                    var im_min = -1.2;
                    var re_max = 1.0;
                    var im_max = 1.2;
                    var iterazioni = 255;
                    var r;
                    var a,b;
                    var x,y,x_new,y_new;
                    var test;
                    var k,j,i;
                    var SCREEN_HEIGHT = 320;
                    var SCREEN_WIDTH = 400;
                    var re_factor = (re_max-re_min);
                    var im_factor = (im_max-im_min);
                    for (var i=0;i<SCREEN_HEIGHT;i++)
                     {
                     for (var j=0;j<SCREEN_WIDTH;j++)
                      {
                      a = re_min+(j*re_factor/SCREEN_WIDTH);
                      b = im_min+(i*im_factor/SCREEN_HEIGHT);
                      x = 0;
                      y = 0;
                      test = 0;
                      for (var k=0;k<iterazioni;k++)
                       {
                       x_new = (x*x)-(y*y)+a;
                       y_new = (2*x*y)+b;
                       if (((x_new*x_new)+(y_new*y_new))>4)
                        {
                        r = k%2;
                        if (r == 1)
                            {
                            context.beginPath();
                            context.fillRect(i,j,1,1);
                            context.stroke();
                            }
                        break;
                        }
                       x = x_new;
                       y = y_new;
                       }
                      }
                     }
                }
         }
        </script>
    </head>
    <body>
        
        <canvas id="esempio" height="400" width="800">
        Il Browser non supporta HTML5.
        <!-- Utile per inserire informazioni di default -->
        </canvas>
    </body>
</html>