Cómo utilizar html5 para desarrollar la interfaz de Android
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 p>
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>
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 (?, ?, ?)"