Desarrollo de Android 101 - Parte 5: DroidDraw & Tracker terminados

(...)

En este tutorial intentaremos completar el Information Tracker con DroidDraw para diseñar el diseño de este proyecto. Esto le dará información sobre una alternativa a la gestión de los arreglos de almacenamiento en el entorno de eclipse y cómo funciona DroidDraw. DroidDraw puede ser su mejor amigo al diseñar aplicaciones de Android o su peor enemigo si no conoce el diseño de la aplicación y cómo funciona. Esto le mostrará los conceptos básicos de este programa y cómo incorporarlo en su proceso de desarrollo. Esto es significativamente más fácil que la publicación anterior, pero enseñará habilidades en otras aplicaciones para ayudar al desarrollo como DroidDraw.

Empezaremos descargando DroidDraw y lanzándolo con el descargado .EXE después de extraer los archivos. Una vez finalizado el programa, la interfaz es bastante sencilla. El lado izquierdo del programa es la pantalla del dispositivo y cómo se verá cuando iniciemos el programa. El lado derecho de la aplicación le brinda los objetos que puede poner en la pantalla en la mitad superior y también muestra el código generado para usted en la mitad inferior. Este es un programa muy exclusivo porque no solo puede elegir generar código en la mitad inferior de la pantalla derecha, sino también pegar código y generar un diseño de cómo se ve su programa para mejorarlo aún más. Las imágenes a continuación le darán una idea del diseño, por lo que el párrafo siguiente es un poco más fácil:

Primero cambiaremos el diseño absoluto en la pantalla para ScrollView. Para hacer esto navegamos hacia la parte superior izquierda del programa hasta el menú desplegable que dice RootLayout y cámbialo a ScrollView. Luego agregaremos LinearLayout a la pantalla navegando a la parte superior derecha del programa, donde están las pestañas y haga clic en Preparativos. Arrastra el titulado LinearLayout a la pantalla de la izquierda y suéltelo allí. Ahora, mientras todavía está seleccionado, vaya a la pestaña de la derecha llamada Características y haga clic en él. Cambiamos el ancho y alto del LinearLayout Alabama llenar los padres y luego haciendo clic Solicitar Haz el cambio. Volviendo al Diseños pantalla elegiremos TableLayout y soltarlo en el LinearLayout luego ve a la Características y cámbialo a llenar los padres tanto en altura como en ancho.

Ahora que hemos organizado la configuración, comenzaremos a colocar widgets en la pantalla para hacer que la interfaz sea más interactiva. Para empezar, necesitamos una etiqueta que solicite un número. Arrastra y suelta un Vista de texto desde la pestaña del widget a la pantalla, luego vaya a propiedades y cambie el ancho a llenar los padres y el texto un Número:. Ahora necesitamos agregar TextBox (también conocido como EditText) debajo de la etiqueta, así que arrástrelo desde los widgets a la pantalla y cambiemos las propiedades de ancho a llenar los padres, el texto a un campo en blanco y el identificador a @ + id / NumRewards. Luego agregamos otra etiqueta, usando llenar los padres para el ancho y cambie el texto a Datos: y aplicar los cambios. Ahora agregamos Selector de fechas directamente debajo de la etiqueta y cambie el ID a @ + id / fecha y aplicar los cambios. Ahora necesitamos un botón para poder extraer información de nuestro formulario cuando se presiona, así que arrastre un botón y cambie la ID a @ + id / Agregar y el texto un Agregar luego haga clic en Solicitar. En este punto, debemos agregar 2 etiquetas más y 2 cuadros de texto más, por lo que te dejaré completar esto y te daré la información para cambiarlos. El texto de la primera etiqueta deberá cambiarse para que diga Números para este mes: y las primeras variables de TextBox que deben cambiarse es el identificador @ + id / RewardsMonat. La segunda etiqueta deberá decir Hasta ahora números: y el ID del segundo cuadro de texto deberá cambiarse a @ + id / RewardsTD. El código se proporcionará a continuación si algo sale mal, pero jugar con la interfaz de DroidDraw es la mejor manera de aprender la forma más rápida de producir una interfaz con ella.

