Acest post este disponibil și în: Engleză
producătorii de televiziune majore în ultimii ani, explorează în mod activ posibilitatea de a furniza servicii prin intermediul internetului, iar Panasonic nu a devenit excepție în acest sens. viziunea sa asupra conceptului de televiziune inteligente specialiștilor companiei japoneze întruchipat tehnologia Viera Connect.
De la comunicat de presa Panasonic:
În acest articol, dorim să împărtășim experiența de dezvoltare a aplicațiilor pentru platforma de Viera Connect.
Configurarea mediului de dezvoltare
Bună ziua, lume!
aplicatii Enterprise
Panasonic Viera Connect orice aplicație constă într-o scenă sau ecrane. Cele de mai sus fișier main.js - scena principală, punctul de intrare la cerere. sticle de scena conțin, de obicei, elemente grafice de interfață de utilizator și codul pentru interacțiunea cu utilizatorul. În cazul nostru, suntem oarecum deviat de la acest concept și folosit Etapa main.js pentru a conecta toate bibliotecile necesare pentru a redirecționa utilizatorul către aplicația pagina de start.
Organizarea de funcționare în paralel a mai multor membri ai echipei.
Dezvoltarea de aplicații
Sistem de navigație
Am început cu faptul că a dezvoltat 3 clase principale:
- NavigationStage
- NavigationArea
- NavigationNode
NavigationStage conține metode generice pentru a muta cursorul pe scenă și navigați între teatru. NavigationArea - o zonă de navigație de clasă, care combină elemente NavigationNodes de navigație. Zona poate fi zonele adiacente la partea de sus, de jos, dreapta și la stânga. Acest lucru este valabil și pentru elementele de navigare. Elementele de navigare sunt virtuale, dar păstrează o referință la elementul de pe scenă, un afișaj vizual pe care o putem schimba, în funcție de faptul dacă elementul este focalizat sau nu.
interfețe NavigationArea NavigationNode și conțin metode similare: executeSelect și executeLeave. Acestea sunt cauzate atunci când un câștig zonă sau un element sau pierde focalizarea. În plus, NavigationNode obiecte au, de asemenea, metoda executeEnter, care este numit pentru elementul focalizat atunci când utilizatorul apasă butonul OK de pe telecomandă.
Tot câmpul de navigare se comportă în mod similar. La stabilirea inițial cursorul în zona de navigare a navigației este activată pe elementul implicit pentru ea. În cazul în care utilizatorul deplasează cursorul la o altă zonă, stocăm indicele ultimului element de navigare activă. Acest lucru se face astfel încât atunci când cursorul se va întoarce înapoi, vom putea să activați elementul, care a fost efectuat cu tranziția.
La începutul dezvoltării tuturor elementelor de navigație și zona se comportă, de asemenea, în același mod. Inițial, a fost etichetele text care își schimbă culoarea în funcție de poziția de focalizare, iar acest comportament a fost înregistrat în NavigationNode clasă. Când ne impune o filme net, care se confruntă cu necesitatea de a crea elemente de navigare mai sofisticate, care ar consta dintr-un set arbitrar de elemente grafice și text. Prin urmare, am învățat comportamentul elementului de navigare într-o strategie separată de tip clasă, obiectul este trecut la constructorul elementului de navigare. Această abordare a funcționat perfect, dar nu pentru mult timp. Faptul este că, în timp ce am creat zona de navigare, toate elementele care sunt identice, cum ar fi elementele de meniu cu text sau o grilă de filme de acoperire, totul a fost normal. Apoi, a existat o nevoie de a crea o zonă de navigație constând din elemente diverse, iar atunci când se lucrează pe tastatură pentru a găsi că ne-a luat nu numai pentru a atribui strategia de comportament pentru fiecare element și trimite un comportament de parametrii suplimentari. Aici este un exemplu. Să presupunem că doriți să creați o tastatură pentru introducerea unei interogări de căutare. Tastatura are 4 tipuri de butoane, care sunt diferite strategii de comportament:
- CharButtonStrategy
- CursorMoveButtonStrategy
- BackspaceButtonStrategy
- SwitchLayoutButtonStrtegy
Fiecare buton de strategie CharButtonStrategy devine o serie de setări, care conține, în special, codul de caractere, care va fi adăugat în caseta de căutare atunci când faceți clic pe acest buton. SwitchLayoutButtonStrategy primește o matrice care conține tastatura ID pe care pentru a comuta, capitalizarea etc.
Abordarea am folosit în viitor pentru a crea ferestre pop-up - butonul „da“ și „nu“ sunt în proiectantului diferite strategii de comportament care, la rândul lor, sunt inițializate parametrii proprii.
defilare containere
O altă provocare majoră a fost punerea în aplicare a elementelor de interfață defilare - scrollere.
Prin urmare, eveniment container de parcurgere combinat cu focalizarea se deplasează de la un element de navigare în interiorul containerului la altul. Pentru a accesa evenimentele prin elementele cu care le folosim sistemul de navigare de mai sus. Pentru că atunci când creați o bară de navigare am stabilit poziția relativă a elementelor în ea, atunci accentul se mută la primul element de meniu la al doilea, situat la primul, avem întotdeauna posibilitatea de a calcula distanța pe care trebuie să fie defilat scroller. Având în vedere că prima versiune a fost pusă în aplicare scroller. În timpul procesului de dezvoltare, a devenit clar faptul că scroller nu ar trebui să fie întotdeauna defilat. De exemplu, în exemplul de mai sus, trecerea de la primul la al doilea element de meniu, scroller de parcurgere nu are sens, deoarece ecranul este încă o mulțime de elemente de meniu vizibile. Când vine un moment când trebuie să activați defilare? Am decis să defila scroller numai în cazul în care elementul pe care o tranziție, situată la mică distanță de centrul scroller. Următorul pas a fost să intre în verificarea că delimitarea dreptunghiului care înconjoară conținutul derulabilă trebuie să fie întotdeauna situate în afara limitelor scroller-ului.
Este de remarcat faptul că toate elementele de pe scenă sunt poziționate în raport cu sistemul de coordonate polare cu zero coordonatele centrului ecranului. Această caracteristică interesantă să ia în considerare la proiectarea.
codul Debugging
Panasonic nu oferă nici instrumente de depanare built-in. Aceasta înseamnă că etapa, folosind funcționalitatea pe care îl depanare, - fie executați, fie să scadă întreaga aplicație și apoi va rula treptat înapoi la o versiune de lucru a codului pentru a localiza și rezolva problema. Ați putea fi capabil de a simplifica această sarcină. Documentația pentru Panasonic recomandă dezvoltatorilor să scrie o funcție care vă permite să mesaje de ieșire de depanare. Linia de jos este faptul că utilizarea http_request obiect în timpul rulării, puteți trimite cereri asincrone la backend cererii dumneavoastră și de a beneficia de defrisarea lor. Am scris mesaje într-un fișier, care este apoi deschis cu debug.log -f comanda coada. Trebuie remarcat faptul că o astfel de abordare nu trebuie să se aștepte ca toate mesajele de depanare vor fi trimise la jurnalul în ordinea în care apar în codul ca o cerere asincron. Atenuarea problema persistă, care combină în mod constant mesaje de depanare într-o singură linie și apoi le trimite la server o singură solicitare. Cu toate acestea, această abordare funcționează numai în cazul în care codul din prima linie la mesajul de depanare, trimite toate jurnal pe serverul nu conține erori - sau pur și simplu un mesaj nu va fi trimis.
Să încercăm să rezuma pe scurt cele de mai sus. Procesul de dezvoltare a aplicațiilor pentru platforma Viera Connect nu poate fi numit simplu. În plus față de proiectare directă și codul scris, dezvoltatorul trebuie să rezolve un număr mare de probleme organizatorice, inclusiv setarea mediului de dezvoltare, precum și scrierea utilităților necesare. Debugging este foarte complicată de absența în emulator SDK și specificul de lucru cu dispozitive Panasonic.