WEDA - Creating pages

Настраиваем web приложение для работы с Tapestry

Перед тем как настраивать web приложение для работы с Tapestry удалим файл index.jsp из ветки Web Pages.

Для того чтобы создать Tapestry web приложение необходимо сделать следующее:

Отредактировать web.xml
Cоздать конфигурационный файл tapestry приложения budget.application

Редактируем web.xml. Вот так должен выглядеть данный конфигурационный файл


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
    <display-name>Семейный бюджет</display-name>
    <description>
        Приложение для учета и котроля за денежными средствами семейного бюджета
    </description>
    <filter>
        <filter-name>redirect</filter-name>
        <filter-class>org.apache.tapestry.RedirectFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>redirect</filter-name>
        <url-pattern>/</url-pattern>
    </filter-mapping>    
    <listener>
        <listener-class>org.weda.servlet.SessionListener</listener-class>
    </listener>
    <servlet>
        <servlet-name>budget</servlet-name>
        <servlet-class>org.apache.tapestry.ApplicationServlet</servlet-class>
        <init-param>
            <param-name>debug</param-name>
            <param-value>0</param-value>
        </init-param>
        <load-on-startup>0</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>budget</servlet-name>
        <url-pattern>/app</url-pattern>
    </servlet-mapping>    
    <session-config>
        <session-timeout>5</session-timeout>
    </session-config>
</web-app>

Настраиваем budget.application. Данный конфигурационный файл должен находиться там же где и web.xml т.е. папке WEB-INF ветки Web Pages

Вот так дожен выглядеть данный конфигурационный файл


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE application
      PUBLIC "-//Apache Software Foundation//Tapestry Specification 4.0//EN"
      "http://jakarta.apache.org/tapestry/dtd/Tapestry_4_0.dtd">

<application>
    <library id="contrib" specification-path="/org/apache/tapestry/contrib/Contrib.library"/>
    <library id="weda" specification-path="/org/weda/tapestry/component/Weda.library"/>
    <meta key="org.apache.tapestry.home-page" value="MoneyOperationList"/>
    <meta key="org.apache.tapestry.template-encoding" value="Cp1251"/>
    <meta key="org.apache.tapestry.output-encoding" value="utf-8"/>
</application>

Создаем вспомогательные компонеты Border и Menu

Перед созданием страниц создадим два вспомогательных tapsetry компонента которые облегчат создание страниц.

Компонент Border. Для создания этого компонента необходимо создать два файла:

Border.html - шаблон компонента
Border.jwc - спецификация компонента

Файлы должны располагаться там же где и web.xml

Border.html

                    
<html>
<span jwcid="$content$">   
<span 
    jwcid="@Shell" stylesheet="asset:stylesheet" 
    title="Семейный бюджет"
    doctype="ognl:null"
>
    <body jwcid="@Body">
        <span jwcid="@RenderBody" />
    </body>
</span>
</span>
</html>

Border.jwc

                    
<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE component-specification PUBLIC
  "-//Apache Software Foundation//Tapestry Specification 4.0//EN"
  "http://jakarta.apache.org/tapestry/dtd/Tapestry_4_0.dtd">

<component-specification allow-informal-parameters="no">
    <asset name="stylesheet" path="classpath:/META-INF/stylesheet.css"/>
</component-specification>

По анологии создаем компонент Menu

Menu.html

                    
<span jwcid="@Border">
    <table class="tabs" cellspacing="0" border="0" cellpadding="10">    
        <th>&nbsp;
            <span 
                jwcid="@PageLink" page="MoneyOperationList" 
                disabled="ognl:page.pageName.equals('MoneyOperationList')"
            >
                Денежные операции
            </span>
        </th>
        <th>&nbsp;
            <span 
                jwcid="@PageLink" page="OperationItemList" 
                disabled="ognl:page.pageName.equals('OperationItemList')"
            >
                Статьи денежных операций
            </span>
        </th>
    </table>
    <br/>
    <span jwcid="@RenderBody" />
</span>

Menu.jwc

                    
<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE component-specification PUBLIC
  "-//Apache Software Foundation//Tapestry Specification 4.0//EN"
  "http://jakarta.apache.org/tapestry/dtd/Tapestry_4_0.dtd">

<component-specification allow-informal-parameters="no"/>

Создаем страницу для просмотра денежных операций

Для создания страницы необходимо создать файл MoneyOperationList.html в ветке Web Pages.

