Creación de una aplicación padre-hijo en Realm con Android

Realizaremos una aplicación padre-hijo en Realm utilizando Android. La aplicación crea “tableros” (padre) al que se le pueden añadir una o varias “notas” (hijo).

Aplicación padre-hijo en Realm

En artículos anteriores comenzamos la creación de una aplicación que crea “tableros” donde a cada tablero se le pueden añadir “notas”. Queremos realizar ésta típica aplicación padre-hijo en Realm con Android.

Puedes consultar nuestra aplicación que ya crea “tableros” en el siguiente enlace:

[Agregar y mostrar datos en Realm con Android]

Aplicacion padre-hijo en Realm

Si deseas ver el funcionamiento hasta ahora puedes dar clic aquí.

Ahora deseamos crear “notas” para cada elemento “tablero” en la aplicación.

Creación del activity NoteActivity

En la carpeta activities da clic derecho y elige New->Activity->Empty Activity

En Activity Name escribe: NoteActivity

Lo que deseamos hacer es que cuando haga clic en un elemento “tablero” abra ese NoteActivity. Además debemos pasarle el “id” del “tablero” seleccionado.

Enlazar  NoteActivity desde MainActivity

Vamos a MainActivity.

Tenemos  actualmente la declaración de clase de la siguiente manera:

public class MainActivity extends AppCompatActivity

Vamos a modificar esa declaración implementando lo siguiente:

public class MainActivity extends AppCompatActivity implements AdapterView.OnItemClickListener

