Главная > AJAX, ExtJS Framework, web2.0, Разное > ExtForm Builder — первая ласточка инструментов для работы с ExtJS

ExtForm Builder — первая ласточка инструментов для работы с ExtJS

14 октября 2007

Недавно в нашем блоге проскочила новость о выходе бета-версии очень мощной библиотеки для разработки AJAX приложений - ExtJS. В ней присутствует много визуальных элементов, построение форм и интерфейсов а-ля OS, но вот что сложновато и неудобно - все построение интерфейса приходится делать исключительно в программном коде, а значит ни передать это дело дизайнеру интерфейсов, ни проделать многократные итерации с постепенной доводкой - нет, не то чтобы нельзя вообще, но, поверьте, достаточно трудоемко. Конечно, если использовать мощь ExtJS только для простых форм контактов, постов и т.п., то никаких таких проблем нет, но при разработке действительно масштабных проектов, особенно если они полностью построены вокруг динамического Ext-based интерфейса, это существенно усложняет жизнь всем.

Нехватает какого-нить развитого средства RAD именно в плане создания "с кирпичиков" костяка интерфейса и сразу визуальной обратной связи - такого, примерно, как было в Borland Delphi и теперь есть в CodeGear Delphi for PHP (может кто в курсе, есть ли там интеграция с клиентскими библиотеками интерфейсными?). А ведь строгая компонентная структура Ext-а вполне допускает построение "на лету" и относительную несложность такого решения, а к тому же сама она содержит в себе все компоненты и требуемые функциональности для создания "конструктора самой себя".

Что, однако, было очень близко к цели. Один из пользователей библиотеки, Christophe Badoit, вероятно также столкнувшийся с аналогичной проблемой, решил ее очень элегантно - создав онлайновый построитель интерфейса на основе Ext (тут это понимать следует вдвойне - сам builder также построен на основе Ext) - Ext GUI Builder, доступный по адресу http://tof2k.com/ext/formbuilder/

Реализован он в традиционном для RAD-пакетов стиле - основу экрана занимает основная область, на которой, собственно, и происходит постройка и визуализация интерфейса. Снизу идет панель, на которой сгруппированы все доступные елементы, как визуальные, так и основные невизуальные. Все разделено на несколько групп - All, Forms, Panels и Layouts. Все элементы предоставлены пока просто в виде прямоугольников с надписью, думаю в будущем гораздо удобнее было бы либо помещать туда сразу конечный элемент, либо рисунок-пиктограмму, обозначающий его.

Добавление элемента происходит по двойному клику на нем, в зависимости от типа элемента появляется диалоговое окно, в котором можно задать основные параметры перед добавлением его в основную область. Например, при добавлении Layouts можно раздельно описать все регионы и их параметры. Все элементы образуют древовидный иерархический список, который доступный слева в панели Elements tree, причем, выбрав любой элемент, можно добавлять и изменять все его свойства, которые доступны в виде таблицы внизу в панели Parameters (а те, которых там нет - доступны через меню Add и выбор из выпадающего списка свойств).

Через контекстное меню в дереве элементов можно и удалять ненужные элементы, а также добавлять пустые, невизуальные узлы. Доступно также функция "Visual resize" которая позволяет удобно и наглядно изменять размеры любого элемента просто перетаскивая за углы рамку ресайза.
Для всей созданной формы можно получить результирующий JSON код для дальнейшего програмного создания этой формы. Из дополнительных фич есть встроенный измеритель скорости рендеринга созданного интерфейса (ведь для действительно сложных интерфейсов это будет существенно), а также возможность отмены неудачных действий.

Хотя все выглядит очень и очень эффектно и красиво (да и функционально, чего уже там), но при построении некоторых интерфейсов возникают сложности. К примеру, при помещении элементов на вкладку Tab-а его сначала нужно обязательно выделить в главном окне, потому что иначе этот элемент добавиться где-то на заднем плане и будет доступный только с дерева элементов. Сложно или даже невозможно добавлять надписи и просто обычные элементы HTML-а, что, в принципе логично, но все же - при дизайне интерфейса нужно иметь возможность и прямого редактирования. К примеру, как добавить надпись к уже присутствующему элементу на форме - я не нашел.

Несмотря на недочеты и мелкие сложности, инструмент получился очень и очень хороший, он реально позволит при некотором обучении создавать продвинутые интерфейсы почти без программирования, не влезая в дебри клиентского кода. Это позволит вынести проектирование интерфейсов и отдать его в профессиональные руки дизайнеров, а программисты потом доведут и интегрируют форму в приложение. Мы будем следить и надеемся, что разработка не останется просто игрушкой и будет далее развиваться. Из нее вполне может выйти даже полноценный он-лайн RAD инструмент.

Вердикт - если вы работаете с ExtJS, вам просто необходимо хоть бы просто посмотреть и попробовать этот инструмент, уверен, не пожалеете.

