Опубликован: 12.02.2013 | Доступ: свободный | Студентов: 785 / 44 | Длительность: 17:51:00
Специальности: Программист
Лекция 3:

Введение в Silverlight

3.2. Язык XAML

Проектирование дизайна на Silverlight состоит из манипуляций с элементами с помощью дизайнера Visual Studio и присваивания значений нужным свойствам элементов. Выполняя эти действия, можно создать любой пользовательский интерфейс. интерфейс приложения на Silverlight описывается с помощью языка XAML.

XAML означает "расширяемый язык разметки приложений" (eXtensible Application Markup Language). Silverlight использует XAML для описания внешнего вида страницы.

XAML определяет четкую границу между внешним видом приложения (свойства отображаемых элементов) и поведением приложения (какие действия выполняют элементы приложения).

Такое разделение является хорошей идеей, поскольку нельзя гарантировать, что хороший программист будет хорошим дизайнером. Обычно над созданием приложений работают и дизайнеры, и программисты. При этом возникает проблема разделения работы между ними: программист не может ничего делать, пока дизайнер не закончит создание всех страниц приложения.

XAML решает эту проблему. Как только будут изложены требования пользовательского интерфейса (сколько текстовых полей, сколько кнопок, что будет на каждой странице и т.д.), проектировщик может продолжать работу над внешним видом страниц, в то время как программист может сосредоточиться на написании программного кода. Файлы XAML содержат описание элементов пользовательского интерфейса, и дизайнер может работать над их внешним видом и расположением на странице, в то время как программист дополняет их программным кодом. Программисту не нужно передавать дизайнеру файлы с кодом, так как они отделены от дизайна, и наоборот.

Содержимое файла XAML. Файл XAML для страницы содержит конструкции, которые описывают все элементы на странице. Каждое описание содержать набор свойств. Строка XAML, которая описывает элемент TextBox, может выглядеть так:

<TextBox Height="72" HorizontalAlignment="Left" Margin="8,19,0,0"
    Name="firstNumberTextBox" Text="0" VerticalAlignment="Top" Width="460"
    TextAlignment="Center" />

Если сравнить информацию в области свойств со значениями атрибутов в коде XAML, можно установить их соответствие: имя элемента TextBox — firstNumberTextBox, ширина — 460 и т.д. Страница и область свойств синхронизируют значения, так как они используют один и тот же XAML-файл страницы. При перемещении элементов по странице редактор обновляет XAML; область свойств считывает данные из этого файла и обновляет его значения.

XAML является декларативным языком. Он создан, чтобы быть понятным для людей, поэтому у всех выше указанных свойств понятные имена. Можно отредактировать текст XAML-файла в Visual Studio для изменения внешнего вида страницы в дизайнере и значений свойств. Непосредственное редактирование кода на языке XAML для опытных программистов часто происходит намного быстрее, чем перетаскивание элементов по экрану и редактирование в окне свойств. Это особенно полезно, если нужно добавить большое количество однотипных элементов. Для облегчения редактирования XAML-кода Visual Studio предоставляет поддержку Intellisense.

При компиляции программы XAML-файл преобразуется в файл, содержащий низкоуровневые инструкции, которые создают необходимые элементы для работы программы. Объявление элементов страницы в файле XAML означает, что управление ими будет осуществляться через объекты, которые может использовать программа.

Под понятием расширяемый язык разметки подразумевается, что можно использовать правила языка для создания конструкций, которые описывают что-либо. Английский язык для этого хорошо походит. Он состоит из букв и знаков препинания, которые являются символами текста английского языка. Также в языке есть правила (их называют грамматикой), которые определяют, как составить слова и предложения. Существуют различные виды слов. Есть существительные, которые описывают предметы, и глаголы, которые описывают действия. Когда появляется что-то новое, мы придумываем новые слова для того, чтобы описать это.

Языки, основанные на XML (eXtensible Markup Language — расширяемый язык разметки), являются расширяемыми в том смысле, что мы можем придумать новые слова и фразы, которые подчиняются правилам языка, и использовать эти новые конструкции для описания того, что нам нужно. Их называют языками разметки, потому что они часто используются для описания расположения элементов на странице. Слово "разметка" первоначально использовалось при печати. Практически самым известным языком разметки является HTMLязык разметки гипертекста (HyperText Markup Language), который используется во всемирной паутине для описания формата веб-страниц.

Программисты часто создают свои собственные форматы хранения данных, используя XML. В качестве примера рассмотрим фрагмент XML-файла, в котором представлен список рекордов:

<?xml version="1.0" encoding="us-ascii" ?>
<HighScoreRecords count="2">
  <HighScore game="Breakout">
    <playername>Rob Miles</playername>
    <score>1500</score>
  </HighScore>
  <HighScore game="Space Invaders">
    <playername>Rob Miles</playername>
    <score>4500</score>
  </HighScore>
</HighScoreRecords>

В этом файле элемент HighScoreRecords содержит два элемента HighScore: один для игры Breakout и один для игры Space Invaders. Оба элемента HighScore содержатся внутри элемента HighScoreRecords. У каждого элементов есть атрибут, который определяет название игры, и два вложенных элемента: имя игрока playername и количество набранных очков score. Этот текст довольно легко понять.

В самой первой строке файла указана версия стандарта XML и используемая кодировка символов. XAML использует правила расширяемого языка разметки, чтобы создать язык, который описывает компоненты на странице экрана.

<TextBox Height="72" HorizontalAlignment="Left" Margin="8,19,0,0"
    Name="firstNumberTextBox" Text="0" VerticalAlignment="Top" Width="460"
    TextAlignment="Center" />

Если посмотреть на описание элемента TextBox, можно увидеть, что создатели языка XAML просто создали имена полей, которые соответствуют их требованиям.

XML-схема. Стандарт XML также содержит описания, как создать схему, которая описывает особый формат документа. Например, в схеме для информации о рекордах можно указать, что элемент HighScore должен содержать элемент PlayerName, атрибут Score и необязательный атрибут Date, в котором может храниться информация о дате установленного рекорда.

Система стандарта формата и схемы означает, что разработчики могут легко создавать форматы данных для конкретных целей. Этому способствует факт, что существует много инструментальных средств, которых помогают создавать документы и схемы. Среда .NET даже предоставляет программам возможность сохранения объектов в виде отформатированных XML-документов. Даже файл решения Visual Studio хранится как XML-документ.

Язык XAML на страницах приложений. В XAML-файле можно описать целую страницу экрана Windows Phone. При создании нового проекта Windows Phone автоматически создается новая страница с несколькими элементами. При добавлении на страницу элементов увеличивается и размер файла, поскольку для каждого элемента создается его описание. Некоторые элементы являются контейнерами — они могут содержать другие компоненты, например, элемент Grid может содержать набор других элементов и располагать их в виде сетки. XAML-код также может включать описания анимации и преобразований, которые можно применять к элементам на странице для создания усовершенствованных пользовательских интерфейсов.

При этом, в XAML не существует понятия наследования: нельзя создать элемент XAML, который наследуется от другого. Элементы Silverlight представляются в виде объектов, которые являются частью иерархии классов, но когда они записаны в файле XAML, они все представляются элементами, которые находятся на одном уровне иерархии.

С помощью XAML можно создать довольно сложный дизайн для программ. Также существует специальный инструмент Expression Blend для графических дизайнеров, который содержит расширенные средства для создания графических интерфейсов.

3.3. Пример создания приложения Silverlight для Windows Phone

Для того чтобы приложение выполняло какие-то действия, нужно добавить код программы на языке C#, который выполнит необходимую работу. Когда Visual Studio создает файл XAML, который описывает страницу приложения Windows Phone, вместе с ним создается файл кода. В этот файл можно поместить код, который заставит приложение работать. Созданный файл уже содержит начальный код, который может выглядеть так:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace PhoneApp1
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Конструктор
        public MainPage()
        {
            InitializeComponent();
        }
    }
}

Большую часть файла занимают инструкции using, которые позволяют программе напрямую обращаться к классам без необходимости указывать полный путь к ним. Например, вместо того чтобы записать System.Windows.Controls.Button, можно написать просто Button, потому что файл содержит строку

using System.Windows.Controls;

Единственный метод в программе — конструктор класса MainPage, который вызывается при создании класса. В конструкторе вызывается метод InitializeComponent, который создает экземпляры визуальных элементов. Этот код автоматически создает Visual Studio на основе XAML-файла, который описывает структуру страницы. Код этого метода не рекомендуется изменять напрямую, поскольку это может привести к ошибкам при выполнении программы.

Не нужно беспокоиться о том, как создаются и выводятся на экран визуальные объекты. Достаточно использовать высокоуровневые инструменты или научиться писать XAML-код для создания интерфейса страниц.

Создание приложения

Рассмотрим процесс создания интерфейс для нашей программы для сложения чисел. После того как мы добавим все необходимые элементы и запустим приложение, мы можем выполнить в нем некоторые действия. Мы можем ввести числа в текстовые поля и нажать на кнопку сумма (рис. 3.5).

