Отправляет email-рассылки с помощью сервиса Sendsay
  Все выпуски  

Web-программирование - это просто!


Новое на сайте Программирование - это просто! (www.easyprog.ru):

В платном разделе

В бесплатном разделе

Добрый день, уважаемые подписчики!

Тема сегодняшнего выпуска: «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>

      <title></title>

        <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="XBrBase.js">

        </SCRIPT>

        <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="XBrGlobalVars.js">

        </SCRIPT>

        <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="XBrGlobalProc.js">

        </SCRIPT>

        <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="XBrVisual.js">

        </SCRIPT>

        <SCRIPT Language="JavaScript" type="text/javascript">

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

            var vo1;

            var vo2;

        </SCRIPT>

    </head>

 

    <BODY>

        <div id="1">

            div1

        </div>

        <div id="2">

            div2

        </div>

        <SCRIPT Language="JavaScript" type="text/javascript">

            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>

        <input type="submit" value="Нажать сюда" OnClick="ButtonClick()"><br>

        <input type="submit" value="Скрыть" OnClick="ButtonClick1()"><input type="submit" value="Показать" OnClick="ButtonClick2()">

    </BODY>

</HTML>

 

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

 

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

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

 

А теперь начнем разбор самого класса СХ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);

        }

    }

}

 

С уважением, Шуравин Александр, e-mail: megabax@rambler.ru, автор оставляет за собой право публиковать в рассылках ваши письма, если в письме прямо неоговорено нежелание его публиковать.

 


В избранное