Construiți un AudioPlayer cu PhoneGap Tuning aplicații

Aceasta este a treia și ultima parte a seriei despre Audero Audio Player. În acest articol, voi trece fișierele rămase, astfel încât să puteți termina proiectul și să vă jucați cu el.

Prezentare generală a seriei

Setarea aplicației
Logica aplicației
Aplicația de reglare

Mode Tuning

jQuery Mobile face o mulțime de lucru pentru dvs. prin îmbunătățirea elementelor de pagini pentru dispozitivele cu ecrane mai mici. Cu toate acestea, există unele pe care nu le interesează și le vom modifica style.css fişier. Acest lucru este, de asemenea, folosit pentru a modela marcajele jucătorului.

În mod implicit, chiar dacă nu aveți butoane în antetul sau în subsolul paginii, cadrul încă mai păstrează un spațiu pe ambele părți ale elementelor și trunchiază titlurile lungi. Acest comportament este aplicat și altor elemente. Putem schimba pur și simplu prin aplicarea regulii alb-spațiu: normal! important; la elementele noastre vizate .Titlul-ui.

Sursa foii de stil este prezentată aici:

 .ui-header .ui-titlu, .ui-footer .ui-titlu, .ui-btn-interior * spațiu alb: normal! important;  .photo text-aliniere: centru;  # player-play, # stop-player display: inline-block; lățime: 48px; înălțime: 48px;  # player-play fundal-imagine: url ('... /images/play.png');  # player-stop background-image: url ('... /images/stop.png');  # time-slider afișare: niciunul;  div.ui-slider-track margine: 0; lățime: 100%;

Configurația personalizată jQuery Mobile

jQuery Mobile are o configurație implicită care ar trebui să fie suficient de bună pentru majoritatea proiectelor cu cerințe simple. Cu toate acestea, vor exista momente când veți dori să modificați sau să preluați controlul asupra unui anumit comportament implicit. Puteți realiza acest lucru prin scrierea unui fișier de configurare. Fișierul jquery.mobile.config.js este exact locul în care vom avea configurația. Rețineți că trebuie să includeți fișierul de configurare inainte de fișierele jQuery Mobile. Când jQuery Mobile pornește, acesta declanșează mobileinit eveniment, care este cel pe care trebuie să îl obligați să înlocuiască setările implicite.

Vom face schimbarea prin atribuirea de valori proprietatilor $ .mobile obiect. Nu voi schimba o mulțime de proprietăți. Voi schimba în schimb opțiunea de a afișa textul în widgetul încărcătorului de pagină și în temă.

