Share
Este tutorial te enseñará cómo usar los controles SplitWindow y Popover de Titanium Mobile mientras construyes una impresionante galería de fotos de Dribbble. En el camino, trabajará con solicitudes de servicios web, contenedores de imágenes y otros componentes comunes de Titanium Mobile. Empecemos!
Con este tutorial, veremos cómo usar los dos elementos de la interfaz de usuario específicos de iPad dentro de Titanium Mobile para crear una aplicación. Específicamente, esta aplicación será una galería que muestra los trabajos más populares en Dribbble. Aunque la mayoría de las mismas herramientas y elementos de UI se usan para crear aplicaciones para teléfonos y tabletas, existen diferencias. La diferencia más obvia en el desarrollo de tabletas es el tamaño de la pantalla.
Las limitaciones de la pantalla de un teléfono empujan a los diseñadores a crear interfaces que tienden a mostrar solo la navegación o el contenido de la aplicación a la vez. Esto a menudo conduce a una interfaz que presenta un menú que desaparece cuando el usuario está mirando el contenido (con un botón de retroceso para volver al menú).
Sin embargo, cuando trabaja con una tableta, tiene mucho más espacio y, en general, desea mostrar la navegación y el contenido al mismo tiempo, manteniendo accesibles los elementos del menú mientras el usuario mira el contenido. También es frecuente que desee colocar información temporalmente sobre el contenido. Aquí es donde entran los controles splitView y Popover específicos del iPad.
Comience creando un nuevo proyecto móvil dentro de Titanuim. Ingrese el nombre del proyecto, la ID de la aplicación y la URL de la compañía que desee. Para los objetivos de implementación, desmarque todas las opciones excepto iPad, ya que este tutorial se centra específicamente en iPads. A continuación, haga clic en Finalizar..
Esto crea la estructura de archivos y los archivos necesarios para un proyecto móvil. Nuestro enfoque está en el archivo "app.js" (dentro de la carpeta de recursos) ya que es donde colocaremos nuestro código. El archivo “app.js” contiene una aplicación predeterminada para comenzar, pero como no lo usaremos en este tutorial, puede eliminar todo el código predeterminado en este archivo. Después de eliminar el código predeterminado, quedará con un punto de inicio limpio.
Para explorar cómo usar estos dos elementos de la interfaz de usuario, construiremos una galería que muestra las obras más populares de Dribbble. Dribbble, además de albergar un trabajo extraordinariamente hermoso, ha proporcionado una API muy fácil de usar para acceder a sus imágenes. La API es directa y no necesita ningún tipo de autorización para comenzar.
Desde esta API, puede acceder a las imágenes en Dribbble de varias maneras, incluyendo la búsqueda de personas, la lista de los debuts y la lista de las imágenes más populares. Para este tutorial, estaremos viendo los más populares. Para más información sobre la API, visite la documentación oficial..
A través de esta API, Dribbble envía sus imágenes a través de un objeto JSON que está estructurado así:
NOTA: La imagen de arriba fue tomada directamente de http://dribbble.com/api
Dentro de este objeto JSON hay una matriz llamada "disparos" que tiene una variedad de información sobre la imagen. Las partes de estos datos con los que trabajaremos son el título, image_url, image_teaser_url, el nombre del jugador, twitter_screen_name y la ubicación.
Para llamar a la API desde Titanium, crea un HTTPClient (en este caso, llamado "myRequest"):
Accentsconagua
var jsonObject; tiros var var myRequest = Ti.Network.createHTTPClient (onload: function (e) jsonObject = JSON.parse (this.responseText) shots = jsonObject.shots, onerror: function (e) alert (e.error);), tiempo de espera: 5000); myRequest.open ("GET", "http://api.dribbble.com/shots/popular"); myRequest.send (); Dentro de este bit de código, invocamos la URL http://api.dribbble.com/shots/popular y, una vez cargada, colocamos la respuesta en una variable llamada jsonObject. Usamos JSON.parse para convertir la cadena que se envía desde Dribbble en un objeto JSON, lo que facilita la navegación. La variable "disparos" contiene una matriz que contiene la información de las imágenes. Puede ver cómo se ve esto agregando "alerta (disparos)" a la función de carga.
El propósito de un diseño de vista dividida es mostrar dos ventanas al mismo tiempo. La primera ventana es la navegación (que en nuestro caso contendrá las miniaturas) y la segunda ventana es para mantener el contenido (que contiene la imagen más grande). Agregue el siguiente código:
var nav = Ti.UI.createWindow (backgroundColor: '# efeeea',); var content = Ti.UI.createWindow (backgroundColor: '# e2e1df',); var splitWin = Ti.UI.iPad.createSplitWindow (masterView: nav, detailView: content, showMasterInPortrait: true,); splitWin.open ();
Aquí, estamos creando las dos ventanas que formarán nuestro diseño, las ventanas de navegación y de contenido. La navegación mantendrá nuestras miniaturas y, por lo tanto, se define como la vista maestra cuando se crea la ventana dividida. El masterView está a la izquierda y tradicionalmente mantiene la navegación. Por defecto, la vista maestra de una ventana dividida no es visible en orientación vertical. Para ver esto en acción, eche un vistazo al cliente de correo en el iPad en orientación vertical y horizontal. Cuando desaparece, es necesario crear una forma alternativa de navegación. En aras de la simplicidad, mantendremos la vista maestra visible en ambas orientaciones para esta aplicación estableciendo la propiedad showMasterInPortrait en true.
Para cambiar la orientación dentro del simulador de iOS, seleccione Hardware> Girar a la derecha desde el menú principal en el simulador, o presione Comando →.
La API de Dribbble envía información en 15 imágenes a la vez, que son demasiadas para mostrar en el espacio disponible. Podemos crear un scrollView, llamado scroll, y agregarlo a la ventana de navegación para permitir al usuario desplazarse por la lista más larga.
var scroll = Ti.UI.createScrollView (contentHeight: 'auto', showVerticalScrollIndicator: true,) nav.add (scroll)
Ya hemos colocado la información para crear las miniaturas en la matriz "disparos". Ahora podemos crear una función que utiliza esa información para crear las miniaturas.
función loadThumbnails () for (var i = 0; i < shots.length; i++) // loops for each image var thumb = Ti.UI.createImageView( // creates thumb image:shots[i].image_teaser_url, // sets image to smaller version of image largeImage:shots[i].image_url, // remembers URL of full size image for later use player:shots[i].player, // remembers information on user who created image height:150, // sets height top:i*170, // positions from top ) scroll.add(thumb) // adds thumb to scrollview
Vayamos a través de lo que hace esta función. Para cada uno de los objetos en la matriz de disparos (es decir, para cada imagen que mostraremos) creamos una vista de imagen llamada "pulgar". La propiedad de imagen de esta vista se establece en la url de una versión más pequeña de la imagen (image_teaser_url) Esta es una versión de 150px X 200px de la imagen. También aprovechamos esta oportunidad para recordar la URL de la imagen a tamaño completo. Hacemos esto agregando una nueva propiedad, denominada largeImage, y configurándola al valor de tiros [i] .image.url. Usaremos esto más adelante para saber qué imagen cargar en el área de contenido. De la misma manera, recordamos la información sobre la persona que creó la imagen, colocándola en la propiedad que creamos llamada "jugador".
Luego dimensionamos y posicionamos el pulgar y lo agregamos al rollo. Se debe llamar a esta función una vez que se cargan los datos, así que agregue loadThumbnails (); a la función onload que creaste anteriormente.
onload: function (e) jsonObject = JSON.parse (this.responseText); disparos = jsonObject.shots; loadThumbnails (); // llama a la función para cargar miniaturas,
Ahora debería ver las miniaturas cargadas en la ventana hacia la izquierda y poder desplazarse hacia abajo para ver las 15 imágenes.
Cree una nueva vista de imagen para mantener la imagen más grande y agregarla a la ventana de contenido. Esta es la imagen que se muestra cuando el usuario selecciona una de las miniaturas. Las imágenes de Dribbble son de 400x300 px, por lo que crea la vista de imagen agregando este código:
var mainImage = Ti.UI.createImageView (width: 400, height: 300,) content.add (mainImage)
Cuando se presiona uno de los pulgares, queremos que cargue la imagen más grande relacionada, la URL para la cual hemos recordado convenientemente con el pulgar como la propiedad largeImage. Para hacer esto, agregamos un EventListener a cada pulgar a medida que se crea dentro del bucle for.
función loadThumbnails () for (var i = 0; i < shots.length; i++) var thumb = Ti.UI.createImageView( image:shots[i].image_teaser_url, largeImage:shots[i].image_url, player:shots[i].player, height:150, top:i*170, ) thumb.addEventListener('touchstart', function(e) mainImage.image = e.source.largeImage; ); scroll.add(thumb) 
Ahora tenemos una galería simple pero funcional que usa datos en vivo..
Los elementos emergentes son el segundo de los elementos de la interfaz de usuario que son específicos para el desarrollo de iPad. Le permiten agregar una capa de información al diseño existente.
var popover = Ti.UI.iPad.createPopover (width: 250, height: 110, arrowDirection: Ti.UI.iPad.POPOVER_ARROW_DIRECTION_DOWN,);
Este código crea un objeto emergente, define el tamaño del contenido dentro de él y establece la dirección de la flecha emergente (y, por lo tanto, la posición de la ventana emergente). Las opciones para el posicionamiento del popover son:
Ti.UI.iPad.POPOVER_ARROW_DIRECTION_UP Ti.UI.iPad.POPOVER_ARROW_DIRECTION_DOWN Ti.UI.iPad.
Queremos que esta ventana emergente aparezca sobre la imagen principal cuando se presiona. Para hacer esto creamos un eventListener para mainImage y muestra la ventana emergente.
mainImage.addEventListener ('touchstart', function (e) popover.show (view: mainImage);); Esto define la imagen principal como la vista a la que se adjunta la ventana emergente.
El popover hace algunas cosas bonitas automáticamente. Además de posicionarse junto a la imagen, hacer clic en cualquier lugar fuera de la ventana emergente hará que desaparezca.
Agreguemos algo de contenido a la ventana emergente, específicamente la foto del perfil, el nombre de twitter y la ubicación del creador. Comience por crear la vista de imagen y las etiquetas que se utilizarán, y agregándolas a la ventana emergente.
var profilePic = Ti.UI.createImageView (width: 80, height: 80, left: 0) var twitterName = Ti.UI.createLabel (width: 140, left: 120, color: '# ffffff', fuente: fontSize: 16, top: 30, height: 30) var location = Ti.UI.createLabel (color: '# ffffff', fuente: fontSize: 16, izquierda: 120, ancho: 140, arriba: 60, altura: 30) popover.add (profilePic) popover.add (twitterName); popover.add (ubicación);
Ahora todo lo que queda es vincular estas vistas y etiquetas a la información que recibimos de Dribbble. Ya que hemos mantenido esta información cuando creamos los pulgares (dentro de la propiedad del jugador), el mejor momento para hacerlo es cuando el usuario selecciona un pulgar..
Dentro de la función de escucha de eventos touch start creada anteriormente, agregue la información para el título emergente, la imagen de perfil, el nombre de twitter y la ubicación.
thumb.addEventListener ('touchstart', function (e) mainImage.image = e.source.largeImage; popover.title = e.source.player.name; profilePic.image = e.source.player.avatar_url; twitterName.text = e.source.player.twitter_screen_name; location.text = e.source.player.location;); 
Y ahí lo tienen, una galería que utiliza los dos elementos especializados de la interfaz de usuario del iPad que muestran el gran trabajo de la comunidad Dribbble. Espero que hayas disfrutado de este uso simple de la API de Dribbble y que explores usos más sofisticados de la misma..
var myRequest = Ti.Network.createHTTPClient (onload: function (e) jsonObject = JSON.parse (this.responseText); shots = jsonObject.shots; loadThumbnails ();), onerror: function (e) alert (e .error);, timeout: 5000); myRequest.open ("GET", "http://api.dribbble.com/shots/popular"); myRequest.send (); var nav = Ti.UI.createWindow (backgroundColor: '# efeeea',); var content = Ti.UI.createWindow (backgroundColor: '# e2e1df',); var splitWin = Ti.UI.iPad.createSplitWindow (masterView: nav, detailView: content, showMasterInPortrait: true,); splitWin.open (); var scroll = Ti.UI.createScrollView (contentHeight: 'auto', showVerticalScrollIndicator: true,) función nav.add (scroll) loadThumbnails () for (var i = 0; i < shots.length; i++) // loops for each image var thumb = Ti.UI.createImageView( // creates thumb image:shots[i].image_teaser_url, // sets image to smaller version of image largeImage:shots[i].image_url, player:shots[i].player, height:150, // sets height top:i*170, // positions from top ) thumb.addEventListener('touchstart', function(e) mainImage.image = e.source.largeImage; popover.title = e.source.player.name; profilePic.image = e.source.player.avatar_url; twitterName.text = e.source.player.twitter_screen_name; location.text = e.source.player.location; ); scroll.add(thumb) // adds thumb to scrollview var mainImage = Ti.UI.createImageView( width:400, height:300, ) content.add(mainImage) var popover = Ti.UI.iPad.createPopover( width:250, height:110, ); mainImage.addEventListener('touchstart', function(e) popover.show(view:mainImage); ); var profilePic = Ti.UI.createImageView( width:80, height:80, left:0 ) var twitterName = Ti.UI.createLabel( width:140, left:120, color:'#ffffff', font:fontSize:16, top:30, height:30 ) var location = Ti.UI.createLabel( color:'#ffffff', font:fontSize:16, left:120, width:140, top:60, height:30 ) popover.add(profilePic) popover.add(twitterName); popover.add(location);