В результате должны получить следующее

                    
<span jwcid="@Menu">
    <span jwcid="@weda:ActionPanel" position="top" renderActionAsLink="ognl:true">
        <span jwcid="@weda:Table" tableModel="weda.table-model:moneyOperation-view">
            <tr>            
            <span 
                jwcid="@weda:EditorGroup" 
                modelGroup="weda.editor-model-group:moneyOperation-filter"
                exceptionOnEditorError="ognl:true"
            >
                <td/>
                <td>
                <span jwcid="@weda:BaseEditor" modelName="id" style="width:100%"/>
                </td>
                <td>
                <span jwcid="@weda:BaseEditor" modelName="operationDate" style="width:100%"/>
                </td>
                <td>
                <span jwcid="@weda:BaseEditor" modelName="amount" style="width:100%"/>
                </td>
                <td>
                <span jwcid="@weda:BaseEditor" modelName="operationItem.operationType" style="width:100%"/>
                </td>
                <td>
                <span jwcid="@weda:ActionPanel" position="right" renderActionAsLink="ognl:true">
                    <span 
                        jwcid="@weda:BaseEditor" modelName="operationItem" 
                        valueEditorPageName="OperationItemList" style="width:100%"/>
                </span>
                </td>
            </span>            
        </span>
    </span>
</span>

Обратим внимание на некоторые детали.

То что название страницы заканчивается суфиксом List не случайно. Дело в том что после выполнения действия, например нажатие на кнопку Редактировать WEDA Framework должен принять решение - на какую страницу перейти? Так вот в случае рассматриваемого нами примера (нажатие на кнопку "Редактировать") WEDA откроет страницу MoneyOperationEdit т.е. заменит суфикс List на Edit. Подробнее о WEDA Workflow можно узнать в руководстве пользователя в разделе Workflow.
Компонент weda:ActionPanel позволяет собрать и отобразить в виде конопок все действия зарегистрированные для компонентов находящихся внутри элемента <span jwcid=@weda:ActionPanel ...
Компонент weda:Table позволяет отобразить содержимое табличной модели в виде таблицы. В этом случае компонент работатет с табличной моделью moneyOperation-view которую мы создали ранее.
Компонент weda:EditorGroup является группирующим элементом для редакторов (в нашем случае это компоненты weda:BaseEditor). Компонент EditorGroup должен прикрепляться к группе моделей редактирования (в нашем случае это группа моделей для редактирования элементов фильтра moneyOperation-filter)
Выбор значения для модели данных operationType будет производиться на странице OperationItemList. Это задано при помощи атрибута valueEditorPageName. Редактор "обернут" в дополнительный компонент weda:ActionPanel с целью появления действий (в виде кнопок) справа от поля редактирования а не вверху вместе с остальными действиями.

Создаем страницу для создания/редактирования денежной операции

Для создания страницы необходимо создать файл MoneyOperationEdit.html в ветке Web Pages.

В результате должны получить следующее

                    
<body jwcid="@Border">
    <h3 style="border-bottom: 1px solid black">Редактирование информации о денежной операции</h3>
    <span jwcid="@weda:ActionPanel" position="bottom" renderActionAsLink="ognl:true">
        <br/>
        <span 
            jwcid="@weda:EditorGroup" modelGroup="weda.editor-model-group:moneyOperation-edit"
        >
            <table border="0" cellpadding="3px">
                <tr>
                    <td>
                        <span jwcid="@weda:EditorLabel" modelName="operationDate"/>
                    </td>
                    <td>
                        <span jwcid="@weda:BaseEditor" modelName="operationDate" style="width:100%"/>
                    </td>
                    <td>
                        <span jwcid="@weda:EditorError" modelName="operationDate"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span jwcid="@weda:EditorLabel" modelName="amount"/>
                    </td>
                    <td>
                        <span jwcid="@weda:BaseEditor" modelName="amount" style="width:100%"/>
                    </td>
                    <td>
                        <span jwcid="@weda:EditorError" modelName="amount"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span jwcid="@weda:EditorLabel" modelName="operationItem"/>
                    </td>
                    <td>
                        <span 
                            jwcid="@weda:ActionPanel" 
                            position="right" style="width:100%"
                            renderActionAsLink="ognl:true"
                        >
                            <span 
                                jwcid="@weda:BaseEditor" 
                                modelName="operationItem"
                                valueEditorPageName="OperationItemList"
                                style="width:100%"/>
                        </span>
                    </td>
                    <td>
                        <span jwcid="@weda:EditorError" modelName="operationItem"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span jwcid="@weda:EditorLabel" modelName="operationDescription"/>
                    </td>
                    <td>
                        <span 
                            jwcid="@weda:BaseEditor" modelName="operationDescription" 
                            style="width:100%"
                            cols="ognl:30" rows="ognl:5"/>
                    </td>
                    <td>
                        <span jwcid="@weda:EditorError" modelName="operationDescription"/>
                    </td>
                </tr>
            </table>
        </span>
        <br/>
    </span>
