Introducere în dezvoltarea SDK pentru webOS Partea 3

Bine ați venit în cea de-a treia parte a seriei noastre privind dezvoltarea SDK-ului webOS. În partea a doua, am furnizat date statice unei liste. Acest tutorial vă va arăta cum să încărcați date dinamice într-o listă. Vom folosi AJAX și YQL pentru a realiza acest lucru.

Spinner și Scrim

Să începem prin schimbarea HTML a scenei listă. Editați aplicația / views / list / list-scene.html pentru a conține următoarele:

Antetul și lista sunt similare cu cele din scena principală. Ceea ce adăugăm este un scrim și un spinner. Ce este un scrim și un spinner întrebi? Un rotativ arată o imagine rotativă (surpriză!) Ca o indicație a faptului că o operațiune este în desfășurare. Este o alegere bună să afișezi un spinner pentru fiecare operație care va dura ceva timp (și amintiți-vă, deoarece suntem pe un dispozitiv mobil, operațiunile care obțin date de la distanță printr-o conexiune fără fir pot dura ceva timp). În plus, folosim un scrim (un strat translucid utilizat pentru a observa interfața de utilizare a fundalului) pentru a ascunde interfața de utilizare a fundalului în timp ce se afișează rotița, deoarece nu are sens să interacționați cu aplicația în timp ce o operație este în așteptare.

De asemenea, adăugăm o listă de împachetare în lista noastră pentru ao împinge jos sub antet. Definiți clasa necesară în foaia de stil / tutsplus.css pentru că:

 .lista principală padding-top: 48px; 

Apoi, mergeți la app / assistants / list-assistant.js pentru a adăuga logica aplicației. Mai întâi definim modelul listei. Spre deosebire de ultima dată, unde datele modelului erau statice, lista noastră de modele nu va avea niciun fel de date în el - va fi încărcată ulterior în listă.

 this.myListModel = elemente: []; this.myListAttr = itemTemplate: "list / itemTemplate", renderLimit: 10, dividerTemplate: "list / dividerTemplate", dividerFunction: this.whatPosition;

Listează separatorul

Definim două proprietăți noi în atributele de listă de data aceasta: dividerTemplate și dividerFunction. Permiteți-mi să explic mai întâi separatoarele. Ele sunt, în esență, elementele introduse între intrările din listă pentru a le grupa. În aplicația noastră, dorim să grupăm articolele afișate după dată. Continuați și creați funcția divider:

 ListAssistant.prototype.whatPosition = funcție (listitem) var myDate = dată nouă (listitem.pubdate); var ds = Mojo.Format.formatDate (myDate, data: "lung", countryCode: "US"); retur ds; 

Un listitem este transferat funcției noastre și noi creăm un obiect date javascript din proprietatea pubDate (se referă la data publicării obținută de la feed-ul RSS). Apoi, reformăm data respectivă cu o funcție Mojo la un șir de date lung (de exemplu, 6 septembrie 2010) și returnați-o. Logica listei va folosi apoi acea dată pentru a grupa elementele listei care au aceeași dată. Divizorul definește felul în care arată separatorul real. Editați aplicația / vizualizările / lista / dividerulTemplate.html:

 
 
 
 
 # DividerLabel 
 
 
 

De fiecare dată când lista face un divizor, se inserează codul HTML de mai sus înlocuind # dividerLabel cu șirul de date.

Permite crearea următorului șablon de listă, editați aplicația / views / list / itemTemplate.html:

 
 
#categoriede către # creator
#date
#Descriere
 

