eMobc

Cómo Crear una Nueva Pantalla en IOS

Antes de empezar con el manual de como crear una nueva pantalla en IOS, vamos a puntualizar que este manual no incluye la lógica de la pantalla sólo incluye los pasos para conseguir que nuestro framework tenga y pueda cargar una nueva pantalla.

Para crear un nuevo estilo de pantalla lo primero que tenemos que hacer es una pantalla que esté vacía, es decir, que sólo tenga lo básico para poder funcionar.

Para nuestro ejemplo vamos a tomar una plantilla que se puede corresponder con una de las pantallas básicas.

Pasos para crear una nueva pantalla de IOS en el framework:

Crear los archivos correspondientes para guardar los datos de nuestra aplicación.

Puesto que contienen los datos de la aplicación, es dentro de este fichero donde tenemos que declarar todos los datos que nuestra aplicación va a necesitar para funcionar. Estos archivos deben estar dentro de la carpeta DATA y tendrán los siguientes nombres:

*nuevaPantallaLevelData.h

*nuevaPantallaLevelData.m

Crear los nuevos niveles para nuestra pantalla.

El Level será el encargado de añadir los datos de la pantalla en el array de la clase padre, de la clase que contiene los datos de la aplicación.

En nuestro caso sólo contendrá un método (como todos los Level) que los añadirá a una lista y a un diccionario de la aplicación

Nuestros Archivos están en la carpeta LEVEL con los nombres de:

nuevaPantallaLevel.h

nuevaPantallaLevel.m

Crear el xib de nuestra pantalla.

Es decir, tenemos que crear el aspecto de nuestra pantalla. Siguiendo el razonamiento de ir copiando los archivos que dan forma a una plantilla básica bastará con copiar el mismo xib y pegarlo dentro de la carpeta XIB.

A la hora de personalizar nuestra pantalla tendremos que incluir en el xib aquellos componentes que necesitemos para crear el aspecto de la pantalla que necesitemos.

El nuevo archivo tendrá el nombre de:

NwNuevaPantallaController.xib

Crear el nuevo controlador para que dirija nuestra interfaz.

Debido a que hemos creado un nuevo xib, le tenemos que asociar a un nuevo controlador.

El controlador es quién se encarga de llevar toda la lógica de la pantalla.

Como queremos que crear una nueva pantalla tenemos que crear un nuevo controlador aunque de momento sólo vamos a copiar el controlador de la pantalla de plantilla renombrandolo para que nos quede de la siguiente manera:

NwNuevaPantallaController.h

NwNuevaPantallaController.m

Si queremos personalizar nuestra pantalla tendremos que incluir dentro de estos archivos los métodos necesarios para que la nueva pantalla se comporte como queremos.

En este punto no sólo vamos a tener que crear los ficheros de los controladores si no que le tenemos que decir al sistema que cuando cargue la Vista de nuestra pantalla cargue también su controlador.

Para ello tenemos que abrir el xib y abrir el Inspector sobre el File’s Owner.

Cuando lo tengamos abierto nos vamos a la última pestaña, Identity (comando-4) y cambiamos la pestaña de clase donde le vamos a poner el nuevo controlador que hemos creado. De esta manera lo que estamos haciendo es decirle al Owner de nuestra Vista que necesita de nuestro nuevo controlador para funcionar.

El File’s Owner es el encargado de cargar el xib. Podemos decir que es el que enlaza la parte gráfica de nuestra pantalla con la parte de código bien sea el controlador como los eventos (IBAction) y los componentes (IBOutLet)

Modificar el archivo de AppLevel.h

AppLevel contiene todos los tipos de pantalla que hasta ahora soportaba el framework, para que el framework reconozca el nuevo tipo de pantalla que estamos creando tenemos que añadir a la variable de tipo enumerado ActivityType el nuevo tipo que representará a la nueva pantalla en nuestro caso sería así:

NUEVAPANTALLA_ACTIVITY

De esta manera cuando queramos navegar hasta nuestra nueva pantalla podremos reconocerla e invocar a los métodos específicos que me indicaran el controlador a usar, el parser o el xml asociados

Ahora nos vamos a la clase nwUtil

Esta clase es la que se encarga de dado el tipo de actividad invocar al método que indica el parser a utilizar, para conseguir esta funcionalidad tenemos que seguir los siguientes pasos:

• Lo primero que tenemos que hacer es irnos a nwUtil.h y declarar un nuevo método que nos ayudará a elegir el parser adecuado para nuestra pantalla, el propio de la pantalla.
• readNuevaPantallaData
• Después de haber añadido el nuevo método en la cabecera de nuestro archivo, vamos a seguir estos dos pasos:
• Implementar el método readNuevaPantallaData, que será el encargado de cargar todos los datos del xml en la nueva pantalla (para ello para empezar y puesto que todos siguen la misma estructura, podemos copiar el método correspondiente a nuestra plantilla)
  
  