P.S. По идее, программу можно запустить и у себя - после сохранения страница включает в себя все необходимое, но что-то происходит с элементом Tree, вероятно, можно попробовать втиснуть его в дистрибутив Ext.

  1. 16 октября 2007 в 17:40 | #1

    Что-то не грузиться пример.

  2. 16 октября 2007 в 17:51 | #2

    Гм, да есть такое… хотя код страницы грузится (просмотрел по view source). может что-то переделывает. Предыдущая версия грузится, но выдает ошибку ( http://tof2k.com/ext/formbuilder.old/)
    тут, к сожалению, малоч то можно сделать.. я сохранил себе исходники, попробую собрать у себя на локальном сервере

  3. Serg
    19 октября 2007 в 21:24 | #3

    Вот аналогичный редактор http://www.stekolla.com/editor/
    А как использовать полученный код, как его привратить в диз?
    {
    layout: ‘fit’,
    items: {
    xtype: ‘tabpanel’,
    activeItem: 0,
    items: [{
    title: ‘Tab 1’,
    layout: ‘fit’
    }, {
    title: ‘Tab 2’,
    layout: ‘fit’
    }]
    }
    }

  4. 19 октября 2007 в 21:54 | #4

    По-моему, ответ на Ваш вопрос здесь:

    http://extjs.com/forum/showthread.php?p=71685#post71685

    и

    http://extjs.com/forum/showthread.php?p=73338#post73338

    но, похоже, самый полный ответ здесь (от автора):

    http://extjs.com/forum/showthread.php?p=74160#post74160

    П.С. извините, что изначально это не осветил в статье. мое упущение.

  5. Serg
    20 октября 2007 в 22:16 | #5

    Плохо, что в рунете мало инфы про этот фреймворк. И примеры, что с ним идут не помогают вникнуть. Лучше бы они в хелпе приводили еще маленькие кусочки кода для наглядности.

  6. 20 октября 2007 в 22:30 | #6

    ну есть русскоязычное сообщество на Google Groups, есть русский сайт, хоть и малоинформативный.

    Кроме того, достаточно много тытуриолов на сайте в разделе Learn. Остальное будем понемногу и мы восполнять 🙂 уже полгода разбираемся в нем, делаем два больших проектов, так что некоторая база знаний есть.

  7. Serg
    20 октября 2007 в 22:48 | #7

    Я долго разбирался, как отправить данные из формы. В тех примерах, что идут они кнопки создают сразу в форме, а так отправка не хочет работать, и этим все запутали. Пока методом тыка не понял, что нужно все же кнопку отдельно создавать.
    Я так и не понял что правильнее и лучше: что бы tree добавить на панель, нужно отдельно его создавать (через div) и потом добавлять, или можно сразу создавать в items панели?
    Напишите пару статей маленьких с практическими примерами.

  8. 20 октября 2007 в 22:53 | #8

    ну для формы все просто — использовать метод submit() и проверку isDirty() (по памяти пишу). На счет дерева — конкретно с деревьями не работали, но другие элементы в основном все создаем ручками, так более привычно.

    Оки, напишем 🙂

  9. Nina
    22 июля 2009 в 22:21 | #9

    another extjs builder which is deprecated, too 🙁
    http://www.rabuser.info/jsgui.php
    why does nobody complete the form creator?

  10. Dimon
    31 июля 2009 в 14:39 | #10

    У меня такой вопрос может кто сталкивался, хочу TabPanel растянуть на всю страницу, width:’100%’ работает, а вот height:’100%’ уже почему то не работает, может кто знает как о высоте растянуть.

  11. Dimon
    1 августа 2009 в 15:29 | #12

    @aleks_raiden
    Что то вроде этого?

    layout:\fit\,
    title:\\,
    items:[{
    xtype:\tabpanel\,
    activeTab:0,
    items:[{
    xtype:\panel\,
    title:\1\
    },{
    xtype:\panel\,
    title:\2\
    },{
    xtype:\panel\,
    title:\3\
    }]
    }]

  12. 2 августа 2009 в 00:27 | #13

    ага

  13. Dimon
    3 августа 2009 в 09:48 | #14

    У меня ещё такой вопрос, я создаю TabPanel, autoLoad:’qwerty.php’ в qwerty.php кодировка windows-1251, вместо нормального русского языка у меня какие то эроглифы, как решить эту проблему?

    items:[{
    xtype:»tabpanel»,
    height: ht,
    activeTab:0,
    frame:true,
    animScroll: true,
    monitorResize: true,
    defaults:{autoScroll: true},
    items:[{
    xtype:»panel»,
    title: ‘1’,
    autoLoad:’qwerty.php’
    },{
    xtype:»panel»,
    title: ‘2’,
    autoLoad:»
    }]
    }]

    • 3 августа 2009 в 15:37 | #15

      поставить нормальную кодировку 🙂 или на странице или в скрипте. использовать везде UTF-8

  14. Dimon
    5 августа 2009 в 07:17 | #16

    Если поставить utf-8 то да, на странице нормальный язык, но тогда проблемы с выводом из базы, если бы был MySQL то без проблем можно было бы исправить, но там оракл.

  15. Dimon
    6 августа 2009 в 08:03 | #18

    Да теперь всё гуд, спасибо.

    Читал статью по созданию списка групп, очень интересная. Есть статья по созданию форм и передачи данных с формы в php файл?

  16. Dimon
    6 августа 2009 в 14:12 | #20

    У вас есть ICQ или агент, чтобы можно было пообщаться не на блоге, а онлайн или почта.

Комментирование отключено.