w tym samouczku dowiesz się, jak korzystać z mnóstwa szablonów TVML dostarczonych przez Apple, aby tworzyć wspaniałe interfejsy. Za pomocą tych szablonów zbudujesz kompleksowy ekran dla filmów RWDevCon 2015, który będzie zawierał szeroki zakres informacji o filmie i wyświetlał go w atrakcyjny i rozpoznawalny sposób.

pierwsze kroki

możesz pobrać projekt startowy dla tego samouczka tutaj.

przykładowa aplikacja do tego tutoriala to wenderTV; pozwala przeglądać i oglądać raywenderlich.treści wideo com Na Apple TV, dzięki czemu możesz cieszyć się ogromną ilością wiedzy – i złymi żartami – w zaciszu swojej sofy. W tej chwili wenderTV jest całkiem puste.

wenderTV zawiera wiele zasobów, z których będziesz korzystać w tym samouczku; zreorganizowaliśmy również część kodu, aby ułatwić jego zrozumienie.

Zbuduj i uruchom projekt startowy wenderTV z Xcode; zauważysz, że ekran jest całkowicie pusty. Dzieje się tak dlatego, że w wenderTV nie ma jeszcze żadnych dokumentów TVML. Zanim zwrócisz uwagę na tworzenie dokumentów TVML, musisz trochę posprzątać.

Uwaga: chociaż możesz użyć Xcode do napisania całego kodu potrzebnego dla aplikacji opartej na TVML, może to być dość bolesne doświadczenie. Xcode jest dobry do edycji Swift lub Objective-C, ale ma tylko podstawowe wsparcie dla XML i JavaScript. Zdecydowanie warto używać Xcode, gdy trzeba, a następnie przełączyć się na bardziej wydajny edytor, taki jak Sublime Text, Atom, Visual Studio Code lub MacVim do pracy z dokumentami TVML i plikami JavaScript.

wczytywanie skryptów

projekt dla wenderTV ma już ResourceLoaderJS podzielony na własny plik, więc musisz dowiedzieć się, jak zaimportować go do main.js.

TVJS udostępnia funkcję evaluateScripts(), która pobiera tablicę adresów URL plików JavaScript i wywołanie zwrotne. Funkcja odczytuje po kolei każdy adres URL, próbuje go przeanalizować i dodaje wszelkie zawarte funkcje i definicje obiektów do globalnego obiektu kontekstu. Na koniec, wywołuje dostarczoną wywołanie zwrotne z wartością logiczną oznaczającą sukces lub porażkę.

AppDelegate zawiera kod, który dostarcza aplikacji JavaScript listę adresów URL do wymaganych plików JavaScript jako część obiektu launch options. Otwórz główną.js i dodać następujący kod do funkcji App.onLaunch() :

// 1:evaluateScripts(options.initialJSDependencies, function(success){ if (success) { // 2: resourceLoader = new ResourceLoaderJS(NativeResourceLoader.create()); var initialDoc = loadInitialDocument(resourceLoader); navigationDocument.pushDocument(initialDoc); } else { // 3: var alert = _createAlert("Evaluate Scripts Error", "Error attempting to evaluate the external JS files."); navigationDocument.presentModal(alert); throw ("Playback Example: unable to evaluate scripts."); } });

biorąc tę nową funkcję ciała krok po kroku:

  1. obiekt options jest przygotowywany w języku Swift, a następnie przekazywany do aplikacji JavaScript w delegacie aplikacji, podczas gdy właściwość initialJSDependencies jest tablicą adresów URL dla różnych plików JavaScript, które należy załadować podczas uruchamiania aplikacji. evaluateScript() wykonuje tę akcję, a następnie wywołuje wywołanie zwrotne wskazujące, czy się powiodło.
  2. jeśli Źródła JavaScript zostały pomyślnie ocenione, Utwórz obiekt ResourceLoaderJS przed użyciem go do załadowania początkowego dokumentu, a następnie wypchnij ten dokument TVML na stos nawigacji. loadInitialDocument() to obecnie metoda stubowa, którą trochę zapełnisz.
  3. jeśli pliki JavaScript nie załadują się, aplikacja nic więcej nie może zrobić. Dlatego używa _createAlert(), zdefiniowanej na dole main.js, aby zbudować i przedstawić dokument alertu, a następnie wyrzucić błąd.

Dodaj do loadInitialDocument():

return resourceLoader.getDocument("video.tvml");

to używa resource loader, aby pobrać plik TVML z pakietu zasobów aplikacji i zwrócić go jako obiekt DOM.

