Lenguaje Lua para desarrollo en iOS Angry Birds: Explicación detallada del Framework Wax (II)
La aplicación mostrará una lista de temas de tendencia actual en Twitter, que se pueden actualizar mediante un botón. Cuando se complete este proceso, podrás desarrollar tu propio "Angry Birds" a partir de una idea. Resultado final:
Paso 1: Analizar AppDelegate.lua
Si echas un vistazo al AppDelegate.lua actual, notarás algunas cosas. Primero, notarás la primera línea del 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 se explica por sí mismo. Crea una nueva ventana con un fondo azul y muestra un texto blanco en ella. Sin embargo, lo que necesitamos es un programa cliente de Twitter, no una pantalla de "¡Hola Lua!". ¿Primero un UITableViewController?
Paso 2: UITableViewController familiar
Si tienes buena memoria, crea un nuevo archivo llamado "TwitterViewController.lua". nueva clase Objective-C, necesitamos usar la función WaxClass. Si tienes buena memoria, también recordarás que WaxClass funciona de la siguiente manera:
waxClass{"CLASSNAME", " PARENT_CLASS"}
Necesitamos una clase que extienda UITableViewController, por lo que se ve así:
waxClass{"TwitterViewController",UITableViewController}
Ya tenemos Con la clase definida, ahora manejar la inicialización. En el método "init", configuramos la tabla en "agrupada" en lugar de la "simple" predeterminada. Dado que también mostraremos la tabla de tendencias, también necesitamos inicializar el Lua que contiene todas las tendencias. Tabla:
functioninit(self)self.super:initWithStyle(UITableViewStyleGrouped)self.trends={} returnselfend
Básicamente, este paso se explica por sí mismo.
3: Prepara la tabla
Ya tenemos una tabla agrupada, por lo que necesitamos un título. En este paso, usamos el método "viewDidLoad:".
functionviewDidLoad(self)self:setTitle("MyFirstWaxApplication")self:tableView():setAllowsSelection(false)end
No es necesario agregar ninguna instrucción. Simplemente ponemos el título en la barra en la parte superior de la pantalla y evitamos que el usuario seleccione cualquier fila de la tabla. La razón por la que no queremos que el usuario seleccione ninguna fila es porque no queremos manejar esa acción. Puede ver qué otros métodos se pueden llamar en la página de documentación UITableViewController de Apple. Recuerde: debe utilizar los métodos ":property()" y ":setProperty(value)", no propiedades. Presione la tecla "Ejecutar" en la esquina superior izquierda de Xcode y su aplicación debería verse así:
Paso 4: Métodos de datos UITableViewController
Nuestra aplicación se inicia, es fácil, OK. pero queremos mostrar algunos datos. Para mostrar estos datos, todos los UITableViewControllers deben implementar varios métodos para indicarle al dispositivo qué datos mostrar. El primero de estos métodos es "numberOfSectionsInTableView:" que devuelve el número de grupos que se mostrarán en la tabla. Este paso es muy sencillo para la aplicación porque sólo necesitamos un segmento de la tabla, el que muestra la tendencia actual.
functionnumberOfSectionsInTableView(self, tableView) devuelve 1end
¿No es muy simple? Ahora tenemos que implementar el método "tableView_numberOfRowsInSection" que le dirá al dispositivo cuántas filas tendrá un grupo en particular. Esto también es fácil para la aplicación ya que solo tenemos una sección de tabla. ¿Recuerdas cómo inicializamos la tabla Lua usando el método "init"? Simplemente cuente el número de entradas de la tabla para saber cuántas filas necesita mostrar la tabla:
functiontableView_numberOfRowsInSection(self, tableView, sección) return#self.trendsend
Esto usa Lua Forma abreviada de contar el número de entradas de una tabla. Si no está familiarizado con las tablas de Lua, aquí tiene algunos consejos:
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, en Lua se llama tabla con claves numéricas ordenadas.
3. Las matrices usan 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 "tableView_titleForHeaderInSection". contenido de visualización del título del grupo específico Simplemente devuelve una cadena para el grupo dado, y el título aparecerá mágicamente encima de la fila de la tabla:
functiontableView_titleForHeaderInSection(self, tableView, sección) ifsection ==0thenreturn" CurrentTrendingTopics "endreturnnilend
Muy simple. Ahora simplemente completamos la tabla con los datos que obtenemos del servidor de Twitter.
Si está familiarizado con UITableViewControllers en Objective-C, reconocerá el siguiente método:
functiontableView_cellForRowAtIndexPath(self, tableView, indexPath) localidentifier="TwitterTableViewControllerCell "localcell=tableView: dequeueReusableCellWithIdentifier(identifier) o UITableViewCell: initWithStyle_reuseIdentifier (UITableViewCellStyleDefault, identificador) localobject=self.trends[indexPath: row() 1]--Debe ser 1, porque las matrices Lua comienzan desde 1 startcell: textLabel(): setText(object) returncellend
Este método es un poco complicado. Primero, queremos definir un identificador que será único para todas las celdas del mismo tipo pero posiblemente con contenido diferente. En este caso, lo llamaremos "TwitterTableViewControllerCell". A continuación, utilizamos métodos abreviados de Lua para obtener una instancia de UITableViewCell. Tenga en cuenta la "o" intercalada entre las dos llamadas a métodos. Si el resultado de la primera llamada al método no es falso o nulo, "celda" se establecerá en el valor de la primera llamada al método. De lo contrario, "celda" se establecerá como el resultado de la segunda llamada al método. Hacemos esto para ahorrar memoria. De esta manera, el dispositivo solo asigna memoria para aproximadamente 10 celdas de tabla en la pantalla a la vez, en lugar de las miles de celdas de tabla que podría tener la fuente de datos. Por supuesto, no tendremos miles de filas de datos para mostrar, pero sigue siendo una buena práctica. A continuación, configuramos el contenido de la celda de la tabla según la tendencia de la parte correspondiente de la "matriz" self.trends. Sabemos que el índice nunca saldrá del rango de self.trends porque le dijimos al dispositivo el tamaño de la matriz mediante el método "tableView_numberOfRowsInSection". Finalmente, devolveremos la celda de la tabla que acabamos de crear. Si ahora presionas la tecla "Ejecutar", el resultado debería verse así:
#p#Subtitle#e#
Paso 5: Cargar datos de Twitter
Ahora viene la parte divertida que realmente saca a relucir la magia de Wax: cargar el JDump desde Internet, o más precisamente, desde los servidores de Twitter. Los servidores de Twitter. Comencemos 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.
functionloadDataFromTwitter(self) UIApplication: shareApplication(): setNetworkActivityIndicatorVisible(true) -- showpinner cera .http.request{, callback=function(json, respuesta) UIApplication: shareApplication(): setNetworkActivityIndicatorVisible(false) - - hidespinner ifresponse: statusCode()==200then self.trends={} -- Cuando se actualiza la tendencia, restablece la lista de tendencias para el índice, valueinipairs(json["trends"])do --iterateoveratablewithnumericalkeys table.insert(self.trends , valor["nombre"])--añadir el valor al "matriz" end end self ：tableView()：reloadData() end} end
Sí, es así de simple. Solo necesita definir la URL de la solicitud y la devolución de llamada que se ejecutará cuando se complete la solicitud. Wax confirma automáticamente que el servidor está ejecutando JSON y luego convierte automáticamente el texto JSON en una tabla Lua. Esto hace que sea increíblemente 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 formato JSON devuelto es el siguiente. La palabra clave "tendencias" contiene un conjunto de objetos que contienen el nombre de la tendencia y la URL para acceder a todos los feeds de Twitter que mencionan esa tendencia.
Después de que el nombre de la tendencia se almacene en la variable self.trends, se recargará en tableView y tableView volverá a llamar a todos los métodos de datos que definimos anteriormente. Esto dará como resultado que las tendencias se muestren en una tabla, muy similar al producto final.
Si intentas ejecutar la aplicación inmediatamente, nada se verá diferente. Esto se debe a que nunca se llama al método. Si llamamos a este método en "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:loadDataFromTwitter()
Si hace clic en "Ejecutar", la aplicación se verá un poco así (si haces clic en "ejecutar"). La aplicación se parece un poco a esto (tendrás que esperar unos segundos para que se carguen las tendencias, ¡así que mantente atento al indicador de actividad!):
Paso 6: agrega un botón de recarga
Aplicación Excelente. Sin embargo, sería mejor si hubiera un botón de recarga que le permitiera mostrar las últimas tendencias. Afortunadamente, esto es fácil de lograr.
Es una buena idea colocar 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, así que, por conveniencia, usémoslo. Primero, cree un botón usando el método "viewDidLoad:". Agregue la siguiente línea antes de la llamada "loadDataFromTwitter".
botón local = UIBarButtonItem:initWithBarButtonSystemItem_target_action(UIBarButtonSystemItemRefresh, self, "loadDataFromTwitter")
Esto crea un UIBarButtonItem: llamado en la instancia del objeto actual una vez que se presiona el botón" método loadDataFromTwitter ". Si quieres probar otros estilos, haz clic aquí para ver una lista.
Ahora que hemos creado el botón, debemos agregarlo a nuestra interfaz. Usar UITableViewController hará que este trabajo sea fácil y simple, solo necesitamos llamar al método "setRightBarButtonItem:" en la instancia del objeto de la barra de navegación como se muestra a continuación (esta línea está después del método dado arriba):
self: NavigationItem(): setRightBarButtonItem(button)
Si hiciste todo bien, tu aplicación terminada debería verse así:
Paso 7: Beneficios adicionales
Una aplicación divertida La extensión de este proyecto sería hacer un indicador de carga más prominente. Esto puede requerir colocar un UIActivityIndicatorView en lugar de uno de los botones.
Conclusión
Espero que hayas aprendido mucho sobre Wax a través de este tutorial. Si desea obtener más tutoriales de Wax sobre un tema específico, no dude en escribirme.
#p#subtitle#e#