• Añadir al método readAppLevelData la opción necesaria para cuando le entre nuestro tipo de pantalla (NUEVAPANTALLA_ACTIVITY) pueda llamar al método antes implementado.
  
  

El eMobcViewController es el encargado de invocar al método adecuado para poder cambiar de nivel, es decir cambiar de pantalla y asociar el controlador adecuado.

Para conseguir que el eMobcViewController pueda llamar al controlador de nuestra nueva pantalla tenemos que crear los siguientes métodos con su correspondiente definición en la cabecera.

Puesto que la estructura de estos métodos es la misma prácticamente para todos podemos tomar los métodos correspondientes a nuestra plantilla y ajustarlos a la nueva pantalla

• Dentro de eMobcViewController tenemos que definir e implementar los siguientes métodos. Para ello y puesto que la estructura es semejante en todos podemos tomar los métodos asociados a la plantilla y cambiar aquello que sea específico a de cada pantalla.
• loadNuevaPantallaNextLevel, carga el nuevo nextLevel y su correspondiente controlador, es decir, invoca a loadNuevaPantallaController
  
  

• loadNuevaPantallaController, carga el nuevo controlador
  
  

• Para conseguir que se llame al NextLevel de nuestra pantalla y que se le asocie el controlador adecuado tenemos que modificar:
• showNextLevel, dentro de este métodos tenemos que añadir otra opción dentro del case que soporte el nuevo tipo de actividad y que cuando le entre este tipo invoque al método de loadNuevaPantallaNextLevel
  
  

Llegados a este punto tenemos que modificar el app.xml añadiendo la nueva actividad, es decir, sabemos que el app.xml es el xml que va a tener la información de todo (o casi todo) lo que puede hacer el framework.

No sólo eso sino que es al app.xml donde vamos a ir a buscar los demás ficheros xml cuando queramos cargar un nuevo nextLevel.

Debido a ello tenemos que añadir un nuevo nivel donde tenemos que indicar el nuevo tipo de actividad (NUEVAPANTALLA_ACTIVITY),el levelID, y el levelFile que será el nombre del archivo xml asociado con nuestra nueva pantalla.

Modificado el app.xml tenemos que tomar el nombre que le hemos puesto dentro de la etiqueta levelFile y crear así el xml que va a definir los datos de nuestra pantalla.

Como lo que estamos haciendo simplemente es incluir una nueva pantalla en el framework y siguiendo el procedimiento de tomar la plantilla para conseguir una rápida integración, en este caso sólo será necesario tomar el xml asociado a nuestra plantilla. Podemos llamar al nuevo xml de la siguiente manera:

• nueva_pantalla.xml

Tenemos que tener en cuenta que cuando queramos personalizar nuestra pantalla tendremos que crear un xml ajustado a sus necesidades, de tal manera que podamos definir una nueva pantalla con los datos correspondientes.

Cabe destacar que los xml no son implementados por nosotros a mano, si no que son generados por el panel de control.

Llegados a este punto y recien modificado el app y creado nueva_pantalla.xml, tenemos que modificar AppParser (asociado al app.xml) y además tenemos que crear un nuevo parser para que pueda leer el xml que tendrá nuestra nueva pantalla.

• AppParser, será el encargado de parsear app.xml por lo que si hemos añadido nuevas etiquetas (en este caso el nuevo tipo de actividad) se lo tendremos que indicar, para que cuando lo lea pueda reconocerla, así que le tendremos que añadir esta nueva constante como:
• kActTypeNuevaPantalla = @”NUEVAPANTALLA_ACTIVITY”
  
  

NuevaPantallaParser, este será el parser que esté asociado a la nueva pantalla. Debido a ello este parser tiene que contener una constante por cada etiqueta del xml que queramos reconocer, y una acción que se corresponda con la lectura del valor de la etiqueta.

Como lo que estamos haciendo es una rápida integración, bastará con copiar el parser asociado a nuestra plantilla. No debemos olvidar que si queremos personalizar la pantalla vamos a tener que crear un nuevo parser que sea capaz de leer el xml específico de la nueva pantalla. Para crearlo, tenemos que saber que todos los parser siguen una estructura fija por lo que conviene seguirla, para saber más acerca de las estructuras de los parser, ve al capítulo de Estructura de Parser.

Si hemos seguido todos los pasos anteriores y si no hemos tocado el código de todos los ficheros que hemos copiado tendremos que tener una copia de la pantalla que hemos tomado como plantilla sólo que con diferente nombre.

Para ver si realmente nuestra pantalla ha quedado integrada (aunque de momento sea una copia de otra) sólo tendremos que modificar (por ejemplo) el xml de la portada para que sea capaz de cargar como nextLevel nuestra nueva pantalla.

Aitor García

Equipo eMobc