Share
Velkommen til den tredje delen av serien vår med databasert Titanium Mobile-utvikling. Denne opplæringen vil fortsette å bygge videre på prinsippene som ble introdusert i tidligere innlegg, men vi vil endre vårt appdesign på en svært betydelig måte. I stedet for å bruke et TableView-objekt for å vise et tilpasset grensesnitt, skal vi bytte til bruk av en WebView-objekt. Årsaken til dette er at WebView-objektet lar oss kontrollere vårt grensesnitt ved hjelp av CSS og HTML, og TableView vil ikke. For de av dere som kommer fra en webutviklingsbakgrunn, bør du føle deg hjemme med denne tilnærmingen.
Den første delen av denne serien lagde grunnlaget for en database-basert applikasjon. Den andre delen utvidet funksjonaliteten ved å skape muligheten til å lese en ekstern database og sette inn verdier i tabellene våre. Denne opplæringen vil benytte kildekoden fra de to første delene i denne serien.
Open Titanium Developer og opprett et nytt prosjekt. Velge Mobil og fyll ut all nødvendig informasjon. Klikk deretter Opprett prosjekt. Kopier Produkter mappe fra din tidligere søknad og products.sqlite database til den nye ressurs katalogen. Last ned jQuery og legg det inn i ressursmappen også. Lag også en ny mappe og navnet på den Bilder. Nå bør du være klar til å gå.
Vi skal fjerne app.js-filen for enkelhets skyld. Fjern alt unntatt der vi opprettet tabgruppen. Åpne tabgruppen og opprett vår første og eneste fanen. Her er det:
var tabGroup = Ti.UI.createTabGroup (); var main = Ti.UI.createWindow (tittel: 'Produktkategorier', url: 'products / product_category.js'); var tab = Ti.UI.createTab (ikon: 'images / tabs / KS_nav_ui.png', tittel: 'Produkter', vindu: main); tabGroup.addTab (tab); tabGroup.open ();
Hvis du starter programmet, bør det se kjent ut:
MERK: Hvis du kopierte databasen fra del 2 i denne serien, kan du kanskje lure på hvorfor noen tilleggsverdier (de som er lagt inn fra applikasjonen) ikke er der. Dette skyldes at den aktive lokale databasen er installert på enheten. Vår lokale fil forblir uberørt. Hvis du fjerner forrige søknad fra simulatoren og installerer den på nytt, vil databasen din også være tilbake til sin opprinnelige tilstand.
Den første filen som er lastet av vår søknad, er "product_category.js". Vi kommer til å forlate denne filen helt alene. Det neste vi kan gjøre for å holde ting rent, er å slette filen "product_specs.js". Vi bruker en WebView til å erstatte funksjonen til denne filen. Åpne "products.js" og la oss få hacking. Bortsett fra eventListener, er det bare en ting vi må endre i denne filen. Fjern sti fra hvor vi bygger vårt utvalg:
Accentsconagua
var dataArray = []; mens (rows.isValidRow ()) dataArray.push (title: "+ rows.fieldByName ('name') +", hasChild: true); rows.next (); ; ... Hvis vi kjører programmet på dette tidspunktet, vil det trolig mislykkes på grunn av at vi sletter filer og endrer informasjonen ovenfor. Men dette er hvordan det ser ut:
Vår eventListener er nå helt ansvarlig for resultatet fra klikkhendelsen. Det første vi må bytte er vår om setning. Tidligere sjekket vi om det var en sti. Siden vi fjernet banen, må vi legge ved noe annet å se etter. Vi må også bruke dette for å bestemme hvilket element som ble valgt. Bruk "tittel". Dette er den eneste verdien vi har som er en unik identifikator. Pass på at du endrer denne verdien når vi lager vinduet også.
tableview.addEventListener ('klikk', funksjon (e) if (e.rowData.title) varwin = Ti.UI.createWindow (tittel: e.rowData.title, backgroundColor: "# 000"); ... La oss tenke gjennom de neste trinnene. Vi må opprette en WebView og angi banen, spørre databasen basert på den valgte raden (vi må gjøre dette her fordi Ti.Database ikke er tilgjengelig fra en WebView), opprett våre variabler fra vår database spørring, og til slutt passere dem til WebView. En ting å huske på er at vi ikke kan overføre noe til WebView før det er opprettet. Vi vil bruke en setTimeout-funksjon for å forsinke passeringen av variablene. Slik ser koden ut:
var web = Ti.UI.createWebView (url: 'productsWebview.html'); var db2 = Ti.Database.install ('... /products.sqlite','products'); Var-spesifikasjoner = db2.execute ('VELG * FRA PRODUKTER HVOR navn = "' + e.rowData.title + '"'); var navn = specs.fieldByName ('navn'); 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 ('navn')); funksjon removeSpaces (strip) return strip.split ("). join ("); ; // Legg til webvisningen til vinduet win.add (web); // Lag en timeout - vi vil ha tid til at vinduet skal være klart før vi brann hendelsen setTimeout (funksjon () Ti.App.fireEvent ("webPageReady", navn: navn, pwidth: pwidth, pheight: pheight, pcolor : pcolor, antall: qty, stripName: stripName);, 500); Ti.UI.currentTab.open (seier, animerte: true); ... Vi opprettet en andre forekomst av databasen (Som en lokal variabel inne i funksjonen. Vi bruker omfanget her for å sikre at vi ikke roter noe opp.) Og opprettet forespørselen vår med dataene fra den valgte radens tittelverdi. Opprettet våre individuelle variabler for databasekolonnen data, og opprettet en andre variabel ved hjelp av produktnavnet, bare å fjerne mellomromene med en "removeSpaces" -funksjon. Dette er slik at vi kan lage en bane til et bilde ved hjelp av produktnavnet i vår WebView.
Vi legger deretter til vår WebView til de nåværende Windows. Våre variabler sendes til WebView og heter "webPageReady" av TI.App.fireEvent. Dette brenner når den angitte tiden har gått fra setTimeout-funksjonen. I vårt tilfelle er det 500 millisekunder, eller et halvt sekund.
Hvis vi skulle lage vår WebView akkurat nå, ville alt fungere bra. Det ville imidlertid være noe som bare ikke gjorde det føle rett til brukeren. WebView ville bli opprettet og datasettet, men det ville være et sekund eller så med tid der siden var tom eller manglende elementer. Det ser ut til at noe er ødelagt. Brukere har blitt vant til å alltid vite noe som skjer. For Windows-brukere er det det hyggelige lille timeglasset, OS X-brukere har det spinnende fargeskjulet osv.
Brukere har blitt vant til å alltid vite noe som skjer.
For aktivitetsindikatoren må vi opprette et nytt vindu, opprette aktivitetsindikatoren, angi hvor lang tid det skal vises, og deretter skjule vinduet. Vi må også sørge for å legge til aktivitetsindikatoren i det nye vinduet og det nye vinduet til den nåværende visningen.
var actWin = Ti.UI.createWindow (backgroundColor: '# 000', opacity: 0.8); var actInd = Ti.UI.createActivityIndicator (stil: Ti.UI.iPhone.ActivityIndicatorStyle.PLAIN); actWin.add (actInd); hvis (Ti.Platform.name == 'iPhone OS') actInd.show (); actInd.color = '#FFF'; actInd.message = 'Loading ...'; setTimeout (funksjon () actInd.hide ();, 1500); ; setTimeout (funksjon () actWin.hide ();, 1500); // Legg til webvisningen til vinduet win.add (web, actWin); ...
Når vi lager indikatoren, setter vi stilen til å se ut som den vanlige iPhone-indikatoren. Vi vil da også at dette skal se ut som innfødt som mulig og la brukeren vite hva som skjer. Vi bruker en if-setning, setter den til å sjekke om plattformstypen, legger til en melding og angir hvor lang tid det er før vi skjuler vinduet.
Denne timeout er inne i if-setningen, så vi må opprette en annen timeout-funksjon for å skjule vinduet. I begge tilfeller setter vi tiden til 1500 millisekunder. Tenkende tilbake til det siste trinnet, tillot vi 500 millisekunder før dataene våre er bestått. Dette vil tillate et sekund for at dataene faktisk skal lastes inn i WebView.
Opprett en ny html-fil med navnet og plasseringen som vi angitt ovenfor da vi opprettet vår WebView. Det er ikke nødvendig å legge til alle standard HTML header informasjon. Jeg liker å erklære min doktype og legge til
tags. Vi trenger dette fordi vi må bruke noen skript.Først opprett innholdet i kroppen. Bruk en tabell, legg til ønsket mengde rader og kolonner. For denne opplæringen trenger vi fire rader og to kolonner. Etiketten vil være i den venstre kolonnen og spesifikasjonen til høyre. Bruk et ikke-bryte mellomrom () i spesifikasjonscellen. Slik ser vårt bord ut:
Bredde Høyde Farge Mengde
Det er også en god ide å legge til et stilark slik at vi kan tilpasse hvordan vår side vises. Rett under "content" diven ønsker vi å lage en form for vårt eget overskrift. Jeg synes det er en god ide å vise produktnavnet og vise et bilde. Det viktigste ved å bygge bordet vårt er å legge til et "id" til cellen som inneholder våre spesifikasjoner. For stylingens skyld, bør vi også legge til en klasse i lignende celler.
I de tidligere opplæringen lagde vi en variabel på en side og festet den til det nye vinduet. Denne variabelen ble åpnet ved å bruke Ti.UI.currentWindow.varName og deretter globalt tilgjengelig for siden. Fordi dette er en WebView, kan vi ikke gjøre dette. Det vi trenger å gjøre er å legge til en EventListener og ta de bestått variablene.
Konsollen i Titanium Developer logger inn variablene og verdiene som blir bestått. Dette kan være veldig nyttig for feilsøking.
I EventListener spesifiserer vi hendelsen vi lytter etter (webPageReady) og erklære våre variabler ved hjelp av vår tilbakeringing.
Nå som vi har oppgitt våre variabler, må vi finne ut hvordan de skal brukes på vår side. Vi kan ikke returnere dem fra funksjonen og deretter bruke variablene i bordet vårt, så vi må bli kreative. Legg inn jQuery på siden din og pakk gjeldende EventListener inne i en document.ready-funksjon.
Deretter bruker du ID for hver celle som er definert i forrige trinn, og erstatt elementet ved hjelp av jQuery og den riktige variabelen.
Det siste elementet vi bytter ut i koden ovenfor, er vår produktbildevariabel. Bruk variabelen fra produktnavnet som vi fjernet mellomromene for å bygge linken til bildet. Sørg også for å opprette katalog og bilder for hvert produkt. For styling er det en god ide å gjøre alle produktbilder av samme størrelse. Noe som 150px ved 150px er en god størrelse for de fleste skjermer.
Endelig bør vi ha et arbeidssøknad med all kode fullført. Slik ser WebView ut:
Når bildene våre er opprettet for alle produktene, er det veldig enkelt å bruke noen standard CSS i stilarket og få produktsidene våre til å se nøyaktig ut hvordan vi vil at de skal vises. Hvis informasjonen vi viser og bruker i vår søknad oppdateres ofte, kan en ekstern database være veien å gå.