Экран программы Сумматор с открытой экранной клавиатурой

Рис. 3.5. Экран программы Сумматор с открытой экранной клавиатурой

Если прикоснуться к элементу TextBox, появится экранная клавиатура, с помощью которой можно ввести числа в поля. Если мы прикоснемся к другой области экрана, клавиатура исчезнет. Однако, при нажатии на кнопку сумма мы не получим результат, поскольку приложение "не знает", что оно должно выполнять вычисления.

Вычисление результата

Необходимо создать программный код для выполнения необходимых вычислений и вывода на экран результата:

private void calculateResult()
{
    float v1 = float.Parse(firstNumberTextBox.Text);
    float v2 = float.Parse(secondNumberTextBox.Text);

    float result = v1 + v2;

    resultTextBlock.Text = result.ToString();
}

Объекты TextBox работают со значением свойства Text, доступным для чтения и записи. При записи значения в свойство Text текст в текстовом поле изменится, а при считывании значения этого свойства программа получает значение, которое было введено в это поле.

Текст имеет строковый тип, который нужно преобразовать в числовое значение, для того чтобы можно было выполнить операцию сложения. Для этого используется метод Parse, который принимает в качестве параметра строку и возвращает записанное в строке число. Метод Parse есть у каждого из числовых типов (int, float, double и т.д.). Наша программа Сумматор может работать как с целыми, так и с дробными числами. Метод Parse класса float преобразует введенные в текстовые поля значения в численный тип и складывает их.

После этого, метод преобразует полученное значение в строку и записывает ее в свойство Text элемента resultTextBlock. Метод ToString противоположен Parse. Он возвращает текст, который описывает содержание объекта. Для типа float метод возвращает численное значение, записанное в строке.

В результате, мы получили код, который выполняет вычисления и получает результат. Теперь нужно, чтобы этот код выполнялся, когда пользователь нажимает на кнопку сумма.

События и программы

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

Использование событий существенно облегчает создание программ. Программа не должна проверять каждый элемент на экране, чтобы узнать, выполнил ли пользователь над ним какие-то действия — вместо этого программа просто отвечает на генерируемые события.

Чтобы заставить события работать, языку программирования нужен способ представления ссылки на метод объекта, для чего в C# используется механизм делегатов. Можно создать тип делегата, который может обратиться к определенному методу, и создать экземпляр этого делегата, который обращается к методу в объекте. Делегаты являются мощным и полезным механизмом.

События в Silverlight

В C# событие отправляется объекту посредством вызова метода этого объекта. В нашей программе Сумматор когда пользователь нажимает на кнопку сумма, программа должна вызвать нужный метод, например, метод calculateResult.

Можно использовать редактор Visual Studio: чтобы связать метод с событием щелчка кнопки мыши, нужно дважды щелкнуть по этой кнопке в окне дизайнера. При этом, Visual Studio устанавливает свойства кнопки в XAML, для того чтобы связать кнопку с методом страницы. Кроме этого, создается пустая версия этого метода-обработчика, и среда переносит курсор к этому методу, чтобы можно было сразу начать добавлять код, который должен выполняться при нажатии кнопки.

Теперь нужно просто добавить следующий код, который выполнит необходимые действия:

private void calculateResult()
{
    float v1 = float.Parse(firstNumberTextBox.Text);
    float v2 = float.Parse(secondNumberTextBox.Text);

    float result = v1 + v2;

    resultTextBlock.Text = result.ToString();
}

private void equalsButton_Click(object sender, RoutedEventArgs e)
{
    calculateResult();
}

Созданному обработчику событий Visual Studio автоматически присваивает имя, которое формируется из имени элемента, в конец которого добавляется текст _Click. Таким образом, по этому имени можно легко определить, каким образом он вызывается.

Теперь программа работает. Однако, если пользователь введет в текстовое поле нечисловое значение, то программа сгенерирует исключение.

Управление свойствами событий

Чтобы узнать, как происходит вызов событий, для начала рассмотрим свойства кнопки сумма нашего приложения. Для этого нужно нажать на кнопку в редакторе Visual Studio, и мы увидим информацию о ее свойствах (рис. 3.6).

Область свойств элемента Button

Рис. 3.6. Область свойств элемента Button

В области свойств есть две вкладки: Свойства и События. При нажатии на вкладку События на экран выводятся события, которые может сгенерировать этот элемент, и связанные с событиями методами (рис. 3.7).