Ahora que nuestra interfaz está configurada, necesitamos generarla con el botón en la parte superior del programa. Generi. Esto llenará la parte inferior derecha de la pantalla, que puede copiar y pegar en el main.xml expediente. Al pegar el código en el archivo XML, notará en la captura de pantalla anterior que mis cuadros de texto debajo del botón están atenuados. Esto se logra mediante la adición android: enabled = "falso" antes de cerrar > en los nodos EditText. Esto le permitirá mostrar información y no dejar que nadie la cambie. Aquí está el código generado por DroidDraw sin la función habilitada agregada en:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
android:id="@+id/widget33"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
>
<LinearLayout
android:id="@+id/widget29"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<TableLayout
android:id="@+id/widget34"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<TextView
android:id="@+id/widget35"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Number:"
>
<!--<span class="hiddenSpellError" pre=""-->TextView>
<EditText
android:id="@+id/NumRewards"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:phoneNumber="true"
>
<!--<span class="hiddenSpellError" pre=""-->EditText>
<TextView
android:id="@+id/widget37"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Date:"
>
<!--<span class="hiddenSpellError" pre=""-->TextView>
<DatePicker
android:id="@+id/Date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<!--<span class="hiddenSpellError" pre=""-->DatePicker>
<Button
android:id="@+id/Add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add"
>
</Button>
<TextView
android:id="@+id/widget41"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Numbers For This Month:"
>
</TextView>
<EditText
android:id="@+id/RewardsMonthly"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:enabled="false"
>
<!--<span class="hiddenSpellError" pre=""-->EditText>
<TextView
android:id="@+id/widget43"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Numbers To Date:"
>
</TextView>
<EditText
android:id="@+id/RewardsTD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:enabled="false"
>
<!--<span class="hiddenSpellError" pre=""-->EditText>
</TableLayout>
</LinearLayout>
</ScrollView>

Aquí están las capturas de pantalla con el habilitado = "falso" llevado a cabo en el arreglo:

Ahora que nuestra configuración ha terminado, podemos comenzar con el proyecto. Analizamos cómo hacer un proyecto de publicaciones anteriores para que esto se sepa. Esta vez te dejaré completar tu proyecto. Una vez que el proyecto está terminado, podemos comenzar a codificar el adaptador para la base de datos, que usaremos mucho. La mayor parte de esto será estándar ahora, excepto para las funciones seleccionadas, donde queremos capturar datos por criterios específicos. Aquí está el código para DBAdapter.java:

package com.gregjacobs.infotracker;
/**
 * @author Greg
 *
 */
import java.util.Calendar;
import java.util.Date;
import android.content.ContentValues;
import android.content.Context;
import android.database.Cursor;
import android.database.SQLException;
import android.database.sqlite.SQLiteDatabase;
import android.database.sqlite.SQLiteOpenHelper;
import android.util.Log;

public class DBAdapter
{
	public static final String KEY_ROWID = "_id";
    public static final String KEY_YEAROFREWARDS = "YearOfRewards";
    public static final String KEY_MONTHOFREWARDS = "MonthOfRewards";
    public static final String KEY_DAYOFREWARDS = "DayOfRewards";
    public static final String KEY_NUMOFREWARDS = "NumOfRewards";
    private static final String TAG = "DBAdapter";

    private static final String DATABASE_NAME = "BlockbusterRewards";
    private static final String DATABASE_TABLE = "tblRewards";
    private static final int DATABASE_VERSION = 1;

    private static final String DATABASE_CREATE =
        "create table tblRewards (_id integer primary key autoincrement, "
        + "YearOfRewards text not null, MonthOfRewards text not null," +
        		"DayOfRewards text not null," +
        		" NumOfRewards int not null );";

    private static final Date date = new Date();
    private final Context context;

    private DatabaseHelper DBHelper;
    private SQLiteDatabase db;

El código anterior es bastante normal de lo que hemos visto hasta ahora. Lo único que quiero señalar es el hecho de que tengo una columna para el día, mes y año cada uno en lugar de combinarlos en una sola fila. Lo hice para que durante un mes y un día de referencia pudiera hacerlo rápidamente sin demasiado código en la declaración SQL agregada. El resto parece bastante familiar.

    public DBAdapter(Context ctx)
    {
        this.context = ctx;
        DBHelper = new DatabaseHelper(context);
    }

	private static class DatabaseHelper extends SQLiteOpenHelper
    {
        DatabaseHelper(Context context)
        {
            super(context, DATABASE_NAME, null, DATABASE_VERSION);
        }

