Share
Ce didacticiel vous apprendra à utiliser les commandes SplitWindow et Popover de Titanium Mobile tout en créant une superbe galerie de photos à partir de Dribbble. En cours de route, vous travaillerez avec des demandes de service Web, des conteneurs d'images et d'autres composants communs de Titanium Mobile. Commençons!
Avec ce tutoriel, nous verrons comment utiliser les deux éléments d'interface utilisateur spécifiques à iPad dans Titanium Mobile pour créer une application. Plus précisément, cette application sera une galerie présentant les œuvres les plus populaires sur Dribbble. Bien que la plupart des mêmes outils et éléments de l'interface utilisateur soient utilisés pour créer des applications pour téléphones et tablettes, il existe des différences. La différence la plus évidente dans le développement de la tablette est la taille de l'écran.
Les limites d'écran d'un téléphone poussent les concepteurs à créer des interfaces qui tendent à ne montrer que la navigation ou le contenu de l'application à la fois. Cela conduit souvent à une interface qui présente un menu qui disparaît lorsque l'utilisateur regarde le contenu (avec un bouton Précédent pour revenir au menu).
Cependant, lorsque vous travaillez avec une tablette, vous disposez de beaucoup plus d'espace et vous souhaitez généralement afficher la navigation et le contenu en même temps, en maintenant les éléments de menu accessibles pendant que l'utilisateur regarde le contenu. Vous souhaitez également fréquemment superposer temporairement certaines informations sur le contenu. C’est là que les commandes splitView et Popover spécifiques à l’iPad entrent en jeu..
Commencez par créer un nouveau projet mobile au sein de Titanuim. Entrez le nom du projet, l'identifiant de l'application et l'URL de la société souhaités. Pour les cibles de déploiement, décochez toutes les options sauf iPad car ce didacticiel est spécifiquement destiné aux iPad. Cliquez ensuite sur Terminer.
Cela crée la structure de fichier et les fichiers nécessaires pour un projet mobile. Nous nous concentrons sur le fichier “app.js” (dans le dossier des ressources) car c'est là que nous allons placer notre code. Le fichier “app.js” contient une application par défaut pour vous aider à démarrer, mais comme nous ne l'utilisons pas dans ce tutoriel, vous pouvez supprimer tout le code par défaut de ce fichier. Après avoir supprimé le code par défaut, vous resterez avec un point de départ propre.
Afin d'explorer l'utilisation de ces deux éléments de l'interface utilisateur, nous allons créer une galerie présentant les œuvres les plus populaires de Dribbble. Dribbble, en plus d’héberger des œuvres remarquablement belles, a fourni une API très facile à utiliser pour accéder à leurs images. L'API est directe et ne nécessite aucune forme d'autorisation pour commencer.
À partir de cette API, vous pouvez accéder aux images sur Dribbble de différentes manières, notamment en recherchant des personnes, en répertoriant les débuts et en répertoriant les images les plus populaires. Pour ce tutoriel, nous allons examiner les plus populaires. Pour plus d'informations sur l'API, consultez la documentation officielle..
A travers cette API, Dribbble envoie ses images via un objet JSON structuré de la manière suivante:
REMARQUE: L’image ci-dessus a été prise directement à partir de http://dribbble.com/api
Cet objet JSON contient un tableau appelé "plans" qui contient diverses informations sur l'image. Les parties de ces données sur lesquelles nous allons travailler sont le titre, image_url, image_teaser_url, nom du joueur, twitter_screen_name et emplacement..
Pour faire appel à l'API de Titanium, vous créez un HTTPClient (dans ce cas, nommé "myRequest"):
Accentsconagua
var jsonObject; var coups; var myRequest = Ti.Network.createHTTPClient (onload: function (e) jsonObject = JSON.parse (this.responseText) shots = jsonObject.shots, onerror: function (e) alert (e.error);, délai d'attente: 5000); myRequest.open ("GET", "http://api.dribbble.com/shots/popular"); myRequest.send (); Dans ce morceau de code, nous appelons l'URL http://api.dribbble.com/shots/popular et, une fois chargé, plaçons la réponse dans une variable appelée jsonObject. Nous utilisons JSON.parse pour convertir la chaîne envoyée par Dribbble en un objet JSON, ce qui facilite la navigation. La variable «plans» contient un tableau contenant les informations pour les images. Vous pouvez voir à quoi cela ressemble en ajoutant «alert (shots)» à la fonction de chargement.
Le but d'une mise en page en double-vue est de montrer deux fenêtres en même temps. La première fenêtre est la navigation (qui dans notre cas contient les vignettes) et la deuxième fenêtre contient le contenu (contenant la plus grande image). Ajoutez le code suivant:
var nav = Ti.UI.createWindow (backgroundColor: '# efeeea',); var content = Ti.UI.createWindow (backgroundColor: '# e2e1df',); var splitWin = Ti.UI.iPad.createSplitWindow (masterView: navigation, detailView: contenu, showMasterInPortrait: true,); splitWin.open ();
Ici, nous créons les deux fenêtres qui formeront notre mise en page, les fenêtres de navigation et de contenu. Le nav tiendra nos vignettes et est donc défini comme le masterView lorsque la fenêtre scindée est créée. Le masterView est à gauche et tient traditionnellement la navigation. Par défaut, la vue principale d'une fenêtre divisée n'est pas visible en orientation portrait. Pour voir cela en action, jetez un œil au client de messagerie de l'iPad en orientation portrait et paysage. Lorsqu'elle disparaît, une autre forme de navigation doit être créée. Par souci de simplicité, nous allons garder la vue principale visible dans les deux orientations pour cette application en définissant la propriété showMasterInPortrait sur true..
Pour modifier l’orientation dans le simulateur iOS, sélectionnez Matériel> Rotation à droite dans le menu principal du simulateur ou appuyez sur Commande →..
L'API Dribbble envoie des informations sur 15 images à la fois, ce qui est trop pour être affiché dans l'espace disponible. Nous pouvons créer un scrollView, nommé scroll, et l'ajouter à la fenêtre de navigation pour permettre à l'utilisateur de faire défiler la liste la plus longue..
var scroll = Ti.UI.createScrollView (contentHeight: 'auto', showVerticalScrollIndicator: true,) nav.add (scroll)
Nous avons déjà mis les informations pour créer les vignettes dans le tableau "shots". Nous pouvons maintenant créer une fonction qui utilise cette information pour créer les vignettes.
function loadThumbnails () pour (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
Passons en revue ce que cette fonction fait. Pour chacun des objets du tableau de plans (c'est-à-dire, pour chaque image que nous allons montrer), nous créons une vue d'image nommée "thumb". La propriété image de cette vue est définie sur l'URL d'une version plus petite de l'image (image_teaser_url). Il s'agit d'une version de 150px X 200px de l'image. Nous en profitons également pour nous rappeler l’URL de l’image en taille réelle. Nous faisons cela en ajoutant une nouvelle propriété, nommée largeImage, et en lui attribuant la valeur suivante: shots [i] .image.url. Nous l'utiliserons plus tard pour savoir quelle image charger dans la zone de contenu. De la même manière, nous nous souvenons des informations sur la personne qui a créé l'image, en la plaçant dans la propriété que nous avons créée nommée "joueur"..
Nous dimensionnons et positionnons ensuite le pouce et l’ajoutons au parchemin. Cette fonction doit être appelée une fois les données chargées, ajoutez donc loadThumbnails (); à la fonction onload que vous avez créée précédemment.
onload: function (e) jsonObject = JSON.parse (this.responseText); shots = jsonObject.shots; loadThumbnails (); // appelle la fonction pour charger les miniatures,
Vous devriez maintenant voir les vignettes chargées dans la fenêtre vers la gauche et pouvoir faire défiler vers le bas pour voir toutes les 15 images..
Créez une nouvelle vue d'image pour contenir la plus grande image et l'ajouter à la fenêtre de contenu. C'est l'image qui s'affiche lorsque l'utilisateur sélectionne l'une des miniatures. Les images de Dribbble sont 400x300px donc vous créez la vue d’image en ajoutant ce code:
var mainImage = Ti.UI.createImageView (largeur: 400, hauteur: 300,) content.add (mainImage)
Lorsque vous appuyez sur l’un des pouces, nous souhaitons qu’il charge la plus grande image associée, l’URL pour laquelle nous nous sommes commodément rappelés avec le pouce comme propriété largeImage. Pour ce faire, nous ajoutons un eventListener à chaque vignette au fur et à mesure de sa création dans la boucle for.
function loadThumbnails () pour (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) 
Nous avons maintenant une galerie simple, mais fonctionnelle, utilisant des données en direct.
Les popovers sont le deuxième élément de l'interface utilisateur spécifique au développement iPad. Ils vous permettent d'ajouter une couche d'informations sur la mise en page existante.
var popover = Ti.UI.iPad.createPopover (largeur: 250, hauteur: 110, direction de la flèche: Ti.UI.iPad.POPOVER_ARROW_DIRECTION_DOWN,);
Ce code crée un objet popover, définit la taille du contenu qu'il contient et définit la direction de la flèche de popover (et donc le positionnement de la popover). Les options pour le positionnement du popover sont:
Toi.UI.iPad.POPOVER_ARROW_DIRECTION_UP
Nous voulons que ce popover apparaisse au-dessus de la mainImage quand il est pressé. Pour ce faire, nous créons un eventListener pour le mainImage et montrons le popover.
mainImage.addEventListener ('touchstart', fonction (e) popover.show (view: mainImage);); Ceci définit la mainImage comme la vue sur laquelle le popover est attaché.
Le popover fait de belles choses automatiquement. En plus de se positionner à côté de l'image, cliquer n'importe où en dehors de la fenêtre pour la faire disparaître.
Ajoutons du contenu à la popover, en particulier la photo de profil, le nom Twitter et l'emplacement du créateur. Commencez par créer la vue d'image et les étiquettes qui seront utilisées, puis ajoutez-les à la fenêtre popover.
var profilePic = Ti.UI.createImageView (largeur: 80, hauteur: 80, gauche: 0) var twitterName = Ti.UI.createLabel (largeur: 140, gauche: 120, couleur: '# ffffff', police: fontSize: 16, top: 30, height: 30) var location = Ti.UI.createLabel (color: '# ffffff', police: fontSize: 16, gauche: 120, largeur: 140, haut: 60, hauteur: 30) popover.add (profilePic) popover.add (twitterName); popover.add (emplacement);
Il ne reste plus qu'à lier ces vues et ces étiquettes aux informations que nous avons reçues de Dribbble. Puisque nous avons conservé ces informations lorsque nous avons créé les vignettes (dans la propriété du lecteur), le meilleur moment pour le faire est lorsque l'utilisateur sélectionne une vignette..
Dans la fonction d'écoute d'événement Touch Start créée précédemment, ajoutez les informations relatives au titre, à la photo de profil, au nom Twitter et à l'emplacement de la popover..
thumb.addEventListener ('touchstart', fonction (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;); 
Et voilà, une galerie qui utilise les deux éléments d'interface utilisateur iPad spécialisés illustrant le travail remarquable de la communauté Dribbble. J'espère que vous avez apprécié cette utilisation simple de l'API Dribbble et que vous explorez des utilisations plus sophistiquées de celle-ci..
var myRequest = Ti.Network.createHTTPClient (onload: function (e) jsonObject = JSON.parse (this.responseText); shots = jsonObject.shots; loadThumbnails ();, onerror: function (e) alert (e). .error);, expiration: 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: navigation, detailView: contenu, showMasterInPortrait: true,); splitWin.open (); var scroll = Ti.UI.createScrollView (contentHeight: 'auto', showVerticalScrollIndicator: true,) fonction nav.add (scroll) loadThumbnails () pour (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);