События элемента Button

Рис. 3.7. События элемента Button

В этом окне событие Click связано с методом equalsButton_Click. Если нужно прекратить связь метода с событием Click, то достаточно удалить название обработчика в этом окне. Если попытаться подставить вместо указанного имени метода произвольную строку, то программа не будет скомпилирована, если метода с указанным именем не существует.

До сих пор мы руководствовались принципом, что отображаемые свойства Visual Studio связывает с файлом XAML, который описывает компоненты на экране. Мы можем проверить, что это так, рассмотрев описание кнопки в файле XAML для страницы MainPage:

<Button Content="equals" Height="72" HorizontalAlignment="Left" Margin="158,275,0,0"
    Name="equalsButton" VerticalAlignment="Top" Width="160"
    Click="equalsButton_Click" />

Описание кнопки теперь содержит элемент, который связывает событие Click с названием метода. Следует отметить, что, если в файле XAML указано, что кнопка связана с методом, которого не существует, программа не сможет правильно работать.

Краткие итоги

  1. Silverlight предоставляет возможность создавать пользовательские графические интерфейсы.
  2. Пользовательский интерфейс Silverlight состоит из визуальных элементов: текстовые поля, кнопки и другие.
  3. Интегрированная среда разработки Visual Studio содержит окно дизайнера, которое используется для добавления элементов пользовательского интерфейса Silverlight на страницы приложения.
  4. С точки зрения программного обеспечения, каждый элемент пользовательского интерфейса представлен особым типом объекта в иерархии классов, которая является частью Silverlight.
  5. Дизайнеры могут изменять значения свойств элементов, изменяя эти элементы в окне дизайнера Visual Studio или изменяя значения свойств этих элементов.
  6. Свойства используемых в программе элементов Silverlight хранятся в текстовых файлах в формате XAML. Эти файлы обновляются средствами проектирования и используются для создания программных объектов, используемых в решении.
  7. XAML (расширяемый язык разметки приложений) основан на языке XML и определяет все свойства элементов дизайна на странице. Он позволяет отделить дизайн и свойства элементов от программного кода.
  8. XML (расширяемый язык разметки) является основой для создания языков для описания сущностей.
  9. Элементы могут генерировать события, которые могут быть связаны с методами программы на C#. Имя метода указывается в XML-описании для элемента.
  10. Методы, связанные с событиями, содержат бизнес-логику приложения.

Вопросы

  1. Какие средства разработки можно использовать для создания интерфейса приложений?
  2. Что такое Metro-стиль?
  3. Для чего предназначены свойства и методы?
  4. Как создать интерфейс страницы приложения Silverlight?
  5. Как можно изменить внешний вид элементов Silverlight на странице приложения?
  6. Для чего используется язык XAML?
  7. Как обрабатывать события в приложении Silverlight?

Упражнения

Упражнение 1. Пользовательский интерфейс программы Калькулятор времени

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

Адвокаты будут вводить время запуска и время окончания (в часах и минутах), и программа должна выводит на экран количество минут между этими отметками времени.

Ваш менеджер попросил Вас разработать пользовательский интерфейс Silverlight для этого приложения:

  1. Определите, какие элементы интерфейса Silverlight нужно разместить на главной странице приложения.
  2. Нарисуйте схему расположения элементов на форме.
  3. Создайте "Руководство пользователя" для приложения.
  4. Попытайтесь определить все возможные случаи ввода недопустимых значений.
  5. Добавьте описание действий приложения в случае ввода недопустимых данных.
  6. Создайте набор тестовых данных и результатов, которые должна выдать программа, и оформите их в виде таблицы. Количество тестов должно быть не менее 10.

Упражнение 2. Пользовательский интерфейс калькулятора времени

Один из менеджеров по продукции считает, что телефон должен отправлять детализированную информацию о каждом временном интервале в корпоративную систему так, чтобы информация о проведенном времени могла обновляться автоматически. Менеджер решил, что нужно отправлять следующую информацию:

  • дата и время начала работы;
  • дата и время окончания работы;
  • название компании-клиента;
  • местоположение клиента, если встреча происходит не в помещении компании клиента;
  • оценка качества работы, поставленная клиентом — целое число в диапазоне от одного до пяти.

На сервер нужно отправлять отчеты, содержащие указанную информацию о каждой рабочей встрече.

  1. Создайте пример XML-файла, содержащий описания трех встреч.
  2. Удостоверьтесь, что файл содержит записи о встречах в помещении компании-заказчика, а также записи о встречах за пределами компании.