☰ Menu
Switch lang: Русский \ English

WebGUI Директивы

Старинца все еще в разработке

WebGUI - удобный каркас для создания компонентов для web страниц компонент удобно будет использовать из JS, шаблонов и биндингов разного вида. Это расширяет рынок на который выходят ваши компоненты и увеличивает повторное использование

Initialization

require or define dependency for module static/vendor/agui/aplib

define( [   "static/vendor/agui/aplib", // todo не понятно зачем, просто почем то иногда в других директивах на этот компонент ругать идёт
        ],  function(_){...} );

// or 

require(["static/vendor/agui/aplib"],function(_){
    ...
});

ap-lazyrepeat

DEMO

Работает аналогично al-repeat, но лениво, т.е. лучше. Если модель осталась без изменений количества элементов, а поменялись только сами они или добавлся или удалился один , то весь список не пересоздаётся а изменяется, соответственно изменению модели. изменения DOM минимизируются.

Итерировать можно как списки массивы, так и объекты словари по их ключам.

Пример 

<path   ap-lazyrepeat="nodeid in nodes"
        ap-attr="d::nodeid && nodes[nodeid]._edge2()._edge2"

        fill="none" 
        stroke="rgba(0,0,0, 0.7)" 
        stroke-width="2" 
        stroke-linecap="round" 
        d="M0,0M1,1" 

        ></path>

Здесь nodes это словарь с объектами, где ключ - строка идентификатор.

ap-attr

DEMO

Установка аттрибута. Часто бывает нельзя ставить аттрибут через текстовые директивы ({{}}).

Например такая работа в SVG неприемлима, т.к. движок SVG видит недопустимые значения в полях, где ожидается заданный формат. А установить программно аттрибут требуется.

Или , для примера, img src= тоже не допускает выражений вида {{}}. Но для этого, конечно, существует al-src.

Пример использования 

ap-attr="d::nodeid && nodes[nodeid]._edge2()._edge2"

Здесь до :: пишем имя аттрибута , а после выражение для вычисления значения.

ap-listen

DEMO

Директива слушает события на элементе, и вызывает expr в рамках контекста, заданнный декларативно.

Имеются переменные, доступные в выражении :

  • $evt - in context o expr an event
  • $param2 - параметр переданный при создании сообщения (trigger)

Они могут быть использованы при обработке события.

Например, Если событие генерировалось так : $(e).trigger('event_name',a,b) , то в обработчик доступно $evt само событие, и $param2 === a.

Для прослушки нескольких событий делать так (пример):

ap-listen="EditEvent ::     nodes[nodeid]._setProperty('title', $evt.target.attributes['eip-value'].value );
                            nodes[nodeid].titleEditMode = 'false'; 
           ::
           click     ::     nodes[nodeid]._select(); debugger; this.$scan(); return true;"

События и действия разделяется двойными двоеточиями :: попарно.

Здесь до :: пишем имя события и после разделителя выражение для вычисления.

Возвращаемый результат не используется

ap-qtip2