</body>

Обратим внимание на некорые детали. Есть много схожего между этой страницей и предыдущей:

Обе страницы используют компонент weda:ActionPanel для отображения доступных действий.
Так же в обоих страницах используется компонент weda:EditorGroup. Только в данном случае компонент ссылается на группу моделей редактирования с именем moneyOperation-edit

По сравнению с предыдущей страницей появилось два новых компонента

weda:EditorLabel который показывает название свойства (помните параметр displaName в анотации @Description)
weda:EditorError который показывает ошибку связанную с указанной в атрибуте modelName моделью данных.

Создаем страницу для просмотра денежных статей

Для создания страницы необходимо создать файл OperationItemList.html в ветке Web Pages.

В результате должны получить следующее

                    
<span jwcid="@Menu">
    <span jwcid="@weda:ActionPanel" position="top" renderActionAsLink="ognl:true">
        <span jwcid="@weda:Table" tableModel="weda.table-model:operationItem-view">
            <tr>            
            <span 
                jwcid="@weda:EditorGroup" 
                modelGroup="weda.editor-model-group:operationItem-filter"
                exceptionOnEditorError="ognl:true"
            >
                <td/>
                <td>
                <span jwcid="@weda:BaseEditor" modelName="id" style="width:100%"/>
                </td>
                <td>
                <span jwcid="@weda:BaseEditor" modelName="operationType" style="width:100%"/>
                </td>
                <td>
                <span jwcid="@weda:BaseEditor" modelName="itemName" style="width:100%"/>
                </td>
            </span>            
        </span>
    </span>
</span>

Создаем страницу для редактирования денежной статьи

Для создания страницы необходимо создать файл OperationItemEdit.html в ветке Web Pages.

В результате должны получить следующее

                    
<body jwcid="@Border">
    <h3 style="border-bottom: 1px solid black">Редактирование информации о денежной статье</h3>
    <span jwcid="ap@weda:ActionPanel" position="bottom" renderActionAsLink="ognl:true">
        <br/>
        <span 
            jwcid="@weda:EditorGroup" modelGroup="weda.editor-model-group:operationItem-edit"
        >
            <table border="0" cellpadding="3px">
                <tr>
                    <td>
                        <span jwcid="@weda:EditorLabel" modelName="itemName"/>
                    </td>
                    <td>
                        <span jwcid="@weda:BaseEditor" modelName="itemName" cols="40"/>
                    </td>
                    <td>
                        <span jwcid="@weda:EditorError" modelName="itemName"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span jwcid="@weda:EditorLabel" modelName="operationType"/>
                    </td>
                    <td>
                        <span jwcid="@weda:BaseEditor" modelName="operationType" style="width:100%"/>
                    </td>
                    <td>
                        <span jwcid="@weda:EditorError" modelName="operationType"/>
                    </td>
                </tr>
            </table>
        </span>
        <br/>
    </span>
</body>

Создаем конфигурационный файл log4j.properties

Добавьте к ветке Source Packages файл log4j.properties со следующим содержимым:

                    
log4j.rootCategory=WARN, A1

# A1 is set to be a ConsoleAppender. 
log4j.appender.A1=org.apache.log4j.ConsoleAppender

# A1 uses PatternLayout.
log4j.appender.A1.layout=org.apache.log4j.PatternLayout
log4j.appender.A1.layout.ConversionPattern=%c{1} [%p] %m%n

log4j.category.org.weda=info

Документация

Project Documentation

Legend

Создаем web-страницы

Настраиваем web приложение для работы с Tapestry

Создаем вспомогательные компонеты Border и Menu

Создаем страницу для просмотра денежных операций

Создаем страницу для создания/редактирования денежной операции

Создаем страницу для просмотра денежных статей

Создаем страницу для редактирования денежной статьи

Создаем конфигурационный файл log4j.properties