Однако есть ряд ситуаций, когда возникает необходимость в использовании более гибкого подхода. Каждый, кто немного знаком с разработкой веб-страниц скажет, что в html очень упрощено проектирование внешнего вида страниц, более того если данные страницы предназначены для обработки с помощью некоторого серверного расширения и в них есть формы отправляющие данные для дальнейшей обработки, то вполне можно отделить внешний вид от подобного функционального компонента и изменять каждую из частей с минимальными издержками.

Фактически возможно полностью переделать внешний вид страницы, изменив оформление, цветовую гамму, используемые шрифты и даже месторасположение элементов страницы не проводя ни малейшего изменения в исходном коде приложений, и по сложности эти работы доступны для каждого, кто прочитал первые 20 страниц любого популярного введения в разметку страниц с использованием html, а если интерфейс проектируется с использованием xsl, то возможности открываются практически безграничные.

А теперь представьте, какие сложности возникнут, если возникнет необходимость изменения интерфейса для вашего приложения, разумеется, без доступа к исходным кодам и знания основ программирования, если вы пишите приложение на Java или с помощью иного средства RAD. Существует другой подход в котором сочетается гибкость описания внешнего представления с использованием html\xsl\css и мощь Java для создания обработчиков происходящих событий будущего приложения.

Подобный подход основан на использовании специального движка (или компонента) получающего на вход описание внешнего вида формы (так и хочется сказать веб-страницы) на html с небольшими вставками кода привязки элементов управления к обработчикам Java.

Подобную возможность предоставляет компания Netclue, которая разработала прекрасный компонент для отображения html документов (все таки в той задаче, которая и привела в конечном счете к написанию данной статьи заказчику захотелось чтобы отображались html файлы и с CSS (поддержку коего мне JEditorPane обеспечить и не смогла), так, что пришлось искать в Интернете доступные решения). В ходе подобных долгих поисков пришлось перебрать несколько решений (известных или нет).

Были последовательно отсеяны WebRenderer (на самом деле оказалось, что данный компонент просто мост между Java и движком которым пользуется IE, следовательно компонент тяжеловесный и в создании тонкого клиента основанного полностью на решениях Java не подходит). Какой уж тут тонкий клиент, когда приходится таскать в дополнение библиотечку DLL весом почти в мегабайт. К тому же после того как я разместил два подобных компоеннта на закладках то узнал, что и Java можно добиться эффекта прозрачных окон с минимальными затратами. В общем, компонент для серьезного применения пока еще рановат, может в будущем разработчики его доведут до ума.

Также был отсеян компонент CalHTMLPane который был разработан Andrew Moulden. Продукт очень хороший, к сожалению, аппетит приходит во время еды и мне к тому времени уже потребовалась возможность работы с деревом DOM загруженного документа, такую возможность данный компонент мне предоставить не мог. По ходу дела было отсеяно еще несколько решений, которые предствляли собой лишь дешевые поделки и упоминать о которых даже и нехочется.

И вот когда уже казалось что нет в мире совершенства на одном буржуйском форуме нашел ссылку на компанию Netclue и разрабатываемый им набор компонент для отрисовки html и вполне неплохой работы с DOM моделью загруженной страницы “Clue Web Browser Components (WBC) Professional Edition X Package Version 4.2” надо сказать что на самом деле есть три вида этих библиотек компонент: базовая, профессиональная и x-версии. Все они распространяются по очень приятной схеме. Они бесплатны для персонального использования и свободно загружаются с сайта производителя, правда если у вас возникнут вопросы и проблемы, то придется платить деньги за поддержку (но вы ведь и правда не думали, что получите все за бесплатно). Основное отличие между версиями данного набора компонент это возможности: так x-версия поддерживает xml\xsl, а профессиональная версия в отличие от базовой имеет поддержку JavaScript 1.5.

Полный список возможностей x-версии выглядит так:

• Support for XSLT.
• Printing
• Javascript v1.5
• Support for JMF (Java Media Framework) and Flash (by JMF).
• File upload.
• Enhanced link traversal.
• "disabled" and "readonly" attributes of form elements are supported.
• "onFocus" and "onBlur" attributes are supported.
• Enhanced applet security (check http://tiki-lounge.com/~ben/msie_bug/ for details).
• Support for XML/XHTML documents.
• Support for namespaces.
• Support for SSL.
• API of the script language framework published.
• The com.netclue.dom.base package: foundataion of DOM and Javascript implementation.
• New API to access and interact with submit forms.
• New API to listen to message events.
• New API to enumerate hyperlinks.
• Standard-compliant extensions to display menu, tree views and tab panels in XML/XHTML documents [PET: Presentation Extension Tags]
• Importing custom UI components to XML/XHTML documents [PET: Presentation Extension Tags].
• Bookmark API
• New API (PopupCallback) to listen to mouse right click.

Разумеется, полный список возможностей очень большой так, что если вас это заинтересовало, то сходите на сайт производителя и посмотрите пресс-релизы, в них есть подробное сравнение возможностей каждой версии. Кроме того, сам архив для загрузки занимает мало места, так x-версия заняла всего 1.4 Mb (вместе с документацией и примерами), что по нашим временам вообще смешная цифра. Итак, я скачал данный архив, установил, начал разбираться и в одном из примеров я увидел удивительную вещь. Это был пример проектирования формы интерфейса, в котором описание внешнего вида задавалось с помощью тегов html и тегов PET (Presentation Extension Tags).

PET (Presentation Extension Tags) представляют собой набор тегов, которые были разработаны с целью расширения представительских и функциональных возможностей. Например, PET позволяет вам импортировать в документы XML\XHTML свои собственные элементы управления, кроме того, он содержит набор преопределенных тегов для создания и отображения деревьев, меню, закладок, причем, что самое интересное, существует возможность совместить Java-компоненты вместе с элементами html/css  и сделать по-настоящему удобный и красивый интерфейс пользователя. Если вы подумали что предлагаемое решение это какой-то клон Java applets, то, разумеется, нет, все гораздо удобнее и проще, но хватит голых слов. В качестве небольшой иллюстрации приведу пример создания несложной формы, и то, как она будет выглядеть на экране. Правда сначала стоит решить вопрос, где разработанный нами документ xhtml будет отображаться. Ниже я привожу пример простейшего браузера основанного на использовании библиотек Clue WBC.

package newinterface;
import java.io.*;
import java.net.*;

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

import com.netclue.xml.gui.*;


public class MegaBrowser extends JFrame {
// самый главный компонент
//который и служит для отрисовки документов html
  XContainer browser;

// строка для ввода адреса
  JTextField txtURL;

// кнопка перехода
  JButton btnGo;

  public MegaBrowser() {

// вызываем конструктор предка с параметром
//задающим заголовок окна
    super ("MegaBrowser");

// и начинаем проектировать
//интерфейс пользователя
    JPanel navi = new JPanel( new BorderLayout() );

    navi.add( new JLabel("Адрес: "), BorderLayout.WEST );
    navi.add ( btnGo = new JButton
     ("Переход") , BorderLayout.EAST);

    txtURL = new JTextField();
// установка обработчика событий
    btnGo.addActionListener( new ActionListener()  {

      public  void  actionPerformed(ActionEvent e)  {
        try  {
          URL  url = new URL( txtURL.getText() );
          browser.setPage( url );
        }
        catch (IOException ex)  { ex.printStackTrace();}
      }
    });

    navi.add( txtURL, BorderLayout.CENTER );

    browser = new XContainer();

    Container  c = getContentPane();
    c.setLayout(new java.awt.BorderLayout());
    c.add( navi, BorderLayout.NORTH);
    c.add( browser, BorderLayout.CENTER);
// операция завершения приложения по
//закрытию главной формы
    setDefaultCloseOperation(EXIT_ON_CLOSE);
  }

  static public void main(String args[]) {
// создаем форму браузера
    JFrame  top = new MegaBrowser();

    java.awt.Dimension d=
     java.awt.Toolkit.getDefaultToolkit().getScreenSize();

// устанавливаем размеры даной формы
    top.setSize( (int)(d.getWidth()* 0.66),
                 (int) (d.getHeight() - 25));

// также устанавливаем ее местоположение на экране
    top.setLocation( 0 , 0);

// и отображаем ее
    top.show();
  }
}

Если данный класс скомпилировать и запустить, то можно увидеть нечто подобное.

Если вам захочется, то пример данного браузера можно развить далее, добавив нужные элементы управления, историю, полоску прогресса загрузки, строку статуса, благо это не сложно и есть довольно неплохие примеры в архиве с самим Clue WBC. Но нас это пока не интересует наша самая главная задача — это создать файл с использованием тегов PET.

В качестве демонстрации возможностей PET и Netclue WBC приведу пример создания несложного приложения в котором демонстрируются возможности PET по работе с html/css. Данный пример представляет собой несложную программку для проведения психологического тестирования. Конкретное направление примера не принципиально, с тем же успехом и незначительными усилиями вы можете  начать писать собственную версию javaoffice и javawindows. Нас интересует только демонстрация возможностей Netclue WBC.

А теперь прошу вас ответить на следующий вопрос: как вы думаете, сколько времени у вас заняло проектирование подобного интерфейса с использованием стандартного набора компонент swing. Без ложной гордости скажу, что разработка подобного интерфейса заняла у меня всего 10 минут (из которых я около половины времени вспоминал основные свойства css). Прошу отметить, что пока это всего лишь шаблон будущего приложения, в нем нет реальной обработки информации. Правда те действия, которые задействуются с помощью стандартных средств http (в вышеприведенном примере это форма для подписки на рассылки) работать, разумеется, будет.

А теперь я приведу исходный код примера. Только сразу хочу предупредить что использовать PET можно только в документах XHTML. Так что никакого плохого html с незакрытыми тегами, пропущенными кавычками для атрибутов, перепутанными вложенными тегами и прочими признаками “опытного” дизайнера, что будет приводить к неправильному отображению документов или вообще ошибкам (только не говорите, что когда вы пишите на Java с использованием swing можно не ставить точки с запятыми, путать названия переменных, не соблюдать регистр и придумывать собственные версии операторов).

<html>

<body>

<center>

<p style='color: red;'><b>
Прикладная практическая психология</b></p>

</center>

<form  action='/cgi-bin/act.pl'>

  Подписаться на рассылку новостей <input type='text'
name='email'/> <input type='submit'
value='подписаться'/>

</form>

<pet:tabPane width="500" frameheight="400">

  <tab>

     <tabLabel>Введение в основы</tabLabel>

     <tabFrame>

        <html:h1> Мы предлагаем вам ответить
	на некоторые вопросы нашей анкеты
</html:h1>

            <html:span style='

              font-family: Arial, Helvetica, sans-serif;

              font-size: 12pt; background-color: #9999FF;'

        >Определение уровней стресса на рабочем месте</html:span>

        <html:br/>

        <html:p style='color: blue;'>Используйте данную анкету для
        определения уровней
        стресса при выполнении вашей сегодняшней работы.
        Оценки, близкие к одному из краев шкалы, свидетельствуют о том,
        что уровень стресса либо недостаточен, либо избыточен,
        т.е. в настоящее время отсутствует соответствие между исполнителем
        и работой. Подумайте, можете ли вы улучшить ситуацию и кто бы мог вам
        в этом помочь. Иными словами, не стоит ли вам поискать варианты изменения
        ситуации на работе?

         </html:p>

     </tabFrame>

  </tab>

  <tab>

     <tabLabel><html:i>Вопрос # 1</html:i></tabLabel>

     <tabFrame>

      <html:table width='400' border='1'>

       <tr>

           <td width='200' bgcolor='yellow'>Работа
гарантирована, карьерное продвижение предсказуемо и определено </td>

               <td width='200' bgcolor='magenta'> Положение в
организации не гарантировано и сама организация не надежна</td>

       </tr>

       <tr>

           <td colspan='2' align='center'>

                        <form  action='/cgi-bin/act.pl'>

                          <input type='radio' name='first'
value='1' /> 1

                          <input type='radio' name='first'
value='2' /> 2

                          <input type='radio' name='first'
value='3' /> 3

                          <input type='radio' name='first'
value='4' /> 4

                          <input type='radio' name='first'
value='5' /> 5

                          <input type='radio' name='first'
value='6' /> 6

                          <input type='radio' name='first'
value='7' /> 7

                        </form>

           </td>



       </tr> </html:table>

     </tabFrame>

  </tab>

  <tab>

     <tabLabel>Итоги тестирования</tabLabel>

     <tabFrame><html:h4>По результатам ваших ответов
     мы можем сделать вывод ...</h4></tabFrame>

  </tab>

</pet:tabPane>

</body>

</html>

Разберем исходный код для данного примера. Большей частью исходный код файла напоминает html, заисключением встречающихся специфических тегов PET которые воспринимаются и по-особому интепретируются библиотекой Clue WBC. Для создания набора закладок используют тег <pet:tabPane> . Для тех, кто не знаком с XML и namespaces поясню что перед непосредственно именем тега идет префикс пространства имен в котором определен данный тег. Данный тег имеет следующие атрибуты:

width — ширина создаваемого набора закладок.

frameheight — высота каждой из закладок.

После определения набора закладок можно создать и перечисление непосредственных описаний закладок. Описание закладки выполняется с использованием тега <tab> , кстати, в данном случае я не указываю префикс пространства имен pet т.к. данный тег не существует вне тега tabPane и наследует пространство имен для своего родительского элемента. Каждый элемент tabPane содержит вложенные элементы:

tabLabel — данный элемент задает название для закладки. Кстати, важно отметить, что данный элемент может содержать теги html, следовательно, можно задать особое оформление для каждой из названий закладок. Что и было продемонстрировано в примере, так для второй закладки ее название было оформлено наклонным шрифтом.

tabFrame — элемент, непосредственно описывающий содержимое панели, данный элемент может содержать любую комбинацию тегов html и pet.

Внутри набора закладок вы можете размещать любые элементы html/xml разумеется за исключением html , body , head , frameset , frame .

Среди стандартных предопределенных тегов pet внимание заслуживают теги для создания дерева элементов. В приведенном ниже примере будет создано дерево служащее для проведения не очень серьезного тестирования. Сначала я приведу исходный кода данного примера.

<html>

<body>

<div align='right'> <b>
Институт несовременных знаний и
неправильных исследований</b></div>

Ответьте пожалуйста на вопросы следующей анкеты

<pet:tree height='200'
width="200" bgcolor="#cacaca"
style="border:2px double green" title="Анкета">

<tnode>Что вам нравится

<tnode>Ваш любимый цвет
  <tnode>Зеленый</tnode>
  <tnode>Красный</tnode>
  <tnode>Синий</tnode>
</tnode>

<tnode>Ваш любимый напиток
  <tnode>Чай</tnode>
  <tnode>Кофе</tnode>
  <tnode>Кефир</tnode>
</tnode>

</tnode>

<tnode>Любимая книжка
  <tnode>Приключения Буратино</tnode>
  <tnode>Руководство программиста для процессоров IA32</tnode>
  <tnode>Я книжки не читаю, а смотрю кино</tnode>
  </tnode>

</pet:tree>

</body>

</html>

А вот и пример отображения данного документа xhtml.

Пока еще не очень красиво, не так ли? Что же пришла пора вспомнить, что мы можем сочетать теги html/css и элементы управления pet. В качестве несложной демонстрации добавим к элементам нашего дерева цветовое и шрифтовое оформление, и парочку ссылок.

Только не обвиняйте меня в отсутствии вкуса в оформлении данного примера. Все что было сделано, было сделано только для иллюстрации. А вот и исходный код. Хотя в данном примере есть фрагмент кода устанавливающий для ссылки с названием цветов стиль курсора, который правда пока игнорируется но тем не менее возможности просто удивительные. Кстати я вам не надоел с вопросом, сколько времени заняло у вас создание подобного примера только используя swing. Я думаю, что наверное немножко больше тех 10 минут которые потратил я. Для иллюстрации того, что поддержка JavaScript сделана на должном уровне я для ссылок использовал не простое перенаправление по указанному адресу, а фрагмент вроде “javascript: немножко кода”. Проверьте, все работает просто замечательно.

<html>

<body>

<div align='right'> <b>
Институт несовременных знаний и
неправильных исследований</b></div>

Ответьте, пожалуйста, на вопросы следующей анкеты

<pet:tree height='200' width=’200’ bgcolor="#cacaca"
style="border:2px double green" title="Анкета">

<tnode>Что вам нравится

<tnode>Ваш любимый цвет

  <tnode><b style='color:
green'>Зеленый</b></tnode>

  <tnode><a style='cursor: text; color: red'
href='javascript:alert("Красный цвет — ну это такой цвет, который
...")'>Красный </a></tnode>

  <tnode><a
href='javascript:open("greenColor.htm")'>Синий
</a></tnode>

</tnode>

<tnode>Ваш любимый напиток

  <tnode><span style='background-color:
yellow'>Чай</span></tnode>

  <tnode><h2>Кофе</h2></tnode>

  <tnode><form> Кефир <input type='text' name='kind'
value='boo'/> Введите название молокозавода
поставляющего данный напиток богов</form></tnode>

</tnode>

</tnode>

<tnode>Любимая книжка

  <tnode> <img src='e.gif' width='40'
height='40'/>Приключения Буратино</tnode>

  </tnode>

</pet:tree>

</body>

</html>

Синтаксис используемых тегов pet очень прост. Дерево это множество узлов вложенных друг в друга. Для создания узла дерева используют тег tnode , и для создания самого контейнера дерева тег pet:tree , данный тег также имеет некоторое количество атрибутов. Прежде всего, это атрибуты, задающие размеры дерева – width , который служит для изменения размеров дерева по ширине. Интересный атрибут foldable если его значение false , то дерево будет уже развернуто и его нельзя будет сворачивать. Не стоит забывать, что к любому узлу дерева можно применить стиль CSS и это будет работать. Например, код определяющий узел «Любимый цвет» мог выглядеть так: <tnode style='color:red'>Что вам нравится … . В общем единственным ограничением на пути конструирования интерфейса может стать только здравый смысл и пожелания заказчика.

Последнее что позволяют создавать стандартные теги PET это меню. Хотя проектирование меню на Java/swing не сложно, но если мы решили начать проектировать весь интерфейс на основе PET\html\css\xml, то могу вспомнить какие сложности представляет создание качественных многоуровневых меню html, координаты которых не забиты жестко с расчетом на конкретные размеры экрана и разрешение и соответственно расползающиеся при несоблюдении данного набора требований.

Вот пример кода PET.

<html>

<body>

Убедитесь в невероятном удобстве
системы управления нашим мегаприложением

<pet:menu>
  <mitem>Файл
    <menu>
      <mitem style='color: red'>Открыть</mitem>
      <mitem style='background-color: blue'>Сохранить</mitem>
      <mitem> <img src='e.gif'/>Сохранить как</mitem>
      <mitem>Повторное открытие <menu>
      <mitem>Формула воды H<sup>2</sup>O</mitem>

      <mitem style='text-decoration: underline'>Документ_2</mitem>
      <mitem> <a href='doc3.doc'>Документ_3</a></mitem>
      </menu>

      </mitem>
      <mitem>Закрыть</mitem>

    </menu>
  </mitem>
  <mitem>Edit
    <menu>
      <mitem style='text-decoration:line-through'>Copy</mitem>
      <mitem>Paste</mitem>
    </menu>
  </mitem>
</pet:menu>
</body>
</html>

А вот и пример исполнения данного фрагмента кода. Результат выполнения трудно назвать идеальным. Присутствуют некоторые артефакты. Но цена за подобную расширяемость (ведь вы не забыли, что исходные файлы для данного примера это просто текстовые документы, которые могут разрабатывать неискушенные в программировании пользователи, да и вы сами можете создавать подобные файлы на лету и тут же их обрабатывать) это очень не большая цена.

Теперь рассмотрим действительно интересную вещь, как расширить возможности тегов pet за счет внедрения собственных нестандартных тегов служащих для добавления произвольных элементов управления. Поставим перед собой задачу внедрить в интерфейс нашего приложения диалог выбора цвета. В библиотеке swing для этого используют класс JColorChooser . Clue WBC не предъявляет никаких особых требований к классу визуального компонента. За исключением того, что класс должен быть наследован от класса java.awt.Component и должен иметь конструктор по-умолчанию.

Вот пример кода.

<html>

<body>

Вот несложный пример внедрения в нашу
страницу XHTML элемента для выбора цвета<br/>

<pet:iui id="jchooser"
 width="300" height="300"

    classname="javax.swing.JColorChooser"/>

</body>

</html>

А вот и пример результата выполнения данного документа xhtml.

С целью иллюстрации того факта, что не существует принципиальных ограничений на импортируемые компоненты я разработал простой пример кнопки-часов на которой отображается текущее время.

Пример исходного кода класса задающего кнопку:

package newinterface;

import java.awt.*;
import java.util.*;
import javax.swing.*;


public class XTimer extends JButton {

  private java.awt.Color color = Color.RED;
  class Bee extends Thread{
    public void run (){
      while (true){
        setForeground(color);
        setText (new Date () .toString() );

    try {
          Thread.sleep(1000);
        }
        catch (InterruptedException ex) {}
      }
    }
  };

  public XTimer (){
    new Bee ().start();
  }

  public java.awt.Color getColor() {
    return color;
  }

  public void setColor(java.awt.Color color) {
    this.color = color;
  }
}

Теперь посмотрим пример файла xhtml.

<html>

<body>

Вот пример кнопки часов

<br/>

<pet:iui id="xti"
         width="250" height="50"
         classname="newinterface.XTimer"/>
</body>
</html>

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

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

Теперь я приведу пример измененного кода кнопки-часов и пример нового кода файла в котором содержится описание интерфейса.

package newinterface;

import java.awt.*;
import java.awt.event.*;
import java.util.*;
import javax.swing.*;

public class XTimer extends JButton {
  private java.awt.Color color = Color.RED;

  class Bee extends Thread{
    public void run (){
      while (true){
        setForeground(color);
        setText (new Date () .toString() );

        try {
          Thread.sleep(1000);
        }
       catch (InterruptedException ex) {}
      }
    }
  };

  public XTimer (){
    addActionListener( new ActionListener () {

      public void actionPerformed (ActionEvent ae){
        JOptionPane.showMessageDialog (XTimer.this ,
    "Пользователь нажал на кнопку");
      }
    });

    new Bee ().start();
  }

  public java.awt.Color getColor() {
    return color;
  }

  public void setColor(java.awt.Color color) {
    this.color = color;
  }

}

<html>

<body>

Вот пример кнопки часов
которая реагирует на действия
пользователя<br/>

<pet:Control classname="newinterface.XTimer">
  <listen event="action" sourceID="xti"/>
</pet:Control>

<pet:iui id="xti" width="250" height="50"
  classname="newinterface.XTimer"/>
</body>

</html>

В данном примере кода необходимо четко отделять описание элемента управления и списка событий на которые он должен реагировать, это делается с помощью элемента Control . Обратите внимание на значение атрибута sourceID оно равно идентификатору непосредственно элемента управления которое мы указали с помощью элемента iui и его атрибута id .

Разумеется, компания Netclue не открывала Америку, идея создания подобных систем существовала давно. За прошедшие несколько лет появилось несколько решений, которые имеют практическую реализацию и даже идет процесс принятия в компетентных организациях решений по их стандартизации.

На слуху у всех проект “XUL” (XML-based User interface Language). Данный язык служит для описания на XML-производном языке интерфейса некоторого приложения. Данный документ подается на вход некоторому компоненту для отрисовки. Такой подход имеет большое применение особенно в сфере тонких и сверхтонких клиентов (как ни говори, но идея достаточности для запуска приложения только операционной системы и браузера очень привлекательна, а если посмотреть на рынок мобильных устройств, то становится понятно, что данная идея имеет очень большие перспективы). Удобно его применение для разработки непрофессиональным программистом дизайна приложения, настройки его для конкретной аудитории пользователей. В буржуинии, где думают о равноправии, в том числе для лиц с ограниченными возможностями, это также имеет большое значение. Путем несложных манипуляций интерфейс приложения можно сделать максимально дружелюбным и учитывающим особенности конкретного (может быть даже каждого клиента). И чтобы не говорили недруги хороший интерфейс это большая половина программы.

Существующий проект XUL завязан на использовании Mozilla. Интерфейс данного браузера и соответственно производных от него решений строится именно на использовании подобного подхода. Код XUL содержится в файлах с расширением .xul и указывается при старте Mozilla с помощью специальной схемы: chrome://. . В качестве примера приведу следующую схему chrome://communicator/content/newi.xul . Данная схема определяет, что внешний вид окна коммуникатора будет определяться содержимым файла newi.xul . Большое количество примеров и подробную документацию можно найти на сайте http://www.xulplanet.com/tutorials/xultu/ .

Разумеется, что писать файлы с описанием интерфейса руками уже не обязательно, есть проект XUL maker, информация о котором заинтересовавшиеся могут получить на MozDev. Сейчас вышла версия 0.40, и как вы тоже догадываетесь, сам этот XULMaker тоже написан на основе Mozilla, разработчики пользующимися такими популярными  RAD как Delphi, Cbuilder,Jbuilder найдут общие черты. По крайней мере, проектирование очень похоже.

Подобный подход построения приложений на основе специально созданного ядра и надстроек, использующих его возможности далеко не нов, даже тот msword, в котором я сейчас набираю текст, построен на этом принципе: ядро его написано на c|c++, а большая часть интерфейсных функций реализована на vba. Доказательство этого факта мне рассказал один мой хороший знакомый, у которого несколько лет назад произошла занимательная история: он столкнулся с работой вируса, который нарушал работоспособность vba и  в результате, большинство пунктов меню word выдавало сообщение типа: не могу выполнить макрос, имя которого свидетельствовало об имени данного пункта и выполняемой им задаче.

Несколько лет назад, когда Mozilla только появлялась, существовало достаточно скептическое отношение к этому подходу и, особенно, к амбициям Mozilla. Но на данный момент, похоже, лед тронулся, и на сайте mozdev вы можете увидеть достаточно большой список проектов, я приведу только его часть:

• Archangel — RGTP client
• Bazil — A multicolumn filemanager (FTP, SCP is to come)
• CaScadeS — A stylesheet editor for Composer
• Chameleon — Mozilla Theme Authoring Tool
• Checky — An Interface to online Validators and Checkers
• Fabula — Educational language tool based on Mozilla
• getmoz — Get bleeding edge Mozilla easily
• Hovercraft — mozdev upgrade project
• iPilot — Mini browser for embeded systems
• langmix er- A tool to translate words for words of any webpage
• MDEE — Mozilla Development Environment for Emacs
• Meow — Cross-platform file manager for Mozilla
• MESS — Mozilla Enabled Site System
• MOJI — Lecture guides for kanji in Japanese web pages
• mozcvs — XUL interface for browsing a CVS tree
• MozIDE — Mozilla-based Integrated Development Environment
• MUDzilla — Simple telnet client for MUDs, MUSHes, MOOs, etc.
• MySQLClient — MySQL client application
• XP Server — Apache/XPCOM based app server

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

Разработкой проектов на базе XUL и Mozillaзанимаются не только энтузиасты, но и вполне серьезные компании, например,  OEone. Приведу небольшой фрагмент с их сайта.

Больше чем просто операционная система (данный набор решений поставляется и работает в среде redhat linux, поэтому они делают столь сильное заявление). HomeBase SUITE это уникальная среда которая сочетается с мощью RedHat linux и браузера Mozilla и добавляет широкий диапазон полностью проинтегрированных с средств и основанный на базе web технологий интерфейс.  HomeBase SUITE  открывает для вас всю мощь и удобство для работы с linux.

Для пользователей Red Hat Linux OS HomeBase DESKTOP добавляет радикально новый интерфейс и преподносит всю мощь linux с использованием широкого набора инструментов.

Для тех кто с linux на «ты» не составит сложности зайти на сайт этой организации и скачать HomeBase SUITE. Благо раздается она бесплатно.

Существует проект по реализации на базе XUL и Mozilla framework-а  для разработчиков Java, который идет как “open-source”.  Данный проект вышел за рамки планирования и уже имеет конкретные результаты, так исходные коды и скомпилированный код можно загрузить с сайта www.jxul.org . Правду говоря, на тот момент, когда я их посещал в последний раз, часть сайта была недоступна.

Существует также интересные решения, преследующие цели близкие тем, что решает jxul, и netclue WBC, но при этом идущие от обратного.

Предположим, что у нас есть готовое приложение Java, развернутое на некотором сервере, использующее  базы данных. Задача в том, что необходимо дать возможность клиентам работать с данным приложением. В чем же проблема, скажет любой более или менее знающий программист Java, ведь существует много подходов решающих данную задачу. Можно написать клиентскую часть и организовать взаимодействие с использованием RMI. Можно создать Java applet загружающийся с сервера и общающийся с сервером с использованием вызовов по протоколу HTTP. В отдельных ситуациях можно найти решение с использованием corba.

Только зачем? Слишком громоздко. Да и идее сверх-тонких клиентов это не очень соответствует, в то время как поддержка сети internet/intranet и протоколов HTTP сейчас реализована для любой платформы и операционной системы. Для клиента достаточно иметь на машине только браузер с поддержкой html/css/dhtml, и можно делать прямые вызовы к серверу, на котором исполняется сервлет или страница jsp которая генерирует страницу html для отображения.

Таким образом, именно на сервере сосредоточена вся логика, а на стороне клиента выполняется только визуализация набора данных. Да, это хорошо и правильно, но как согласуется с нашей целью дать множеству клиентов доступ к уже существующему приложению с графическим интерфейсом на основе swing/awt с минимальными затратами и требованиями к инсталляции дополнительного программного обеспечения на стороне клиента.

Компания CreamTec предлагает собственное решение данной проблемы. Основные возможности разрабатываемого ими продукта webcream (перевод документации идущей с пакетом):

• Развертывание уже существующих Java applets и desktop приложений с использованием html с незначительными изменениями.
• Для разработчика не требуется знаний html/css/dhtml/javascript (что то у меня сомнения, я еще не видел ни одного продукта, который не требовал доработки).
• Поддержка dhtml, css2, javascript 1.2
• Поддержка основных браузеров, таких как ie, netscape, и любого браузера который поддерживает dhtml.
• Нет необходимости устанавливать дополнительное ПО на стороне клиента.
• Отображение Java кода в виде страниц html, представление графического интерфейса swing как html, представление Java applets в виде страниц html.
• Существует возможность проводить детальную доводку автоматически создаваемых webcream-ом страниц используя css и javascript.
• Управление и настройка процессом рендеринга
• Оптимизация процессом работы приложения с множеством клиентов.
• Возможность создания pool ресурсов.
• Webcream — только Java решение.
• JDK 1.2, 1.3 и 1.4 поддержка.
• Поддержка модели событий и слушателей.
• Создание кластеров из jvm для повышения производительности и масштабируемости.
• Интернациализация.

Пора подвести итог. Данная статья начиналась как «поделиться опытом, и познакомиться с интересным продуктом одной хорошей компании», но благодаря наличию обратной связи с организаторами «www.javable.com», данная статья выросла из коротких штанишек узкого обзора и уже представляет более комплексный обзор подходов к проектированию веб-приложений, разрабатываемых и исполняющихся в некоторой среде, которые с ней общаются с использованием несложного xml-производного языка. Кратко, но рассмотрены альтернативные подходы, прилагаются отлаженные примеры кода  с иллюстрацией их работы.

Рассмотренный подход к проектированию интерфейса не претендует на роль универсального решения применимого в любой ситуации, необходимо понимать, что преимущества использования Clue WBC проявляются при создании несложных приложений с незамысловатой логикой поведения. Основное удобство данного подхода в четко прослеживающемся отделении определений компонент и логики их поведения (обработки событий) с инкапсуляцией внутри JavaBean, и отделение описания расположения данных элементов управления. В будущем я буду внимательно наблюдать за развитием данного продукта, и кто знает, может быть через несколько месяцев я буду использовать именно данный подход при создании своих приложений. По-крайней мере право на жизнь данная технология право имеет.

• http://www.devx.com/ — замечательный сайт посвященный профессиональному программированию в том числе на Java и xml.
• http://www.xulplanet.com — название говорит за себя. Если вы действительно заинтересованы XUL, то вам определенно сюда.
• www.jxul.org — информация о jxul.
• www.mozdev.org — портал посвященный разработкам на основе mozilla.
• www.w3c.org — если  вы не знаете чей это сайт, вам не стоит это читать;)
• www.webrenderer.com   — интересный продукт, пока рановат для серьезного применения. По-крайней мере пока. Хотя на посланное им письмо с вопросами ответили оперативно.  Ждем-с…
• www.netcluesoft.com    — Автор и разработчик. Им бы еще для популяризации своих решений сделать качественную поддержку клиентов и разработчиков, даже таких халявщиков как я. А то пишешь им, пишешь — а ответа нет.