następnie musisz utworzyć plik, który aplikacja próbuje załadować: wideo.tvml.

przejdź do Xcode i kliknij prawym przyciskiem myszy grupę układy w Nawigatorze projektu. Wybierz nowy plik…:

przejdź do tvOS \ Other\Empty i naciśnij Next. Nazwij plik wideo.tvml i upewnij się, że cel wenderTV jest sprawdzany:

Otwórz nowy plik w ulubionym edytorze XML (lub Xcode, jeśli nalegasz) i dodaj następujące linie:

<?xml version="1.0" encoding="UTF-8" ?><document> <productTemplate> </productTemplate></document>

definiuje to prosty dokument TVML przy użyciu nowego typu szablonu: productTemplate.

Zbuduj i uruchom aplikację, aby zobaczyć, jak wszystko wygląda do tej pory:

Hmm. Ekran jest nadal pusty. Mimo że utworzyłeś plik i dostarczyłeś szablon, nie dostarczyłeś żadnej zawartości. Wkrótce to naprawisz, ale najpierw musisz omówić trochę tła w szablonach TVML.

szablony TVML

dokument TVML jest tylko dokumentem XML (eXtentible Markup Language) z określonym schematem zdefiniowanym przez Apple. Jeśli używałeś HTML w przeszłości, XML będzie wyglądał znajomo. HTML nie jest w rzeczywistości XML (pomimo pewnych nieudanych wysiłków z XHTML), ale składnia i struktura są dość podobne.

ponieważ dokumenty TVML są XML powinny zaczynać się od następującej linii:

<?xml version="1.0" encoding="UTF-8" ?>

jest to znane jako XML prologue; zauważa, że ten plik jest dokumentem XML i jakie kodowanie znaków używa.

dokument TVML ma element główny , który jest pojedynczym elementem na najwyższym poziomie dokumentu i rodzicem (lub przodkiem) wszystkich innych elementów. Element ma jeden bezpośredni potomek, który może być jednym z 18 możliwych znaczników szablonu.

znacznik szablonu określa układ najwyższego poziomu, którego tvOS powinien używać do renderowania dokumentu na ekranie. Oprócz określania wyglądu na ekranie, znaczniki szablonów przekazują również pewne semantyczne informacje na temat treści, które zawierają. Szablony mogą wyglądać podobnie, ale mają zupełnie inne cele.

szablony TVML można podzielić na następujące kategorie:

  • informacje: pokazuje użytkownikowi niewielką ilość informacji i opcjonalnie żąda od użytkownika wprowadzenia. Nie jest przeznaczony do przeglądania zawartości. Zawiera alertTemplate i loadingTemplate.
  • wprowadzanie danych: wrażenia użytkownika związane z wprowadzaniem danych na telewizorach są dość przerażające, a Apple TV nie jest inny. Istnieje jednak kilka szablonów do żądania danych od użytkownika, w tym searchTemplate i ratingTemplate.
  • Pojedynczy Przedmiot: Wyświetla informacje lub treści dotyczące pojedynczego produktu lub przedmiotu, na przykład filmu lub odcinka serialu telewizyjnego. Zawiera productTemplate, oneuptemplate, compilationTemplate i showcaseTemplate.
  • Kolekcje: wyświetla kolekcję produktów, takich jak serial telewizyjny, gatunek filmów lub utwory na albumie. Zawiera stackTemplate, listTemplate i productBundle.
  • Inne: zawiera menuBarTemplate, który zawiera zestaw innych szablonów, oraz divTemplate, który jest całkowicie czystym kontem, na którym rysujesz.
Uwaga: Zamiast wchodzić tutaj w szczegóły dotyczące każdego szablonu, odniesienie Apple jest doskonałym źródłem informacji o różnych szablonach, ich możliwościach i układach: apple.co/1PJuOAV.

szablon produktu

pierwszy dokument, który utworzysz, używa , który jest przeznaczony do wyświetlania wszystkich informacji dotyczących konkretnego produktu — w tym przypadku filmu.

otwórz film.tvml i dodaj następujący kod pomiędzy znacznikami :

<banner> <infoList> <info> <header> <title>Presenter</title> </header> <text>Ray Wenderlich</text> </info> <info> <header> <title>Tags</title> </header> <text>development</text> <text>teams</text> <text>business</text> </info> </infoList></banner>

