Каталог статей
Поиск по базе статей  
Статья на тему Интернет » Интересное в сети » Компоненты клиентского меню в&nb p;Yahoo! U er Interface

 

Компоненты клиентского меню в&nb p;Yahoo! U er Interface

 

 

Yahoo! Developer Network
Рис. 1

Создание управляемых веб-решений требует наличия интуитивно понятных инструментов управления. Библиотека Y!UI как раз и предоставляет постоянно обновляемый набор инструментов в виде javascript-модулей. Каждый из них реализует определенный пользовательский функционал.

Работа с данными Функции работы с данными — одни из наиболее востреованных при разработке веб-приложений.

загрузка...

 

 

За работу с источниками данных отвечает компонент DataSource, а за отображение данных на странице — DataTable. Элементы компонента DataSource содержатся в файлах datasource-beta-min.js и DataSource.js. Эти файлы необходимо включить в код страницы:

<script type="text/javascript" src="/redir.php?url=yui.yahooapis.com%2F2.3.1%2Fbuild%2Fconnection%2Fconnection-min.js"></script>
Подключение к источнику данных осуществляется через объект ConnMgr, который является наследником корневого объекта YUI Connection Manager.

Один из важных объектов — responseSchema — определяет тип данных, к которым осуществляется доступ. Установлен следующий список значений:

  • resultsList — массив или плоская таблица;
  • resultNode — XML-данные;
  • recordDelim — текстовые данные с разделителем;
  • fieldDelim — данные с разделителями в полях (например, Excel-таблицы);
  • fields — хеши и реляционные данные, связываемые по ключу.

Набор объектов TYPE_XXX, где XXX может принимать значения HTMLTABLE, JSARRAY, TEXT и обеспечивает связывание данных с элементами веб-страницы. Это, соответственно, таблица, массив javascript, текст на странице.

Объект DataTable предназначен для простого табличного размещения полученных данных. Семантически он состоит из контейнера <table>, содержащего заголовок <thead>, и двух контейнеров <body>. Класс DataTable получает данные от объекта класса DataSource. Для инициализации объекта класса DataTable необходимо задать как минимум три значения:

  • идентификатор id элемента веб-страницы, в котором размещается таблица;
  • заголовки столбцов key (обязательный) и definition (опциональный). По ключу key столбец идентифицируется, а значение идентификатора definition отображается в заголовке;
  • ссылка на объект DataSource.
Объект DataTable включает три коллекции: ColumnSet, RecordSetSet и DOM.
ColumnSet — это коллекция столбцов, в которой каждый столбец задается уникальным идентификатором.
RecordSet — коллекция записей с данными. Каждая запись представляет собой одну строку, характеризующуюся уникальным идентификатором.
Добавление, изменение и удаление строк осуществляются методами коллекции DOM addRow(data,<i>), updateRow(data,i) и deleteRow(i). Здесь i — идентификатор строки, data — указатель на набор данных из коллекции RecordSet.
Ниже приведены примеры кода.

Инициализация объекта DataTable производится таким образом: var myDataTable = new YAHOO.widget.DataTable("myContainer", myColumnDefs, myDataSource).

Следующий фрагмент кода иллюстрирует внедрение в элемент <div> компонента DataTable и связывание его с источником данных:
<div id="myMarkedUpContainer">
<table id="myTable">
<thead>
<tr>
<th>AAA</th>
<th>BBB</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>bbb</td>
<td>ccc</td>
</tr>
<tr>
<td>2</td>
<td>bbb</td>
<td>ccc</td>
</tr>
</tbody>
</table>
</div>

<script type="text/javascript">
var myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("myTable"));
myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
myDataSource.responseSchema = {
fields: [{key:"AAA", parser:YAHOO.util.DataSource.parseNumber},
{key:"BBB"},
]
};

var myColumnDefs = [
{key:"AAA"},
{key:"BBB"}
];

var myDataTable = new YAHOO.widget.DataTable("myMarkedUpContainer", myColumnDefs, myDataSource);
</script>

Еще одним заслуживающим внимания пользовательским компонентом Y!UI является Element Utility. Он представляет собой «обертку», которую можно применить к любому элементу веб-страницы, соответствующему DOM-модели. Этот компонент дает возможность разработчику устанавливать единые высокоуровневые обработчики событий на любой элемент веб-страницы.

Текстовый редактор на веб-странице

Rich Text Editor
Рис. 2. Rich Text Editor

Гонка веб-редакторов продолжается. Главными достоинствами по-прежнему считаются удобство для конечного пользователя (то, что часто называют usability), функциональность и многоплатформенность, отсутствие специальных требований к пользовательскому ПО. Не так давно мы подробно рассказывали об одном из лидеров этой гонки — редакторе FCKEditor. Yahoo! включил в состав Y!UI Rich Text Editor. Отличительной особенностью редактора RTE является способ его отображения на странице. Для этого достаточно подгрузить соответствующий компонент из файла editor-beta-min.js и затем просто указать идентификатор texteditor в поле textarea. Стандартное текстовое поле будет подменено действительно богатым возможностями полноценным текстовым редактором. Подключение RTE производится включением на страницу объекта YAHOO.widget.Editor.

Основной элемент любого текстового редактора — панель инструментов. Именно объем функционала и удобство работы с ним пользователя и составляют основные характеристики редактора. RTE содержит настраиваемое пользовательское меню. Объект YAHOO.widget.Editor содержит набор настраиваемых коллекций, состав которых определяет набор функций пользовательского меню. Перечислим некоторые из них:

  • titlebar;
  • menu;
  • height;
  • width;
  • buttons;
  • group;
  • animate.
