Desarrollo del lenguaje Angry Birds Lua en IOS: explicación detallada del marco Wax (2)
Esta aplicación muestra una lista de temas de tendencia actual en Twitter y puedes usar botones para actualizar el contenido. Cuando todo el proceso esté completo, tal vez una idea te permita desarrollar tu propio Angry Birds. Resultado final:
Paso 1: Analizar AppDelegate.lua
Si observa el AppDelegate.lua actual, notará varios aspectos. Primero, notarás la primera línea de este archivo Lua. Esta línea es la declaración de clase Objective-C. Creamos una clase llamada "AppDelegate" que se ajusta al protocolo "UIApplocationDelegate". A continuación, verá el único método en el archivo: "applicationDidFinishLaunching". Este famoso método se llama cada vez que se inicia la aplicación. La aplicación ahora puede mostrar contenido en la pantalla. El código en "applicationDidFinishLaunching" básicamente no requiere explicación. Crea una nueva ventana con un fondo azul y luego le pone un texto blanco. Sin embargo, lo que necesitamos es un cliente de Twitter, no una pantalla de "¡Hola Lua!". Comencemos creando un UITableViewController.
Paso 2: Familiarícese con UITableViewController
Cree un nuevo archivo llamado "TwitterViewController.lua" en el directorio del script. Si tienes buena memoria, recordarás que para declarar una nueva clase Objective-C, necesitamos usar la función WaxClass. Si tienes buena memoria, recordarás que WaxClass funciona así:
waxClass{"CLASSNAME", "PARENT_CLASS"}
Necesitamos extender una clase de UITableViewController, entonces se ve así:
wax class { " TwitterViewController ", UITableViewController}
Ahora que tenemos la clase definida, manejaremos la inicialización. En nuestro método "init", configuramos la tabla como "agrupada" de forma predeterminada, no como "simple". Como también queremos mostrar la tabla de tendencias, es necesario inicializar la tabla Lua que contiene todas las tendencias:
función init(self)self .super:init con style(UITableViewStyleGrouped)self . return self end
Básicamente no se necesita explicación.
Paso 3: Preparar el formulario.
Ahora que tenemos una tabla agrupada, necesitamos un título. Usamos el método "viewDidLoad:" para lograr este paso.
functionviewDidLoad(self)self:setTitle(" MyFirstWaxApplication ")self:table view():setallowselection(false)end
Esto no necesita explicación alguna. Simplemente colocamos el título en la barra en la parte superior de la pantalla y luego evitamos que el usuario seleccione cualquier fila de la tabla. No queremos que el usuario seleccione ninguna fila porque no queremos manejar esta operación. Puede ver qué otros métodos se llaman en la página de documentación UITableViewController de Apple.
Recuerde: debe utilizar los métodos ":property()" y ":setProperty(value)", no propiedades. Presione "Ejecutar" en la esquina superior izquierda de Xcode y la aplicación debería verse así:
Paso 4: Métodos de datos UITableViewController
Nuestra aplicación se inicia, lo cual es genial, pero deseamos Muestra algunos datos. Para mostrar estos datos, todos los UITableViewControllers deben implementar varios métodos para indicarle al dispositivo qué datos mostrar. El primer método es "numberOfSectionsInTableView:" que devuelve el número de grupos que se mostrarán en la tabla. Para esta aplicación, este paso es fácil porque sólo necesitamos un segmento de la tabla, el que tiene la tendencia actual.
functionnumberOfSectionsInTableView(self, TableView) devuelve 1end
¿Es fácil? Ahora, tenemos que implementar el método "table view_numberofroweinsertion", que le dice al dispositivo cuántas filas habrá en un grupo específico. Esto también es fácil para esta aplicación ya que solo tenemos un segmento de tabla. ¿Recuerdas cómo inicializamos una tabla Lua usando el método "init"? Simplemente cuente el número de entradas en la tabla para saber cuántas filas necesita mostrar la tabla:
función tableView _ numberOfRowsInSection(self, vista de tabla, Sección) devuelve #self.trendsend
Esto utiliza la abreviatura de Lua para contar el número de entradas en una tabla. Si no está familiarizado con las tablas de Lua, aquí hay algunos puntos clave:
1. Lo que se llama diccionario en la mayoría de los idiomas se llama tabla en Lua.
2. Lo que en la mayoría de los idiomas se llama matriz se llama tabla con claves numéricas ordenadas.
3. "Array" usa indexación basada en 1, mientras que casi todos los demás lenguajes usan indexación basada en 0.
El siguiente es el método "table view_titleforheaderinsection". Este método le dice al dispositivo qué mostrar como título de grupo. Siempre que devuelva una cadena que especifique el grupo, el título aparecerá mágicamente encima de las filas de la tabla:
función tableView _ titleForHeaderInSection(self, vista de tabla, sección) si sección == 0, entonces devolverá "ActualmenteTrendingTopics" endreturnnilend
Es sencillo. Ahora todo lo que tenemos que hacer es completar el formulario con datos del servidor de Twitter.
Si está familiarizado con UITableViewControllers en Objective-C, conocerá el siguiente método:
función tableView_cellforrowatdinexpath(self, vista de tabla, ruta de índice) identificador local = "TwitterTableViewControllerCell" celda local = vista de tabla:dequereusesablecellwithsidentifier ( identificador) o uitableviewcell:initwithstyle_reuse identificador(uitableviewcellstyledefault,identificador) local object = self tendencias[ruta de índice:fila()+1] - debe ser +1 porque las matrices Lua comienzan en 1, celda:etiqueta de texto() :settext(object
Este método es un poco más complicado. Primero, definimos un identificador único para todas las celdas de la tabla del mismo tipo, pero posiblemente con contenido diferente. En este caso, lo llamamos " TwitterTableViewControllerCell ". A continuación, utilizamos métodos abreviados de Lua para obtener una instancia de UITableViewCell. Tenga en cuenta el "o" intercalado entre estas dos llamadas a métodos. Si el resultado de la primera llamada al método no es falso o nulo, entonces "celda" "se establece en el valor de la primera llamada al método. De lo contrario, "celda" se establecerá en el resultado de la segunda llamada al método. Hacemos esto para ahorrar memoria. De esta manera, el dispositivo solo necesita tener alrededor de 10 celdas de tabla en la pantalla a la vez. time Por supuesto, no tendremos miles de filas para representar, pero sigue siendo un buen hábito para desarrollar. Configuramos el contenido de la celda de la tabla según la tendencia obtenida de la parte apropiada de la "matriz" self.trends. Sabemos que el índice nunca irá más allá del rango de self.trends porque le indicamos al dispositivo el tamaño de la matriz mediante el método "tableview_numberofrowinsertion". Finalmente, volvemos a la celda de la tabla que acabamos de crear. ahora debería verse así:
#p#subtitle#e#
Paso 5: cargar datos de Twitter
Ahora vayamos a la parte divertida que Realmente muestra la magia de Wax: cargar datos JSON desde Internet, o más precisamente, desde los servidores de Twitter. Es posible que desees comenzar creando un nuevo método llamado "loadDataFromTwitter". Este método obtendrá los datos JSON del servidor de Twitter y luego recargará la tabla con los nuevos datos.
funciónloaddatafromtirter(self)ui aplicación:aplicación compartida():setNetworkActivityIndicatorVisible(true)-mostrar cera giratoria http . (falso) -ocultar spinner si respuesta: código de estado()= = 200 luego self tendencias = {}-restablecer la lista de tendencias cuando se actualizan para el índice, valor de pares (JSON["tendencias"])hacer una tabla con claves numéricas
Sí, es así de sencillo. Usted define la URL de la solicitud y la devolución de llamada que se ejecutará una vez completada la solicitud. Wax confirma automáticamente que el servidor convertirá automáticamente el texto JSON en una tabla Lua después de ejecutar JSON. Esto hace que sea extremadamente fácil mostrar el indicador de actividad de la red (el ícono en la esquina superior derecha del dispositivo cerca del indicador de señal inalámbrica). El JSON devuelto se muestra a continuación. La clave "tendencias" contiene un conjunto de objetos que contienen el nombre de la tendencia y la URL para acceder a todos los mensajes de Twitter que mencionan la tendencia.
Después de que el nombre de la tendencia se almacena en la variable self.trends, se vuelve a cargar en tableView y la vista de tabla puede volver a llamar a todos los métodos de datos que definimos anteriormente. Esto da como resultado que las tendencias se muestren en la tabla, que es muy similar al producto final.
Si intentas ejecutar la aplicación inmediatamente, no se verá diferente. Esto se debe a que nunca se llama al método. Si el método se llama desde "viewDidLoad:" podemos asegurarnos de que siempre se muestren las últimas tendencias. Agregue esta línea antes de la última línea del método "viewDidLoad:":
self:loaddatafromtirter()
Si hace clic en "Ejecutar", la aplicación se verá un poco así ( Espere unos segundos a que se carguen las tendencias, observe el indicador de actividad):
Paso 6: agregue un botón de recarga
Esta aplicación es excelente. Sin embargo, sería mejor si hubiera un botón de recarga para poder mostrar las últimas tendencias. Afortunadamente, esto es fácil de lograr.
Coloca el botón de recarga en la esquina superior derecha de la pantalla. Apple en realidad proporciona un botón con un ícono de actualización para mayor comodidad, así que use este botón. Primero cree un botón usando el método "viewDidLoad:". Agregue las siguientes líneas antes de la llamada "loadDataFromTwitter".
botón local = UIBarButtonItem:initwithbarbuttonsystem item_target_action(uibarbuttonsystem item update, self, "loadDataFromTwitter")
Esto creará un UIBarButtonItem: una vez que se presione el botón, será el "loadDataFromTwitter" "El método se llama en la instancia del objeto actual. Si quieres probar otros estilos, puedes encontrar una lista aquí.
Hemos creado el botón, ahora necesitamos agregarlo a nuestra interfaz. Utilice UITableViewController para facilitar este trabajo.
Sólo necesitamos llamar al método "setRightBarButtonItem:" en la instancia del objeto de la barra de navegación, así (esta línea viene después de la anterior):
self:navigation item():setRightBarButtonItem(button)
Si hiciste todo, la aplicación terminada debería verse así:
Paso 7: Extras
Una extensión divertida para este proyecto es hacer que el indicador de carga sea más visible. Esto puede requerir colocar un UIActivityIndicatorView en lugar de uno de los botones.
Conclusión
Espero que este tutorial te haya parecido una introducción sencilla a la cera. Si quieres ver más tutoriales de cera sobre un tema determinado, déjame un comentario.
#p#subtitle#e#