ten fragment kodu wprowadza wiele nowych typów elementów. Biorąc je jeden po drugim:

  • <banner>: wyświetla zawartość w górnej części strony.
  • <infoList>: Wyświetla listę elementów , ułożoną w pionie.
  • <info>: działa jako kontener dla zawartości, która ma być wyświetlana jako element w lub .
  • <header>: służy jako opis zawartości sekcji, w której się znajduje.
  • <title>: zawiera tekst krótkiego tytułu.
  • <text>: wyświetla tekst.

Zbuduj i uruchom aplikację, aby zobaczyć, jak wygląda Twój nowy TVML:

ta strona reprezentuje wideo, ale obecnie nie ma tytułu. Czas to zmienić.

Dodaj następujący tag wewnątrz <banner>, tuż po tag zamykający:

<stack> <title>Teamwork</title> <row> <text>17m 54s</text> <text>Inspiration</text> <text>2015</text> <badge src="resource://nr" />is <badge src="resource://cc" /> <badge src="resource://hd" /> </row></stack>

Ta sekcja wprowadza więcej elementów TVML:

  • <stack>: stosy układają swoją zawartość pionowo w dół ekranu w sposób podobny do . Istnieje szerszy zakres tagów, które mogą znajdować się w stosie.
  • <row&gt: rząd jest jak stos, ale z orientacją poziomą zamiast pionową.
  • <badge&gt: odznaki wyświetlają mały obrazek w linii. Adres URL jest dostarczany przez atrybut src.

zwróć uwagę, że adres URL obu obrazów odznaki zaczyna się od resource://. Jest to specjalny schemat URL, który wskazuje na obrazy, które istnieją w samym tvOS. Obrazy te obejmują typowe ikony akcji, takie jak „Odtwórz”, obrazy oceny dla różnych krajów i informacje wideo, takie jak HD.

Uwaga: pełna lista obrazów zasobów dostępnych w tvOS znajduje się w dokumentacji Apple pod adresem apple.co/1T930o9.

Zbuduj i uruchom ponownie, aby zobaczyć, jak kształtuje się strona:

zaczyna wyglądać dobrze, ale przed nami jeszcze długa droga. Przed kontynuowaniem kodowania szablonu należy najpierw rozważyć oddzielenie danych od widoku.

wstrzykiwanie danych

w chwili obecnej wszystkie dane są zakodowane na sztywno. Aby wyświetlić informacje o innym filmie, musisz utworzyć zupełnie nową stronę. Jeśli chcesz sformatować stronę wideo po utworzeniu wszystkich stron, musisz wrócić i edytować każdą z nich.

znacznie lepszym podejściem jest użycie silnika szablonów, w którym budujesz stronę wideo jako szablon i określasz, gdzie dane mają być wstrzykiwane. W czasie wykonywania silnik szablonów pobiera szablon strony wraz z danymi i generuje stronę TVML do wyświetlenia przez tvOS.

Uwaga: słowo „szablon” jest obecnie używane do dwóch różnych celów: szablony TVML to układy dostarczane przez tvOS, które renderują dokumenty na ekranie, podczas gdy silnik szablonów wykorzystuje dokumenty szablonów połączone z danymi do generowania kompletnych dokumentów TVML. Nie martw się zbytnio o rozróżnienie; będzie to o wiele wyraźniejsze, gdy użyjesz ich obu.

wąsy.js to popularny prosty silnik szablonów dla JavaScript. Możesz rozpoznać składnię szablonów opartą na nawiasach klamrowych:

{{property-name}}

wąsy.biblioteka js jest już częścią wenderTV, ale musisz zbudować mechanizmy, aby z niej korzystać. To daje Ci kilka zadań do wykonania:

  • dane są przechowywane jako pliki JSON w pakiecie aplikacji. Aplikacja JavaScript wymaga możliwości ich żądania.
  • gdy dokument jest ładowany, wymaga teraz danych, a to powinno być połączone z ciągiem dokumentu za pomocą wąsów.js.
  • obrazy obecne w pakiecie aplikacji wymagają zastąpienia ich pełnego adresu URL.
  • dokument wideo powinien zostać zaktualizowany, aby przekształcić go w dokument szablonowy.

każdą z nich zaadresujesz w kolejności.

Uwaga: począwszy od tvOS 11, TVML obsługuje koncepcję prototypów w TVML, które wykorzystują powiązanie danych do łączenia elementów danych z TVML. Zmniejsza to redundancję kodu i poprawia wydajność podczas stronicowania dużych zestawów treści, takich jak ogromna lista filmów z YouTube w formacie widoku siatki.