Sursa completă a fișierului este prezentată mai jos:

 $ (document) .on ('mobileinit', funcția () // Pagina Loader Widget $ .mobile.loader.prototype.options.text = 'Încărcare ...'; $ .mobile.loader.prototype.options.textVisible = true ; // Tema $ .mobile.page.prototype.options.theme = 'a'; $ .mobile.page.prototype.options.headerTheme = 'a'; $ .mobile.page.prototype.options.contentTheme = 'a '; $ .mobile.page.prototype.options.footerTheme =' a '; $ .mobile.page.prototype.options.backBtnTheme =' a ';);

Construiți configurația

Serviciul Adobe PhoneGap Build vă oferă posibilitatea de a specifica metadatele unei aplicații, cum ar fi autorul și descrierea, utilizând un fișier de configurare. Acest fișier este apelat config.xml. Explicarea formatului în profunzime este în afara domeniului de aplicare al acestei serii, dar vă voi oferi o scurtă prezentare generală. Dacă doriți să citiți mai multe despre acest subiect, aruncați o privire la pagina documentației oficiale.

config.xml fișierul respectă specificația widget-ului W3C și trebuie să rămână în interiorul rădăcină a aplicației, la același nivel index.html fişier. Prima sa linie este declarația XML, iar rădăcina documentului este a tag care are mai multe atribute posibile. Cele mai importante sunt id (identificatorul unic pentru proiectul dvs.) și versiune (care specifică versiunea aplicației). În interiorul , puteți scrie metadatele aplicației dvs. În fișierul nostru vom folosi multe dintre ele, dar cele mai importante sunt următoarele:

Nume (obligatoriu): Numele cererii. Nu trebuie să fie unic.
Descriere (obligatoriu): Descrierea cererii. Este deosebit de important pentru că va fi afișat în lista de aplicații de pe piață.
icoană (opțional): pictograma care se afișează pe dispozitivele care vor instala aplicația. Dacă nu specificați acest lucru, se va folosi sigla Cordova.
stropi (opțional): Această etichetă stabilește ecranul de pornire al aplicației, care este imaginea afișată în timpul încărcării.
caracteristică (opțional): Specifică caracteristicile pe care doriți să le utilizați. De exemplu, Android, înainte de a instala orice aplicație, îi arată utilizatorului permisiunile pe care le solicită și, dacă utilizatorul este de acord, continuă.
preferinţă (opțional): un set de preferințe pe care doriți să îl aplicați aplicației. Este o etichetă închisă și puteți avea zero sau mai multe în interiorul fișierului. Are două atribute și ambele sunt necesare: Nume și valoare. Există o mulțime de preferințe pe care le puteți defini, dar cea mai importantă în opinia mea este specificarea versiunii Cordova folosită.

tag-ul este, de asemenea, foarte important pentru că, pentru a cita documentația, aceasta furnizează aplicației dvs. acces la resurse din alte domenii - în special, permite aplicației dvs. să încarce pagini din domenii externe care pot prelua întreaga vizualizare web. Reamintind ceea ce am discutat în secțiune Gestionarea legăturilor externe din postarea anterioară, pentru a deschide linkurile externe din Cordova WebView, trebuie să le adăugăm în lista albă a aplicației. Deoarece aplicația noastră nu va prelua linkuri din surse externe și nesigure, putem scurta procesul pentru a permite utilizarea oricărei resurse externe utilizând * caracter special. De exemplu:

Am subliniat punctele cheie ale formatului și acum puteți înțelege sursa fișierului de configurare. Dosarul complet este de mai jos:

   Audero Audio Player Audero Audio Player este un player audio de bază care colectează fișierele audio și apoi le permite utilizatorului să le asculte. Această aplicație vă permite, de asemenea, să actualizați lista în orice moment pentru a include alte fișiere care ar putea fi descărcate după prima operație. De asemenea, puteți elimina orice conținut nedorit din listă făcând clic pe o pictogramă din partea dreaptă a numelui melodiei. Lista de sunete este ordonată în ordine alfabetică cu separatoare de litere pentru a organiza și grupa elementele listate și are o casetă de căutare pentru filtrarea fișierelor. Aurelio De Rosa

Rularea aplicației

În ultima secțiune, toate logica de afaceri, fișierele HTML și CSS pentru aplicație au fost construite, deci acum este timpul să setați funcțiile de intrare pentru aplicație și să le redați. Funcția vizată va fi initApplication () metodă a cerere clasă. Se va executa odată ce Cordova este complet încărcată, asigurându-vă că puteți apela în siguranță API-urile Cordova. Pentru a face asta, vom stabili initApplication () ca funcție de apel invers pentru deviceready eveniment prin adăugarea următorului cod la index.html fişier. Puteți vedea acest lucru uitând la fragmentul următor:

Îmbunătățiri posibile

Sunteți acum la sfârșitul proiectului. Acestea fiind spuse, fiecare proiect are loc pentru îmbunătățiri și caracteristici noi, așadar înainte de a încheia seria, aș dori să vă sugerez câteva dintre acestea.

Prima caracteristică pe care o puteți adăuga este internaționalizarea (i18n) a aplicației. Jucătorul nostru nu are prea mult text, așa că traducerea acestuia în alte limbi ar trebui să fie foarte ușoară. Pentru a traduce aplicația, puteți utiliza API Globalizare, un API adăugat la nucleu începând cu versiunea 2.2.0. În plus, o anumită bibliotecă jQuery ca proprietățile jquery-i18n sau jQuery-i18n ar fi cu siguranță utilă pentru această caracteristică.

Alte sugestii minore sunt:

Permite utilizatorului să creeze un playlist.
Creați un buton "Play All" pentru a reda toate melodiile din listă.
Creați un sistem de rating pentru audio, astfel încât utilizatorul să poată filtra și ordona cântece după evaluare.
Adăugați un buton "Repetare" astfel încât utilizatorul să poată continua să asculte cântecul curent.

Aceste sugestii sunt doar câteva din potențialele îmbunătățiri pe care le puteți aduce la Audero Audio Player. Folosind informațiile din acest tutorial și abilitățile tale, poți să faci mult, mult mai mult.

Concluzie

După cum ați văzut în această serie, puteți crea aplicații puternice și utile utilizând tehnologii web și cadre populare. Acum e rândul tău să te joci cu acest proiect. Încercați să începeți propriul proiect pentru a testa ceea ce ați învățat în această serie!

Cod