Директива делает всплывающую подсказку на элементе с заданным содержимым. По сути это qtip2 по человечески в виде директивы (http://qtip2.com/)

qtip2 example image

Вы должны включить в страницу css ./static/vendor/agui/lib/qtip2/jquery.qtip.min.css

пример использования : 

<head>
... 
    <!-- Для компонента qtip2 (info circle)-->
    <link rel="stylesheet" href="/static/vendor/agui/lib/qtip2/jquery.qtip.min.css"/> 
...
</head>

<span   class="info_circle"
        ap-qtip2="info_block"
        al-click="$item._select(); debugger; $parent.nodeEditState='open';"
>

...

<div class="info_block" >
    <span>Информация</span>
    <br>
    <div class="div_table">
        <div class="divRow" 
            al-repeat="propName in nodes[nodeid].type.propertyOrder">
            <div class="divCell">
                {{propName}}
            </div>  
            <div class="divCell">
                {{ nodes[nodeid].properties[propName] }}
            </div>
        </div>
    </div>
</div>

в параметре ap-qtip2="info_block" задаётся имя класса элемента следующего (.next) за текущим, который будет показан как тултип

В планах :

  • поддержать кучу опций компонента

ap-resizable

DEMO

Делает любой элемент изменяемого размера и позволяет обрабатывать эти измеения.

Или другими словами Делаем элемент растяжимым

Директива имеет несколько параметров разделяемых через ::.

формат <как растягивается?>::<start expr> :: <stop expr> :: [<zoomScale>]
  • Формат первого аргумента - стороны света "A comma delimited list of any of the following: n, e, s, w, ne, se, sw, nw, all"
  • Выражения,вызываемые в начале resize юзером и в конце.
  • Формат zoomScale число. не обязательный.

Параметры выражений:

  • параметры start : ['$evt']
  • параметры stop : ['$evt', '$w', '$h']. Сюда передаются новые размеры, можно их применить в модель.

Пример использования 

<div
    ap-resizable="      e 
                        :: 
                        ::  nodes[nodeid]._resize( $w/dpi.get(false) /*,$h/dpi.get(false)*/ ); 
                        ::  scale " >
</div>

ap-getsize

Берём и кладём в модель данные о реальном размере элемента $w, $h.

пример 1

ap-getsize="nodes[nodeid].w=$w; nodes[nodeid].h=$h;"

DEMO

Имеются параметры выражения $w и $h.

пример2 

ap-getsize=" nodeid ? nodes[nodeid].realw=$w/dpi.get(false): 0; nodeid ? nodes[nodeid].realh=$h/dpi.get(false): 0;"

устанавливаем размер в модель, если она "достаточно инициализирована ;)"

Этот код сработает при любом раскладе. не важно почему именно изменился размер. вомоно внутрь подгрузился контент и, например, изменилась высота.

Данная директива собирает данные по $scan(), а не в момент изменения размера! Т.е. момент опроса - управляемый.

ap-optionalattr

У элемента появится опциональный аттрибут, если выполнится условие, пример :

ap-optionalAttr="disabled:!connected"

Часто надо задизаблить, например input.

ap-window

Окно popup, или jquery ui dialog.

Только работает декларативно, а не через JS.

Пример

TODO компонент и синтаксис будует переписан, но я хоть что-то покажу

         * AL+ TODO ap-window='{"status":"nodes[nodeid].editMode"}'
         * важно соблюсти виды кавычек
         * значение - json struct
         * 
         * title - не обязательная настройка
         * 
         * зависимость : jQueryUI
         * 
         * TODO переписать
         * по контексту: октрывать окно можно по любой доступной переменной 
         * в любом доступном контексте
         * но КОНТЕНТ окна работает в контексте всего body. 
         * если на body есть контекст - 
         * то на нём и работают привязки в разметке контента окна
         * Важно: => нет смысла описывать такое окно в чилд контексте
         *
         * state -> "open", "closed_ok", "closed_cancel",
         *

ap-click

Позволяет событиям проходить внутрь элемента а не останавливает их на конкретном элементе, как это делает al-click=.

Быват нужно, когда кнопка внутри строки которую щелчком можно выделить - чтобы щелчок по кнопке доходил до нее, а не выделял строку, например.

пример: 

        <tr al-repeat="server in servers"
            ap-click="on_server_select()"
            al-css="info:server.objid==server_selected.objid"
            >
            <td>{{server.id}}</td>
            <td al-css="text-success: server.connected==true, text-danger: server.connected==false"
                ><b>{{server.name}} ({{server.connected ? 'Online' : 'Offline'}})</b>
            </td>
            <!--
                не редактируем адрес т.к. нет метода на сервере для изменения адреса
                ap-jeditable="{value:'server.address', callback: on_server_edit_address }"
            -->
            <td>{{server.address}}</td>
            <td>{{format_timezone_offset( server.timezone_offset )}}</td> <!--знак плюс для положительных-->
            <td>&nbsp;{{server.s_ostype}}</td>
            <td>&nbsp;{{server.s_dbtype}}</td>
            <td title="Статус БД">&nbsp;{{server.r_db_state}}</td>
            <td>&nbsp;{{server.r_connection_state=='Ok' ? 'nginx' : 'ssl_direct'}}</td>
            <td>&nbsp;{{server.r_jboss_state}}</td>
            <td>
                <a href="/updatedeploy/api/resources/standalone-config/{{server.getid ? server.getid().getid : -1 }}/jboss" target="_blank">Standalone config</a>
                <a href="/updatedeploy/api/resources/log/{{server.getid ? server.getid().getid : -1 }}/jboss" target="_blank">JBoss</a>
                <a href="/updatedeploy/api/resources/log/{{server.getid ? server.getid().getid : -1 }}/tornado" target="_blank">Tornado</a>
                <a href="https://{{server.address}}/updatedeploy" target="_blank">ЛК</a>
            </td>
            <td><span
                type="button btn-xs" class="glyphicon glyphicon-refresh glyphicon-big" title="Переподключится"
                al-click="on_server_force_reconnect(server)"
                ></span>
                <span
                type="button btn-xs" class="glyphicon glyphicon-wrench glyphicon-big" title="Редактировать сервер"
                al-click="on_server_edit_start(server)"
                ></span>
            </td>
            <td><span
                    type="button btn-sm" class="glyphicon glyphicon-trash glyphicon-big" title="Удалить сервер"
                    al-click="on_removeserver(server)"
                    ></span>
            </td>
        </tr>

Тут сразу комбинируются и al-click и ap-click. Каждому - своё место.

ap-select

DEMO

Простейший комбобокс-выбиралка, для прототипов, например. Есть в компонентах нормальный выбиралки.

Пример использования "вслепую"

          <select ap-select="dpp">
          </select>

здесь в поле контекста dpp находится список элементов для итерирования

Пример использования "кастом"

          <select ap-select="dpp">
            <option> бла бла бла{{_val}}</option>
          </select>

тут можно задать свободно формат опции.

При выборе опции меняется поле контекста "<name>_selected", в данном случае меняется dpp_selected на выбраный элемент.

Comments

Comments powered by Disqus
Skip to main content