Я давно хотел перейти к программированию на C #, и кажется, что Silverlight 2 дает мне вескую причину, чтобы найти время для его изучения. В то же время, при подготовке к работе с объектно-ориентированным программированием (с тех пор, как я написал C ++), я начал пытаться сместить свои привычки JavaScript в формат ОО, чтобы облегчить свой переход.
ПРИМЕЧАНИЕ. Файлы проекта, включенные в эту запись, используют среду выполнения Silverlight 2, поэтому она должна быть установлена в вашей системе. Сам пример кода все еще в JavaScript.
Я давно хотел перейти к программированию на C #, и кажется, что Silverlight 2 дает мне вескую причину, чтобы найти время для его изучения. В то же время, при подготовке к работе с объектно-ориентированным программированием (с тех пор, как я написал C ++), я начал пытаться сместить свои привычки JavaScript в формат ОО, чтобы облегчить свой переход.
Эта проблема? Отсутствие простого учебника для связи между «специальными» функциями и более объектно-ориентированным подходом. Крис Клуг очень помог мне пролить некоторый свет на эту тему, поэтому я должен ему большое «спасибо».
Итак, вот простой пример.
Запустите Blend и создайте новый проект Silerlight 1 под названием squareObject. Измените имя холста по умолчанию на «rootCanvas» и установите размеры 800 × 600. Добавьте еще один холст под названием «контент». Не беспокойтесь о ширине / высоте холста контента — мы позаботимся об этом программно. Сохраните проект.
Во-первых, нам нужно создать «конструктор» для класса квадратного объекта, который мы собираемся написать. Создайте новый файл JS в папке проекта с именем objSquare.js и введите код для конструктора. Функция конструктора выглядит следующим образом (не беспокойтесь, если эта часть еще не имеет смысла — когда вы увидите весь контекст, она станет более понятной):
square = function(name, Parent, height, width, left, top)
{
this.initialize(name, Parent, height, width, left, top);
}
Это конструктор, который будет вызывать функцию initialize в классе объекта, который мы собираемся кодировать. Мы собираемся передать имя для экземпляра объекта, родительский объект, высоту, ширину, левую и верхнюю позиции, поэтому мы создаем сегменты для хранения всех этих значений.
Мы хотим продолжить, создав класс объекта, который выглядит следующим образом:
square.prototype =
{
initialize: function(name, Parent, height, width, left, top)
{
var xaml = ‘<Rectangle Name=”‘ + name + ‘” Canvas.Left=”‘ + left + ‘” Canvas.Top=”‘ + top + ‘” Width=”‘ + width + ‘” Height=”‘ + height + ‘” Fill=”#FFCC0000″/>’;
this._parent = Parent;
this._host = this._parent.getHost();
this._square = this._host.content.createFromXaml(xaml);
this._parent.children.add(this._square);
}
}
Класс определяет функцию с именем initialize, которая вызывается конструктором, созданным на предыдущем шаге. Функция initialize создает новый прямоугольный объект, используя переданные свойства name, height, width, left и top, а затем добавляет его на холст «content», который находится с использованием переданного значения «Parent».
Сохраните файл objSquare.js.
Сейчас самое время добавить ссылку на этот файл скрипта на страницу default.html, поэтому откройте этот файл и добавьте следующую ссылку на скрипт в раздел заголовка страницы:
<script type=”text/javascript” src=”objSquare.js” mce_src=”objSquare.js”></script>
Пока вы там, измените стили ширины и высоты на 800 × 600, чтобы они соответствовали размеру нашего корневого холста.
Сохраните файл default.html.
Теперь мы хотим внести некоторые изменения в файл Page.xaml.js, чтобы использовать наш квадратный класс при загрузке приложения. Откройте файл Page.xaml.js. Там есть некоторый пример кода, который можно удалить. Скелет файла Page.xaml.js должен выглядеть следующим образом:
if (!window.squareObject)
squareObject = {};
squareObject.Page = function()
{
}
squareObject.Page.prototype =
{
handleLoad: function(control, userContext, rootElement)
{
this.control = control;
}
}
Функция handleLoad вызывается, когда Silverlight создает экземпляр приложения «squareObject». Обратите внимание, что control, userContext и rootElement все передаются в функцию handleLoad. Под строкой «this.control = control;» мы добавим несколько строк кода, чтобы установить ссылки на объекты rootCanvas и canvas. Мы также хотим установить ширину и высоту содержимого содержимого в соответствии с корневым холстом. Для этого используется код, который используется:
this.rootElement = rootElement;
this.content = rootElement.findName(”content”);
this.content.width = this.rootElement.width;
this.content.height = this.rootElement.height;
На данный момент мы готовы добавить код для вызова конструктора и создать для него объект на холсте, поэтому давайте быстро рассмотрим, что мы сделали. Мы только что закончили изменение файла Page.xaml.js, чтобы создать некоторые ссылки на rootElement и холст контента, и изменили размер холста контента до размера rootElement.
До этого мы создали квадратный класс в objSquare.js. В нашем квадратном классе мы добавили функцию конструктора, которая при вызове создаст экземпляр объекта «квадрат», который определен в классе square.prototype. Теперь мы добавим некоторый код в файл Page.xaml.js, чтобы создать объект на холсте.
Под кодом, который вы только что добавили в файл, добавьте следующий код:
var newSquare = new square(”square1″, rootElement, 25, 25, 100, 100);
Этот код создает новый объект с именем «newSquare», который имеет квадрат типа объекта. Мы передали имя «square1» для использования в XAML в качестве уникального идентификатора для объекта XAML, rootElement, который используется для определения местоположения родительского объекта и вставки XAML в холст содержимого, а затем width, height, left, и правильные значения.
Сохраните файл и запустите.
Вы увидите маленький красный квадрат на холсте. Управляя этими числами, мы можем изменить размер или местоположение создаваемого объекта. Мы также можем легко создать несколько экземпляров объекта. Добавьте строку кода ниже той, которую вы только что добавили, со следующим:
var newSquare1 = new square(”square2″, rootElement, 125, 125, 500, 500);
Запустите проект еще раз, и вы должны увидеть два квадрата.
Если вы хотите начать движение к объектно-ориентированному программированию, найдите время и поиграйте с этим примером. Я скоро вернусь к нему в дополнительных записях, чтобы добавить функциональность и пользовательские свойства в квадратный класс.
Там также хорошая статья на ОО JavaScript здесь , хотя это не в контексте Silverlight, это все-таки хороший материал. Файлы проекта находятся здесь, если вы хотите выбрать легкий путь.