Cómo utilizar html5 para desarrollar la interfaz de Android

Tres soluciones: 1 atributo de ventana gráfica 2 control CSS 3 control JS

1 El atributo de ventana gráfica se coloca en el de HTML

Los atributos de la ventana gráfica en meta son los siguientes

content="

altura = [pixel_value | altura-dispositivo] ,

ancho = [pixel_value | ancho del dispositivo]

densidad-dpi = [valor_ppp | ppp-alto | ppp medio-bajo]

"

/>

2 Densidad del dispositivo de control CSS

Cree una hoja de estilo separada para cada densidad (tenga en cuenta el webkit-device-pixel- ratio en 3 valores corresponden a 3 resoluciones)

Especificar diferentes estilos

WebView myWebView = (WebView) findViewById(R.id.webview);

myWebView.setWebViewClient(new MyWebViewClient());

Además, por el bien de los hábitos del usuario, necesitamos Hacer que WebView se comporte más como un navegador significa que debemos poder retroceder en el historial

Por lo tanto, debemos anular la tecla de retroceso del sistema, goBack y goForward, lo que le permitirá navegar por las páginas del historial hacia adelante y hacia atrás

Código Java

público booleano onKeyDown (int keyCode, evento KeyEvent) {

if ((keyCode == KeyEvent.

si ((keyCode == KeyEvent_BACK) &a

mp;& myWebView.canGoBack() {

myWebView.goBack();

devuelve verdadero

}

Devuelve super.

return super.onKeyDown(keyCode, event);

}

// Manejar la confirmación en javascript

public boolean onJsConfirm(vista WebView, URL de cadena, mensaje de cadena, resultado final de JsResult) {

Builder builder = new Builder(MainActivity.this);

builder.setTitle( " confirmar");

builder.setMessage(mensaje);

builder.setPositiveButton(android.R.string.ok,

new AlertDialog.OnClickListener( ) {

public void onClick(DialogInterface dialog, int which) {

result.confirm();

})

} .

});

builder.setNegativeButton(android.R.string.cancel,

new DialogInterface.OnClickListener() {

p>

public void onClick( Diálogo DialogInterface, int cual) {

result.cancel()

}).

});

constructor.setCancelable(false);

constructor.create (

constructor.show(); return true;

};

@Override

// Establece la barra de progreso para que se cargue la página web

public void onProgressChanged (Vista WebView, int newProgress) {

MainActivity.this.getWindow().setFeatureInt(Window.FEATURE_PROGRESS, newProgress * 100);

onProgressChanged(view, newProgress);

}

Super.

// Establece el título de la aplicación

public void onReceivedTitle(vista WebView, título de cadena) {

MainActivity.

});

● Depuración en Android

A través de registros Salida de mensaje Código JS

Código JS

Código JS: console.log("Hello World");

Mensaje de registro: Consola: Hello World"; /hola .html:

82

Ejecute el método de devolución de llamada WebChromeClient onConsoleMesaage() en WebChromeClient para imprimir mensajes en LogCat

Código Java copiar código de colección

WebView myWebView = (WebView) findViewById (R.id.);

WebView myWebView = (WebView) findViewById(R.id.);

WebView myWebView = (WebView) findViewById(R.id. )webview)

myWebView.setWebChromeClient(new WebChromeClient() {

public void onConsoleMessage(String message, int lineNumber, String sourceID) {

Log. d(" MiAplicación", mensaje + " -- De la línea "

+ número de línea + " de "

+ ID de origen);

}).

p >

});

y

código Java

WebView myWebView = (WebView) findViewById(R.id.webview

);

myWebView.setWebChromeClient(new WebChromeClient() {

public boolean onConsoleMessage(ConsoleMessage cm) {

Log.d("MiAplicación");

Log.d("MiAplicación");

Log.d("MiAplicación");

Log.d("MiAplicación"); d("MiAplicación")d("MiAplicación", cm.message() + " -- De la línea "

+ cm.lineNumber() + " de "

+ cm .sourceId() );

devuelve verdadero

} }.

});

*ConsoleMessage también incluye un MessageLevel , Se utiliza para indicar el tipo de mensaje pasado en la consola. Puede consultar el nivel del mensaje usando messageLevel() para determinar la gravedad del mensaje y luego usar el método de registro apropiado o tomar otra acción apropiada.

● Almacenamiento local HTML5 en Android

HTML5 proporciona dos nuevas formas de almacenar datos en el lado del cliente:

localStorage no tiene límite de tiempo

sessionStorage almacenamiento de datos de sesión

Código Js.

API WebStorage:

//Borrar almacenamiento

localStorage.clear(); p>

/ Establecer valor clave

localStorage.setItem("yarin", "yangfegnsheng");

//Obtener un valor clave

localStorage .getItem("yarin");

// Obtiene el nombre de la clave con el subíndice especificado (como en Array)

localStorage.key(0);

//return "fresh" //eliminar un valor clave

localStorage.removeItem("yarin");

Tenga en cuenta que debe estar activado en la configuración

setDomStorageEnabled(true)

Ejecutar en Android

/Habilitar base de datos

webSettings.setDatabaseEnabled(true); String dir = this.getApplicationContext()getApplicationContext().getDir("database", Context.MODE_PRIVATE).getPath()

//Establecer la ruta de la base de datos

webSettings.setDatabasePath (dir)

webSettings.setDatabasePath(dir);

La ruta de nuestra base de datos no está habilitada para la base de datos.

// Debe estar activado para usar localStorage

webSettings.setDomStorageEnabled(true);

//Ampliar la capacidad de la base de datos (implementado en WebChromeClinet)

public void onExceededDatabaseQuota(URL de cadena, Identificador de base de datos de cadena, cuota actual larga,

Tamaño estimado largo, CuotaUsada total larga, Almacenamiento web .QuotaUpdater cuotaActualizador) {

cuotaUpdater.updateQuota(Tamaño estimado * 2

}

}

Las operaciones de base de datos en JS son como de costumbre

función initDatabase() {

intente {

if (!window.openDatabase) {

alert('Su navegador no admite bases de datos'); > var shortName = 'YARINDB';

var version = '1.0';

var displayName = 'yarin db'; / En bytes

YARINDB = openDatabase(shortName, version, displayName, maxSize

createTables()

selectAll(); p> }

}

}

} captura(e) {

if(e == 2) {

// La versión no coincide.

console.log("Versión de base de datos no válida.");

} else {

console.log("Error desconocido "+ e +"." ) ;

} // La versión no coincide.

Retorno;

}

}

función createTables(){

YARINDB.transaction(

p>

función (transacción) {

transacción.executeSql('CREAR TABLA SI NO EXISTE yarin(id INTEGER NOT NULL CLAVE PRIMARIA, nombre TEXTO NO NULO,desc TEXTO NO NULO );', [ ], nullDataHandler, errorHandler

}

}

}.

}

<); p> );

insertarDatos();

}

función insertarDatos(){

YARINDB.transacción(

function (transacción) {

//Datos de inicio cuando se inicializa la página

var data = ['1','yarin yang','I am yarin'];

transacción.executeSql("INSERTAR EN yarin(id, nombre, desc) VALORES (?, ?, ?)"