Share
In deze tutorial leer je hoe je de SplitWindow- en Popover-regelaars van Titanium Mobile kunt gebruiken terwijl je een geweldige fotogalerie van Dribbble maakt. Onderweg zult u werken met webservice-aanvragen, image-containers en andere veelvoorkomende Titanium Mobile-componenten. Laten we beginnen!
Met deze zelfstudie zullen we kijken hoe we de twee iPad-specifieke UI-elementen in Titanium Mobile kunnen gebruiken om een app te maken. Concreet zal deze app een galerij zijn met de meest populaire werken op Dribbble. Hoewel de meeste dezelfde hulpmiddelen en UI-elementen worden gebruikt om telefoon- en tablet-apps te maken, zijn er verschillen. Het meest opvallende verschil in tabletontwikkeling is de schermgrootte.
De schermbeperkingen van een telefoon duwen ontwerpers om interfaces te maken die meestal alleen de navigatie of de inhoud van de app weergeven. Dit leidt vaak tot een interface die een menu presenteert dat verdwijnt wanneer de gebruiker naar de inhoud kijkt (met een terugknop om terug te keren naar het menu).
Als u echter met een tablet werkt, hebt u veel meer ruimte en wilt u over het algemeen de navigatie en de inhoud tegelijkertijd laten zien, zodat de menu-items toegankelijk blijven als de gebruiker naar de inhoud kijkt. U wilt ook vaak wat informatie tijdelijk over de inhoud legen. Hier komen de iPad-specifieke splitView- en Popover-bedieningselementen binnen.
Begin met het creëren van een nieuw mobiel project binnen Titanuim. Voer de projectnaam, de app-ID en de bedrijfs-URL in die u wenst. Voor de implementatiedoelstellingen schakelt u alle opties uit, behalve iPad, omdat deze zelfstudie specifiek gericht is op iPads. Klik vervolgens op Voltooien.
Hiermee wordt de bestandsstructuur en de benodigde bestanden voor een mobiel project gemaakt. Onze focus ligt op het "app.js" -bestand (in de map Resources), omdat we hier onze code zullen plaatsen. Het bestand "app.js" bevat een standaardtoepassing om u op weg te helpen, maar aangezien we deze in deze zelfstudie niet zullen gebruiken, kunt u alle standaardcodes in dit bestand verwijderen. Nadat u de standaardcode hebt verwijderd, blijft er een schoon beginpunt over.
Om te onderzoeken hoe deze twee UI-elementen kunnen worden gebruikt, bouwen we een galerij uit met de populairste werken op Dribbble. Dribbble heeft, naast het hosten van enkele opmerkelijk mooie werken, een zeer eenvoudig te gebruiken API geboden om toegang te krijgen tot hun afbeeldingen. De API is direct en heeft geen enkele vorm van autorisatie nodig om aan de slag te gaan.
Vanuit deze API hebt u op verschillende manieren toegang tot de afbeeldingen op Dribbble, zoals personen opzoeken, de debuten vermelden en de meest populaire afbeeldingen weergeven. Voor deze zelfstudie kijken we naar de populairste. Bezoek de officiële documentatie voor meer informatie over de API.
Via deze API verzendt Dribbble zijn afbeeldingen via een JSON-object dat als volgt is gestructureerd:
OPMERKING: De bovenstaande afbeelding is rechtstreeks overgenomen van http://dribbble.com/api
Binnen dit JSON-object bevindt zich een array met de naam "shots" met een verscheidenheid aan informatie over de afbeelding. De delen van deze gegevens waarmee we werken zijn de titel, image_url, image_teaser_url, spelersnaam, twitter_screen_name en locatie.
Om de API vanuit Titanium aan te roepen, maakt u een HTTPClient aan (in dit geval genaamd "myRequest"):
Accentsconagua
var jsonObject; var shots; var myRequest = Ti.Network.createHTTPClient (onload: function (e) jsonObject = JSON.parse (this.responseText) shots = jsonObject.shots, onerror: function (e) alert (e.error);, time-out: 5000); myRequest.open ("GET", "http://api.dribbble.com/shots/popular"); myRequest.send (); Binnen dit stukje code doen we een beroep op de URL http://api.dribbble.com/shots/popular en, eenmaal geladen, zetten we het antwoord in een variabele met de naam jsonObject. We gebruiken JSON.parse om de tekenreeks die van Dribbble is verzonden om te zetten in een JSON-object, waardoor het navigeren eenvoudiger wordt. De variabele "shots" bevat een array met de informatie voor de afbeeldingen. U kunt zien hoe dit eruit ziet door "alert (schoten)" toe te voegen aan de laadfunctie.
Het doel van een lay-out met splitview is om twee vensters tegelijkertijd te tonen. Het eerste venster is de navigatie (die in ons geval de miniaturen bevat) en het tweede venster bevat de inhoud (die de grotere afbeelding bevat). Voeg de volgende code toe:
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 ();
Hier maken we de twee vensters die onze lay-out vormen, de nav en de inhoudsvensters. De nav houdt onze miniaturen vast en wordt daarom gedefinieerd als de hoofdweergave wanneer het gesplitste venster wordt gemaakt. De masterView is links en houdt traditioneel de navigatie. Standaard is de hoofdweergave van een gesplitst venster niet zichtbaar in staande richting. Als u dit in actie wilt zien, bekijkt u de e-mailclient op de iPad in staande en liggende stand. Wanneer het verdwijnt, moet een alternatieve vorm van navigatie worden gemaakt. Eenvoudigheidshalve zullen we de masterView zichtbaar houden in beide oriëntaties voor deze app door de eigenschap showMasterInPortrait in te stellen op true.
Als u de richting binnen de iOS-simulator wilt wijzigen, selecteert u Hardware> Rechts roteren in het hoofdmenu van de simulator of drukt u op Command →.
De Dribbble API verzendt informatie over 15 afbeeldingen tegelijk, wat te veel is om in de beschikbare ruimte te tonen. We kunnen een scrollView maken met de naam scroll en deze toevoegen aan het nav-venster, zodat de gebruiker door de langere lijst kan bladeren.
var scroll = Ti.UI.createScrollView (contentHeight: 'auto', showVerticalScrollIndicator: true,) nav.add (scroll)
We hebben de informatie al ingevoerd om de miniaturen in de array-shots te maken. We kunnen nu een functie maken die die informatie gebruikt om de miniaturen te maken.
function 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
Laten we eens kijken wat deze functie doet. Voor elk van de objecten in de schotenreeks (d.w.z. voor elke afbeelding die we zullen tonen) creëren we een beeldaanzicht genaamd "duim". De afbeeldingseigenschap van deze weergave is ingesteld op de URL van een kleinere versie van de afbeelding (image_teaser_url) Dit is een 150 px X 200px-versie van de afbeelding. We maken ook van deze gelegenheid gebruik om de URL voor de afbeelding op volledige grootte te onthouden. We doen dit door een nieuwe eigenschap toe te voegen met de naam largeImage en deze in te stellen op de waarde van shots [i] .image.url. We zullen dit later gebruiken om te weten welke afbeelding moet worden geladen in het inhoudsgebied. Op dezelfde manier onthouden we de informatie over de persoon die de afbeelding heeft gemaakt en plaatst deze in de property die we hebben gemaakt met de naam "player".
Vervolgens vergroten en positioneren we de duim en voegen we deze toe aan de schuif. Deze functie moet worden aangeroepen zodra de gegevens zijn geladen, dus voeg toe loadThumbnails (); naar de onload-functie die u eerder hebt gemaakt.
onload: functie (e) jsonObject = JSON.parse (this.responseText); shots = jsonObject.shots; loadThumbnails (); // roept functie om Thumbnails te laden,
Je zou nu de thumbnails links in het venster moeten zien geladen en naar beneden kunnen scrollen om alle 15 afbeeldingen te zien.
Maak een nieuwe afbeeldingsweergave om de grotere afbeelding vast te houden en toe te voegen aan het inhoudvenster. Dit is de afbeelding die wordt weergegeven wanneer de gebruiker een van de miniaturen selecteert. De afbeeldingen van Dribbble zijn 400x300 px dus je maakt de beeldweergave door deze code toe te voegen:
var mainImage = Ti.UI.createImageView (width: 400, height: 300,) content.add (mainImage)
Als er op een van de duimen wordt gedrukt, willen we dat het gerelateerde grotere beeld wordt geladen, de URL waarvan we met gemak hebben onthouden met de duim als de eigenschap grootbeeld. Om dit te doen, voegen we een eventListener toe aan elke duim wanneer deze wordt aangemaakt in de for-lus.
function 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) 
We hebben nu een eenvoudige, maar functionerende galerij met live gegevens.
Pop-over is de tweede van de gebruikersinterface-elementen die specifiek zijn voor iPad-ontwikkeling. Hiermee kunt u een informatielaag toevoegen aan de bestaande lay-out.
var popover = Ti.UI.iPad.createPopover (width: 250, height: 110, arrowDirection: Ti.UI.iPad.POPOVER_ARROW_DIRECTION_DOWN,);
Deze code maakt een popover-object, definieert de grootte van de inhoud erin en bepaalt de richting van de popover-pijl (en dus de positionering van de popover). De opties voor de positionering van de popover zijn:
Ti.UI.iPad.POPOVER_ARROW_DIRECTION_UP Ti.UI.iPad.POPOVER_ARROW_DIRECTION_DOWN Ti.UI.iPad.POPOVER_ARROW_DIRECTION_LEFT Ti.UI.iPad.POPOVER_ARROW_DIRECTION_RIGHT Ti.UI.iPad.POPOVER_ARROW_DIRECTION_ANY
We willen dat deze popover boven de hoofdafbeelding verschijnt als erop wordt gedrukt. Om dit te doen, creëren we een eventListener voor de mainImage en toont de popover.
mainImage.addEventListener ('touchstart', functie (e) popover.show (view: mainImage);); Dit definieert de hoofdafbeelding als het aanzicht waarop de popover is bevestigd.
De popover doet een aantal leuke dingen automatisch. Naast zichzelf naast de afbeelding positioneren, zal klikken op elke plek buiten de popover ervoor zorgen dat deze wegebt.
Laten we wat inhoud toevoegen aan de popover, met name de profielfoto, twitternaam en locatie van de maker. Begin met het maken van de afbeeldingsweergave en labels die worden gebruikt en voeg deze toe aan de popover.
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, hoogte: 30) popover.add (profilePic) popover.add (twitterName); popover.add (locatie);
Nu hoeft u alleen nog deze weergaven en labels te koppelen aan de informatie die we van Dribbble hebben ontvangen. Omdat we deze informatie hebben vastgehouden toen we de duimen maakten (binnen de eigenschap van de speler), is de beste tijd om dit te doen wanneer de gebruiker een duim selecteert.
In de eerder gecreëerde aanraakstart-gebeurtenislistenerfunctie voegt u de informatie voor de popovertitel, profielfoto, twitternaam en locatie toe.
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;); 
En daar heb je het, een galerij die beide gespecialiseerde iPad UI-elementen gebruikt om het geweldige werk van de Dribbble-community te laten zien. Ik hoop dat je hebt genoten van dit eenvoudige gebruik van de Dribbble API en dat je meer geavanceerde toepassingen ervan wilt verkennen.
var myRequest = Ti.Network.createHTTPClient (onload: function (e) jsonObject = JSON.parse (this.responseText); shots = jsonObject.shots; loadThumbnails ();, onerror: function (e) alert (e .error);, time-out: 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,) nav.add (scroll) functie 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);