Din nou, specificăm modul în care sunt prezentate fiecare rând din listă și ce date ale modelului sunt afișate. De asemenea, adăugați noile clase la foile de stil / tutsplus.css:

 .pubdate font-size: 10px;  .creator font-size: 12px; fundal-culoare: # a0a0a0; float: dreapta; padding: 3px 3px; text-aliniere: drept; margin-dreapta: 14px; margin-top: 4px; culoare albă;  .ellipsis padding: 10px 0px; margin-stânga: 14 pixeli; font-size: 19px; lățime: 95%; overflow: ascuns; spațiu alb: acum; depășirea textului: elipsă;  .descr font-size: 14px; margin-stânga: 14 pixeli; lățime: 95%;  buton lățime: 95%; overflow: ascuns; spațiu alb: acum; depășire text: clip; margin-stânga: 14 pixeli; padding: 3px 3px; -webkit-border-radius: 8px; culoare albă; font-size: 14px; text-decoration: nici unul; vertical-aliniere: mijloc;  .Netuturi border-top: 1px solid # 4a9082; fundal: # 2e6a60;  .Vortortuts background: # 19487e;  .Psdtuts background: # a51500;  .Activități background: # a5290a;  .Aututuri fundal: # 4a3a57;  .Chuturi background: # 73434f;  .Fotografii border-top: 1px solid # 3297b5; fundal: # 2e92b2;  .Audiotuts fundal: # 3d6b00 .Mobiletuts border-top: 1px solid # ffd200; fundal: # d19c00; 

La sfârșitul funcției de configurare, adăugați ultima bucată lipsă, setarea rotorului:

 this.controller.setupWidget ("search_divSpinner", spinnerSize: "mare", rotire: true); 

Rețineți că am setat-o ​​să se rotească deja, dar deoarece DIV conținând spinner-ul este ascuns, nu vom vedea imaginea spinner.

Bine, hai să mergem și să editezi funcția de activare:

 ListAssistant.prototype.activate = funcția (eveniment) / * pusă aici în manageri de evenimente care ar trebui să fie valabile numai când această scenă este activă. De exemplu, manipulatorii cheie care respectă documentul * / this.headerTitleElement.innerHTML = ""this.getData ();

AJAX și YQL

Afișăm imaginea de titlu și un apel pentru getData. Aceasta va încărca datele pe care dorim să le afișăm în lista noastră. Mergeți mai departe și adăugați funcția getData:

 ListAssistant.prototype.getData = funcția () $ ("search_divScrim") show ();

Înainte de a obține datele, vom arăta DIV care conține spinner-ul. Vom arăta spinner-ul în timp ce operația de încărcare este în desfășurare. Scopul nostru este să afișăm în lista noastră cele mai recente postări din site-ul tutsplus selectat. Fiecare site tutsplus exportă cele mai recente articole într-un feed RSS. Cum citim Feed-ul RSS folosit în aplicația noastră? Vom folosi YQL, Yahoo! Limbajul de solicitare este un limbaj expresiv pentru SQL care vă permite să interogați, să filtrați și să vă alăturați datelor prin intermediul serviciilor Web (http://developer.yahoo.com/yql/). Nu voi intra în detaliu despre YQL aici, puteți citi mai multe despre el pe nettuts.

Iată cum obținem datele din mobiletuts cu YQL:

 selectați * din rss unde url = "http://feeds.feedburner.com/mobile-tuts-summary"

Utilizați consola YQL de la http://developer.yahoo.com/yql/console pentru ao încerca. Selectați JSON ca format de ieșire. Aici este rezultatul (scurtat):

 "interogare": "count": "1", "created": "2010-09-07T08: 41: 32Z", "lang" "title": "Introducere în dezvoltarea SDK pentru webOS: Partea 2", "link": "http://mobile.tutsplus.com/tutorials/webos/introduction-to-webos-sdk-development-part-2/" , "comentarii": "http://mobile.tutsplus.com/tutorials/webos/introduction-to-webos-sdk-development-part-2/#comments", "pubDate": "Mon, 30 Aug 2010 12: "WebOS", "webOS rss", "webOS SDK", "vizualizare table webOS"], "guid", " : "estePermaLink": "false", "conținut": "http://mobile.tutsplus.com/?p=2392"]);

