Глава 4. Web-страница в роли приложения 157
Рис. 4.4. Клавиатура "музыкального инструмента", представленная посредством браузера. Закрашенные области в верхней части окна соответствуют различным нотам. При перемещении указателя мыши над "клавишами" названия нот отображаются в области, расположенной ниже и выполняющей функции консоли
if (classes && classes.length>=2
&&
classes[l]=='musicalButton') { var note=classes[0]; key.note=note; key.onmouseover=playNote;
)
}
};
Большая часть логики совпадает с предыдущим примером, но использование селекторов CSS представляет собой удобную альтернативу рассмотренному ранее решению, в особенности в тех случаях, когда надо одновременно реализовать несколько вариантов поведения.
В данном случае логика отделена от представления, однако, как мы вскоРе увидим, остается возможность включения средств представления в состав логики.
4.2.2. Отделение представления от логики
На данный момент мы добились того, что дизайнер может изменять внешний вид страницы, не затрагивая кода. Однако при существующем положении дел функционирование приложения еще существенно зависит от HTML-
158 Часть 11. Основные подходы к разработке приложений
документа. В частности, в HTML-коде задается порядок следования клавиш. Каждая клавиша определена посредством отдельного дескриптора div, и дизайнер может случайно удалить некоторые из них.
Если расположение клавиш — вопрос функционирования приложения,
ане его оформления, то имеет смысл генерировать некоторые элементы DOM
впрограмме, вместо того, чтобы объявлять их посредством HTML-кода. Кроме того, нам может потребоваться, чтобы на странице располагалось несколько компонентов одного типа. Например, если вы не хотите, чтобы дизайнер изменял порядок следования клавиш на клавиатуре, вы можете поставить условие, что клавиши будут включаться при выполнении инициализационного кода. В листинге 4.4 представлен модифицированный JavaScript-файл, соответствующий указанным требованиям.
Листинг 4.4. Файл musical_dyn_keys. js
var notes=new Array("do","re","mi","fa","so","la","ti","do"); function assignKeys(){
var candidates=document.getElementsByTagName("div"); if (candidates){
for(var i=O;i<candidates.length;i++){ var candidate=candidates[i];
if (candidate.className.indexOf('musicalKeys')>=0){ makeKeyboard(candidate);
, '
}
} function makeKeyboard(el){ for(var i=0;i<notes.length;i++){
var key=document.createElement("div"); key.className=notes[i]+" musicalButton"; key.note=notes[i]; key.onmouseover=playNote; el.appendChild(key);
}
}
function playNote(event){ var note=this.note;
var console=document.getElementByld('console'); if (note && console){
console.innerHTML+«note+" . ";
} ) |
J |
Ранее мы определяли клавиши в HTML-коде. Теперь мы задаем их в глобальном массиве JavaScript. Метод assignKeys () анализирует в документе все дескрипторы div, принадлежащие верхнему уровню, и находит те из них, свойство className которых содержит значение musicalKeys. Если такой элемент найден, предпринимается попытка заполнить его элементами div, соответствующими клавишам. Для этого используется функция makeKeyboard(). Она создает новые узлы DOM, а затем выполняет с ними такие же действия, которые ранее выполнялись с DOM-узлами, объявленными в HTML-коде. Функция обратного вызова playNote () действует так же, как и ранее.
Глава 4. Web-страница в роли приложения 159
Поскольку мы заполнили пустые элементы div элементами, представляющими клавиши, создание второго набора клавиш не представляет труда. Соответствующее решение представлено в листинге 4.5.
Листинг 4.5. Файл mus±cal_dyn_keys .html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html> <title>Two Keyboards</title> <head> <link rel=*stylesheet1 type-'text/ess1
href-'musical_dyn_keys.ess'/> <script
t y p e = ' t e x t / j a v a s c r i p t' src=•musical_dyn_keys.j s'> </script>
<script type='text/javascript'> window.onload=assignKeys; </script>
</head>
<body> <div id='keyboard-top1 class='toplong musicalKeys'X/div> <div id='keyboard-side1 class='sidebar musicalKeys'X/div> <div id='console' class='console•> </div> </body> </html>
Для того чтобы добавить на страницу вторую клавиатуру, достаточно включить в HTML-файл одну дополнительную строку. В данном случае мы не собираемся располагать клавиатуры одну под другой, поэтому стили, определяющие расположение, мы удалим из класса musicalKeys и оформим в виде отдельных классов. Модифицированные таблицы стилей показаны в листинге 4.6.
^Листинг 4.6. Модифицированные стили в файле musical_dyn_keys.css
/* Общие стили для клавиатуры */
.musicalKeys{
background-color: #ffe0d0; border: solid maroon 2px; position: absolute; overflow: auto;
margin: 4px;
}/* Размеры и расположение первой клавиатуры */
.toplong{ width: 536рх; height: 68рх; top: 24рх; left: 24рх;
}/* Размеры и расположение второй клавиатуры */
.sidebar{ width: 48px; height: 400px; top: 24px; left: 570px;
160 Часть II. Основные подходы к разработке приложений
Рис. 4.5. Модифицированное приложение позволяет дизайнеру задавать несколько клавиатур. Используя CSS и средства воспроизведения в составе браузера, мы обеспечиваем горизонтальное и вертикальное расположение клавиш, не создавая для этого дополнительный JavaScript-код
В классе musicalKeys остались стили, общие для обеих клавиатур. Классы toplong и sidebar лишь задают их расположение.
Выполнив таким образом реструктуризацию, мы создали условия для повторного использования кода. Внешний вид клавиатуры частично определяется JavaScript-кодом; ее формированием занимается функция makeKeyboard(). Как видно на рис. 4.5, одна клавиатура располагается по горизонтали, а другая — по вертикали. Как мы достигли этого?
Функция makeKeyboard () позволяет без труда вычислить размер каждого элемента и определить его расположение. Если бы мы поступили так, то нам пришлось бы предпринимать меры для размещения клавиш по горизонтали или по вертикали. Специалисты, имеющие опыт разработки пользовательских интерфейсов для Java-программ и применявшие диспетчеры компоновки LayoutManager, могут склониться именно к такому решению. Если мы поступим подобным образом, контролировать внешний вид компонентов будут не дизайнеры, а программисты, в результате конфликты станут неизбежны.
Таким образом, принято решение, согласно которому функция makeKey-j board () влияет только на структуру документа. Размещение клавиш осу-! ществляется средствами браузера с учетом таблиц стилей; в данном случае используется стиль float. Важен тот факт, что размещение элементов кон-
тролирует дизайнер. Программная логика и представление — разделены. Клавиатура — это относительно простой компонент. В более сложных слу-
чаях, например, при организации дерева, бывает трудно обеспечить желае-