        @Override
        public void onCreate(SQLiteDatabase db)
        {
            db.execSQL(DATABASE_CREATE);
        }

        @Override
        public void onUpgrade(SQLiteDatabase db, int oldVersion,
                              int newVersion)
        {
            Log.w(TAG, "Upgrading database from version " + oldVersion
                  + " to "
                  + newVersion + ", which will destroy all old data");
            db.execSQL("DROP TABLE IF EXISTS titles");
            onCreate(db);
        }
    }

    //---opens the database---
    public DBAdapter open() throws SQLException
    {
        db = DBHelper.getWritableDatabase();
        return this;
    }

    //---closes the database---
    public void close()
    {
        DBHelper.close();
    }

    //---insert a title into the database---
    public long insertRewards(String yearRewards, String monthRewards, String dayRewards, String numRewards)
    {
        ContentValues initialValues = new ContentValues();
        initialValues.put(KEY_YEAROFREWARDS, yearRewards);
        initialValues.put(KEY_MONTHOFREWARDS, monthRewards);
        initialValues.put(KEY_DAYOFREWARDS, dayRewards);
        initialValues.put(KEY_NUMOFREWARDS, Integer.parseInt(numRewards));
        return db.insert(DATABASE_TABLE, null, initialValues);
    }

    public int getAllRewards()
    {
        Cursor cursor = db.rawQuery(
                    "SELECT SUM(NumOfRewards) FROM tblRewards", null);
                if(cursor.moveToFirst()) {
                    return cursor.getInt(0);
                }
                return cursor.getInt(0);

    }

    public int getMonthlyRewards()
    {

        Cursor cursor = getMonthRewards();/*db.rawQuery(
                    "SELECT SUM(NumOfRewards) FROM tblRewards WHERE MonthOfRewards = " +
                    Calendar.MONTH + " AND YearOfRewards = " + Calendar.YEAR, null);*/
                if(cursor.moveToFirst()) {
                    return cursor.getInt(0);
                }
                return cursor.getInt(0);

    }

  //---retrieves all the titles---
    public Cursor getMonthRewards()
    {
    	Calendar cal = Calendar.getInstance();
    	int year = cal.get(Calendar.YEAR);
    	String WHERE = "MonthOfRewards = " + date.getMonth() + " AND YearOfRewards = " + year;
        return db.query(DATABASE_TABLE, new String[] {
        		"SUM(" + KEY_NUMOFREWARDS + ")"},
                WHERE,
                null,
                null,
                null,
                null);
    }
}

getMonthlyRewards obtiene todos los elementos del getMonthRewards () un método que pertenece a un mes en particular y los muestra en uno de los cuadros de texto debajo del botón que usaremos en el diseño. La getAllRewards () Se llamará a un método para mostrar la acumulación de elementos hasta la fecha.

Pasamos ahora a la .Java archivo que etiquetamos InfoTracker.java. Este archivo usará código que adjunta un detector de eventos al botón en nuestro diseño y al presionarlo se actualizarán nuestros cuadros de texto debajo de él. El código en este .Java El archivo no fue optimizado para la eficiencia, fue diseñado para funcionar. Mi desafío para ti es que comprendas este código, si no te gusta su apariencia, entonces mejóralo. Aquí está el código para InfoTracker.java:

package com.gregjacobs.infotracker;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.DatePicker;
import android.widget.EditText;
import android.widget.Toast;

public class InfoTracker extends Activity {
    /** Called when the activity is first created. */
	DBAdapter db = new DBAdapter(this);
	EditText rewards;
	EditText rewardsMonthly;
	EditText rewardsTD;
	DatePicker dateRewards;

    @Override
    public void onCreate(Bundle savedInstanceState) {
    	try
    	{
	        super.onCreate(savedInstanceState);
	        setContentView(R.layout.main);
	        rewardsTD = (EditText)findViewById(R.id.RewardsTD);
	        rewardsMonthly = (EditText)findViewById(R.id.RewardsMonthly);
	        db.open();
	        rewardsTD.setText(String.valueOf(db.getAllRewards()));
	        rewardsMonthly.setText(String.valueOf(db.getMonthlyRewards()));
	        db.close();
	        // Capture our button from layout
	        Button button = (Button)findViewById(R.id.Add);
	        // Register the onClick listener with the implementation above
	        button.setOnClickListener(mAddListener);

    	}
        catch (Exception ex)
        {
      	  Context context = getApplicationContext();
      	  CharSequence text = ex.toString();
      	  int duration = Toast.LENGTH_LONG;

      	  Toast toast = Toast.makeText(context, text, duration);
      	  toast.show();
      	  //System.out.println(ex.getMessage());
        }
    }

