Share
Vill du lära dig hur du använder PhoneGap, men vet inte vart du ska komma igång? Följ med oss när vi sätter samman "Sculder", inte bara en hyllning till en utmärkt science fiction-tv-serie, utan en fulländad inbyggd mobilapplikation för den troende i dig!
I de två sista delarna har vi installerat Phonegap, fått en hälsosam världsomspännande och sedan tittat på någon av de funktioner som Phonegap erbjuder oss. Under de närmaste två delarna kommer vi att bygga vår app och ta en titt på några av de utmaningar som kan uppstå vid detta.
Innan vi kommer ner till kod, kommer vi att behöva lite planering. På det här sättet vet vi exakt vad vi vill app att uppnå och kan ha en bra uppfattning om användarupplevelsen. Du kan få ett bra jobb genom att bara slå koden direkt (något jag gör hela tiden), men även en liten planering i förväg kan gå långt. Att tänka igenom scenarier i ditt huvud gör att du kan hantera problem tidigt.
Först måste vi veta vilka kärnfunktioner i ansökan kommer att vara, hur de kommer åt och hur de ska användas. Appen vi ska bygga kommer att ha följande funktioner:
Om du vill göra wireframes för dina projekt, är de alltid bra att du vet vad du vill att din ansökan ska göra och ungefär vad du vill att den ska se ut. Om programmet ska vara stort och ha en hel del funktionalitet skulle jag göra några trådramar, men i det här fallet tycker jag att applikationen är liten och så kan vi sortera ut den ganska grundläggande funktionaliteten när vi bygger appen.
Om du vill skapa wireframes finns det några ganska bra verktyg där ute för att hjälpa dig.
Härmfågel är ett onlineverktyg där du kan skapa wireframes i webbläsaren. Du kan prova det här
Balsamiq är en Adobe Air applikation med en hel massa mallar och element. Den har en sketchy stil som Mockingbird också. Du kan ladda ner det här.
OmniGraffle är en mac-applikation som du kan få en 14-dagars gratis provversion här. Omnigraffle är min personliga favorit och det finns många mallar på Graffletopia för dig att använda.
Utseende och känsla är en viktig aspekt av alla tillämpningar. När det gäller mobila applikationer är det ett område som många ofta blir felaktiga (oftast på grund av bristande förståelse). Jag är inte en designer, och jag låtsas inte vara en, så om jag inte har en designer till hands för att göra mönster, brukar jag bara utforma i webbläsaren när jag kodar (eller på enheten i det här fallet).
Om du vill se till att din app ser ut och känns bra att använda (och du är inte en) hyr en! Som en utvecklare kostar bra designers pengar. Medan du kanske inte vill gaffla ut för något du kanske kan göra själv är det bäst att ha någon som förstår design för att göra det för dig. Din app kommer att vara hundra gånger bättre för att göra det!
Det har varit några bra designtutorials här på Mobiletuts +, vilket ger dig en bra förståelse för vad som krävs när du dyker in i design för mobil.
En av de viktigaste övervägandena för din design är hur många bilder du använder. Om din design kommer att kräva att du hakar upp PSD-filer och använder massor av bilder - något är fel - vi vill göra så mycket som möjligt med CSS och när vi bygger för ganska moderna webbläsare kan vi utnyttja många nyare CSS3 tekniker för önskad utgång. När du börjar använda massor av bilder börjar det att påverka programmets prestanda. När vi måste använda bilder, vilket är troligt, bör vi bygga upp en sprite (en bildfil som innehåller alla våra bilder) för att spara HTTP-förfrågningar. Det går också att cache bilder på enheten eller använda lokal lagring också.
Nu är det dags att komma in i faktiskt kodning av HTML, CSS och Javascript för vår ansökan.
Vi kommer att börja med några ganska grundläggande HTML.
Sculder
CSS-stöd på mobilen är bra, men det är inte bra. Medan många vanliga stilar stöds, finns det också några "gotcha". En av mina favoritresurser för att kontrollera support är caniuse.com. Även om webbplatsen inte innehåller varje webbläsare för mobil, är det en användbar referens.
Fortsätt och skapa ett nytt tomt stilark och inkludera det i huvudet på din html. Som du kanske redan gör med dina skrivbordsprogram för webbläsare, ställa in några grundläggande återställningsstilar.
html, kropp margin: 0; vaddering: 0; gräns: 0; kropp font-family: Arial, sans-serif; line-height: 1,5; font-size: 16px; bakgrund: #fff; padding: 5px; färg: # 000; word-wrap: break-word; -webkit-text-size-adjust: none; h1, h2, h3, h4, h5, h6 font-vikt: normal; p img float: left; marginal: 0 10px 5px 0; vaddering: 0; img border: 0; max bredd: 100%;
Därefter kommer vi att lägga till några grundläggande HTML - en rubrik och en del flikkontroller.
Sculder
Först ska jag ge bakgrunden en färg och sedan utforma rubriken och sidfoten. Jag ska gå och lägga dem på ett ganska genomsnittligt sätt, fixa dem till toppen och botten av skärmen och använda iScroll för att ge oss möjlighet att övervinna bristen på stöd för läget: fast i de flesta enheter.
/ * Huvudstilar * / kropp bakgrund: # 222; rubrik topp: 0; vänster: 0; höjd: 45px; footer botten: 0; vänster: 0; höjd: 48px; background-color: # c27b00; border-top: 1px solid #eee; rubrik, sidfot bakgrundsfärg: # deb500; padding: 0; position: absolute; z-index: 2; font-size: 20px; bredd: 100%; text-align: center; color: # f3f3f3; font-weight: bold; textskugga: 0 -1px 0 rgba (0,0,0,0,5); line-height: 45px; h1 marginal: 0; text-transform: stor bokstav; #wrapper position: absolute; z-index: 1; top: 45px; botten: 48px; vänster: 0; bredd: 100%; overflow: auto; # huvudinnehåll position: absolut; z-index: 1; bredd: 100%; padding: 0;
Därefter kommer vi att hämta iScroll 4 härifrån och inkludera iscroll-lite.js fil. Detta ger oss grundläggande funktionalitet som vi behöver. Vi ska också göra en app.js fil för att hantera all vår JavaScript-funktionalitet. Inkludera dessa filer i huvudet på din index.html.
I vår Javascript-fil måste vi initiera.
Accentsconagua
var theScroll; funktionsrulle () theScroll = ny iScroll ('wrapper'); document.addEventListener ('DOMContentLoaded', bläddra, false); Nu ska vi lägga till vår flik i vår sidfot.
Vi ska ställa in våra flikar så att varje element tar upp en tredjedel av ledigt utrymme.
# flikfältet margin: 0; padding: 0; # flikstång li display: inline; flyta till vänster; bredd: 33.333%; # flikbar en färg: #cdcdcd; display: block; font-weight: bold; överflöde: gömd; position: relativ; text-align: center; text-dekoration: ingen; -webkit-touch-callout: none;
Allt detta är ganska genomsnittligt CSS som du kan använda på en webbsida. Den enda som kanske är den udda en ut till dig är -webkit-touch-callout: none. Denna regel är att stoppa standardåtgärden när en användare håller ned en länk.
Det är allt vi ska göra med fältet, men du kanske vill lägga till ikoner till din, ungefär som de flesta appar har. Kom bara ihåg att du använder sprites för dig bilder för att hålla träffen på prestanda minimal.
Nu när vi har skelettet på vår ansökan redo kan vi titta på sök via vår app. Det finns ett antal bra sätt att göra detta. En är att ladda allt upp och sedan dölja de sidor vi inte vill visa först, då på ett klick på en länk kan vi använda CSS för att skjuta en ny behållare i sikte. Ett annat alternativ är att använda Ajax och göra en Ajax-förfrågan på en HTML-fil och sedan skjuta in den i bild. Eftersom det här är en relativt liten applikation är det ingen skada när du laddar allt uppifrån och använder CSS för större delen av sidhanteringen, precis som jQuery Mobile gör.
Först kommer vi att skapa några sidor i vår huvudbehållare.
Kontrollera sedan att länkarna href motsvarar dessa.
Nu ska vi gömma alla sidor och bara visa sidan med nuvarande klass.
#pages> div display: none; #pages> div.current display: block;
Därefter måste vi dyka in i vissa JavaScript. Jag ska gå vidare och använda jQuery för resten av projektet (inte jQuery mobil). Om du vill kan du jQuerify iScroll init (eller inte). Var noga med att släppa den minifierade versionen av jQuery till din JS-katalog.
Först kommer jag att binda ett klick till ankarna i fliken, eftersom vi använder jQuery 1.7 kan vi använda den nya .på() fungera. Vi kommer då att förhindra standardåtgärden av en länk, lagra href av den klickade länken i en nästa sida variabel, ta bort nuvarande klass från den aktuella sidan och till sist lägga till klassen på den klickade sidan.
$ ('# tabbbar a'). ((klicka), funktion (e) e.preventDefault (); var nextPage = $ (e.target.hash); $ ("# sidor. removeClass ("current"); nextPage.addClass ("current");); Du kommer nu att ha en viss väldigt grundläggande personsökning som innehållet divs kommer nu att gömma och visa när länkarna är klickade.
Detta är och kommer att fungera helt bra, men för att lägga till lite extra till personsökningen kommer vi att använda några CSS och göra övergången mellan sidorna lite snyggare med en grundläggande blekna in, blekna ut.
Först måste vi se till att våra sidor är placerade på ett sätt som ger oss viss kontroll över deras bildskärm. Lägg till följande CSS.
#pages position: relative; / * Uppdatera denna stil * / #pages> div display: none; position: absolut; top: 0; vänster: 0; bredd: 100%;
Nu ska vi använda CSS-animering för att animera sidövergången. Först börjar vi med en del generisk inställning för animationsfunktionen och tidpunkten.
.in, ur -webkit-animation-timing-funktion: lätt-in-out; -webkit-animation-duration: 400ms;
Vi ställer in nyckelramarna för animeringen av nyckelramarna.
@ -webkit-keyframes fade-in från opacity: 0; till opacitet: 1;
Slutligen ställer vi in Z-indexet för att se till att den sida som vi bara blekt i är på topp.
.fade.in -webkit-animation-name: fade-in; z-index: 5; .fade.out z-index: 0;
Nu behöver vi lägga till lite mer JavaScript för att lägga till och ta bort CSS-klasserna på klicka. Först behöver vi en funktion som tar en parameter, som kommer att vara den sida som ska navigera till, så lägger den till de klasser som behövs för att blekna den nya sidan och binda en funktion till webkitAnimationEnd, detta tar sedan bort de nödvändiga klasserna. Funktionen ser ut så här.
funktionssida (toPage) var toPage = $ (toPage), fromPage = $ ("# pages. current"); toPage.addClass ("current fade in"). En ("webkitAnimationEnd", funktion () fromPage.removeClass ("current fade out"); toPage.removeClass ("fade in")); fromPage.addClass ("blek ut"); Om du aldrig har sett jQuery-metoden .ett() Innan du checkar ut dokumentationen är det bara ett sätt att binda och sedan binda upp dig.
Om du testar nu på din enhet märker du att om du klickar på den aktuella sidlänken kommer den att blekna ut. Vi måste lägga in en om uttalande innan vi kör vår sida funktion för att se till att vi inte redan är på den aktuella sidan - om vi är kan vi bara återvända från funktionen.
funktionssida (toPage) var toPage = $ (toPage), fromPage = $ ("# pages. current"); om (toPage.hasClass ("current") || toPage === fromPage) return; ; toPage.addClass ("current fade in"). En ("webkitAnimationEnd", funktion () fromPage.removeClass ("current fade out"); toPage.removeClass ("fade in")); fromPage.addClass ("blek ut"); Nu kan du dumpa lite text i varje sidbehållare och testa på en enhet.
Vi har nu börjat bygga en webbapplikation och fått vår layout och personsökningsarbete. I nästa del börjar vi bygga ut våra sidor, felsökning på mobilen och få vår Phonegap-integration påbörjad.
