После основательной подготовки и установки всех необходимых для Silverlight-разработки программ, мы наконец-то приготовились сказать наше первое «привет мир».
Поскольку написание разнообразнейших хеловордов уже набило сильнейшую оскомину (по крайней мере лично у меня), то в общем-то наш первый пример будет сложнее (но не менее тривиален).
Мы напишем супер-онлайн-web2.0-числосумматор. Если у кого-то возникает вопрос, при чем тут web2.0 – все элементарно. Наш сумматор будет складывать как раз-таки 2 числа, и кто скажет что это не 2.0 – пусть идет писать cgi на ассемблере :).
В общем, в любом деле главное – хорошее начало. А для начала нам надо создать в Visual Studio новый проект, выбрав для него тип проекта «Silverlight Application».
После этого, VS поинтересуется у нас – как мы хотим данный проект открывать: то ли создать для этих целей ASP.NET проект-контейнер, то ли просто внедрить созданное нами творение в простую HTML страничку. Я обычно выбираю второй вариант, хотя в целом они примерно равнозначны по функциональности.
Преодолев муки выбора, мы попадаем в почти знакомый WPF-редактор. Незнакомые с WPF, но знакомые с ASP.NET найдут тут для себя так же массу поводов для возникновения DejaVu.
Вкратце – в верхней части окна дизайнера располагается наше приложение так сказать «во плоти», а в нижней части, мы редактируем исходный XAML-файл, который и определяет внешний вид нашей программы. Благодаря отлично работающему IntelliSence, как правило, проблем с освоением его синтаксиса не возникает (а возникающие вопросы мы будем рассматривать в дальнейших уроках). Кроме xaml (по умолчанию он называется Page.xaml) создается файл с исходным кодом на выбранном нами языке, для C# его имя будет Page.xaml.cs. Этот файл называется файлом «отделенного» кода, и используется для написания всей программной логики. Как вы видите, WPF вообще, и Silverlight в частности приветствуют разделение кода и представления. Хотя ASP.NET программистов этим и не удивить.
Для начала создадим необходимые элементы управления для нашего будущего приложения.
Разберем это все по отдельным тегам.
— определяет свойство самого Silverlight-компонента. Нас сейчас в основном интересуют свойства Width и Height, задающие соответственно его ширину и высоту. Если убрать эти свойства, то элемент управления будет занимать всю доступную ему площадь в HTML-странице.
— один из контейнеров для автоматического размещения элементов. Боле подробно мы рассмотрим их в одном из следующих занятий, пока же главное что нам необходимо знать – StackPanel по-умолчанию будет «укладывать» все компоненты в аккуратную вертикальную стопку, растягивая их по ширине. Свойство x:Name отвечает за то, под каким именем денный компонент будет доступен нам в файле с исходным кодом. Свойство Background отвечает, как не сложно догадаться за цвет фона данного компонента.
После этого, с помощью тегов , мы создаем 2 поля ввода, в которые надо будет ввести складываемые числа. Назовем их FirstValue и SecondValue. Кроме того, для красивого внешнего вида, зададим им свойство Margin равным 10. Это добавит вокруг этих полей ввода небольшие отступы с каждой из сторон.
Потом, создадим кнопку по нажатию на которую будет подсчитываться результат. Ее свойство Content определяет что на ней будет написано. Для кнопки надо задать обработчик события Click. Как только мы напишем Click – VisualStudio тут же предложит нам создать этот обработчик.
Не вижу причин отказываться.
Для вывода результата надо создать последний компонент — . Его свойства я даже не буду описывать, так как и предназначение понятно из названия.
Теперь можно со спокойной душой перейти к созданию непосредственно кода. Проще всего это сделать, вызвав контекстное меню на имени обработчика «DoIt_Click».
Мы попадем прямо в редактор кода, в котором уже будет нас дожидаться любезно созданная VisualStudio заготовка обработчика события.
Нам остается вписать немного кода.
Код, конечно, упрощен до безобразия и далек от идеала, но сове дело он делает. Данная программа попытается перевести пользовательский ввод в число и если получится – вывести результат. А если не получится сообщение об ошибке.
Нам остается исправить синтаксические ошибки, и запустить нашу программу, насладивший результатом.
Аварийные ситуации также корректно обрабатываются.
Вот и все на сегодня, спасибо за внимание. Продолжение обязательно следует.
PS Может мне это публиковать не в свой блог, а один из существующих (если да, то подскажите какой лучше), или для Silverlight лучше завести отдельный?
Поскольку написание разнообразнейших хеловордов уже набило сильнейшую оскомину (по крайней мере лично у меня), то в общем-то наш первый пример будет сложнее (но не менее тривиален).
Мы напишем супер-онлайн-web2.0-числосумматор. Если у кого-то возникает вопрос, при чем тут web2.0 – все элементарно. Наш сумматор будет складывать как раз-таки 2 числа, и кто скажет что это не 2.0 – пусть идет писать cgi на ассемблере :).
В общем, в любом деле главное – хорошее начало. А для начала нам надо создать в Visual Studio новый проект, выбрав для него тип проекта «Silverlight Application».
После этого, VS поинтересуется у нас – как мы хотим данный проект открывать: то ли создать для этих целей ASP.NET проект-контейнер, то ли просто внедрить созданное нами творение в простую HTML страничку. Я обычно выбираю второй вариант, хотя в целом они примерно равнозначны по функциональности.
Преодолев муки выбора, мы попадаем в почти знакомый WPF-редактор. Незнакомые с WPF, но знакомые с ASP.NET найдут тут для себя так же массу поводов для возникновения DejaVu.
Вкратце – в верхней части окна дизайнера располагается наше приложение так сказать «во плоти», а в нижней части, мы редактируем исходный XAML-файл, который и определяет внешний вид нашей программы. Благодаря отлично работающему IntelliSence, как правило, проблем с освоением его синтаксиса не возникает (а возникающие вопросы мы будем рассматривать в дальнейших уроках). Кроме xaml (по умолчанию он называется Page.xaml) создается файл с исходным кодом на выбранном нами языке, для C# его имя будет Page.xaml.cs. Этот файл называется файлом «отделенного» кода, и используется для написания всей программной логики. Как вы видите, WPF вообще, и Silverlight в частности приветствуют разделение кода и представления. Хотя ASP.NET программистов этим и не удивить.
Для начала создадим необходимые элементы управления для нашего будущего приложения.
<UserControl x:Class="HelloSilverlight.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="180">
<StackPanel x:Name="LayoutRoot" Background="White">
<TextBox x:Name="FirstValue" Margin="10" />
<TextBox x:Name="SecondValue" Margin="10" />
<Button x:Name="DoIt" Content="Do it!!!" Margin="10" Click="DoIt_Click" />
<TextBlock x:Name="Result" FontSize="14" TextAlignment="Center" Margin="10">Result goes here</TextBlock>
</StackPanel>
</UserControl>
Разберем это все по отдельным тегам.
— определяет свойство самого Silverlight-компонента. Нас сейчас в основном интересуют свойства Width и Height, задающие соответственно его ширину и высоту. Если убрать эти свойства, то элемент управления будет занимать всю доступную ему площадь в HTML-странице.
— один из контейнеров для автоматического размещения элементов. Боле подробно мы рассмотрим их в одном из следующих занятий, пока же главное что нам необходимо знать – StackPanel по-умолчанию будет «укладывать» все компоненты в аккуратную вертикальную стопку, растягивая их по ширине. Свойство x:Name отвечает за то, под каким именем денный компонент будет доступен нам в файле с исходным кодом. Свойство Background отвечает, как не сложно догадаться за цвет фона данного компонента.
После этого, с помощью тегов , мы создаем 2 поля ввода, в которые надо будет ввести складываемые числа. Назовем их FirstValue и SecondValue. Кроме того, для красивого внешнего вида, зададим им свойство Margin равным 10. Это добавит вокруг этих полей ввода небольшие отступы с каждой из сторон.
Потом, создадим кнопку по нажатию на которую будет подсчитываться результат. Ее свойство Content определяет что на ней будет написано. Для кнопки надо задать обработчик события Click. Как только мы напишем Click – VisualStudio тут же предложит нам создать этот обработчик.
Не вижу причин отказываться.
Для вывода результата надо создать последний компонент — . Его свойства я даже не буду описывать, так как и предназначение понятно из названия.
Теперь можно со спокойной душой перейти к созданию непосредственно кода. Проще всего это сделать, вызвав контекстное меню на имени обработчика «DoIt_Click».
Мы попадем прямо в редактор кода, в котором уже будет нас дожидаться любезно созданная VisualStudio заготовка обработчика события.
Нам остается вписать немного кода.
private void DoIt_Click(object sender, RoutedEventArgs e)
{
try
{
int a = int.Parse(FirstValue.Text);
int b = int.Parse(SecondValue.Text);
Result.Text = String.Format("{0} + {1} = {2}", a, b, a + b);
}
catch (FormatException)
{
Result.Text="Некорректное число!"; // кирилица работает хорошо :)
}
}
Код, конечно, упрощен до безобразия и далек от идеала, но сове дело он делает. Данная программа попытается перевести пользовательский ввод в число и если получится – вывести результат. А если не получится сообщение об ошибке.
Нам остается исправить синтаксические ошибки, и запустить нашу программу, насладивший результатом.
Аварийные ситуации также корректно обрабатываются.
Вот и все на сегодня, спасибо за внимание. Продолжение обязательно следует.
PS Может мне это публиковать не в свой блог, а один из существующих (если да, то подскажите какой лучше), или для Silverlight лучше завести отдельный?
