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>