Ahora agregaremos un listener a listview (la siguiente línea va en onCreate, después de agregar el listview

listview.setOnItemClickListener(this);

Debemos implementar el método que se requiere:

    @Override
    public void onItemClick(AdapterView<?> adapterView, View view, int position, long id) {

        // Creamos un intent que va desde MainActivity hacia NoteActivity
        Intent intent = new Intent(MainActivity.this, NoteActivity.class);
         // Añadimos el id del item pulsado
        intent.putExtra("id", boards.get(position).getId());
        startActivity(intent);
    }

Diseño del layout activity_note.xml

El archivo activity_note.xml es donde creamos el diseño de NoteActivity. Abrimos el archivo activity_note.xml. El código que utilizaremos es el siguiente:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    tools:context="com.example.gibgarcia.gibdata.activities.NoteActivity">


    <ListView
        android:id="@+id/listViewNote"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        tools:layout_editor_absoluteX="2dp" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fabAddNote"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_fab_add"

        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintBottom_toBottomOf="@+id/listViewNote"
        app:layout_constraintEnd_toEndOf="@+id/listViewNote" />

</android.support.constraint.ConstraintLayout>

Como puedes observar, contiene un ListView (donde irán apareciendo las “notas”, y un Floating Action Button (para crear nuevas “notas”).

Creamos el layout list_view_note_item

Vamos a crear un layout (un diseño xml) para cada elemento “nota” que irá apareciendo a medida que se van creando.

En la carpeta de layout, damos clic derecho, elegiomos New-> Layout Resource file.

En File Name escribimos list_view_note_item

El código para este layout sería:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="15dp">

    <TextView
        android:id="@+id/TextViewNoteDescription"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"

    />

    <TextView
        android:id="@+id/TextViewNoteCreatedAt"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:textSize="10dp"
        android:textStyle="italic"

        />


</android.support.constraint.ConstraintLayout>

Crear la clase NoteAdapter

Un NoteAdapter nos permitirá crear un adaptador que será utilizado en el ListView que muestra todas las “notas”. Diseñaremos nuestro NoteAdapter bajo la técnica de ViewHolder para optimizar el rendimiento de nuestra aplicación.

Da clic derecho sobre Adapters luego New->JavaClass

En Name, escribimos NoteAdapter que es el nombre de la clase.

El código de NoteAdapter será:

package com.example.gibgarcia.gibdata.adapters;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

import com.example.gibgarcia.gibdata.R;
import com.example.gibgarcia.gibdata.models.Note;

import org.w3c.dom.Text;

import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.List;

/**
 * Created by gibgarcia on 07/11/18.
 */

public class NoteAdapter extends BaseAdapter  {
    private Context context;
    private List<Note> list;
    private int layout;


    public NoteAdapter(Context context, List<Note> notes, int layout) {
        this.context = context;
        this.list = notes;
        this.layout = layout;
    }

    @Override
    public int getCount() {
        return list.size();
    }

    @Override
    public Note getItem(int position) {
        return list.get(position);
    }

    @Override
    public long getItemId(int id) {
        return id ;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup viewGroup) {
        ViewHolder vh;
        if (convertView == null){
            convertView = LayoutInflater.from(context).inflate(layout, null);
            vh = new ViewHolder();
            vh.description = (TextView) convertView.findViewById(R.id.TextViewNoteDescription);
            vh.createdAt= (TextView) convertView.findViewById(R.id.TextViewNoteCreatedAt);
            convertView.setTag(vh);
        }else{
            vh = (ViewHolder) convertView.getTag();
        }

        Note note  = list.get(position);
        vh.description.setText(note.getDescription());
        DateFormat df = new SimpleDateFormat("dd/MM/yyyy");
        String date = df.format(note.getCreatedAt());
        vh.createdAt.setText(date) ;
        return convertView ;
    }

    public class ViewHolder{
        TextView description;
        TextView createdAt;

    }
}

Código de NoteActivity

Por último, te dejo el código de la clase NoteActivity (que creamos al principio de éste artículo). Esta clase crea las notas y refresca el adaptador.

package com.example.gibgarcia.gibdata.activities;

import android.content.DialogInterface;
import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.EditText;
import android.widget.ListView;
import android.widget.Toast;

import com.example.gibgarcia.gibdata.R;
import com.example.gibgarcia.gibdata.adapters.NoteAdapter;
import com.example.gibgarcia.gibdata.models.Board;
import com.example.gibgarcia.gibdata.models.Note;

import io.realm.Realm;
import io.realm.RealmChangeListener;
import io.realm.RealmList;
import io.realm.RealmResults;

public class NoteActivity extends AppCompatActivity implements RealmChangeListener<Board>{
    private ListView listView;
    private FloatingActionButton fab;
    private NoteAdapter adapter;
    private RealmList<Note> notes;
    private Realm realm;

    private int boardId;
    private Board board;



    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_note);

        realm = Realm.getDefaultInstance();
        if (getIntent().getExtras()!= null)
            boardId = getIntent().getExtras().getInt("id");
        board = realm.where(Board.class).equalTo("id", boardId).findFirst();
        board.addChangeListener(this);
        notes = board.getNotes();
        this.setTitle(board.getTitle());

        fab = (FloatingActionButton) findViewById(R.id.fabAddNote);
        listView = (ListView) findViewById(R.id.listViewNote);
        adapter = new NoteAdapter(this, notes, R.layout.list_view_note_item);
        listView.setAdapter(adapter);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                showAlertForCreatingNote("Agregue una nueva nota", "Escriba una nueva nota para " + board.getTitle()+".") ;
            }
        });
    }

    public void showAlertForCreatingNote(String title, String message){
        //Creo un builder para construir un cuadro de dialogo personalizado
        AlertDialog.Builder builder = new AlertDialog.Builder(this);
        //Si los parametros title y message no vienen vacíos, los utilizo para mi cuadro
        if (title != null) builder.setTitle(title);
        if (message != null) builder.setMessage(message);
        // Creo una vista usando el layout dialog_create_board
        View viewInflated = LayoutInflater.from(this).inflate(R.layout.dialog_create_note, null);
        // Asigno esa vista al builder
        builder.setView(viewInflated);
        final EditText input = (EditText) viewInflated.findViewById(R.id.editTextNewNote);

        // Tendremos un botón que dice Agregar y que al dale clic...
        builder.setPositiveButton("Agregar", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {
                // ... extrae el texto escrito en el EditText llamado editTextNewNote
                String note = input.getText().toString().trim();
                // Si el usuario escribe algo, se utiliza para crear una nota, si no, error.
                if (note.length() > 0)
                    createNewNote(note);
                else
                    Toast.makeText(getApplicationContext(), "Debe escribir algo", Toast.LENGTH_LONG).show();

            }
        });
        // Muestro el cuadro de dialogo creado.
        AlertDialog dialog = builder.create();
        dialog.show();
    }

    public void createNewNote(String note){
        realm.beginTransaction();
        Note _note = new Note(note);
        realm.copyToRealm(_note);
        board.getNotes().add(_note);
        realm.commitTransaction();
    }

    @Override
    public void onChange(Board element) {
        adapter.notifyDataSetChanged();
    }
}

Con esto tenemos todo lo necesario para desarrollar nuestra aplicación padre-hijo en Realm.

Si deseas ver el comportamiento de la aplicación hasta este punto, da clic aquí.

Tu comentario

opiniones