jednak prototypowanie jest dostępne tylko na poziomie <section>, podczas gdy używasz go w tym samouczku do znacznie więcej, na przykład w sekcji <header> twojego TVML. Nadal będziesz używać wąsów.js jako silnik szablonów dla tej części książki, ale jeśli w końcu musisz obsługiwać duże zestawy treści w aplikacjach tvOS, przeczytaj o prototypowaniu i wiązaniu danych na apple.co/2utDXXm.

Czytanie JSON z pakietu aplikacji

Otwórz ResourceLoader.js i dodać następującą metodę do ResourceLoaderJS:

getJSON(name) { var jsonString = this.nativeResourceLoader .loadBundleResource(name); var json = JSON.parse(jsonString); return json;}

Ta funkcja używa natywnego programu ładującego zasoby, aby pobrać plik JSON z pakietu aplikacji przed przetworzeniem go do obiektu JavaScript.

Uwaga: stosunkowo łatwo byłoby zastąpić tę funkcjonalność metodą, która wywołuje zdalny serwer dla danych, zamiast znajdować dane statyczne wewnątrz pakietu aplikacji. Reszta tego szablonu będzie nadal działać w obecnej formie.

wstrzykiwanie danych do ciągu dokumentu

teraz, gdy możesz uzyskać dane dla danej strony, musisz połączyć je z samym szablonem dokumentu. Zaktualizuj getDocument() w ResourceLoaderJS, aby dopasować następujące:

getDocument(name, data) { data = data || {}; var docString = this.nativeResourceLoader .loadBundleResource(name); var rendered = Mustache.render(docString, data); return this.domParser.parseFromString(rendered, "application/xml");}

tutaj dodałeś dodatkowy argument data do metody i użyłeś render na Mustache, aby przekonwertować szablon i dane do gotowego dokumentu. Tak jak poprzednio, do konwersji ciągu dokumentu na obiekt DOM używa się DOMParser.

rozwiązywanie adresów URL obrazów

dla uproszczenia przykładowe dane przechowują obrazy jako nazwy plików w pakiecie aplikacji, które należy przekonwertować na adresy URL, zanim będzie można je wyświetlić. Funkcje narzędziowe, aby to zrobić, są już w programie do ładowania zasobów, więc wystarczy je wywołać. Zrobisz to w tym samym czasie, gdy zaktualizujesz początkowe Ładowanie dokumentu, aby użyć silnika szablonów.

otwórz główną.js I update loadInitialDocument(), aby pasowały do następujących:

function loadInitialDocument(resourceLoader) { var data = resourceLoader.getJSON("teamwork.json"); data = resourceLoader .convertNamesToURLs(data); data = resourceLoader .recursivelyConvertFieldsToURLs(data, "image"); data = _sharedImageResources(resourceLoader); return resourceLoader.getDocument("video.tvml", data);}

najpierw ładujesz dane za pomocą nowej metody getJSON(). Następnie użyj funkcji narzędzia, aby przeprowadzić konwersję nazwy obrazu na adres URL. Konwertują one trzy różne źródła nazw obrazów:

  • każda wartość w obiekcie images w tablicy danych.
  • każda wartość powiązana z kluczem image w dowolnym miejscu struktury danych JSON.
  • zestaw udostępnionych obrazów, które są przydatne dla wszystkich dokumentów w wenderTV.

która zajmuje się hydrauliką pod spodem; jesteś gotowy do użycia tej potężnej nowej funkcjonalności.

za pomocą wąsów.szablony js

Otwórz pracę zespołową.json i spójrz na dane, których użyjesz do zapełnienia strony wideo. Jest dość dużo danych, ale jest to standardowy obiekt JSON i dość łatwy do zrozumienia. Powinieneś zauważyć niektóre pola, takie jak title, presenter i duration, które już zakodowałeś w wideo.tvml. Teraz je wymienisz.

otwórz film.tvml i znaleźć tag tytułowy, który zawiera Ray Wenderlich. Zamień nazwę na {{presenter}}, tak aby pierwsza sekcja wyglądała teraz tak:

<info> <header> <title>Presenter</title> </header> <text>{{presenter}}</text></info>

składnia wąsów.js jest naprawdę prosty; zastąpi {{presenter}} wartością presenter w dostarczonym do niego obiekcie danych.

teraz, gdy już to wiesz, możesz zastąpić następującą zawartość odpowiednimi znacznikami szablonu:

  • Teamwork{{title}}
  • 17m 54s{{duration}}
  • Inspiration{{category}}
  • 2015{{year}}
  • resource://nrresource://

Zbuduj i uruchom; nie powinieneś widzieć żadnej różnicy, co jest dokładnie tym, czego chcesz. Strona jest teraz oparta na danych, a nawet lepiej, nic nie zepsułeś. Bonus! :]

