GUIA PRÁCTICA – USO PRÁCTICO DE XML.
OBJETIVOS:
1. Crear y utilizar un archivo XML para cargar datos en un componente de la UI
de una aplicación móvil.
INTRODUCCIÓN:
XML es un formato de texto que permite representar datos de forma jerárquica. Esto
significa que cada dato está "anidado" o estructurado en etiquetas que definen el
contenido y el significado de cada sección.
Explicación de XML básico.
Los componentes utilizados son:
• Etiquetas: Cada dato en XML está contenido entre etiquetas (<etiqueta> y
</etiqueta>). Las etiquetas pueden ser de apertura y cierre (como
<nombre> y </nombre>), o pueden estar solas, cerrándose en la misma
línea (por ejemplo, <imagen src="foto.jpg" />).
• Atributos: Son datos adicionales que se colocan dentro de la etiqueta de
apertura para dar más información. Por ejemplo, <usuario
activo="true">.
• Elementos: La combinación de una etiqueta, atributos (si los hay), y el valor
contenido. Por ejemplo, <ciudad>Madrid</ciudad> es un elemento.
La guía práctica define los pasos para poder crear y cargar a un archivo xml en un
control ScrollView:
Desarrollo de la Guía.
Paso 1: Creación del Proyecto.
Crearemos un proyecto Basado en una “Empty Views Activity”
Le asignamos un nombre, que para esta guía será Tema44_usoXML, dejamos la ruta
predeterminada y seleccionamos usar el SDK mínimo API 30.
Paso 2: Creación de la UI de la App.
En el layout activity_main.xml crearemos la interfaz con los elementos de la UI que
se muestran a continuación:
El código xml para la creación de los controles de la UI es el siguiente:
<TextView
android:id="@+id/tvTitulo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="50dp"
android:layout_marginTop="56dp"
android:layout_marginEnd="50dp"
android:text="Listado Deprtamentos"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.496"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="HardcodedText" />
<ScrollView
android:id="@+id/lstDepartaemntos"
android:layout_width="337dp"
android:layout_height="287dp"
android:layout_marginStart="32dp"
android:layout_marginTop="48dp"
android:layout_marginEnd="32dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.509"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tvTitulo">
<LinearLayout
android:id="@+id/Departamentos"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" />
</ScrollView>
<Button
android:id="@+id/btSalir"
android:layout_width="101dp"
android:layout_height="50dp"
android:layout_marginStart="30dp"
android:layout_marginTop="60dp"
android:layout_marginEnd="32dp"
android:text="Salir"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="@+id/btCargar"
app:layout_constraintTop_toBottomOf="@+id/lstDepartaemntos"
tools:ignore="HardcodedText"/>
<Button
android:id="@+id/btCargar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="132dp"
android:layout_marginTop="60dp"
android:text="Cargar XML"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/lstDepartaemntos"
tools:ignore="HardcodedText"/>
(Solo copie y pegue sino quiere diseñar la UI por usted mismo)
Si ejecuta la aplicación deberá de ver en el emulador algo como lo siguiente:
Paso 3: Creando el archivo XML.
Activaremos la carpeta
“assets” la cual es usada
para almacenar archivos
planos o raw como lo pueden
ser los archivos XML y JSON.
Para esto daremos un clic
derecho sobre la carpera
“app” de proyecto luego
seleccionaremos “New”,
luego “Folder” y finalmente
la opción “Assets Folder”, tal
como se muestra en la
siguiente imagen.
Se mostrará la siguiente ventana, presionar el botón “Finish” y con eso se tendrá
disponible la capeta assets del proyecto.
Para crear el archivo XML, daremos un clic derecho sobre la carpeta “assets”, luego
seleccionaremos la opción “New” y finalmente la opción “File”, tal como se muestra
en la siguiente ventana
En la ventana emergente que
se muestra escribiremos
departamentos.xml y
presionaremos enter.
Tendremos un archivo XML vacío
El contenido del archivo departamentos.xml será el siguiente:
<departamentos>
<departamento>
<id>01</id>
<nombre>Ahuachapán</nombre>
</departamento>
<departamento>
<id>02</id>
<nombre>Santa Ana</nombre>
</departamento>
<departamento>
<id>03</id>
<nombre>Sonsonate</nombre>
</departamento>
<departamento>
<id>04</id>
<nombre>Chalatenango</nombre>
</departamento>
<departamento>
<id>05</id>
<nombre>La Libertad</nombre>
</departamento>
<departamento>
<id>06</id>
<nombre>San Salvador</nombre>
</departamento>
<departamento>
<id>07</id>
<nombre>Cuscatlán</nombre>
</departamento>
<departamento>
<id>08</id>
<nombre>La Paz</nombre>
</departamento>
<departamento>
<id>09</id>
<nombre>Cabañas</nombre>
</departamento>
<departamento>
<id>10</id>
<nombre>San Vicente</nombre>
</departamento>
<departamento>
<id>11</id>
<nombre>Usulután</nombre>
</departamento>
<departamento>
<id>12</id>
<nombre>San Miguel</nombre>
</departamento>
<departamento>
<id>13</id>
<nombre>Morazán</nombre>
</departamento>
<departamento>
<id>14</id>
<nombre>La Unión</nombre>
</departamento>
</departamentos>
(Solo copie y pegue el contenido)
Ahora solo guardamos el archivo a continuamos con el paso siguiente.
Paso 4: Codificación de la App
Accediendo a los objetos para manipular sus propiedades y valores.
En el archivo MainActivity.java. debe de crearse las variables de para acceder a los
objetos de la UI esto se hace agregando el siguiente código luego del método
onCreate() de MainActivity.
Button btcargar = findViewById(R.id.btCargar);
Button btsalir = findViewById(R.id.btSalir);
LinearLayout contenedor = findViewById(R.id.Departamentos);
El código anterior permite establecer el control de los elementos de la UI utilizando las
variables btcargar, btsalir y contenedor.
Como lo que deseamos es que al cargar la aplicación y dar un clic en el botón de comando
Cargar XML, al control ScrollView y su elemento LinearLayout sea “poblado” con los
nodos del archivo XML agregaremos el código siguiente al evento onClick() del botón
Cargar XML.
btcargar.setOnClickListener(new View.OnClickListener() {
@SuppressLint("SetTextI18n")
@Override
public void onClick(View view) {
contenedor.removeAllViews();
try {
AssetManager assetManager = getAssets();
InputStream inputStream =
assetManager.open("departamentos.xml");
DocumentBuilderFactory factory =
DocumentBuilderFactory.newInstance();
DocumentBuilder builder = factory.newDocumentBuilder();
Document document = builder.parse(inputStream);
document.getDocumentElement().normalize();
NodeList nodeList =
document.getElementsByTagName("departamento");
for (int i = 0; i < nodeList.getLength(); i++) {
Node node = nodeList.item(i);
if (node.getNodeType() == Node.ELEMENT_NODE) {
Element element = (Element) node;
String _id =
element.getElementsByTagName("id").item(0).getTextContent();
String _nombre =
element.getElementsByTagName("nombre").item(0).getTextContent();
TextView tvdepartaemnto = new TextView
(getApplicationContext());
tvdepartaemnto.setText(_id + " - " + _nombre);
tvdepartaemnto.setPadding(20,20,10,20);
tvdepartaemnto.setTextSize(16);
contenedor.addView(tvdepartaemnto);
}
}
inputStream.close();
}catch (Exception e) {
e.printStackTrace();
}
}
});
Las líneas de código:
AssetManager assetManager = getAssets();
InputStream inputStream = assetManager.open("departamentos.xml");
Se usan para crear un objeto que permita administrar un recurso de la carpeta “assets”,
que para el caso es el archivo departamentos.xml, que será leído mediando una clase del
tipo InputStream.
Luego tenemos el bloque de código que define el parser o parseador (clase que
formateara e interpreta el archivo) XML
DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
DocumentBuilder builder = factory.newDocumentBuilder();
A dicho elemento builder o parser se le pasa como parámetro el imputstream que
deseamos leer, y luego se normaliza (se interpreta su estructura formal de nodos) y se le
pasa como parámetro a la clase document.
Document document = builder.parse(inputStream);
document.getDocumentElement().normalize();
Luego es necesario identificar cuáles son los nodos que buscamos en el documento xml
que representa la clase “document”, eso se realiza con la siguiente instrucción.
NodeList nodeList = document.getElementsByTagName("departamento");
Finalmente, utilizamos un for para recorrer los elementos del array nodeList
if (node.getNodeType() == Node.ELEMENT_NODE) {
Element element = (Element) node;
String _id =
element.getElementsByTagName("id").item(0).getTextContent();
String _nombre =
element.getElementsByTagName("nombre").item(0).getTextContent();
TextView tvdepartaemnto = new TextView (getApplicationContext());
tvdepartaemnto.setText(_id.toString() + " - " +
_nombre.toString());
tvdepartaemnto.setPadding(20,20,10,20);
tvdepartaemnto.setTextSize(16);
contenedor.addView(tvdepartaemnto);
}
En dicho for se recorren los nodos existentes del xml y se extraen los atributos “id” y
“nombre” para luego ser usado en la propiedad text de todos los TextView que se añaden
al elemento contenedor “LinearLayout”
Luego de recorrer todo el archivo, se cierra el flujo que esta abrió el objeto inputStream
que hace representa el archivo departamentos.xml
inputStream.close();
Dado que el archivo podría estar en uso o no existir el código se ejecuta en un bloque try-
catch para el manejo de la excepción del programa. También en bloque catch se captura la
excepción y de despliega su descripción en la consola de salida estándar.
catch (Exception e) {
e.printStackTrace();
}
Finalmente programamos el evento onClick del botón salir.
btsalir.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
finish();
}
});
Paso 5: Ejecutando la App
Luego de haber codificado la aplicación, pasamos a ejecutarla el resultado se muestra en
las siguientes pantallas:
La aplicación se ejecuta y muestra un interfaz si e
contenido del archivo XML.
La aplicación muestra los datos cargados del archivo
XML luego de que hayamos presionado el botón
“Cargar xml”
Consideraciones de la guía.
Una consideración importante a tener en cuenta al desarrollar esta guía de trabajo,
o es que, cuando se construye el código se realicen los imports necesarios para que
las clases requeridas por la aplicación este disponibles. Los imports que debería de
tener en su proyecto son los siguientes.
import android.content.res.AssetManager;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;
import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;
import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.w3c.dom.Node;
import org.w3c.dom.NodeList;
import java.io.InputStream;
import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
Conclusión.
Como hemos podido experimentar, el manejo de archivos en formato XML puede ser
de mucha ayuda cuando desarrollamos aplicaciones que podrían requerir al acceso a
este tipo de documentos. En la programación de aplicaciones móviles muchas veces
manejaremos datos en formatos xml por su facilidad de gestionar datos estáticos sin
tener que realizar compilaciones y nuevos despliegues de la app.
Es importante señalar que información critica de una app no debería de ser expuesta
en estos formatos abiertos ya que fácilmente podría comprometer la seguridad y la
integridad de la información que estos archivos contienen.
Un uso común de este tipo de documentos podría ser la gestión de variables de
entorno o de sistema, parámetros de configuración o configuraciones personalizadas
del usuario.