    // Create an anonymous implementation of OnClickListener
    private OnClickListener mAddListener = new OnClickListener() {
        public void onClick(View v) {
        long id = 0;
          // do something when the button is clicked
    	db.open();
    	try{
    		//setContentView(R.layout.main);
			rewards = (EditText)findViewById(R.id.NumRewards);
		    dateRewards = (DatePicker)findViewById(R.id.Date);
		    rewardsMonthly = (EditText)findViewById(R.id.RewardsMonthly);
		    rewardsTD = (EditText)findViewById(R.id.RewardsTD);
		    id = db.insertRewards(String.valueOf(dateRewards.getYear()),
		    		String.valueOf(dateRewards.getMonth()),
		    		String.valueOf(dateRewards.getDayOfMonth()),
		    		rewards.getText().toString());
		    rewardsTD.setText(String.valueOf(db.getAllRewards()));
            rewardsMonthly.setText(String.valueOf(db.getMonthlyRewards()));
          }
          catch (Exception ex)
          {
        	  Context context = getApplicationContext();
        	  CharSequence text = ex.toString() + "ID = " + id;
        	  int duration = Toast.LENGTH_LONG;

        	  Toast toast = Toast.makeText(context, text, duration);
        	  toast.show();
        	  //System.out.println(ex.getMessage());
          }

          db.close();

        }
    };
}

El código de este ejemplo ha sido cubierto en otros tutoriales con la única excepción de que cuando lanzamos este programa, llamamos a la base de datos y vemos si hay algo nuevo y llamamos después de presionar el botón para actualizar constantemente los números. en los cuadros de texto a continuación. Además, el hecho de que cerremos la base de datos después de llamar es diferente de otros que hicimos, ya que esto puede disminuir el uso de la batería en lugar de mantenerla abierta todo el tiempo. La última parte que tenemos que hacer es la strings.xml archivo, así que aquí está el código:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Information Tracker</string>
</resources>

Aquí están los archivos de mi proyecto para que pueda usarlos para comparar:

DBAdapter.java | InfoTracker.java | Main.xml

Ahora hemos completado el Rastreador de información y tenemos una comprensión básica de cómo funciona DroidDraw. Este es el penúltimo tutorial de nuestra serie, por lo que el Desarrollo de Android 101 casi ha terminado, con solo una última parada. El siguiente tutorial se ocupará de empaquetar y firmar su aplicación en un archivo .apk que puede implementar fácilmente en su propio dispositivo o comercializarlo en todo el mundo a través de Android Market. Hasta el próximo tutorial, Happy Hacking!

Continúe con la Parte 6: ¡Preparándose para un mercado!

43.002684-81.21499

  • dext0rb dice:

    gracias por estos androides. esperando el empaquetado de apk. Sigan con el buen trabajo.

  • Colecago dice:

    Sí, me gustan mucho estos tutoriales. Tienes que usar Bluetooth, estoy seguro de que a mucha gente le gustaría eso.

  • mowcius dice:

    De acuerdo, pero acorte el enlace RSS ...

    Es como una tortura cuando ya he leído unos cientos de publicaciones.

  • Doug dice:

    [quote]Lo único que quiero señalar es el hecho de que tengo una fila para cada día, mes y año en lugar de combinarlos en una sola fila.[/quote]

    ¿No te refieres a "columna"?

  • Greg R. Jacobs dice:

    @Doug - Gracias por captar esto, ya está arreglado 🙂

    Previamente:
    Lo único que quiero señalar es el hecho de que tengo una fila para cada día, mes y año en lugar de combinarlos en una sola fila.

    Correo:
    Lo único que quiero señalar es el hecho de que tengo una columna para el día, mes y año cada uno en lugar de combinarlos en una sola fila.

Ricardo Prieto
Ricardo Prieto

Deja una respuesta

Tu dirección de correo electrónico no será publicada.