Trochę zamiłkłem. Wynikło to z różnych przyczyn. Jedną z nich było opracowanie kompleksowego artykułu o nowościach dla niemal wszystkich developerów Windows 8.1. Napiszę o tym niedługo, jak zostanie opublikowany. Mimo, że w ramach tego przedsięwzięcia temat został praktycznie wyczerpany, to nie wszystko mogłem tam pokazać. Taki los spotkał m.in nowe edytory w Blend for Visual Studio 2013 i dlatego dwa najbliższe posty zostaną im poświęcone. Dziś krótki pokaz narzędzi do data bindingu.
Edytor data bindingu? Każdy weteran XAML-a się uśmiechnie, bo to rzecz dość podstawowa. Ale chwila, dzisiaj mówię o HTML5. A, tu już sprawa narzędzi nie jest taka oczywista. Wiele ludzi pisze wszystko ręcznie. Twórcy najnowszego Blend postanowili przypomnieć o lepszych czasach. Poniżej mam w przykładzie ListView z podpiętym itemDataSource pod obiekt WinJS.Binding.List. Na zaznaczonym elemencie HTML otwieram, podobnie jak w XAML, edycję data bindingu. Dostaję, co prawda znacznie bardziej ubogie okienko, ale mogę w końcu wybrać interesującą mnie właściwość z kontekstu danych. Wynika to po części z nieco innej filozofii data bindingu w WinJS (i w innych bibliotekach JS), która zakłada znacznie mniejszą ilość parametrów. Konwerterem w WinJS jest funkcja, służąca do konwersji i formatowania.
Teraz rzecz ciekawsza, choć też znana weteranom XAML. Chodzi o generowanie szablonu za pomocą kreatora, w którym wybieramy interesujące nas dane z kontekstu. W poniższym przykładzie przy właściwości itemTemplate wybrałem opcję <Create new template…>. Spowodowało to otwarcie okienka o takiej samej nazwie.
Po wybraniu właściwości backgroundImage (rozpoznaje image!) i title, dostaję w HTML definicję szablonu:
<div class="newTemplate" data-win-control="WinJS.Binding.Template">
<div>
<img data-win-bind="src:backgroundImage" height="100" width="100">
<div data-win-bind="textContent:title"></div>
</div>
</div>
a w designerze na elementach listy od razu pojawiają się obrazki i tekst pod nimi. Całość, co prawda potrzebuje jeszcze ostylowania, niemniej jednak to spore udogodnienie.
Tyle na dziś. Następnym razem napiszę o animacjach.
Posty
Brak komentarzy:
Prześlij komentarz