Share
În acest tutorial, veți învăța cum să creați o aplicație webOS pentru a afișa toate site-urile din rețeaua tuts +. Aceasta este a doua tranșă a unei serii despre dezvoltarea webOS mobilă. Citiți partea întâi a acestei serii pentru o introducere generală la platformă și pentru a vă familiariza cu instrumentele de care veți avea nevoie pentru a dezvolta aplicații webOS.
Pentru a începe, deschideți un Command Prompt / Terminal și introduceți următoarele:
palm-genera tutsplus
Aceasta va crea directorul "tutsplus" și structura directorului necesar pentru aplicațiile webOS.
Descărcați imaginile pentru site-urile tuts + site-uri atașate la această postare. Copiați fișierele în directorul app / images, apoi copiați tuts_icon.png în directorul tutsplus.
Acum ne uităm mai atent la "tutsplus / appinfo.json". Deschideți fișierul appinfo.json în editorul dvs. de text preferat și modificați-l pentru a citi după cum urmează:
"id": "com.mycompany.tutsplus", "versiune": "1.0.0", "vânzător": "MyCompany", " titlu ":" TutsPlus "," pictogramă ":" tuts_icon.png "
Mergeți mai departe și schimbați valorile "id" și "furnizor" la propriile dvs., de asemenea.
Pentru a umple etapa noastră cu viața, mergem înainte și creăm prima, sau "principală" scenă:
palm-generate -t new_scene -p "nume = principal" tutsplus
Acest lucru va crea două fișiere: vizualizarea în app / views / main / main-scene.html și asistentul pentru scenă la app / assistants / main-assistant.js
Acum, deschideți main-scene.html și adăugați prima parte, antetul:
Abilități de plată a facturilor
Clasa "palm-page-header multi-line" este una din multele incluse în Mojo Framework, dar vom defini clasele suplimentare găsite în fragmentul HTML deasupra noastră. Editați foile de stil / tutsplus.css pentru aceasta și adăugați următoarele definiții de clasă:
.tuts-header poziție: fix; z-index: 1000; lățime: 100%; înălțime: 35px; umplutura: 10px 0 0; marja: 0; -webkit-palm-mouse-target: ignorați; .titul-imagine poziție: fix; top: 16px; stânga: 14px; .main-titlu poziție: absolută; font-size: 24px; stânga: 60px; top: -4px; lățime: 220px;
După cum puteți vedea, folosim proprietățile CSS standard cu o singură excepție:
-webkit-palm-mouse-target: ignorați;
Această proprietate non-standard spune antetului să ignore clicurile.
NOTĂ:
Ce se întâmplă dacă doriți să vă uitați la elementele DOM și stilurile CSS ale aplicației dvs.? Folosește inspectorul pentru palmă.
Acum adăugăm carnea aplicației noastre la scenă, o listă widget:
Să ne aruncăm o privire în liste pentru o clipă. Listele sunt probabil widget-ul cel mai folosit în webOS. Ele ne permit să afișăm date în coloane și multe altele. Siturile webOS includ următoarele funcționalități:
Ne indreptam catre aplicatii / asistenti / main-assistant.js pentru a configura scena si lista pe care o contine. Mai întâi definim datele necesare pentru a completa lista noastră:
MainAssistant.prototype.setup = function () / * aceasta functie este pentru sarcinile de configurare care trebuie sa se intample atunci cand scena este creata initial * / / * folositi Mojo.View.render pentru a reda template-uri de vizualizare si a le adauga la scena, daca * / / * setarea widget-urilor aici * / / * adăugarea agendelor de evenimente pentru a asculta evenimentele din widget-uri * / this.myListModel = items: [title: 'Nettuts', titleImage: images / nettuts.png 'leftImage: 'images / tiny-net.jpg', col: '# 2e6a60', title: 'Vectortuts', titleImage: 'images / vectortuts.png', leftImage: # 19487e ', title:' Psdtuts ', titleImage:' images / psdtuts.png ', leftImage:' images / tiny-psd.jpg ', col:' a51500 ', title: Activituts, titleImage : 'images / activetuts.png', leftImage: 'images / tiny-active.jpg', col: '# a5290a', title: 'Aetuts', titleImage: 'images / aetuts.png', leftImage: /tiny-ae.jpg ', col:' # 4a3a57 ', title:' Cgtuts ', titleImage:' images / cgtuts.png ', leftImage:' images / tiny-cg.jpg ', col:' # 73434f ' , title: 'Phototuts', titleImage: 'images / phototuts.png', leftImage: 'images / tiny-photo.jpg', col: '# 2e92b2', title: 'Audiotuts', titleImage: / images / tiny-audio.jpg ', col:' # 3d6b00 ', title:' Mobiletuts ', titleImage:' images / mobiletuts.png ', leftImage: mobile.png ', col:' # d19c00 '];
Rețineți că myListModel are o proprietate numită "elemente". Widgetul List se așteaptă să găsească o proprietate în modelul de date care conține o serie de obiecte. Acest nume de proprietate trebuie să fie "elemente". În cazul nostru, definim informațiile despre rețeaua tutsplus. Fiecare element conține proprietăți care reprezintă titlul, imaginile și culoarea fiecărui site. Aceste proprietăți pot fi utilizate în listă prin includerea lor în șablonul de listă. O listă este redată cu ajutorul unui șablon, așa că hai să mergem mai departe și să creăm a noastră: app / views / main / itemTemplate.html. Editați noul șablon pentru a conține următoarele:
#titlu
Șablonul nostru arată lista cu modul de afișare a fiecărui element din modelul său. Vrem să afișăm titlul și imaginea din modelul nostru, astfel încât să includem etichetele speciale # leftImage și # title. Acestea sunt înlocuite cu datele din modelul nostru atunci când rândul este redat.
Apoi, adăugați clasa "grid-cell" în foile de stil / tutsplus.css:
.grilă-celulă culoare: # 000; .grid-cell.selected culoare: #fff; fundal: #ccc; frontieră: 1px solid # 00f;
Aceste două clase definesc aspectul unui rând din listă în starea neselectată și selectată.
Reveniți la aplicația / asistenții / main-assistant.js și adăugați instrucțiunea necesară pentru a configura lista noastră:
this.myListAttr = itemTemplate: "principală / elementTemplate", renderLimit: 20,; this.controller.setupWidget ( "MyList", this.myListAttr, this.myListModel); ;
În myListAttr vom spune lista care șablon să folosească; specificăm șablonul doar creat. După cum puteți vedea în apelul setupWidget, vom transmite ID-ul listei, parametrii și modelul.
De asemenea, trebuie să editați aplicația / asistenții / stage-assistant.js pentru a afișa scena principală atunci când începe aplicația:
funcția () / * aceasta este funcția creatoare a obiectului asistentului de scenă * / StageAssistant.prototype.setup = function () / * această funcție este pentru sarcinile de configurare care trebuie să se întâmple când scena este creată inițial * / Mojo.Controller.stageController.pushScene ( "main"); ;
Totul terminat, să vedem cum arată aplicația noastră ... lansați emulatorul, împachetați aplicația și instalați-o în emulator:
pachetul palm tutsplus palm-install com.mycompany.tutsplus_1.0.0_all.ipk
Privind destul de bine, nu crezi? Toate acestea cu doar câteva linii de cod. Să adăugăm mai multe funcționalități. Ce se întâmplă atunci când utilizatorul face clic pe un rând din listă? În regulă, continuați și adăugați următoarele la aplicații / asistenți / main-assistant.js:
Accentsconagua
#titluMainAssistant.prototype.activate = funcția (evenimentul) / * a pus în mânuitorii de evenimente aici, care ar trebui să fie valabile numai când această scenă este activă. De exemplu, manipulatorii cheie care respectă documentul * / this.tapHandler = this.handleTap.bindAsEventListener (acest lucru); Mojo.Event.listen (acest.controller.get ('MyList'), Mojo.Event.listTap, this.tapHandler); ; MainAssistant.prototype.handleTap = funcție (eveniment) Mojo.Log.info ("Indicele evenimentului este:" + event.index); Mojo.Log.info ("selectat:" + event.item.title); this.title = event.item.title; this.titleImage = event.item.titleImage; this.col = event.item.col; Mojo.Controller.stageController.pushScene ("list", acest titlu, acest.titleImage, acest.col); Logging: După cum vedeți mai sus, am adăugat o declarație Mojo.Log.info la cod. Uneori, aplicația dvs. nu pornește sau nu funcționează sau doriți să imprimați doar câteva informații debuggin. Mojo.Log.info vă va ajuta să faceți acest lucru. Pentru a vedea rezultatul produs de Mojo.Log.info, folosiți comanda:
palmier-log
(com.mycompany.tutsplus pentru aplicația noastră)
De data aceasta, adăugăm apelul Mojo.Event.listen la metoda de activare a MainAssistant. De fiecare dată când aplicația este activată (scena este împinsă sau când o altă scenă este afișată și scena noastră este afișată din nou) codul în activare se numește.
Creăm un handler (this.taphandler) și îl sunăm atunci când descoperim o listă (Mojo.Event.listTap) pe lista noastră (this.controller.get ('MyList')
Să ne uităm la funcția handleTap a handlerului. Când lista este atinsă, funcția primește un obiect uniform. Ceea ce ne interesează este proprietatea event.index, care conține rândul din listă. Din fericire pentru noi, obiectul evenimentului conține, de asemenea, proprietățile elementului de rând preluat din model. event.item.title ca exemplu va conține "Mobiletuts" dacă faceți clic pe rândul respectiv.
Colectăm toate datele pe care dorim să le folosim din obiectul evenimentului și, în final, sunăm noua noastră "listă". Rețineți modul în care adăugăm datele pe care dorim să le transmitem acestei scene în apelul pushScene. Puteți adăuga cât mai mulți parametri doriți.
MainAssistant.prototype.deactivate = funcție (eveniment) / * eliminați eventualii manipulatori de evenimente pe care i-ați adăugat în activare și efectuați orice altă curățare care ar trebui să se întâmple înainte ca această scenă să fie afișată sau o altă scenă să fie împinsă în sus * / Mojo.Event.stopListening .controller.get ('MyList'), Mojo.Event.listTap, this.tapHandler); ; Rețineți că adăugăm, de asemenea, un Mojo.Event.stopListening la metoda de dezactivare a MainAssistant. În acest fel, App-ul nostru nu mai asculta robinetele de pe listă atunci când o scenă diferită este împinsă pe partea de sus pe ea și noi nu fugim în orice Eventhandlers rătăcită atunci când App este ieșit.
Ceea ce trebuie încă făcut este să creezi noua listă de scenă:
palm-generate -t new_scene -p "nume = lista" tutsplus
Apoi, editați aplicația / views / list / list-scene.html:
Acum editați app / assistant / list-assistant.js:
function ListAssistant (titlu, titluimage, col) / * aceasta este functia de creator pentru obiectul asistentului scena. Vor fi transmise toti parametrii suplimentari (dupa numele scenei) care au fost transmise catre pushScene. Referința la controlerul de scenă (acest.controler) nu a fost încă stabilită, deci orice inițializare care are nevoie de controlerul de scenă trebuie făcută în funcția de configurare de mai jos. * / this.title = title; this.titleimage = titleimage; this.col = col; ListAssistant.prototype.setup = function () / * această funcție este pentru sarcinile de configurare care trebuie să se întâmple când scena este creată pentru prima dată * / / * folosiți Mojo.View.render pentru a reda șabloane de vizualizare și a le adăuga la scenă, dacă este necesar * / / * setarea widget-urilor aici * / / * adăugați agenți de gestionare a evenimentelor pentru a asculta evenimente din widget-uri * / this.controller.get ('result') innerHTML = "Ați selectat" + this.title + .“ this.controller.get ( 'imagine'). innerHTML =“
" Rețineți cum copiem parametrii parcurși în variabile noi pentru o utilizare ulterioară. De asemenea, actualizăm codul HTML al scenei noastre pentru a afișa parametrii parcurși.
Reambalați aplicația, instalați-o și rulați-o. Atingeți un rând din listă și vedeți cum este împinsă noua scenă și afișează rândul pe care l-ați selectat!
Felicitări, am abordat o mare varietate de subiecte în această a doua parte. Ați învățat cum să creați o listă, să o completați cu date, să o afișați și apoi să reacționați la interacțiunea cu utilizatorul. În următoarea parte, vom completa campania cu funcționalitate: obțineți cele mai recente tutoriale și articole din feedul RSS al site-ului selectat și le afișați într-o listă. Sperăm să rămânem în jur și să lăsăm feedbackul în secțiunea de comentarii!
"