Share
Wilt u leren hoe u PhoneGap kunt gebruiken, maar weet u niet waar u moet beginnen? Doe met ons mee als we "Sculder" samenstellen, niet alleen een eerbetoon aan een uitstekende science fiction tv-serie, maar een volwaardige native mobiele applicatie voor de gelovige in jou!
In de laatste twee delen hebben we Phonegap geïnstalleerd, een hello-wereld gekregen, en vervolgens een kijkje genomen bij enkele van de functies die Phonegap ons biedt. In de volgende twee delen zullen we onze app bouwen en een blik werpen op enkele van de uitdagingen die hieruit zouden kunnen voortvloeien.
Voordat we aan de slag gaan, moeten we een beetje plannen maken. Op deze manier weten we precies wat we willen bereiken en hebben we een goed idee van de gebruikerservaring. Je kunt geweldig werk bereiken door de code meteen te raken (iets wat ik altijd doe), maar zelfs een beetje planning vooraf kan een heel eind betekenen. Door scenario's in je hoofd te bedenken kun je al vroeg met problemen omgaan.
Ten eerste moeten we weten welke kernfuncties van de toepassing zullen zijn, hoe ze worden gebruikt en hoe ze zullen worden gebruikt. De app die we gaan bouwen heeft de volgende kenmerken:
Als u wireframes wilt uitvoeren voor uw projecten, zijn ze altijd goed om ervoor te zorgen dat u weet wat u wilt dat uw toepassing doet en ook ongeveer hoe u wilt dat het programma eruitziet. Als de applicatie groot zal worden en veel functionaliteit zal hebben, zou ik wat wireframes doen, maar in dit geval denk ik dat de applicatie klein is en dus kunnen we de mooie basisfunctionaliteit uitzoeken terwijl we de app bouwen.
Als je wireframes wilt maken, zijn er een aantal goede tools om je te helpen.
Mockingbird is een online tool waarmee u de wireframes in de browser kunt maken. Je kunt het hier proberen
Balsamiq is een Adobe Air-toepassing met een hele reeks sjablonen en elementen. Het heeft een schetsmatige stijl, net als Mockingbird. Je kunt het hier downloaden.
OmniGraffle is een toepassing voor alleen macs waarmee u hier een 14-daagse gratis proefversie kunt krijgen. Omnigraffle is mijn persoonlijke favoriet en er zijn genoeg sjablonen op Graffletopia die je kunt gebruiken.
Uiterlijk en uiterlijk zijn een belangrijk aspect van elke toepassing. Als het gaat om mobiele applicaties, is het een gebied dat vaak verkeerd wordt (meestal vanwege een gebrek aan begrip). Ik ben geen ontwerper, en ik doe niet alsof ik er een ben, dus als ik geen ontwerper bij de hand heb om de ontwerpen te maken, ontwerp ik meestal gewoon in de browser terwijl ik code (of op het apparaat in deze zaak).
Als je er zeker van wilt zijn dat je app er goed uitziet en goed in voelt om te gebruiken (en je bent er geen), huur er dan een in! Net als een ontwikkelaar kosten goede ontwerpers geld. Hoewel u misschien niet wilt uitvluchten voor iets dat u misschien zelf kunt doen, is het het beste om iemand te hebben die design begrijpt om dit voor u te doen. Uw app zal honderd keer beter zijn om dit te doen!
Er zijn geweldige ontwerplessen beschikbaar op Mobiletuts +, waarmee je goed begrijpt wat er nodig is bij het duiken in ontwerp voor mobiel.
Een van de belangrijkste overwegingen voor uw ontwerp is het aantal afbeeldingen dat u gebruikt. Als je voor je ontwerp PSD-bestanden moet knippen en veel afbeeldingen moet gebruiken - er is iets mis - we willen zoveel mogelijk doen met CSS en terwijl we aan het bouwen zijn voor behoorlijk moderne browsers, kunnen we de kracht van veel gebruiken nieuwere CSS3-technieken voor de gewenste uitvoer. Wanneer u veel afbeeldingen begint te gebruiken, begint dit de prestaties van de toepassing te beïnvloeden. Wanneer we afbeeldingen moeten gebruiken, wat waarschijnlijk is, moeten we een sprite opbouwen (één afbeeldingsbestand met al onze afbeeldingen) om HTTP-verzoeken op te slaan. Het is ook mogelijk om afbeeldingen op het apparaat te cachen of ook lokale opslag te gebruiken.
Dit is het moment om de HTML, CSS en Javascript voor onze applicatie daadwerkelijk te coderen.
We zullen beginnen met een aantal vrij eenvoudige HTML.
Sculder
CSS-ondersteuning op mobiel is goed, maar het is niet geweldig. Hoewel veel gemeenschappelijke stijlen worden ondersteund, zijn er ook enkele "gotcha's". Een van mijn favoriete bronnen voor het controleren van ondersteuning is caniuse.com. Hoewel de site niet elke browser voor mobiel bevat, is het een nuttige referentie.
Ga je gang en maak een nieuwe lege stylesheet en neem deze op in de kop van je html. Zoals u misschien al doet met uw desktopbrowser-apps, stelt u enkele standaardresetstijlen in.
html, body margin: 0; opvulling: 0; rand: 0; body font-family: Arial, sans-serif; line-height: 1.5; font-size: 16px; achtergrond: #fff; padding: 5px; kleur: # 000; word-wrap: breekwoord; -webkit-tekst-formaat-aanpassen: geen; h1, h2, h3, h4, h5, h6 font-weight: normaal; p img float: links; marge: 0 10px 5px 0; opvulling: 0; img border: 0; max. breedte: 100%;
Vervolgens gaan we wat standaard HTML toevoegen - een koptekst en een aantal tabbesturingselementen.
Sculder
Eerst ga ik de achtergrond een kleur geven en vervolgens de kop- en voettekst opmaken. Ik ga door en leg ze op een redelijk gemiddelde manier neer, bevestig ze aan de boven- en onderkant van het scherm en gebruik iScroll om ons het vermogen te geven om het gebrek aan ondersteuning voor position: fixed bij de meeste apparaten.
/ * Hoofdstijlen * / body background: # 222; header top: 0; left: 0; hoogte: 45 pixels; voettekst onder: 0; left: 0; hoogte: 48px; background-color: # c27b00; border-top: 1px solid #eee; header, footer background-colour: # deb500; padding: 0; positie: absoluut; z-index: 2; font-size: 20px; Breedte: 100%; text-align: center; color: # f3f3f3; font-weight: bold; text-shadow: 0 -1px 0 rgba (0,0,0,0.5); line-height: 45 pixels; h1 marge: 0; text-transform: hoofdletters; #wrapper positie: absoluut; z-index: 1; top: 45px; bottom: 48px; left: 0; Breedte: 100%; overflow: auto; # hoofdinhoud positie: absoluut; z-index: 1; Breedte: 100%; padding: 0;
Vervolgens gaan we iScroll 4 van hier downloaden en de iscroll-lite.js het dossier. Dit geeft ons de basisfunctionaliteit die we nodig zullen hebben. We zullen ook een maken app.js bestand voor al onze JavaScript-functies. Neem deze bestanden op in de kop van je index.html.
In ons Javascript-bestand moeten we iscroll initiëren.
Accentsconagua
var theScroll; function scroll () theScroll = new iScroll ('wrapper'); document.addEventListener ('DOMContentLoaded', scroll, false); Nu gaan we onze tabbalk toevoegen aan onze voettekst.
We gaan onze tabbladbalk opmaken zodat elk element een derde van de beschikbare ruimte in beslag neemt.
# tab-bar marge: 0; padding: 0; # tab-bar li display: inline; float: left; breedte: 33,333%; # tab-bar a color: #cdcdcd; weergave: blok; lettertype: vet; overloop verborgen; positie: relatief; text-align: center; tekstdecoratie: geen; -webkit-touch-callout: none;
Dit alles is behoorlijk gemiddelde CSS die je misschien op een webpagina zou kunnen gebruiken. De enige die voor jou misschien een vreemde is, is de -webkit-touch-callout: none. Deze regel is om de standaardactie te stoppen wanneer een gebruiker een link ingedrukt houdt.
Dat is alles wat we gaan doen met de tab-balk, maar misschien wilt u pictogrammen toevoegen aan die van u, net zoals de meeste apps. Vergeet niet om ervoor te zorgen dat u sprites gebruikt voor uw afbeeldingen om het effect op de prestaties minimaal te houden.
Nu we het skelet van onze applicatie klaar hebben, kunnen we via onze app bladeren. Er zijn een aantal goede manieren om dit te doen. Een daarvan is om alles van tevoren te laden en vervolgens de pagina's te verbergen die we niet eerst willen weergeven. Vervolgens kunnen we met een klik op een link CSS gebruiken om een nieuwe container in beeld te schuiven. Een andere optie is om Ajax te gebruiken en een Ajax-aanvraag voor een HTML-bestand te maken en dat dan in beeld te schuiven. Omdat dit een relatief kleine applicatie is, is het niet schadelijk om alles van tevoren te laden en CSS te gebruiken voor het grootste deel van de paginabewerking, net zoals jQuery Mobile doet.
Eerst zullen we enkele pagina's in onze hoofdcontainer plaatsen.
Zorg er dan voor dat de links href komt hiermee overeen.
Nu zullen we alle pagina's verbergen en alleen de pagina weergeven met de stroom klasse.
#pages> div display: none; #pages> div.current weergave: blok;
Vervolgens moeten we een duik nemen in JavaScript. Ik ga door en gebruik jQuery voor de rest van het project (niet jQuery mobiel). Als je wilt, kun je het iScroll-init (of niet) jQuerify. Zorg ervoor dat u ook de geminimaliseerde versie van jQuery in uw JS-directory plaatst.
Eerst ga ik een klik vastmaken aan de ankers in de tab-balk, omdat we jQuery 1.7 gebruiken kunnen we de nieuwe gebruiken .op() functie. We zullen dan de standaardactie van een link voorkomen, de href van de aangeklikte link in a volgende pagina variabele, verwijder de stroom klasse van de huidige pagina en voeg uiteindelijk de klas toe aan de geklikte pagina.
$ ('# tab-bar a'). on ('klik', functie (e) e.preventDefault (); var nextPage = $ (e.target.hash); $ ("# pages .current"). removeClass ("current"); nextPage.addClass ("current");); Je hebt nu een aantal zeer eenvoudige paging als de inhoud divs wordt nu verborgen en weergegeven wanneer op de koppelingen wordt geklikt.
Dit is en zal absoluut werken, maar om een beetje extra aan de paging toe te voegen, gaan we CSS gebruiken en de overgang tussen pagina's een beetje leuker maken met een standaard fade-in, uitfaden.
Eerst moeten we ervoor zorgen dat onze pagina's op een manier worden geplaatst die ons enige controle geeft over hun weergave. Voeg de volgende CSS toe.
#pages position: relative; / * Werk deze stijl bij * / #pages> div display: none; positie: absoluut; top: 0; left: 0; Breedte: 100%;
Nu gaan we CSS-animaties gebruiken om de pagina-overgang te animeren. Eerst beginnen we met een algemene instelling voor de animatiefunctie en de timing.
.in, .out -webkit-animation-timing-function: ease-in-out; -webkit-animatie-duur: 400ms;
We hebben de hoofdframes ingesteld voor de animatie van de hoofdframes.
@ -webkit-keyframes fade-in van opacity: 0; tot opacity: 1;
Ten slotte hebben we de Z-index ingesteld om ervoor te zorgen dat de pagina die we net hebben vervaagd, bovenaan staat.
.fade.in -webkit-animation-naam: fade-in; z-index: 5; .fade.out z-index: 0;
Nu moeten we wat meer JavaScript toevoegen om de CSS-klassen toe te voegen en te verwijderen bij klikken. Eerst hebben we een functie nodig die een parameter zal nemen, die de pagina zal zijn om naar te navigeren, dan zal hij de klassen toevoegen die nodig zijn om de nieuwe pagina te vervagen en een functie te binden aan webkitAnimationEnd, dit zal dan de nodige klassen verwijderen. De functie ziet er zo uit.
functiepagina (toPage) var toPage = $ (toPage), fromPage = $ ("# pages .current"); toPage.addClass ("current fade in"). one ("webkitAnimationEnd", function () fromPage.removeClass ("current fade out"); toPage.removeClass ("fade in")); fromPage.addClass ("fade out"); Als je de methode jQuery nog nooit hebt gezien .een() Bekijk eerst de documentatie als een manier om te binden en vervolgens los te maken.
Als u nu op uw apparaat test, zult u merken dat als u op de koppeling van de huidige pagina klikt, deze zal vervagen. We moeten een als verklaring voordat we onze paginafunctie uitvoeren om er zeker van te zijn dat we niet al op de huidige pagina staan - als dat het geval is, kunnen we gewoon teruggaan uit de functie.
functiepagina (toPage) var toPage = $ (toPage), fromPage = $ ("# pages .current"); if (toPage.hasClass ("current") || toPage === fromPage) ga terug; ; toPage.addClass ("current fade in"). one ("webkitAnimationEnd", function () fromPage.removeClass ("current fade out"); toPage.removeClass ("fade in")); fromPage.addClass ("fade out"); Nu kunt u wat tekst in elke paginacontainer dumpen en testen op een apparaat.
We zijn nu begonnen met het bouwen van een webapplicatie en hebben onze lay-out en semafonie werkend gekregen. In het volgende deel zullen we beginnen met het bouwen van onze pagina's, debuggen op de mobiel en onze integratie met Phonegap laten starten.
