Web-программирование: «Java Script(JS): Библиотека визуальных компонентов. Класс СХBrVisualObject».

Автор megabax

10.11.2011 г.

Урок 13. Управление шрифтами в CSS New Page 1

Web-программирование: «Java Script(JS): Библиотека визуальных компонентов. Класс СХBrVisualObject».

Скачать файлы с описанными классами можно здесь(версия 1.2).

Для углубленного изучения web-программирования (язык PHP и написание своей собственной CMS) советую подписаться на платный раздел (см. анонсы раздела "Пишем Easy CMS").

Сегодня вам будет доступна для скачивания новая версия (v1.2) библиотеки XBr. В ней появился файл XBrVisual.js. И сегодня мы разберем первый класс из этого файла СХBrVisualObject - абстрактный визуальный объект. Хоть он и абстрактный, но тем не менее, что то может. JS - это не C и не Delphi, в нем нет абстрактных классов, а абстрактность реализуется путем заглушек. В частности, в СХBrVisualObject заглушка вставлена в метод _draw, который будет реализован у его потомков. А в самом же СХBrVisualObject этот метод просто выводит демо надпись. Но вот что касается метода _set_visible, то он реально работает и устанавливает видимость (невидимость) как у самого этого объекта, так и у тех, которые содержаться в нем. Все это демонстрирует вот такой пример:

<HTML>

<head>

</SCRIPT>

</SCRIPT>

</SCRIPT>

</SCRIPT>

//объявляем пременные

var vo1;

var vo2;

</SCRIPT>

</head>

<BODY>

div1

</div>

div2

</div>

function ButtonClick() {

div1=document.getElementById("1");

div2=document.getElementById("2");

vo1=new СХBrVisualObject(div1);

vo2=new СХBrVisualObject(div2);

vo1._add(vo2);

vo1._draw();

}

function ButtonClick1() {

vo1._set_visible(false);

}

function ButtonClick2() {

vo1._set_visible(true);

}

</SCRIPT>

</BODY>

</HTML>

И вот что он выдаст:

При нажатии на кнопочку "Скрыть" объекты исчезают с экрана, а "показать" появляются. Только сначала нужно нажать на кнопочку "Нажать сюда".

А теперь начнем разбор самого класса СХBrVisualObject. Начнем с конструктора:

// *********************** Объявления класса СХBrVisualObject **********************

function СХBrVisualObject(object) {

CXBrObjectsContainer.call(this);

this._get_class_name=СХBrVisualObject_get_class_name;

this._hierarchy_classes.push(this._get_class_name());

this._object=object;

this._visible=true;

this._draw=СХBrVisualObject_draw;

this._set_visible=СХBrVisualObject_set_visible;

this._draw_objects=СХBrVisualObject_draw_objects;

this._set_visible_all=СХBrVisualObject_set_visible_all;

this._class_prefix="";

this._palette_styles=new Array;

this._object.style.visibility="visible";

this._document=document;

}

Здесь мы сперва стандартным образом (как это принято в XBr) добавлем имя объекта в массив иерархии классов, создаем новые методы а так же инициализируем поля. _class_prefix, _palette_styles - это задел для будущих классов, до них мы еще доберемся, _object - ссылка на DOM объект, с которым работаем данный визуальный объект. Обычно это тэг Div, в который объект пишет то, что хочет отобразить на экране, как правило, изменяя у него свойство innerHTML (см. разбор методов ниже).

В методе _draw, как я уже говорил, заглушка:

function СХBrVisualObject_draw() {

this._object.innerHTML="<font color=red><b>Это прорисовка абстрактного класса СХBrVisualObject</b></font>"

}

_draw_objects отображает все содержащиеся в контейнере объекты:

function СХBrVisualObject_draw_objects() {

for(var i=0; i<this._objects_list.length; i++) {

if(this._objects_list[i]._is_child_or_self("СХBrVisualObject")) this._objects_list[i]._draw();

}

_set_visible изменяет видимость самого объекта и вызывает _set_visible_all, что бы установить видимость у подчиненных объектов:

function СХBrVisualObject_set_visible(visible) {

this._visible=visible;

if(this._object.style!=null) {

if(visible) this._object.style.visibility="visible"; else this._object.style.visibility="hidden";

}

this._set_visible_all(visible);

}

Для изменения видимости мы используем такое свойство стиля DOM-объекта, как visibility - видимость. Стиль задается через свойство style, если оно конечно, есть. Не у всех объектов может быть это свойство. но у тэга div оно точно есть.

И, наконец, метод _set_visible_all, который устанавливает видимость у подчиненных объектов:

function СХBrVisualObject_set_visible_all(visible) {

for(var i=0; i<this._objects_list.length; i++) {

if(this._objects_list[i]._is_child_or_self("СХBrVisualObject")) {

this._objects_list[i]._set_visible(visible);

}

Последнее обновление ( 10.11.2011 г. )

« След.		Пред. »

Вернуться