Наибольший интерес представляют коллекции buttons и menu. Именно они определяют состав кнопок и пунктов меню. Посмотрим на примере, как настраиваются доступные начертания шрифтов:

buttons: [
{ type: 'push', label: 'Bold', value: 'bold' },
{ type: 'push', label: 'Italic', value: 'italic' },
{ type: 'push', label: 'Underline', value: 'underline' }]

Как видно из приведенного примера, для расширения списка необходимо добавить соответствующую запись в коллекцию, причем значение атрибута value должно соответствовать значению атрибута для html-тега. Например, для начертания с зачеркиванием установим value='strike'. Аналогиным образом описываются доступные типы и цвета шрифтов, фон заливки и другие параметры.

Еще одно полезное свойство Rich Text Editor — поддержка разнообразных событий DOM-модели непосредственно в окне редактора и в панели инструментов. В окне редактора обрабатываются события работы с мышью, клавиатурой, а также изменение состава и вложенности нод в редактируемом поле. В панели инструментов поддерживаются события работы с клавиатурой, мышью, нажатия на кнопки и раскрытие списков. И в заключение обзора RTE скажем, что он поддерживается даже мобильными браузерами, отвечающими требованиям A-Grade.

Все представленные в статье функции библиотеки Yahoo! User Interface относятся исключительно к новым (бета) клиентским компонентам. Даже столь краткое их перечисление и обзор возможностей дают представление о возможных областях применения Y!UI. Это и собственные CMS, и удобные формы обратной связи, форумов, конференций.

Ссылки по теме




Статья получена: hostinfo.ru
загрузка...

 

 

Наверх


Постоянная ссылка на статью "Компоненты клиентского меню в&nb p;Yahoo! U er Interface":


Рассказать другу

Оценка: 4.0 (голосов: 16)

Ваша оценка:

Ваш комментарий

Имя:
Сообщение:
Защитный код: включите графику
 
 



Поиск по базе статей:





Темы статей






Новые статьи

Противовирусные препараты: за и против Добро пожаловать в Армению. Знакомство с Арменией Крыша из сэндвич панелей для индивидуального строительства Возможно ли отменить договор купли-продажи квартиры, если он был уже подписан Как выбрать блеск для губ Чего боятся мужчины Как побороть страх перед неизвестностью Газон на участке своими руками Как правильно стирать шторы Как просто бросить курить

Вместе с этой статьей обычно читают:

Nissan Qashqai меняет представление о семейных автомобилях

С каждым годом конкуренция в классе «С» становится все более острой, а производители ищут всевозможные способы, чтобы заинтересовать покупателя чем-то особенным. Одним из самых ярких и необычных представителей этого класса можно назвать Nissan Qashqai. С технической точки зрения новинка представляет собой обычной автомобиль С-класса с несколько большим по сравнению с конкурентами дорожным просветом, зато внешне Nissan Qashqai – компактный кроссовер, с массивной передней час ...

» Японские автомобили - 2559 - читать


Самая популярная модель Toyota Corolla меняет имя

Самая популярная модель Corolla японской компании Toyota, выпущенная на протяжении более чем 40 лет тиражом в 32 миллиона авто, меняет имя – отныне модель будет называться Auris. Официальный старт продаж новинки в Европе намечен на 3 марта этого года. Представители компании сообщили о том, что к переименованию бестселлера их сподвигли исследования рынка, несмотря на то, что имя Corolla служит своеобразным эталоном надежности, оно не вызывает у покупателей никаких эмоций, а ...

» Японские автомобили - 2662 - читать


Audi S3 меняет представление о спортивных автомобилях

Белый цвет уже давно перестал быть популярным в Европе, как правило, такой окрас имеют либо совсем бюджетные авто, либо грузо-пассажирские фургончики. Но постепенно он набирает прежний престиж, неспроста новый Audi S3 на своей премьере предстал в ослепительно белом цвете, который в значительной степени подчеркнул его агрессивный облик. Внешность нового Audi S3 не стали сильно менять по сравнению с моделью А3.

» Немецкие автомобили - 1776 - читать


ГАЗ 2217 Баргузин: «Баргузина» я б купил - жизнь меня не учит...

В тесте участвуют автомобили: ГАЗ 2217 Баргузин Посмотреть другие фото (8) Выбор даже среди доступных отечественных моделей сегодня весьма разнообразен. Какую предпочесть?

» Немецкие автомобили - 34529 - читать


Горячая лошадка от AUDI: RS4 - не пытайся сделать меня на светофоре

Этот автомобиль определенно не подходит для спокойной езды. Audi RS4 это – 380 «лошадиносильная» электростанция, имеющая потенциал, позволяющий преследовать - и, при благоприятных условиях, опережать - некоторые гораздо более серьезные спортивные автомобили. Мы видели горячие» версии и прежде, в 1992 году, когда Audi демонстрировал ураганный RS2.

» Немецкие автомобили - 1468 - читать



Статья на тему Интернет » Интересное в сети » Компоненты клиентского меню в&nb p;Yahoo! U er Interface

Все статьи | Разделы | Поиск | Добавить статью | Контакты

© RusAdvice.Org, 2006-2014, при копировании материалов, прямая индексируемая ссылка на сайт обязательна.

Энциклопедия RusAdvice.Org