Share
Denne opplæringsserien vil lede deg gjennom prosessen med å komme i gang med webOS app utvikling. I denne opplæringen lærer du hvordan du installerer webOS-utviklingsmiljøet og lager et enkelt program. I etterfølgende deler av denne serien vil vi opprette et brukbart program som lar deg bla gjennom og vise de nyeste artiklene på knappene + nettverket.
I dag er webapplikasjoner vanlige takket være fremskritt i moderne nettlesere. På mobile enheter kjører de fleste applikasjoner lokalt og er bygget med et kompilert programmeringsspråk som Objective-C eller Java. Fordi de er bygget for en bestemt mobilenhet, er de svært vanskelig å porte til et nettsted eller en annen mobil plattform.
Palm operativsystem for mobile enheter (for eksempel Palm Pre og Pixi) kalles riktig webOS. Et av de kjennetegnene ved webOS er at det gjør alle applikasjoner for enhetsapplikasjoner som er opprettet med HTML, CSS og Javascript ved hjelp av Mojo Javascript-rammen. Selv de innfødte Palm-appene på enheten er webapplikasjoner. Ved hjelp av HTML5 kan webOS-apper lagre data lokalt, tegne 2D-grafikk og gjøre CSS-overganger / animasjoner. De kan også ringe webtjenester via AJAX for å få tilgang til eksterne eller lokale data.
Mojo Javascript-rammen følger løst modellmodellen (MVC). Visninger er skrevet i HTML og CSS, mens Controllers som styrer programlogikken, er skrevet i Javascript. Mojo inneholder også et sett med vanlige brukergrensesnittelementer, for eksempel lister, knapper, containere, dialogbokser, indikatorer og plukkere. For å få tilgang til lavere lag i operativsystemet, kommer Mojo med et sett med Javascript-APIer til å grensesnittet med enhetstjenester (for eksempel Alarmer, Kontakter, Kalendere, Bilder) eller maskinvarekomponenter (for eksempel GPS, Skjerm, Kamera, Strømforsyning).
Kort sagt, hvis du kjenner HTML, CSS og Javascript, kan du enkelt lage applikasjoner for webOS!
For å begynne å bygge programmer for webOS, må du laste ned og installere Palm webOS Software Development Kit. WebOS SDK er tilgjengelig for OS X, Linux og Windows. Du må følge de nyeste instruksjonene fra Palm for å konfigurere webOS utviklingsmiljø.
Etter at du har installert SDK, kan du bruke hvilken som helst tekstredigerer eller IDE til å lage kildekodefiler. Det er en webOS-utviklingsplugg tilgjengelig for Eclipse, men jeg foretrekker å bruke ActiveStates utmerkede Komodo Edit med en tredjeparts plugin for webOS-utvikling. I denne opplæringen skal vi bruke kommandolinjemetoden.
For å komme i gang med en hallo verden app, skriv følgende fra kommandolinjen / terminal:
Palm-generere helloWorld
Denne kommandoen vil opprette en katalog med navnet "helloWorld" som inkluderer den nødvendige katalogstrukturen for appen vår.
La oss se på strukturen for et øyeblikk:
La oss nå se nærmere på appinfo.json. Åpne filen i din favoritt tekstredigerer:
"id": "com.yourdomain.helloworld", "versjon": "1.0.0", "leverandør": "My Company", "type": "web", "main": "index.html" "tittel": "helloWorld", "ikon": "icon.png"
De viktigste parameterne i denne filen er:
Ta en titt på index.html. Det er en standard HTML-fil og setter scenen for søknaden din, gjør ting som å laste inn mojo-rammen og hovedformatarket.
Hei Verden!
For å teste vår søknad skal vi bruke webOS-emulatoren på en x86-konstruksjon av webOS som kjører med VirtualBox. Ikke alle maskinvarefunksjoner støttes på emulatoren. Utilgjengeligheten til både enhetskameraet og multitouch-skjermbildet er eksempler på simulatorbegrensninger, men spesielle kommandoer kan hjelpe oss med å overvinne disse begrensningene. For eksempel er det mulig å utstede en kommando for å simulere et innkommende anrop eller en tekstmelding.
Følgende operativsystemkommandoer starter webOS-emulatoren:
Gå videre og kjør en forekomst av emulatoren. Spille rundt med funksjonaliteten litt.
For å pakke programmet vårt slik at det kan kjøres på webOS, skriv følgende i kommandolinjen fra katalogen som inneholder mappen "helloWorld":
Palm-pakke helloWorld
Resultatet er vår installerbare pakkefil: com.yourdomain.helloworld_1.0.0_all.ipk. Legg merke til at filnavnet inneholder ID og versjon fra appinfo.json-filen.
Installer nå programmet med følgende kommando:
Palm-installer com.yourdomain.helloworld_1.0.0_all.ipk
Start applikasjonen i emulatoren:
Vi har nå vår første søknad oppe, men det er ikke veldig spennende. La oss legge til noe mer innhold.
For å fylle vår scene med livet går vi videre og lager den første scenen. Scener er de samme som forskjellige sider på et nettsted. Scener kan skyves på scenen, duper av scenen, eller byttes med en annen scene.
Palm-generere -t new_scene -p "name = first" helloWorld
Dette skaper to filer: visningen i app / visninger / første / første scene.html og assistent for scenen på app / assistenter / førsteassistent.js.
Åpne første scene.html og rediger den for å inneholde følgende:
Første sceneVelkommen til min verden
Legg merke til klassenavnene som starter med "palm-"; Disse stilene er inkludert i Mojo-rammen, men kan utvides eller endres i ditt eget stilark.
Nå redigerer vi stage-assistant.js for å vise vår nye scene når programmet starter:
funksjon StageAssistant () / * dette er skaperen funksjonen for scenen assistent objektet ditt * / StageAssistant.prototype.setup = function () / * Denne funksjonen er for oppsettoppgaver som må skje når scenen er først opprettet * / Mojo.Controller.stageController.pushScene ( "første"); ;
pakke programmet og installer det på nytt. Her er resultatet:
La oss legge til en scene og ringe det når brukeren trykker på en knapp på den første scenen:
Palm-generere -t new_scene -p "name = second" helloWorld
Nå må vi legge til en knapp til den første scenen. Endre første scene.html til følgende:
Første sceneVelkommen til min verden
For å se den aktuelle knappen, må vi sette opp knappen widget i den første scenens assistent setup kode. La oss redigere first-assistant.js for å gjøre det:
Accentsconagua
FirstAssistant.prototype.setup = function () / * Denne funksjonen er for oppsettoppgaver som må skje når scenen er først opprettet * / / * bruk Mojo.View.render for å gjengi visningsmaler og legge dem til scenen, hvis behov for. * / / * sett inn widgets her * / / * legg til hendelseshåndterere for å lytte til hendelser fra widgets * / this.controller.setupWidget ("button1", this.attributes = , this.model = label: "OK", deaktivert: false); this.handleButton1 = this.handleButtonPress1.bindAsEventListener (this); Mojo.Event.listen (this.controller.get ("button1"), Mojo.Event.tap, this.handleButton1); Legg merke til at vi refererer til knappen ved hjelp av id: "button1". Vi har også lagt til funksjonalitet for å faktisk gjøre noe når vi trykker på knappen. For det lager vi først en hendelsehandler, this.handleButton1. Vi lager den nødvendige funksjonen handleButtonPress1 neste. Neste linje, Mojo.Event.listen, setter knappen opp for å lytte etter kraner og ringe til hendelseshandleren dersom en kran mottas.
La oss lage vår hendelsehandler som håndterer knappetrykk. Vår hendelse handler skyver bare vår andre scene til scenen:
FirstAssistant.prototype.handleButtonPress1 = funksjon (hendelse) Mojo.Controller.stageController.pushScene ("second"); Endelig redigerer vi andre scene.html for å inneholde noe som er nyttig:
Andre sceneDette er den andre scenen
Ok, la oss pakke og installere på nytt. Dette burde være det endelige resultatet:
Du har nettopp fått en hvirvelvindstur i å utvikle applikasjoner for webOS. I neste del av denne serien skal vi bygge en app for å vise og lese de nyeste artiklene fra tuts + nettverket. Legg igjen kommentarer og tilbakemelding nedenfor for å gi oss beskjed om hva du synes om denne serien!