jest jeszcze kilka części szablonu, których nie dotknąłeś: napisy, HD i tagi. Te używają nieco bardziej zaawansowanych części wąsów.silnik szablonów js.

sekcje szablonu

Usuń trzy tagi w sekcji tagi i dodaj następujące w ich miejsce:

{{#tags}} <text>{{.}}</text>{{/tags}}

ta nowa składnia definiuje sekcję szablonu. Spójrz na pracę zespołową.json i zobaczysz, że tags jest tablicą ciągów. Wąsy.składnia js pętli przez tablicę, z {{.}} renderuje zawartość bieżącego indeksu.

wreszcie musisz obsłużyć dwie Znaczki logiczne. Zamień odznaki cc i hd na następujące:

{{#closed-captions}} <badge src="resource://cc" />{{/closed-captions}}{{#hd}} <badge src="resource://hd" />{{/hd}}

po raz kolejny używasz sekcji, ale tym razem mają one strukturę if. Jeśli określona właściwość istnieje i ma wartość true, wtedy Renderuj tę sekcję; w przeciwnym razie zignoruj ją.

Zbuduj i uruchom ponownie; sprawdź swoją nowo utworzoną stronę wideo.

aby potwierdzić, że wstrzykiwanie danych działa, otwórz main.js I zmienić plik danych załadowany w loadInitialDocument() z pracy zespołowej.json do tożsamości.json. Zbuduj i uruchom ponownie, aby zobaczyć zmianę danych.

możesz teraz zobaczyć szczegóły rozmowy Vicki na temat tożsamości-sweet!

na

wypełniając szablon TVML

strona z filmami nadal wygląda trochę jałowo. Nadszedł czas, aby podwoić dodawanie niektórych treści.

otwórz film.tvml i dodać do <stack>, tuż pod istniejącym <row>:

<description allowsZooming="true" moreLabel="more">{{description}}</description><text>{{language}}</text><row> <buttonLockup type="play"> <badge src="resource://button-play" /> <title>Play</title> </buttonLockup> <buttonLockup type="buy"> <text>.99</text> <title>Buy</title> </buttonLockup></row>

po raz kolejny wprowadza to kilka nowych elementów TVML:

  • <description>: wyświetla większą ilość tekstu używanego do opisywania treści. Jeśli tekst jest zbyt długi dla obszaru wyświetlania, zostanie wyświetlona etykieta z tytułem zdefiniowanym przez atrybut moreLabel.
  • &ltbuttonLockup>: blokada jest klasą elementu, który łączy swoje dzieci razem jako pojedynczy element. Blokada przycisków może zawierać tekst i plakietkę i pojawi się jako przycisk.

pamiętaj, że wszystkie te elementy są zawarte w <stack>, więc pojawią się jeden nad drugim.

zanim sprawdzisz swoją pracę, musisz dodać jeszcze jeden element do górnego banera. Dodaj następujący wiersz bezpośrednio po znaczniku zamykającym </stack> :

<heroImg src="{{images.hero}}" />

a heroImg element to duży obraz, który definiuje zawartość tego dokumentu. Pojawia się wewnątrz <banner>, a tvOS używa go do definiowania rozmytego tła strony.

Zbuduj i uruchom, aby zobaczyć ukończony górny baner:

zaczyna wyglądać naprawdę fajnie-ale czekaj! Być może zauważyłeś, że kolor tekstu zmienił się z czarnego na biały. Jak to się stało?

tvOS zdecydował, że ponieważ obraz tła jest ciemniejszy niż określony próg, konieczne było zwiększenie kontrastu tekstu, więc zmienił domyślny kolor tekstu.

zaktualizuj znacznik <productTemplate>, aby pasował do następującego:

<productTemplate theme="light">

Zbuduj i uruchom, aby zobaczyć różnicę:

efekt wizualny na tle zmienił się wraz z kolorami czcionek na pierwszym planie. Możesz zmienić atrybut theme na dark, jeśli chcesz wymusić poprzedni wygląd, jeśli wolisz.

Uwaga: Domyślne zachowanie zmieniło się od poprzedniej wersji tvOS, więc może być konieczne jawne zdefiniowanie theme, aby uzyskać efekt, do którego przywykłeś. Nie należy również mylić tego zachowania z nowym trybem ciemnym wprowadzonym przez Apple w tvOS 10. To zostanie omówione bardziej szczegółowo w dalszej części książki.

dodawanie półek

pozostała część productTemplate składa się z „półek”. Półka to pozioma sekcja strony z elementami treści przewijającymi się na ekranie i poza nim.

Dodaj następujący tag poniżej zamykającego </banner> tagu, na dole wideo.tvml:

<shelf> <header> <title>You might also like</title> </header> <section> {{#recommendations}} <lockup> <img src="{{image}}" width="402" height="226" /> <title>{{title}}</title> </lockup> {{/recommendations}} </section></shelf>

ta półka wyświetla zestaw innych filmów, które użytkownik może cieszyć się zgodnie z właściwością recommendations modelu danych. Każda rekomendacja ma image i title, z których każda jest używana w powyższym kodzie.

w tym segmencie kodu wprowadzono dwa inne elementy:

  • <section>: definiuje zbiór powiązanych treści, które powinny być ułożone razem. Sekcja może zawierać tytuł i wiele elementów blokady.
  • <lockup>: widziałeś <buttonLockup> wcześniej; lockup to bardziej ogólny typ blokady. Zapewnia układ obrazu, tytuł, odznakę i opis.

teraz dodaj kolejną półkę pod tą, którą właśnie utworzyłeś:

<shelf> <header> <title>Production</title> </header> <section> {{#people}} <monogramLockup> <monogram firstName="{{firstname}}" lastName="{{lastname}}"/> <title>{{firstname}} {{lastname}}</title> <subtitle>{{role}}</subtitle> </monogramLockup> {{/people}} </section></shelf>

ta półka wyświetla listę osób powiązanych z produkcją; jest przechowywana we właściwości people w modelu danych.

to wprowadza elementy i , które pozwalają reprezentować osobę, gdy awatar nie jest dostępny. Podobnie jak inne elementy blokady, blokada monogramu po prostu blokuje jej zawartość.

monogram ma atrybuty firstName i lastName, z których generuje monogram (inicjały) i umieszcza go w dużym okręgu.

Zbuduj i uruchom, aby zobaczyć, jak kształtują się Twoje półki. Będziesz musiał przewinąć w dół, aby odsłonić dolną półkę:

zapoznaj się z opisem wystąpienia „tożsamość”. Zauważ, że pojawiła się więcej etykiet, ponieważ w dostępnej przestrzeni jest zbyt dużo tekstu do wyświetlenia. Przejdź do etykiety, a zobaczysz, że możesz skupić się na opisie i nacisnąć przycisk Wybierz, aby wywołać akcję. Ta akcja obecnie nic nie robi, ale czy nie byłoby miło, gdyby wyświetlał pełny tekst?

czas na kolejny szablon TVML.

Obsługa przepełnienia tekstu

szablon alertu opisowego zapewnia miejsce na rozszerzony obszar tekstu i przycisków. Brzmi to idealnie do tego celu. Użyjesz tego szablonu i odrobiny JavaScript, aby go podłączyć.

w projekcie Xcode kliknij prawym przyciskiem myszy grupę układów i wybierz nowy plik…. Wybierz tvOS\Other \ Empty i nazwij plik expandedDetailText.tvml.

Otwórz nowy plik i dodaj następujący:

<?xml version="1.0" encoding="UTF-8" ?><document> <descriptiveAlertTemplate> <title>{{title}}</title> <description>{{text}}</description> <button action="dismiss"> <text>Dismiss</text> </button> </descriptiveAlertTemplate></document>

to powinno być dość proste do zrozumienia. Jest zwykły prolog XML, znacznik i kilka elementów, których wcześniej używałeś. Zauważ, że znacznik button ma atrybut action; jest to atrybut zdefiniowany przez użytkownika, który nie jest częścią specyfikacji TVML.

możesz zdefiniować dowolne atrybuty, które chcesz (pod warunkiem, że nie kolidują z istniejącymi atrybutami), a następnie odczytać je z aplikacji JavaScript. Napiszesz trochę kodu, aby obsłużyć tę akcję dismiss za chwilę.

otwórz film.tvml i znajdź tag . Zaktualizuj element, aby pasował do następujących:

<description allowsZooming="true" moreLabel="more" action="showOverflow" title="{{title}}">{{description}}</description>

Dodano dwa nowe atrybuty: action i title. Oba te elementy zostaną użyte w procedurze obsługi zdarzenia do utworzenia dokumentu tekstowego z rozszerzonymi szczegółami.

Obsługa zdarzeń

teraz, gdy szablony dokumentów są gotowe do pracy, możesz zwrócić uwagę na JavaScript, który wszystko łączy.

otwórz główną.js i dodać następującą funkcję:

function _handleEvent(event) { // 1: var sender = event.target; var action = sender.getAttribute("action"); // 2: switch(action) { case "showOverflow": // 3: var data = { text: sender.textContent, title: sender.getAttribute("title") }; // 4: var expandedText = resourceLoader .getDocument("expandedDetailText.tvml", data); expandedText.addEventListener("select", _handleEvent); navigationDocument.presentModal(expandedText); break; case "dismiss": // 5: navigationDocument.dismissModal(); break; }}

Taking this piece-by-piece:

  1. właściwość target argumentu event reprezentuje obiekt DOM, który wywołał zdarzenie. getAttribute() obiektu DOM zwróci wartość dla określonego atrybutu. Tutaj używasz go, aby znaleźć wartość dodanego powyżej atrybutu action.
  2. Włącz atrybut action, aby wywołać odpowiedni kod.
  3. jeśli akcja jest showOverflow, to masz Pole opisu z zbyt dużą zawartością. Skonstruuj obiekt z danymi wymaganymi przez dokument tekstowy expanded detail. Po raz kolejny używasz getAttribute() wraz z textContent, która zwraca zawartość samego znacznika.
  4. załaduj expandedDetailText.dokument tvml w zwykły sposób dodaj detektor zdarzeń i użyj presentModal() na NavigationDocument, aby wyświetlić nowy dokument na bieżącym dokumencie.

  1. jeśli akcja jest ustawiona na dismiss, użyj dismissModal() na NavigationDocument, aby wykonać odwołanie.

po utworzeniu tego modułu obsługi zdarzeń musisz podłączyć go do początkowego dokumentu. Dodaj następujący wiersz do App.onLaunch, zaraz po wywołaniu loadInitialDocument():

initialDoc.addEventListener("select", _handleEvent);

to rejestruje _handleEvent jako detektor dla zdarzenia select i używa bulgotania zdarzeń do obsługi wszystkich zdarzeń wywołanych w dokumencie.

Zbuduj i uruchom aplikację, przejdź do pełnego opisu i naciśnij przycisk Wybierz. Zobaczysz nową rozszerzoną stronę tekstu szczegółowego:

możesz użyć przycisku Odrzuć, aby powrócić do ekranu wideo.

oceny widzów

w końcowej części tego samouczka dodasz nową sekcję ocen do strony wideo i pozwolisz użytkownikowi wybrać ocenę za pomocą nowego szablonu.

otwórz film.tvml i dodać nową półkę pod półką produkcyjną:

<shelf> <header> <title>What other people thought</title> </header> <section> {{#ratings-reviews}} <ratingCard action="addRating"> {{#rw-ratings}} <title>{{out-of-five}} / 5</title> <ratingBadge value="{{badge-value}}"></ratingBadge> <description>Mean of {{count}} ratings.</description> {{/rw-ratings}} </ratingCard> {{#reviews}} <reviewCard> <title>{{title}}</title> <description>{{description}}</description> <text>{{name}} {{date}}</text> </reviewCard> {{/reviews}} {{/ratings-reviews}} </section></shelf>

do tej pory rozpoznasz większość elementów TVML, ale wciąż jest kilka nowych:

  • <ratingCard>: wyświetla małą kartę odpowiednią do wyświetlania ocen produktu.
  • <ratingBadge>: odznaka specjalistyczna za wykazanie stopnia gwiazdkowego. Atrybut value powinien mieć wartość od 0 do 1, która zostanie zamieniona na proporcję pięciu gwiazdek.
  • <reviewCard>: karta do wyświetlania opinii użytkowników lub krytyków.

zauważ, że element ponownie ma niestandardowy atrybut action. Użyjesz tego później, aby wyświetlić stronę oceny.

Zbuduj i uruchom, aby zobaczyć, jak wygląda nowa półka:

gdy użytkownik wybierze kartę oceny, chcesz pozwolić mu wybrać ocenę dla bieżącego filmu. Do tego właśnie służy szablon ratings TVML.

zbieranie ocen

w Xcode kliknij prawym przyciskiem myszy grupę layouts i wybierz nowy plik…. Wybierz tvOS\Other\Empty i nazwij plik videoRating.tvml.

Otwórz nowy plik i dodaj następujący:

<?xml version="1.0" encoding="UTF-8" ?><document> <ratingTemplate> <title>{{title}}</title> <ratingBadge /> </ratingTemplate></document>

ten nowy plik używa pliku , który po prostu wyświetla i zbiera oceny. Zawiera <title> i <ratingBadge>, które już widziałeś.

szablon jest gotowy, wystarczy go wyświetlić. Otwórz główną.js i dodać następujący case do polecenia switch w _handleEvent():

case "addRating": var ratingDoc = resourceLoader.getDocument("videoRating.tvml", {title: "Rate Video"}); navigationDocument.presentModal(ratingDoc); break;

te kilka linii ładuje nowy utworzony dokument i dostarcza tytuł do silnika szablonów. Następnie wyświetla dokument modalnie.

Zbuduj i uruchom, przejdź do karty oceny i naciśnij WYBIERZ, aby zobaczyć nową stronę ocen:

to jest jeden wspaniały i rozszerzalny interfejs.

co dalej?

możesz pobrać ostateczny projekt z tego samouczka tutaj.

w tym samouczku stworzyłeś świetnie wyglądającą aplikację TVML i użyłeś trzech wbudowanych szablonów wraz z szeroką gamą elementów specyficznych dla TVML. Zintegrowano również silnik szablonów JavaScript, aby oddzielić interfejs użytkownika od danych. Przyjęcie wspaniałych technik rozwoju od samego początku jest wygraną w każdej książce.

możesz sprawdzić dokumentację Apple (apple.co/1PJuOAV) w celu uzyskania szczegółowych informacji na temat szablonów i elementów omówionych w tym samouczku.

jeśli podobało ci się to, czego nauczyłeś się w tym samouczku, dlaczego nie sprawdzić kompletnej książki ucznia tvOS, dostępnej w naszym sklepie?

oto przedsmak tego, co jest w książce:

dział I: architektura

Ta sekcja została zaprojektowana, aby dać ci widok z lotu ptaka na działanie tvOS i pomóc Ci zdecydować, co czytać dalej.

Dział II: aplikacje TVML

w tej sekcji omówiono podstawy tworzenia aplikacji za pomocą podejścia TVML. Od podstaw Hello World po przykład prawdziwego świata, pod koniec tej sekcji dowiesz się wszystkiego, czego potrzebujesz do tworzenia aplikacji klienckich / serwerowych Dla Apple TV.

Sekcja III: Aplikacje tradycyjne

w tej sekcji omówiono podstawy tworzenia aplikacji za pomocą tradycyjnego podejścia. Zapoznasz się z nowymi bibliotekami utworzonymi Dla Apple TV oraz sposobem korzystania z bibliotek przeniesionych z systemu iOS.

sekcja IV: zaawansowane frameworki

w tej sekcji omówiono niektóre z bardziej zaawansowanych struktur, których potrzebujesz do wielu zastosowań aplikacji telewizyjnych. Niezależnie od tego, czy zastosowałeś podejście TVML, czy tradycyjne, te struktury będą Ważne do zrozumienia, aby wyróżnić Twoją aplikację.

sekcja V: projektowanie

w tej sekcji omówiono koncepcje projektowe ważne dla tvOS. Aby Twoja aplikacja wyróżniała się na tle innych, musisz dobrze zrozumieć te koncepcje projektowe.

rozdział bonusowy

i to nie wszystko — oprócz powyższego, mamy dla Ciebie rozdział bonusowy, który daje Ci crash course w JavaScript!

pod koniec tej książki będziesz miał wspaniałe praktyczne doświadczenie w budowaniu ekscytujących, dobrze wyglądających aplikacji dla Apple TV!

i aby pomóc osłodzić umowę, cyfrowe wydanie książki jest w sprzedaży za 49,99 dolarów! Ale nie czekaj — ta Cena sprzedaży jest dostępna tylko przez ograniczony czas.

mówiąc o słodkich ofertach, koniecznie sprawdźcie wspaniałe nagrody, które rozdajemy w tym roku w ramach iOS 11 Launch Party, w tym ponad $ 9,000 w nagrodach!

aby wejść, po prostu przekaż ten post za pomocą hashtagu #ios11launchparty za pomocą poniższego przycisku:

Tweet

mamy nadzieję, że ta aktualizacja spodoba się wam i wypatrujcie kolejnych wydań i aktualizacji książek!

raywenderlich.com tygodniowe

raywenderlich.com newsletter to najprostszy sposób, aby być na bieżąco ze wszystkim, co musisz wiedzieć jako programista mobilny.

Otrzymuj cotygodniowy przegląd naszych samouczków i kursów, a otrzymasz darmowy pogłębiony kurs e-mail jako bonus!

Średnia ocena

5/5

dodaj ocenę dla tej treści

Zaloguj się, aby dodać ocenę

1 ocena

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.