PRACTICA 009:  ANDROID: EVENTOS EN INTERFAZ

Ing. Honoria Reyes Macedo 

INTRODUCCION

Como buenas prácticas en el diseño de interfaces, es necesario indicar con mensajes o colores el estado en el que se encuentra dicha interfaz.

En esta práctica se usara el wizard para crear un proyecto tipo "Navigation Drawer Activity"  para agregar eventos en un formulario dentro de fragment_home.xml y fragment_home.java. El formulario lo puedes copiar del ANEXO I  de esta práctica antes de empezar con el punto 1 de las actividades. El punto 1.3 se sustituye por el  ANEXO II.

Los que tienen la practica 007, deberán utilizar esa práctica. y trabajar en el formulario fragment_capturaprod  y solo usar el ANEXO III para finalizar

ACTIVIDADES

 1.- Agregar advertencia al guardar si ya existe la clave

1.1 En el archivo strings.xml  agregar las siguientes etiquetas para mensajes (lineas en azul)

1.2 En el archivo fragment_capturaprod.java agregar el siguiente procedimiento:

1.3 En el archivo fragment_capturaprod.java

En el evento OnClick del botón loc_btnGuardar:  

Corregir de acuerdo a las siguientes líneas (en azul)

1,4 Compilar y ejecutar. Quedaría así cuando ya intenta guardar la misma clave

2.- Agregar estilo

2.1 En el archivo styles.xml agregar estilos al componente <EditText>

2.2 En el archivo fragment_capturaprod.xml usar el estilo en los componentes <EditText>

3.- Agregar advertencia si hay datos vacíos

               3.1 En el archivo fragment_capturaprod.java agregar un método validar() 

             antes de cerrar la clase

3.2 En el archivo fragment_capturaprod.java Agregar los eventos siguientes en el método onCreateView()

Quedaría así, si no capturan datos

4.- Agregar el foco al primer campo de captura (En este caso es la clave del producto)

               4.1 En el archivo fragment_capturaprod.java agregar la línea azul dentro del 

            método onCreateView()

Nota:

El color de resalte cuando está el foco en el componente se establece

desde el archivo styles.xml (línea en azul)

Compilar y ejecutar

Observa que cuando entras a registrar, el cursor estará parpadeando en el primer campo

5.-  Agregar caracteristicas

5.1.- Agregar el límite del texto a capturar en los <EditText>

5.2 Hacer la conversión a mayúsculas en el nombre del producto, agregar en el evento (agregar linea azul)

5.3 Agregar color al fondo de las pantallas

Compilar y ejecutar

Hacer que sucedan los eventos:

-          -  capturando una clave existente

-          -  otra dejando un campo en blanco cuando se avanza, y

-         -   que convierta a mayúsculas lo que se escribe

**********************************************************************

**********************************************************************

ANEXO I:  LOS QUE NO TIENEN LA PRACTICA 007

AGREGAR COMPONENTES (DE UN FORMULARIO)

En el proyecto creado con el el wizard tipo "Navigation Drawer Activity" 

Modificar en el archivo  fragment_home.xml :

- Solo copiar los componentes que estan en el contenedor LinearLayout.

- El contenedor que te crea por default, solo se deberá renombrar en el inicio y en el fin por LinearLayout

- Si tiene algún componente como el TextView no borrarlo, dejarlo hasta abajo.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".fragment_capturaprod">
    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/c_cveprod" />
    <EditText
        android:id="@+id/editCveprod"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="number"
        android:hint="@string/c_cveprod" />
    <TextView
        android:id="@+id/textView3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/c_nombreprod" />
    <EditText
        android:id="@+id/editNombreprod"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="@string/c_nombreprod"
        android:inputType="text" />
    <TextView
        android:id="@+id/textView4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/c_autorprod" />
    <EditText
        android:id="@+id/editAutorprod"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="@string/c_autorprod"
        android:inputType="text" />
    <TextView
        android:id="@+id/textView5"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/c_fotoprod" />
    <Spinner
        android:id="@+id/spnFotoprod"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/textView6"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/c_precioprod" />
    <EditText
        android:id="@+id/editPrecioprod"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="@string/c_precioprod"
        android:inputType="numberDecimal" />
    <CheckBox
        android:id="@+id/chkActivo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/c_activo" />
    <Button
        android:id="@+id/btnGuardar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/b_guardar" />
</LinearLayout>

*****************************************************************

ANEXO II: ARCHIVO  HomeFragment.java   

Sustituir el método onCreateView() por el siguiente:

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.fragment_home, container, false);

    loc_editCveprod = (EditText) view.findViewById(R.id.editCveprod);
    loc_editNombreprod = (EditText) view.findViewById(R.id.editNombreprod);
    loc_editAutorprod = (EditText) view.findViewById(R.id.editAutorprod);
    loc_editPrecioprod = (EditText) view.findViewById(R.id.editPrecioprod);
    loc_chkActivo = (CheckBox) view.findViewById(R.id.chkActivo);
    loc_btnGuardar = (Button) view.findViewById(R.id.btnGuardar);
    loc_spnFotoprod=(Spinner) view.findViewById(R.id.spnFotoprod);

     loc_btnGuardar.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View view) {
            try {

                                               showDialogError(Integer.valueOf(loc_editCveprod.getText().toString()));

            } catch (Exception e) {
                Log.d("MyApp", "Error:......................... " + e.getMessage());
            }
        }
    });

    return  view;
}

 

**************************************************************************

ANEXO III: Otra forma de agregar eventos. Declarando primero el objeto del evento y después usarlo

                     en el escuchador setOnFocusChangeListener

---------------------------------------0--0-----------------------------------

-----------------------------------000---000--------------------------------