Share
Välkommen till tredje delen i vår serie om databasdriven Titanium Mobile-utveckling. Denna handledning fortsätter att bygga på principerna som introducerats i tidigare inlägg, men vi kommer att ändra vår appdesign på ett mycket viktigt sätt. I stället för att använda ett TableView-objekt för att visa ett anpassat gränssnitt, kommer vi att byta till ett WebView-objekt. Anledningen till detta är att WebView-objektet tillåter oss att styra vårt gränssnitt med hjälp av CSS och HTML, och TableView kommer inte. För er som kommer från en webbutvecklingsbakgrund, borde du känna dig riktigt hemma med detta tillvägagångssätt.
Den första delen av denna serie lagde grunden för en databasdriven applikation. Den andra delen utvidgade funktionaliteten genom att skapa möjligheten att läsa en fjärransluten databas och infoga värden i våra tabeller. Denna handledning kommer att använda källkoden från de två första delarna i den här serien.
Open Titanium Developer och skapa ett nytt projekt. Välja Mobil och fyll i all nödvändig information. Klicka sedan Skapa projekt. Kopiera Produkter mapp från din tidigare ansökan och products.sqlite databas till den nya resurskatalogen. Hämta jQuery och placera den i resurskatalogen också. Skapa också en ny mapp och namnge den bilder. Nu ska du vara redo att gå.
Vi kommer att ta bort app.js-filen för enkelhets skull. Ta bort allt utom där vi skapade tabGruppen. Öppna tabGruppen och skapa vår första och enda fliken. Här är det:
var tabGroup = Ti.UI.createTabGroup (); var main = Ti.UI.createWindow (title: 'Produktkategorier', url: 'products / product_category.js'); var-fliken = Ti.UI.createTab (ikon: 'images / tabs / KS_nav_ui.png', titel: 'Produkter', fönster: main); tabGroup.addTab (flik); tabGroup.open ();
Om du startar programmet bör det se ut att vara bekant:
NOTERA: Om du kopierade din databas från del 2 i den här serien kanske du undrar varför några ytterligare mervärden (de som läggs in från programmet) inte finns där. Detta beror på att den aktiva lokala databasen är installerad på enheten. Vår lokala fil förblir orörd. Om du tar bort den föregående applikationen från simulatorn och installerar om den, kommer din databas också att återgå till dess ursprungliga tillstånd.
Den första filen som laddas av vår ansökan är "product_category.js". Vi kommer att lämna den här filen helt ensam. Nästa sak som vi kan göra för att hålla rena saker är att radera filen "product_specs.js". Vi använder en WebView för att ersätta denna fils funktion. Öppna "products.js" och låt oss få hacking. Bortsett från eventListener finns det bara en sak som vi behöver ändra i den här filen. Ta bort väg från var vi bygger vår matris:
Accentsconagua
var dataArray = []; medan (rows.isValidRow ()) dataArray.push (title: "+ rows.fieldByName ('name') +", harChild: true); rows.next (); ; ... Om vi kör vår ansökan vid denna tidpunkt kommer det sannolikt att misslyckas på grund av att vi tar bort filer och ändrar ovanstående information. Men det här är hur det skulle se ut:
Vår eventListener har nu helt ansvaret för resultatet från klickhändelsen. Det första vi behöver ändra är vårt om uttalande. Tidigare kontrollerade vi om det fanns en väg. Sedan vi tog bort sökvägen måste vi bifoga något annat att leta efter. Vi måste också använda detta för att bestämma vilket objekt som valts. Använd "titel". Detta är det enda värde vi har som är en unik identifierare. Se till att ändra detta värde när vi skapar fönstret också.
tableview.addEventListener ("klicka", funktion (e) if (e.rowData.title) varwin = Ti.UI.createWindow (title: e.rowData.title, backgroundColor: "# 000"); ... Låt oss tänka igenom nästa steg. Vi måste skapa en WebView och ställa in sökvägen, fråga databasen baserat på den valda raden (vi måste göra det här eftersom Ti.Database inte är tillgängligt från en WebView), skapa våra variabler från vår databasfråga och äntligen skicka dem till WebView. En sak att komma ihåg är att vi inte kan skicka något till WebView tills det är skapat. Vi kommer att använda en setTimeout-funktion för att fördröja överföringen av variablerna. Så här ser koden ut:
var web = Ti.UI.createWebView (url: 'productsWebview.html'); var db2 = Ti.Database.install ('... /products.sqlite','products'); var specs = db2.execute ('VÄLJ * FRÅN PRODUKTER VAR NÄR = =' '+ e.rowData.title +' "'); var namn = specs.fieldByName ('name'); var pwidth = specs.fieldByName ('pwidth'); var pheight = specs.fieldByName ('pheight'); var pcolor = specs.fieldByName ('pcolor'); var qty = specs.fieldByName ('qty'); var stripName = removeSpaces (specs.fieldByName ('name')); funktion removeSpaces (strip) return strip.split ("). join ("); ; // Lägg till webView till fönstret win.add (web); // Skapa en timeout - vi vill ha tid för att fönstret ska vara klart innan vi slår händelsen setTimeout (funktion () Ti.App.fireEvent ("webPageReady", namn: namn, pwidth: pwidth, pheight: pheight, pcolor : pcolor, qty: qty, stripName: stripName);, 500); Ti.UI.currentTab.open (vinst, animerad: true); ... Vi skapade en andra instans av databasen (Som en lokal variabel inuti funktionen. Vi använder räckvidd här för att se till att vi inte förstör något.) Och skapade vår fråga med data från den valda radens titelvärde. Skapade våra enskilda variabler för databasens kolumndata och skapade en andra variabel med produktnamnet, bara borttagna mellanslag med en "removeSpaces" -funktion. Det här är så att vi kan skapa en sökväg till en bild med hjälp av produktnamnet i vår WebView.
Vi lägger sedan till vår WebView i nuvarande fönster. Våra variabler överförs till WebView och heter "webPageReady" av TI.App.fireEvent. Detta bränder när den angivna tiden har gått från funktionen setTimeout. I vårt fall är det 500 millisekunder, eller en halv sekund.
Om vi skulle skapa vår WebView just nu skulle allt fungera bra. Det skulle dock finnas något som bara inte gjorde det känna rätt till användaren. WebView skulle skapas och datasetet, men det skulle vara en sekund eller så om tiden var tom eller saknade objekt. Det verkar som om något är trasigt. Användare har blivit vana vid att alltid veta att något händer. För Windows-användare finns det det trevliga lilla glaset, OS X-användare har det spinnande färghjulet etc..
Användare har blivit vana vid att alltid veta att något händer.
För vår aktivitetsindikator behöver vi skapa ett nytt fönster, skapa aktivitetsindikatorn, ange hur lång tid det ska visas och dölja sedan fönstret. Vi måste också se till att lägga till aktivitetsindikatorn i det nya fönstret och det nya fönstret till den aktuella vyn.
var actWin = Ti.UI.createWindow (backgroundColor: '# 000', opacitet: 0,8); var actInd = Ti.UI.createActivityIndicator (stil: Ti.UI.iPhone.ActivityIndicatorStyle.PLAIN); actWin.add (actInd); om (Ti.Platform.name == 'iPhone OS') actInd.show (); actInd.color = '#FFF'; actInd.message = 'Laddar ...'; setTimeout (funktion () actInd.hide ();, 1500); ; setTimeout (funktion () actWin.hide ();, 1500); // Lägg till webView till fönstret win.add (web, actWin); ...
När vi skapar indikatorn ställer vi in stilen så att den ser ut som standard iPhone-indikator. Vi vill då också att detta ser ut som inföding som möjligt och låt användaren veta vad som händer. Vi använder ett if-uttalande, ställer in det för att söka efter plattformstypen, lägga till ett meddelande och ange hur lång tid det är innan vi döljer fönstret.
Denna timeout är inuti if-satsen, så vi måste skapa en annan timeout-funktion för att dölja fönstret. I båda fallen ställer vi in tiden till 1500 millisekunder. Tänker tillbaka till det sista steget, vi tillät 500 millisekunder innan våra data passeras. Detta tillåter ytterligare en sekund för att data ska laddas faktiskt i WebView.
Skapa en ny html-fil med namnet och den plats som vi angav ovan när vi skapade vår WebView. Det är inte nödvändigt att lägga till alla standard- HTML-headerinformation. Jag gillar att deklarera min doktyp och lägga till
taggar. Vi behöver det eftersom vi behöver använda några skript.Först skapa kroppens innehåll. Använd en tabell, lägg till önskad mängd rader och kolumner. För denna handledning behöver vi fyra rader och två kolumner. Etiketten kommer att finnas i den vänstra kolumnen och specen till höger. Använd ett icke-brytande utrymme () i speccellen. Så här ser vårt bord ut:
Bredd Höjd Färg Kvantitet
Det är också en bra idé att lägga till ett stilark så att vi kan anpassa hur vår sida visas. Direkt under "content" diven vill vi skapa någon form av vår egen rubrik. Jag tycker att det är en bra idé att visa produktnamnet och visa en bild. Det viktigaste att göra när vi bygger vårt bord är att lägga till ett "id" till cellen som innehåller våra specifikationer. För stylingens skull borde vi också lägga till en klass i liknande celler.
I de tidigare handledningarna skapade vi en variabel på en sida och bifogade den till det nya fönstret. Denna variabel användes med hjälp av Ti.UI.currentWindow.varName och sedan globalt tillgänglig för sidan. Eftersom det här är en WebView kan vi inte göra det här. Vad vi behöver göra är att lägga till en EventListener och fånga de godkända variablerna.
Konsolen i Titanium Developer loggar in de variabler och värden som skickas. Detta kan vara mycket användbart för felsökning.
I EventListener specificerar vi händelsen vi lyssnar på (webPageReady) och deklarerar våra variabler med vår återuppringning.
Nu när vi har deklarerade våra variabler måste vi ta reda på hur du använder dem på vår sida. Vi kan inte returnera dem från funktionen och sedan använda variablerna i vårt bord, så vi måste bli kreativa. Ladda jQuery på din sida och lägg in den aktuella EventListener inuti en document.ready-funktion.
Använd sedan id för varje cell som definierats i föregående steg och ersätt elementet med jQuery och rätt variabel.
Det sista elementet som vi byter ut i ovanstående kod är vår produktbild variabel. Använd variabeln från det produktnamn som vi tog bort mellanrummen för att bygga länken till bilden. Se även till att skapa katalog och bilder för varje produkt. För stylingens skull är det en bra idé att göra alla produktbilder av samma storlek. Något som 150px med 150px är en bra storlek för de flesta skärmar.
Slutligen bör vi ha en arbetsansökan med all kod som är klar. Så här ser WebView ut:
När våra bilder är skapade för alla produkter är det väldigt lätt att använda en standard CSS i vårt stylesheet och göra våra produktsidor ser ut exakt hur vi vill att de ska visas. Om informationen vi visar och använder i vår applikation uppdateras ofta kan en fjärransluten databas vara vägen att gå.
