Léeme antes de empezar.
Esta guía está siendo diseñada con el fin de ser lo más
sencillo posible. En este tutorial veremos paso por paso minúsculamente como se
hace el primer programa y desglosaremos el compilador a fin de que el lector
entienda y vea sus partes “para ke después no keden gringos”.
Si tienes mucho afán sáltate hasta la sección CODIGOS de
este tutorial que esta mas abajo para que comiences a ver como se enlaza y genera el código pero
prefiero que si no tienes idea de cómo comenzar con eclipse vez paso a paso
para analizar cómo hacer un proyecto nuevo fácilmente y no pregunten después.
Si no tienen bases en java tranquilos aquí les explico es
fácil además voy a realizar unos tutoriales acerca de java y.Net para aquellos
que quieran aprender más sobre los lenguajes de programación.
Antes de empezar quiero aclarar que en android ya no se
maneja el termino formulario como en java o en visual Basic se maneja el
termino activity. En este tutorial aprenderemos como hacer un hola mundo y
después lo haremos más entretenido.
Pues ahora empecemos.
Obvio primero abran el compilador desde la carpeta donde lo
dejaron. Si no lo saben configurar
visiten las entradas anteriores.
En el caso en que no lo tengan.
Y en caso en que lo tengan pero no sea compatible con
android.
INTRODUCCIÓN
AL COMPILADOR “RECONOCIMIENTO”
(Mi Primer
Programa)
Después de que abran el compilador diríjanse a la ventana de
nuevo proyecto.
Le aparecerá un wizard donde deben escoger android project y
luego android aplication Project.
Darle click en siguiente y les aparecerá una ventana donde
podrán escoger a la versión de android a la cual van a programar, la api minima
y la api máxima a la cual recibirán por ahora seleccionen las api nivel 8 hasta
la 21 como lo tengo en la siguiente pantalla a mi aplicación le colocare primer
programa para empezar.
Seleccionen siguiente.
En esta ventana hay algunas opciones déjenlas asi ya que el
generara nuestro icono automáticamente en un menú que veremos después.
En la siguiente ventana pueden personalizar el icono que
llevara la aplicación por defecto en los menús y en la parte alta de la
pantalla.
Como pueden observar aquí hay varias opciones y varias
imágenes se las explicare a continuación por encima (en una futura entrada
enfatizare más en cómo cambiar esta imagen e insertar más imágenes a un programa).
·
Donde aparece Preview son las imágenes que
aparecerán dependiendo de dónde se ejecute el android. Es decir pantalla pequeña, mediana y grande.
En Foreground podrán escoger si le quieren poner
de icono a su programa una imagen, un texto o una animación. Eso depende del
usuario.
El resto de opciones son complementos de los anteriores
prueben varias opciones yo lo voy a dejar de la siguiente manera para continua.
Ustedes escojan su propia imagen.
Me gusta esa imagen además es el símbolo de una aplicación
que regalo en la googleplay apenas la mejore y mis clientes me manden los
errores de esa aplicación les daré el link de descarga.
En esta ventana pueden seleccionar diferentes estilos de
activities pero escojan la en blanco después les explicare como usar el resto
ya que necesitan códigos adicionales para funcionar.
Continuen el wizard.
En esta ventana pueden cambiar el nombre de la activity pero
ojo el nombre de Layout siempre comienza por activity quieran o no. En este
caso yo colocare principal.
Finalicen y listo se les abrirá el compilador de esta
manera.
Ahora les explicare cada pedazo del compilador antes de
continuar brevemente.
Zona 1-El package explorer
Es una ventana donde podrán ver todas las carpetas donde se
encuentra nuestra aplicación android a iniciar nuestra primera aplicación
observemos que la carpeta PrimerPrograma
está acompañada de otra que es appcompat_v7 esta carpeta se genera
automáticamente para las versiones iguales o superiores a kitkat
A nosotros por ahora nos interesan dos carpetas la que dice
Layout que es donde esta la interfaz grafica de nuestra activity t la carpeta
src que es donde se encuentra nuestro código java.
Zona 2- Pestañas del editor de código.
Bueno aqui se puede observar que hay 2 pestañas una que un
xml y está en interfaz visual donde podremos observar cómo queda el programa
gráficamente y la otra pestaña es el código correspondiente a java. En java
tenemos que enlazar los elementos xml con los java eso se explicara a su debido
tiempo.
Del lado izquierdo tenemos los elementos visuales ahorita
tocamos ese tema pero para que lo tengan en cuenta.
Si tienen seleccionado el código xml pueden observar que en
la parte de abajo hay dos pestañas una es el motor visual y la otra es el xml
que genera la aplicación.
Si escogen la pestaña java observaran que solo aparece
código y ya no aparecerán las dos pestañas de abajo.
Más abajo analizaremos este código (no corran solo es reconocimiento
del compilador).
Zona 3- layout’s y propiedades.
La zona de layout’s es la zona donde podremos organizar
nuestro estilo visual y lo veremos en una entrada más adelante ya que es un
tema bastante extenso pero es fácil solo sepan que gracias a los layout’s
nuestros programas se mantendrán en orden y no se saldrán de una cuadricula.
Y la zona de propiedades hay veremos las propiedades de los
objetos y es una ventana crucial en este sistema. La estaremos observando por
todo este blog debido a que es la parte del compilador que más cambia.
Continuemos
CODIGO
“Comencemos
con el Hola mundo”
Ya explicado todo esto es hora de enlazar nuestro código xml
con el android.
Primero seleccionamos el TextView que dice “Hello World” y
observen la barra de propiedades como cambio.
Ahora lo borramos oprimiendo la tecla suprimir o click
derecho borrar para empezar de nuevo.
Después darle click derecho en la zona de los Layout’s al
RelativeLayout y escojan Change Layout.
En la ventana que se abre escojan Linear Layout (Vertical) “Despues
les explico porque”.
En la parte izquierda seleccionamos un TextView cualquiera y lo arrastramos hasta la
zona de layout’s y lo colocamos dentro del LinearLayout. Inmediatamente aparecerá
en la pantalla principal.
Hacemos lo mismo con el BUTTON dos veces.
Nos quedara de esta manera.
Si quieren por curiosidad cambien en las pestañas de código xml
y observen como eclipse genera el código.
Regresamos al editor gráfico y seleccionamos el TextView y
nos vamos a la parte de las propiedades hay le cambiaremos el Id a cada objeto
por declaramos resultado este caso , botonr y botonb para el
caso de los 2 buttones.
Apenas le cambien el nombre nos aparecerá una ventana que si
queremos cambiarlo en todo el xml
Le damos en sí y se nos abrirá una ventana mas donde solo le
damos en OK.
Después que le cambiemos los nombres a todos los ítems ya
entraremos en código java.
Asi no se meterán con código xml que es el jake de los
programadores java cuando comienzan en android ahora guarden lo que se ha hecho
y ubiquémonos en la pestaña de código java ya vamos a enlazar con código java y
a analizar el código generado.
Ya estamos aca. Como sabemos java trabaja con cases y
objetos. En nuestro caso nuestra aplicación es una clase y la clase ya trae los
métodos establecidos por el sistema operativo android. El compilador ejecuta
estos métodos cuando comienza el programa. Por lo general los programadores
tienden a enlazar los botones principales del código java con xml en el método OnCréate que se ejecuta cuando la aplicación
se crea.
Primero declaramos como variables privadas el TextView y los
2 Button. Las declaramos resultado, botonr y botonb simultáneamente.
Como ven les va a salir un error pero en realidad no lo es una
alerta que no está incluida la clase BUTTON así que seleccionamos donde el
compilador nos subraya el error e importamos la librería.
Estos serán nuestros objetos de ahora en adelante.
Ahora si vamos a enlazar los objetos del xml con java y lo
hacemos de esta manera. En el método OnCréate
al final del método realizamos la siguiente declaración.
” resultado =(TextView)findViewById(R.id. resultado);”.
Aquí le estamos diciendo al compilador que haga un cast de TextView
a lo que el encuentre en el xml con la Id Resultado.
Eso quiere decir que le podemos colocar un nombre en el xml y otro
en el java pero por no confundir usamos el mismo nombre del Id que en el
objeto.
Por buena costumbre en programación agréguenle comentarios a todo.
Hacemos lo mismo con los botones y el código quedara de esta
manera.
Por ultimo crearemos los dos métodos que se ejecutaran en
los botones cada vez que demos click en ellos.
Por costumbre lo haremos después de los métodos que el
compilador género además de comentarlos.
Como pueden observar
creamos el metodo click_btnr y click_btnr que reciben de argumento (View View) para
habilitarlo como el xml disponga estos errores aparecen porque no hemos
incluido el metodo View de android asi que hacemos lo mismo que hicmos con
BUTTON click ensima del error e importar librería.
Listo ya está
nuestro código java ahora enlazamos nuestros métodos en el xml.
De vuelta en el editor gráfico seleccionamos el primer botón
ósea botonr y nos vamos a la parte
de las propiedades y buscamos la propiedad OnClick.
Hay colocan el metodo que se va a ejecutar cuando se oprima el click. En este
caso click_btnr.
Buscamos la propiedad text y cambiamos lo que tiene escrito en este caso BUTTON por Escriba.
Hacemos lo mismo con el otro botón pero con el método click_btnb y con el texto Borrar.
Guardamos todo. Ya es hora de ver el fruto de todo esto.
En la zona de Package
Explorer le damos click derecho sobre nuestro proyecto y le damos en run as
y después en android Aplication (después les enseño como depurar).
Se acuerdan que en una de mis entradas pasadas les comente
mantengan el emulador abierto bueno denle click inmediatamente sino abran el
emulador como esta mencionado en mi entrada anterior. http://programacionxtz.blogspot.com/2014/10/comenzando-con-el-compilador-eclipce.html.
Siéntense y esperen hasta que se ejecute.
Asi se ve ahora interactue con el.
Listo Primer programa hecho. Me avisan que parte no
entendieron comenten de todas maneras más abajo les voy a dejar el video
tutorial.
