Урок 2: DataBind в Silverlight’e

Данный урок с натяжкой можно порекомендавать как 2, сорее перед ним надо хотябы это почитать. Я поробую в нем объяснить политику и философию DataBind’a (датабинда) в Silverlight’e. В связи с тем, что у меня данная тема вызвала затруднения, я решил попробовать в месте с вами разобратся.

Тема интересная, но не прозрачная, так что я, по окончании, файлик проекта зазипую и сохраню на будущее.

Сначала немного философии. Связывание данных (Data bind) соеденяет акие либо свойства пользовательского интерейса (UI) и программным объектом (почему-то на западе это называют бизнес объектом). Пользовательский интерфейс называется при таком подходе таргетом (target-цель), провайдер данный или программный объект соурсом (source – источником). Связывание данных асоциирует какие либо данные, бизнес уровня, с уровнем клиентского интерфейса, а именно со каким либо свойством UI контрола. Данное связывание позволяет рассматривать пользовательский интерфейс как “черный ящик”, однажды связав данные вы в дальнейшем в программе работаете с данными бизнес уровня, позволив себе забыть о UI вообще. Это позволяет разделить програмную и дизайнерсую работу над приложением.

Существует три типа связывания данных:

OneTime Связывает данные без обновления, один раз. Это конечно неплохо для отбражения информации известной на стадии запуска программы, но она у вас никогда не будет менятся. Чесно говоря особо не горю использовать такой тип связывания.

OneWay Связывает данные от источника к таргету в одну сторону. Связав таким образом вы на пользовательсокм интерфейсе ВСЕГДА будете иметь достоверную информацию о данных бизнес уровня. Но пользователь не сможет менять сами данные.

TwoWay Связывает данные в два направления. И пользователь сможет менять данные бизес уровня и данные будут менять пользовательский интерфейс.

А теперь по пишем: Создаем новый проект в VS, назовем его DataBind. Чтобы не морочить себе голову лишним кодом в xaml’e – класс родительской странички унаследуем от StackPanel. Это позволит нам просто добовлять элементы не указывая их размещение, сейчас нас интересует только фунциональность. Наш начальный Page.xaml:

Добавте беграунд, а то ничего не увидите.

Но собственно начнем мы работу со связыванием начнем с С# , создадим в нашем проекте новый класс Data в отдельном файле, и допишем в него кое-что:

Собственно посмотри что из данного листинга связано со связываньем данных: мы добавили строку 12 в которой объявляем работу с компонентной моделью, в 16 строчке указываем что наш класс потдерживает интерфейс исобытий изменения свойств. 20 строчка объявляем ПУБЛИЧНОЕ событие, в случае изменения свойств класса. С 23 по 31 мы объявили свойство класса, которое будем связывать, собственно в 29 строке указываем вызов события. 36-41 строки наша функция добавленная в класс, в которую аргументом передается имя нашего свойства.

Заметте, что в 29 и 23 строке название свойств должны совпадать.

Теперь собственно добавим в файл Page.xaml указание на то к какому элементу и к какому свойству мы будем что-то биндить. Добавим текстовое поле:

<TextBox x:Name=”My_Text” Foreground=”Black” Text=”{Binding ClassText}” Height=”24″ />

Строка Text=”{Binding ClassText}” и есть весь дата биннд. Свойству Text тестбокса связывается ClassText ключевым словом Binding.

Собераем проект, запускаем. И что же мы видем? А ничего!

Потому как мы забыли создать экземпляр нашего класса Data, и указать что именно к нему будет привязыватся тест нашего текст бокса. Сделаем мы это в файле page.xaml.cs:

17 Строка мы создаем екземпляр класса бизнес уровня, 23 строка основная – мы указали что источником данных нашего текстбокса будет выступать созданый нами эземпляр класса. Ну и в 24 мы присваеваем данные.

Вот теперь запустив приложение мы увидем что-то. Вы спросите а зачем такое количество кода чтобы сделать просто присваивание. Сууществует как минимум три не маловажных причины: Во-первых, это разделяет бизнес уровень приложения и уровень пользовательского интерфейса. Во-вторых, источников обновления данных так же как и пользовательских представлений этих данных может быть намного больше и вам потребуется намного больше написать кода чтобы связать пользователя и данные, чем если бы вы воспользовались связыванием данных. И, наконец, в-третих, необязательно связывать однотипные данные текст и текст, как это сделали мы. Вот например очень интересный вариант бинда там с помошью конвертора строки в кисть биндится вводимое число к цвету закраски бекграунта текстового поля.

Попробуем создать еще один таргет и еще один источник обнавления данных – кнопку и текстовое поле. А в функцию клика по кнопке добавим обновление данных:

Билдим и наслаждаемся плодами нашего труда. Два таргета это текст бокс и текст блок, и два источника – присваеванье во время загрузки страницы и во время щелчка на нопку.

Но скорее всего у вас сразу возникнет вопрос, “а какого типа это связывание?”. OneWay – точно могу ответить, потому как в Silverlight’e по умолчанию применяется данный тип датабинда.

А как же TwoWay применить? ОЧЕНЬ просто, достаточно просто уазать тип в xaml файле:

Достаточно просто указать тип Mode=TwoWay в текст боксе и он станет источником обновления данных бизнес уровня.

Собственно все

Небольшое замечание обновление данных в обратную сторону (таргет->источник) происходит ПРИ ПОТЕРЕ ФОКУСА ТАРГЕТОМ. Можно например просто переключится между приложениями в винде. А можно, чтобы увидеть в действии двухстороние связывание, добавить на страницу контрол, щелчек по которому снимал фокус с текст бокса – я лично воткнул просто дополнительную кнопку.