ExtJS Tree в Apex

Просматривая темы на SQL.RU, набрел на пример использования Ext JS для отображения таблицы. Оказалось не так и сложно подружить Apex и Ext JS.Решил попробовать отобразить иерархические данные в виде дерева.  Стандартное дерево в Apex нельзя назвать удобным элементом управления. Постоянные обновления страницы при раскрытии/сворачивании элементов надоедают. Давно хотелось использовать дерево основанное на Ajax. И так, приступим.
Для начала необходимо выбрать источник данных. Будем использовать данные из таблицы DEMO_PAGE_HIERARCHY, создаваемой в числе прочих при установке демонстрационного приложения.
ExtJS имеет возможность асинхронно подгружать элементы дерева по мере раскрытия родительских элементов. Для этого необходим скрипт на http-сервере, который возвращает данные в формате понятном библиотеке ExtJS.
"Родным" форматом в этом случае является JSON, который понимается библиотекой без дополнительных телодвижений со стороны разработчика. Однако в Oracle 10g нет стандартных средств для работы с JSON. Поэтому обратимся за помощью к проекту PL/JSON, который предоставляет набор удобных средств для работы с JSON-данными. Установка PL/JSON затруднений не вызывает, инструкция есть в readme.txt.
Для работы страницы с деревом я написал простую процедуру, которая возвращает дочерние элементы дерева для элемента с заданным идентификатором, который передается в виде единственного параметра в процедуру:

CREATE OR REPLACE PROCEDURE TEST.GET_TREE_NODES(NODE NUMBER)
IS
  ITEM JSON;
  ITEM_LIST JSON_LIST := JSON_LIST();
BEGIN
  FOR REC IN(
    SELECT PAGE_ID ID, PAGE_NAME TEXT
      FROM DEMO_PAGE_HIERARCHY
     WHERE PARENT_PAGE_ID = NODE
  )
  LOOP
    ITEM := JSON();
    ITEM.PUT('id', REC.ID);
    ITEM.PUT('text', REC.TEXT);
    ITEM_LIST.ADD_ELEM(ITEM.TO_ANYDATA);
  END LOOP;
  HTP.P(ITEM_LIST.TO_CHAR());
END;

После этого необходимо предоставить права на запуск процедуры пользователю, от лица которого работает APEX (прописан в соответствующем DAD) и зарегистрировать в функции .wwv_flow_epg_include_mod_local
Здесь apex_owner - владелец схемы, в которую установлен APEX.

За основу javascript для определения объекта дерева был взят пример с сайта ExtJS и немного изменен. Представленный ниже текст нужно добавить в HTML Header страницы APEX. Первые 3 строки это подключение библиотеки Ext JS.

<link rel="stylesheet" type="text/css" href="http://localhost/ExtJS302/resources/css/ext-all.css">
<script src="http://localhost/ExtJS302/adapter/ext/ext-base.js"></script>
<script src="http://localhost/ExtJS302/ext-all-debug.js"></script>

<script type="text/javascript">
Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL = 'http://localhost/images/s.gif';
  var PagesTreeLoader = new Ext.tree.TreeLoader({
        dataUrl   :"http://localhost:8080/apex/test.get_tree_nodes"
    });
var PagesTree = new Ext.tree.TreePanel({
        title            : 'Pages',
        collapsible      : false,
        animCollapse     : false,
        border           : true,
        id               : "tree_pages",
        el               : "mytree",
        autoScroll       : true,
        animate          : false,
        enableDD         : true,
        containerScroll  : true,
        height           : 500,
        width            : 400,
        loader           : PagesTreeLoader
    });

    var PagesTreeRoot = new Ext.tree.AsyncTreeNode({
        text        : 'Pages',
        draggable    : false,
        id        : '0'                  // this IS the id of the startnode
    });

 // Render the tree.
    PagesTree.setRootNode(PagesTreeRoot);
    PagesTree.render();
    PagesTree.expand();
});                  
</script>

Далее нужно создать HTML-регион, в Source которого нужно добавить следующее:

<div id="mytree">
</div>

Это будет служить контейнером для создаваемого дерева. Обратите внимание на строку:

dataUrl   :"http://localhost:8080/apex/test.get_tree_nodes"

Она указывает дереву, что обращаться за данными для формирования элементов нужно к процедуре GET_TREE_NODES, определенной выше.

Вот и все. Результат на картинке

Ask Tom in Moscow

    Небольшое отклонение от темы блога. Заметка не совсем про Apex, но зато про Oracle.
24 февраля в Москве прошло мероприятие, которое не могло оставить равнодушным ни одного "ораклоида".  Том Кайт впервые в России провел серию докладов по Oracle. Мне посчастливилось побывать на этом замечательном мероприятии. Писать о том, кто такой Том Кайт, в блоге, посвященном технологиям Oracle, просто глупо. Том личность (не побоюсь этого слова)  легендарная. Поэтому сразу перейду к рассказу о его выступлении.

    Скажу сразу: впечатлений осталось масса. Все прошло на высоком уровне. Организаторы постарались на славу. Спасибо им огромное. Встретили, накормили ;-). Встреча проходила в зале гостиницы «Ренессанс Москва». Зал был заполнен практически полностью. Собралось 333 человека. Фотографии можно посмотреть здесь.

    Но, конечно, самое главное - это выступление Тома  Кайта! Слушать его - одно удовольствие. Не зря его называют главным пропагандистом технологий Oracle. На фотографиях видно, с каким увлечением аудитория "впитывала" материал докладов. То, что рассказывалось со сцены, не было открытием для тех, кто знаком с книгами Тома Кайта, читает Oracle Magazine и является частым гостем сайта AskTom. Однако то, как это рассказывалось уже позволяет заявить, что я не зря побывал на данном мероприятии. Перед нами выступал не просто сотрудник компании Oracle, повествующий о новых продуктах, а человек, который страстно увлечен технологиями, с которыми работает и, самое главное, умеет донести до аудитории не только свои знания, то и эмоции. Кроме того, речь была приправлена специфическим айтишным юмором, что вызвало понимание у аудитории :-).

    Программа мероприятия включала несколько докладов. Первая часть состояла из докладов по общим темам, среди которых: «How Do You Know What You Know...» и «The Best Way». Вторая часть была связана непосредственно с Oracle: «Database Worst Practices» и «Top 10, no 11, new features of Oracle database 11g Release 2». Затем была панельная дискуссия. Каждый доклад сопровождался интереснейшими примерами из личного опыта выступающего, что является одной из самых привлекательных черт не только выступлений Тома Кайта, но и его книг.

    В первом докладе говорилось о том, что наши знания не всегда могут быть адекватны решаемой задаче в силу того, что все вокруг постоянно меняется и знания становятся неактуальными. Это нужно учитывать, решая технические задачи, в том числе и связанные с технологиями Oracle (здесь рассматриваемая проблема заключается в выпуске новых версий, в результате чего появляются новые возможности и изменяются или становятся неактуальными средства, существовавшие в предыдущих версиях). Основная идея Тома Кайта в этом докладе может быть сформулирована так: необходимо постоянно оценивать свои знания в соответствии с реалиями настоящего времени, а выбирая инструмент для своей работы (СУБД Oracle,  например) необходимо досконально изучить его, чтобы избежать ошибок, использовать его максимально эффективно и не изобретать колесо снова и снова. В качестве иллюстрации Том развенчал несколько мифов относительно работы ряда классических

    Прочитав, тему второго доклада, можно подумать, что речь пойдет о том как лучше всего разрабатывать приложения для Oracle и каким образом лучше использовать эту СУБД. На самом же деле Том Кайт объяснил слушателям, почему к Best Practices нужно относится осмотрительно и не воспринимать их как панацею. Как было сказано в докладе, основная особенность при рассмотрении лучших практик - это то что они должны рассматриваться неотрывно от контекста, в котором их рекомендуется применять. Выделение контекста в данном случае нелегкий и кропотливый труд. В случае Oracle контекст представляет собой подробное описание окружения и условий использования СУБД (параметры настройки, конфигурация оборудования и ПО, профиль нагрузки, характер выполняемых задач, пользовательское окружение и т.д. и т.п.).

    Как сказал Том Кайт в своем третьем докладе, говорить о том, как не надо работать с Oracle (да и не только с Oracle), гораздо легче (худшие примеры работы с Oracle, как правило, не связаны с контекстом). Database Worst Practices - это одна из его самых любимых тем, про которую мы можем прочитать, например, в книге Тома Кайта "Oracle для профессионалов". И хотя содержание доклада не отличалось новизной (для специалистов по Oracle), докладчик блестяще и с немалой долей иронии описывал последствия применения Worst Practices, сопровождая повествование примерами и аллегориями (напрямую не связанными с Oracle, но точно передающими смысл звучавшего со сцены). Том отлично подготовился к визиту в Россию, и приготовил замечательную иллюстрацию (есть на фотографиях) для аллегории о суперудобном автомобиле, изначально лишенном средств, препятствующих использованию этого автомобиля чужими людьми, и который в последствии пришлось обвязать цепью. На картинке, которую продемонстрировал Том во время рассказа о последствиях игнорирования вопросов безопасности на этапе проектирования приложения и попыток приделать средства безопасности "потом", был изображен потрепанный "Запорожец" с навесным замком на двери. В контексте доклада выглядело очень прикольно (и наглядно демонстрировала "органичность" решения). Все хорошо посмеялись. В докладе так же были упомянуты любимые Томом bind variables (куда же без них) и последствия их неиспользования, необоснованно частые вызовы commit для разбиения на части больших транзакций и много других классических ошибок разработчиков Oracle.

    Доклад по новым возможностям Oracle 11g, ставшим доступными в версии 11.2 состял из материала уже опубликованного в нескольких номерах журнала Oracle Magazine (здесь ,здесь и здесь). Но послушать все равно было интересно, тем более, что живое выступление всегда отличается от статьи.

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

    В целом выступление Тома Кайта было построено безупречно, я смотрел и слушал его не отрываясь, несмотря на то, что я не спал всю ночь, пока добирался на автобусе в Москву. Сон и усталость были забыты напрочь с первых минут выступления. Я думаю, что большинство из участников могут сказать то же самое о своих ощущениях.

    В зале работали переводчики, но, по отзывам, они были "не в теме", из-за чего качество перевода страдало. Я с самого начала предпочел слушать доклады в оригинале и не прогадал. Не смотря на отсутствие разговорной практики, я понял почти все, и даже шутки  :-).

    Лично мне Том Кайт показался человеком доброжелательным и простым в общении. В перерывах между докладами, он с удовольствием общался с участниками, сфотографировался со всеми желающими и раздал кучу автографов. Нужно сказать, их было огромное количество, на одной из фоток можно увидеть очередь из желающих постоять рядом с Томом. А вот фотография очереди, которую удалось сделать мне (щелкните на картинке для увеличения).

    Чувствовалось, что организаторам даже немного неловко, но что поделать - Том Кайт не частый гость в Москве, и все старались не упустить момент. Я тоже взял автограф и сфотографировался (я крайний слева).

    Очень хочется бы, чтобы эта встреча была не последней.

Начало

    На своем основном месте работы для разработки приложений для СУБД Oracle я использую Oracle Application Express (Apex).  Постоянно приходится сталкиваться с различными нетривиальными задачам связанными как с разработкой интерфейса пользователя, так и с обработкой данных на сервере в хранимых программах на языке PL/SQL.

    По мере возможностей постараюсь публиковать интересные находки и решения. Надеюсь, это может разработчикам на Apex узнать больше об этом замечательном инструменте создания приложений для БД Oracle.

    Ближайшие публикации я планирую посвятить возможностям Oracle Application Express 4.0 доступным в Early Adopter’s Release.