Se pare că putem folosi cele mai multe dintre aceste date pentru a fi afișate în lista noastră. Cum intrăm în lista noastră, întrebi? AJAX este răspunsul. Vom folosi o solicitare AJAX pentru a apela serviciul web YQL. Deoarece mobiletuts utilizează un flux diferit de celelalte site-uri, trebuie să modificăm manual urlul feedului.

 var feed = this.title.toLowerCase (); dacă (feed == 'mobiletuts') feed = "mobile-tuts-summary";  altceva feed = feed + '- rezumat'; 

 var query = "Selectați * din rss unde url =" http://feeds.feedburner.com/ "+ feed +" ""; var url = "http://query.yahooapis.com/v1/public/yql?q="+encodeURIComponent(query)+"&format=json"; var request = new Ajax.Request (url, metoda: 'get', asincron: true, evalJSON: false, onSuccess: this.parseResult.bind (this), on0: function (ajaxResponse) în mod obișnuit, deoarece serverul este supraîncărcat sau a scăzut de la încărcarea paginii Mojo.Log.error ("Conectarea a eșuat");, onFailure: funcția (răspunsul) // Solicitarea a eșuat (404, un fel de lucru) Mojo.Log .error ("Solicitarea a eșuat");, peException: funcția (cerere, ex) // O excepție a fost aruncată Mojo.Log.error ("Excepție");,); 

Folosim funcția Ajax.Request a Prototype pentru a apela serviciul web din Yahoo. Deoarece apelurile AJAX sunt asincrone, nu știm când primim datele din serviciul web. Specificăm funcția de apelat atunci când datele sunt recepționate în apelul onSuccess: this.parseResult.bind (this)

Există ceva nou în modul în care apelul este apelat, observați instrucțiunea adăugată .bind (aceasta). Permiteți-mi să explic ce înseamnă "acest" și domeniul de aplicare în javascript: În JavaScript, funcțiile sunt executate într-un context specific, denumit "domeniu". În interiorul funcției, acest cuvânt cheie devine o referință la acest domeniu. De exemplu, variabila this.title pe care o folosim în funcția getData este locală pentru acea funcție și nu va fi disponibilă într-o altă funcție. Introduceți .binding (acest lucru). "Legarea" determină, în esență, semnificația cuvântului cheie "acest", atunci când o funcție rulează. În exemplul nostru, atunci când numim this.parseResult.bind (aceasta), variabilele care au fost menționate prin aceasta sunt disponibile în funcția parseResult.

Datele returnate din apelul Webservice se termină în obiectul de transport care a trecut la funcția parseResult. Suntem interesați de proprietatea textului transport.reponse, care conține ieșirea ca și JSON String. Convertim acest lucru la un obiect sunând la evalJSON. Putem apoi trece prin proprietățile datelor JSON și vom colecta datele pe care dorim să le completăm în lista noastră.

Parsarea JSON

 ListAssistant.prototype.parseResult = funcția (transport) var newData = []; var data = transport.responseText; încercați var json = data.evalJSON ();  captură (e) Mojo.Log.error (e);  k = 0; pentru (j = 0; 
Deoarece categoriile pe articol sunt dinamice, luăm doar primele 3 categorii din datele JSON și construim un nou șir de categorii din acesta (numit cat). De asemenea, trebuie să scurtăm descrierea, deoarece feedul conține uneori HTML-Strings pe care nu dorim să le afișăm. În regulă, am analizat răspunsul nostru JSON și am construit o nouă serie. Această matrice reprezintă baza pentru modelul nostru de listă.
 
 this.myListModel ["items"] = date noi; this.controller.modelChanged (this.myListModel, this); // ascunde spinnerul $ ("search_divScrim") hide (); ;
 
În primul rând, trecem noua matrice a elementelor din lista noastră și apoi anunțăm lista cu care există un nou model gata să lucreze. Lista va face apoi lista cu noile date. În sfârșit, ne ascundem spinnerul pentru a arăta utilizatorului că procesul de încărcare sa încheiat.
 
Pachetați aplicația, instalați-o și rulați-o. Pentru fiecare site tutsplus pe care îl selectați, acum ar trebui să vedeți lista fiind populată cu cele mai recente articole.
 
Învelire
 
Felicitări! Am citit conținutul unui RSS prin YQL și am hrănit aceste date în lista noastră. În partea a 4-a vom adăuga ultima piesă lipsă în aplicația noastră!



		
			
	   
	




Cod