Share
Welkom bij het derde deel in onze serie over database-gestuurde ontwikkeling van Titanium Mobile. Deze tutorial zal voortbouwen op de principes die in eerdere berichten zijn geïntroduceerd, maar we zullen het ontwerp van onze app op een zeer belangrijke manier wijzigen. In plaats van een TableView-object te gebruiken om een aangepaste interface weer te geven, gaan we overschakelen naar het gebruik van een WebView-object. De reden hiervoor is dat het WebView-object ons in staat zal stellen om onze interface te besturen met CSS en HTML, en TableView niet. Voor degenen onder u die afkomstig zijn van een achtergrond van webontwikkeling, moet u zich thuis voelen bij deze aanpak.
Het eerste deel van deze serie legde de basis voor een database-gestuurde toepassing. Het tweede deel breidde de functionaliteit uit door de mogelijkheid te creëren om een database op afstand te lezen en waarden in onze tabellen in te voegen. Deze tutorial gebruikt de broncode van de eerste twee delen van deze serie.
Open Titanium Developer en maak een nieuw project. Kiezen mobiel en vul alle vereiste informatie in. Dan klikken Maak een project. Kopieer de producten map van uw vorige toepassing en de products.sqlite database in de nieuwe bronnenmap. Download jQuery en plaats het ook in de bronnenmap. Maak ook een nieuwe map en geef deze een naam afbeeldingen. Nu zou je klaar moeten zijn om te gaan.
We gaan het app.js-bestand vereenvoudigen omwille van de eenvoud. Alles verwijderen behalve waar we de tabGroup hebben gemaakt. Open de tabGroup en maak ons eerste en enige tabblad. Hier is het:
var tabGroup = Ti.UI.createTabGroup (); var main = Ti.UI.createWindow (title: 'Product Categories', url: 'products / product_category.js'); var tab = Ti.UI.createTab (icon: 'images / tabs / KS_nav_ui.png', title: 'Products', window: main); tabGroup.addTab (tab); tabGroup.open ();
Als u de toepassing start, ziet deze er bekend uit:
NOTITIE: Als u uw database hebt gekopieerd uit Deel 2 van deze serie, kunt u zich afvragen waarom eventuele extra toegevoegde waarden (die toegevoegd zijn vanuit de applicatie) er niet zijn. Dit komt omdat de actieve lokale database op het apparaat is geïnstalleerd. Ons lokale bestand blijft onaangetast. Als u de vorige toepassing uit de simulator verwijdert en opnieuw installeert, bevindt uw database zich ook in de oorspronkelijke staat.
Het eerste bestand dat wordt geladen door onze applicatie is "product_category.js". We gaan dit bestand helemaal alleen laten. Het volgende dat we kunnen doen om dingen schoon te houden, is door het bestand "product_specs.js" te verwijderen. We zullen een WebView gebruiken om de functie van dit bestand te vervangen. Open "products.js" en laten we hacken. Afgezien van de eventListener, is er maar één ding dat we moeten veranderen in dit bestand. Verwijder de pad van waaruit we onze array hebben gebouwd:
Accentsconagua
var dataArray = []; while (rows.isValidRow ()) dataArray.push (title: "+ rows.fieldByName ('name') +", hasChild: true); rows.next (); ; ... Als we onze applicatie op dit punt uitvoeren, zal dit waarschijnlijk mislukken doordat we bestanden verwijderen en de bovenstaande informatie wijzigen. Dit is hoe het er echter zou uitzien:
Onze eventListener is nu volledig verantwoordelijk voor het resultaat van de klikgebeurtenis. Het eerste dat we moeten veranderen, is onze if-verklaring. Eerder bekeken we of er een pad was. Omdat we het pad hebben verwijderd, moeten we iets anders toevoegen om te controleren. We moeten dit ook gebruiken om te bepalen welk item is geselecteerd. Gebruik 'titel'. Dit is de enige waarde die we hebben die een unieke ID is. Zorg ervoor dat deze waarde wordt gewijzigd wanneer we ook het venster maken.
tableview.addEventListener ('klik', functie (e) if (e.rowData.title) var win = Ti.UI.createWindow (title: e.rowData.title, backgroundColor: "# 000"); ... Laten we de volgende stappen doordenken. We moeten een WebView maken en het pad instellen, de database doorzoeken op basis van de geselecteerde rij (we moeten dit hier doen omdat Ti.Database niet toegankelijk is vanuit een WebView), onze variabelen maken uit onze databasequery en ze uiteindelijk doorgeven naar de WebView. Een ding om in gedachten te houden is dat we niets aan WebView kunnen doorgeven totdat het is gemaakt. We zullen een setTimeout-functie gebruiken om het doorgeven van de variabelen uit te stellen. Hier ziet u hoe de code er uit ziet:
var web = Ti.UI.createWebView (url: 'productsWebview.html'); var db2 = Ti.Database.install ('... /products.sqlite','products'); var specs = db2.execute ('SELECT * FROM Products WHERE name = "' + e.rowData.title + '"'); var name = 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')); function removeSpaces (strip) return strip.split ("). join ("); ; // Voeg de webView toe aan het venster win.add (web); // Maak een time-out - we willen tijd hebben voordat het venster klaar is voordat we de gebeurtenis setTimeout (function () Ti.App.fireEvent ("webPageReady", name: name, pwidth: pwidth, pheight: pheight, pcolor) : pcolor, qty: qty, stripName: stripName);, 500); Ti.UI.currentTab.open (win, geanimeerd: true); ... We hebben een tweede exemplaar van de database gemaakt (als een lokale variabele binnen de functie.) We gebruiken de scope hier om ervoor te zorgen dat we er niets aan doen.) En hebben onze query gemaakt met de gegevens van de geselecteerde rij-titelwaarde. We hebben onze individuele variabelen gemaakt voor de databasekolomgegevens en een tweede variabele gemaakt met de productnaam, waarbij alleen de spaties zijn verwijderd met een functie "removeSpaces". Dit is zodat we een pad naar een afbeelding kunnen maken met behulp van de productnaam in onze WebView.
Vervolgens voegen we onze WebView toe aan de huidige vensters. Onze variabelen worden doorgegeven aan de WebView en door het TI.App.fireEvent "webPageReady" genoemd. Dit gaat af nadat de opgegeven hoeveelheid tijd is verstreken vanaf de functie setTimeout. In ons geval is dit 500 milliseconden, of de helft van een seconde.
Als we onze WebView nu zouden maken, zou alles goed werken. Er zou echter iets zijn dat dat gewoon niet deed voelen recht op de gebruiker. De WebView zou worden gemaakt en de dataset, maar er zou een seconde of zo zijn dat de pagina leeg was of dat er items ontbraken. Het lijkt erop dat er iets kapot is. Gebruikers zijn eraan gewend geraakt dat ze altijd weten dat er iets aan de hand is. Voor Windows-gebruikers is er dat aardige kleine uurglas, OS X-gebruikers hebben het draaiende kleurenwiel, enz.
Gebruikers zijn eraan gewend geraakt dat ze altijd weten dat er iets aan de hand is.
Voor onze activiteitsindicator moeten we een nieuw venster maken, de activiteitsindicator maken, instellen hoe lang het moet worden weergegeven en vervolgens het venster verbergen. We moeten er ook voor zorgen dat de activiteitsindicator aan het nieuwe venster en het nieuwe venster aan de huidige weergave wordt toegevoegd.
var actWin = Ti.UI.createWindow (backgroundColor: '# 000', dooracity: 0.8); var actInd = Ti.UI.createActivityIndicator (style: Ti.UI.iPhone.ActivityIndicatorStyle.PLAIN); actWin.add (actInd); if (Ti.Platform.name == 'iPhone OS') actInd.show (); actInd.color = '#FFF'; actInd.message = 'Bezig met laden ...'; setTimeout (function () actInd.hide ();, 1500); ; setTimeout (function () actWin.hide ();, 1500); // Voeg de webView toe aan het venster win.add (web, actWin); ...
Wanneer we de indicator maken, stellen we de stijl in om eruit te zien als de standaard iPhone-indicator. We willen dan ook dat dit er zo uitziet inheems mogelijk en laat de gebruiker weten wat er aan de hand is. We gebruiken een if-statement, stellen deze in om te controleren op het platformtype, voegen een bericht toe en stellen de tijdsduur in voordat we het venster verbergen.
Deze time-out bevindt zich in de if-instructie, dus we moeten een nieuwe time-outfunctie maken om het venster te verbergen. In beide gevallen stellen we de tijd in op 1500 milliseconden. Terugdenkend aan de laatste stap, hebben we 500 milliseconden toegestaan voordat onze gegevens werden doorgegeven. Dit zal een tweede seconde toelaten om de data daadwerkelijk in WebView te laden.
Maak een nieuw html-bestand met de naam en locatie die we hierboven hebben ingesteld toen we onze WebView maakten. Het is niet noodzakelijk om alle standaard- HTML-header-informatie. Ik verklaar graag mijn doctype en voeg het toe
-tags. We hebben dit nodig omdat we sommige scripts moeten gebruiken.Maak eerst de inhoud van het lichaam. Voeg met behulp van een tabel het vereiste aantal rijen en kolommen toe. Voor deze zelfstudie hebben we vier rijen en twee kolommen nodig. Het label bevindt zich in de linkerkolom en de specificatie rechts. Gebruik een niet-afbrekende spatie () in de spec-cel. Dit is hoe onze tabel eruit ziet:
Breedte Hoogte Kleur Aantal stuks
Het is ook een geweldig idee om een stylesheet toe te voegen, zodat we kunnen aanpassen hoe onze pagina wordt weergegeven. Direct onder de div "content" willen we een vorm van onze eigen header creëren. Ik vind het een geweldig idee om de productnaam weer te geven en een foto te laten zien. Het belangrijkste om te doen bij het bouwen van onze tafel is om een "id" toe te voegen aan de cel die onze specificaties zal bevatten. Om te kunnen stylen, moeten we ook een klasse aan de vergelijkbare cellen toevoegen.
In de vorige zelfstudies hebben we een variabele op één pagina gemaakt en deze aan het nieuwe venster gekoppeld. Deze variabele is toegankelijk via Ti.UI.currentWindow.varName en vervolgens wereldwijd toegankelijk voor de pagina. Omdat dit een WebView is, kunnen we dit niet doen. Wat we moeten doen is een EventListener toevoegen en de doorgegeven variabelen opvangen.
De console in Titanium Developer legt de variabelen en de waarden vast die worden doorgegeven. Dit kan erg handig zijn voor foutopsporing.
In de EventListener specificeren we de gebeurtenis waar we naar luisteren (webPageReady) en verklaren onze variabelen met behulp van onze callback.
Nu dat onze variabelen zijn gedeclareerd, moeten we uitzoeken hoe we deze moeten gebruiken op onze pagina. We kunnen ze niet teruggeven uit de functie en dan de variabelen in onze tabel gebruiken, dus we moeten creatief worden. Laad jQuery op uw pagina en wikkel de huidige EventListener in een document.ready-functie.
Gebruik vervolgens het ID voor elke cel die in de vorige stap is gedefinieerd en vervang het element met jQuery en de juiste variabele.
Het laatste element dat we in de bovenstaande code vervangen, is onze productafbeeldingsvariabele. Gebruik de variabele uit de productnaam waarvan we de spaties hebben verwijderd om de link naar de afbeelding te maken. Zorg er ook voor dat u de map en afbeeldingen voor elk product maakt. Voor de vormgeving is het een goed idee om alle productafbeeldingen op dezelfde grootte te maken. Iets als 150px bij 150px is een goed formaat voor de meeste schermen.
Eindelijk zouden we een werkende applicatie moeten hebben met alle code voltooid. Zo ziet de WebView er uit:
Zodra onze afbeeldingen voor alle producten zijn gemaakt, is het heel gemakkelijk om een standaard CSS in onze stylesheet te gebruiken en onze productpagina's er precies uit te laten zien hoe we ze willen laten verschijnen. Als de informatie die we weergeven en gebruiken in onze applicatie regelmatig wordt bijgewerkt, is een database op afstand misschien de beste keuze.
