sábado, 11 de febrero de 2012

Viendo componentes de la Gui : WebView


Desarrollo sobre la plataforma Android:


Hola a todos de nuevo, como ya vieron en los otros post, ya creamos nuestra primer aplicación, pero como habrán visto, es bastante insulsa. Pues ahora vamos a comenzar a ver los componentes gráficos, los que aran que se pueda interactuar con nuestra aplicación, darle información y tomar información del usuario, etc, etc.
En realidad, en este post iba a comenzar por los componentes GUI mas comunes y sencillo, como un botón y un txtview, pero como estuve realizando un par de cosas con un webview hoy. Pues vamos hablar un poco sobre el tema.
Bueno lo primero sera, crear un nuevo proyecto Android, como ya vimos en anteriores post, para ello desde Eclipse vamos a File, New, Android Project. Le damos un nombre al proyecto, elegimos una versión de la plataforma Android ( en mi caso 2.2 o level 8 ;) ). Después creamos los nombres de los paquetes, y te crea una aplicación donde solo hay un textview que dice la famosa frase Hello World!!!


Bueno, lo primero que deberemos hacer, es abrir el archivo main.xml que se encuentra en la carpeta, “layout”, que esta dentro de la carpeta “res”. Ah este archivo se lo puede modificar de dos maneras, “visual o modificando a mano el código” (esta bueno jugar con las dos) . Una recomendación mía, es que vallan jugando arrastrando los objetos y luego modificar los atributos a mano.
De manera visual, vamos a la paleta de componentes que esta a nuestra izquierda, vamos hasta composite, y luego arrastramos el webview. Nos quedara a la vista, algo así:


Luego miramos el código haciendo click en la sección de abajo donde dice main.xml y si todo salio
bien por ahora, nuestro Eclipse, nos debería haber creado este código:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello" />

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

</LinearLayout>

Ahora deberemos ir hasta hasta el archivo .java que nos genero de manera automática, que se encuentra en la carpeta “src” en el paquete que tiene el nombre que nosotros elegimos al generar nuestro proyecto, en mi caso “prueba.web.view” y allí debería haber creado código similar a este:

package prueba.web.view;

import android.app.Activity;
import android.os.Bundle;

public class WebViewActivity extends Activity {
             /** Called when the activity is first created. */
             @Override
             public void onCreate(Bundle savedInstanceState) {
                        super.onCreate(savedInstanceState);
                        setContentView(R.layout.main);
              }
}


Pues, ahora simplemente para poder manejar el webview, deberemos crear una referencia desde la clase R al webview que nosotros tenemos en nuestro layout. Como verán, en el .xml el ID o nombre de referencia del webview se especifica en esta sección de código:

android:id="@+id/webView1" dentro del webview.

Así que ahora en WebViewActivity, deberemos agregar este código:

WebView primero = (WebView)findViewById(R.id.webView1);

Donde se crea la referencia al objeto utilizando la función “findViewById”. Ahora todo lo que hagamos con primero, afectara a nuestro webview ;)
Lo que nos queda ahora es agregarle la url, del recurso que queremos que muestre nuestro webview, por ejemplo:

primero.loadUrl(url);


Ah y casi me olvido, por supuesto que hay que agregar los permisos necesarios, para que no nos lance ningún error al querer ejecutar la aplicación. Los mismo se deben agregar en el archivo AndroidManifest.xml. En el caso este que el webview muestra una url desde internet, debemos agregar el permiso de acceso a internet, que es este:

<uses-permission android:name="android.permission.INTERNET"/>

Quedandonos un AndroidManifest.xml similar a este:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="prueba.web.view"
android:versionCode="1"
android:versionName="1.0" >

<uses-sdk android:minSdkVersion="8" />
<uses-permission android:name="android.permission.INTERNET"/>

<application
android:icon="@drawable/ic_launcher"
android:label="@string/app_name" >
<activity
android:name=".WebViewActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>

</manifest>

Este es el resultado, sobre el manejo simple de webview:


Después deberemos profundizar muchos sobre el tema, ya que con esta herramienta se pueden cargar ficheros perteneciente a la aplicación, como archivos HTML, y CSS. Y muchas otras cosas mas, así que imaginen que potente que es su utilización.

Bueno gente, esto es todo por este articulo, espero que les alla gustado, mas adelante seguiremos profundizando sobre temas relacionados a la GUI de nuestras aplicaciones, ya que creo, que en los dispositivos moviles si no es atractivo no va a tener éxito. Como siempre les digo, sigan investigando sobre este tema, que es muy amplio, y en lo posible vean y lean toda la documentación que puedan.

Documentación Oficial:


Saludos a todos, Gabriel E. Pozo