<div class="note" style="background-color: #fcc"> 작성중 </div>

tapestry에 대해 좀더 알아보자.#

8. 다음은 위 Home.html파일을 다음과 같이 변경해본다.

<html>
  <head>
    <title>
      Tutorial: HelloWorld
    </title>
  </head>
  <body>
    <h1>
      HelloWorld Tutorial
    </h1>

    <p>
      The current data and time is:
      <strong>
        <span jwcid="@Insert" value="ognl:new java.util.Date()">
          June 26 2005
        </span>
      </strong>
    </p>
    <p>
      <a href="#" jwcid="@PageLink" page="Home">
        refresh
      </a>
    </p>
    <p>
      The current value is:
      <span style="font-size:xx-large">
        <span jwcid="@Insert" value="ognl:counter">
          37
        </span>
      </span>
    </p>
    <p>
      <a href="#" jwcid="@DirectLink" listener="listener:doClick">
        increment counter
      </a>
    </p>
    <p>
      <a href="#" jwcid="@PageLink" page="Home">
        refresh
      </a>
    </p>
  </body>
</html>

단순히 다른 작업없이 저렇게 수정하면 다음과 같은 에러화면을 보여준다.

tapestryException.jpg

위 이미지는 아주 일부분만을 보여주는 것으로 글을 보는 분은 꼭 한번 보길 바란다. 기존의 jsp나 다른 여타의 웹 관련 프레임워크중에 가장 상세하고 많은 정보를 개발자에게 보여주는게 아닌가 생각해본다.

9. 다음과 같이 Home.java소스를 생성한다.

package openframework.directlink.pages;

import org.apache.tapestry.annotations.Persist;
import org.apache.tapestry.html.BasePage;

public abstract class Home extends BasePage {
  @Persist
  public abstract int getCounter();

  public abstract void setCounter(int counter);

  public void doClick() {
    int counter = getCounter();

    counter++;

    setCounter(counter);
  }
}

10. WEB-INF밑에 app.application을 생성한다.

<?xml version="1.0"?>
<!DOCTYPE application PUBLIC 
  "-//Apache Software Foundation//Tapestry Specification 4.0//EN" 
  "http://jakarta.apache.org/tapestry/dtd/Tapestry_4_0.dtd">
  
<application>  
  <meta key="org.apache.tapestry.page-class-packages" value="openframework.directlink.pages"/>
  
</application>

  • meta요소는 메타데이타를 명시하기 위해 사용된다. 이것은 페이지를 검색하기 위한 자바 패키지를 tapestry에게 알리기 위해 사용한다. 만약 한개 이상의 패키지를 검색한다면 ,(콤마)로 구분된 패키지의 목록을 나열하면 된다.

http://localhost:8080/directlink/app?component=%24DirectLink&page=Home&service=direct&session=T

  • 위는 DirectLink의 한 예이다. 첫번째 파라터인 component는 페이지내 컴포넌트를 구분한다. %24는 달러문자를 위한 "URL형태"이다. tapestry에서,, 모든 컴포넌트는 페이지내 유일한 id로 끝난다. 만약 당신이 하나도 제공하지 않는다면, tapestry는 달러문자를 접두사로 사용하여 컴포넌트 타입에서 하나를 생성한다. 여기에서 우리의 익명 DirectLink컴포넌트는 id가 $DirectLink로 주어졌다. 만약 페이지에서 많은 수의 다른 DirectLink를 가진다면, 당신은 $DirectLink_0, $DirectLink_1 과 같은 형태의 컴포넌트 id를 보게 될것이다.

<a href="#" jwcid="inc@DirectLink" listener="listener:doClick">increment counter</a>

  • 위에서 @앞에 사용된 값은 명시적인 컴포넌트 id가 된다. 이것을 사용한다면 그 위의 익명 DirectLink는 다음과 같이 변경된다.
  • listener속성값인 listener:doClick는 페이지에서 검색되는 컴포넌트에서 doClick메소드를 호출하게 된다.

http://localhost:8080/directlink/app?component=inc&page=Home&service=direct&session=T

  • 세번째 파라미터인 service는 요청이 PageLink컴포넌트에 의해 생성된 링크와는 다르다는 것을 표시한다.
  • 네번째 파라미터인 session은 링크 시점에 HttpSession이 표현될지에 대해서 표시한다.

<p>
  <a href="#" jwcid="by1@DirectLink" listener="listener:doClick" parameters="ognl:1">
  increment counter by 1
  </a>
</p>

<p>
  <a href="#" jwcid="by5@DirectLink" listener="listener:doClick" parameters="ognl:5">
  increment counter by 5
  </a>
</p>

<p>
  <a href="#" jwcid="by10@DirectLink" listener="listener:doClick" parameters="ognl:10">
  increment counter by 10
  </a>
</p>

  • 마지막 DirectLink이 경우 다음과 같은 값으로 표시된다.

http://localhost:8080/directlink/app?component=by10&page=Home&service=direct&session=T&sp=10

여기서 sp는 service parameter의 줄임말로 tapestry 3.0에서 사용된다. tapestry 4.0에서는 listener parameters라고 명명된다. 여기서 메소드의 인자로 넘겨지는 sp의 타입은 tapestry에 의해 타입이 관리된다. doClick에서 인자가 하나 추가된 셈이기 때문에 해당 컴포넌트에 인자를 하나 가지는 doClick메소드를 정의해줘야 한다.

  public void doClick(int increment) {
    int counter = getCounter();

    counter += increment;

    setCounter(counter);
  }

Forms#

다음은 자바클래스를 요구하지 않는 간단한 Home페이지이다.

<html jwcid="@Shell" title="Tapestry Component Database">
<body>
  
<h1>Tapestry Component Database</h1>

<p>
  Options:
</p>

<ul>
  <li><a jwcid="@PageLink" page="AddProject">Add New Project</a></li>
</ul>
  
  
</body>
</html>

여기서 소개되는 Shell 컴포넌트는 <html>, <head>, 그리고 <title> 태그를 생성하기 위해 편리하다.

Value Object

tapestry의 기초중 하나는 value object의 프라퍼티를 수정할수 있는 능력이다.

<html jwcid="@Shell" title="Add New Project">
  <body jwcid="@Body">
    <h1>Add New Project</h1>
    <form jwcid="form@Form" success="listener:doSubmit">
      <table>
        <tr>
          <th>Name</th>
          <td>
            <input jwcid="name@TextField" value="ognl:project.name" size="40"/>
          </td>
        </tr>
        <tr>
          <th>Release ID</th>
          <td>
            <input jwcid="release@TextField" value="ognl:project.releaseId" size="20"/>
          </td>
        </tr>
        <tr>
          <th>Short Description</th>
          <td>
            <input jwcid="short@TextField" value="ognl:project.shortDescription" size="40"/>
          </td>
        </tr>
        <tr>
          <th>Long Description</th>
          <td>
            <textarea jwcid="long@TextArea" value="ognl:project.longDescription" rows="10" cols="40"/>
          </td>
        </tr>
        <tr>
          <th>Tapestry Version</th>
          <td>
            <input jwcid="tapestryVersion@TextField" value="ognl:project.tapestryVersion" size="20"/>
          </td>
        </tr>
        <tr>
          <th>Release Date</th>
          <td>
            <input jwcid="releaseDate@DatePicker" value="ognl:project.releaseDate"/>
          </td>
        </tr>
        <tr>
          <th>Public</th>
          <td>
            <input jwcid="public@Checkbox" value="ognl:project.public"/>
          </td>
        </tr>
      </table>
      <input type="submit" value="Add Project"/>
    </form>
  </body>
</html>

  • Body - 페이지를 위해 생성되는 자바스크립트를 만든다.
  • Form - HTML폼을 생성하고 서브밋을 제어한다.
  • TextField - 페이지의 프라퍼티를 수정하기 위해 사용되는 text필드를 생성.
  • TextArea - 위 TextField와 같지만 여러줄의 TextField을 생성.
  • DatePicker - 자바스크립트 달력 팝업
  • Checkbox - 페이지의 boolean값을 편집.

Form의 success파라미터는 listener메소드로 연결한다. 이것은 유효성에러가 없는 경우에만 호출된다.

Body컴포넌트는 tapestry에서 중요한 역활을 담당한다. 이것은 페이지가 표시될때 생성되는 자바스크립트를 구성한다. 이것은 클라이언트측 변수와 함수를 위한 유일한 이름을 생성하는 컴포넌트를 돕고 페이지내 모든 컴포넌트를 두개의 큰 블럭으로 생성하는 자바스크립트를 구성한다.

DatePicker컴포넌트는 Body컴포넌트에 의해 둘러싸이지 않는다면 작동하지 않을것이다.

TextField와 TextArea컴포넌트는 페이지의 프라퍼티를 편집한다. value파라미터가 OGNL표현식이기 때문에, 이것은 페이지 클래스에 의해 직접적으로 드러나는 프라퍼티들을 편집하는데 제한점을 가지지 않는다.

AddProject 페이지 클래스

package openframework.forms.pages;

import java.util.Date;

import openframework.forms.data.ProjectRelease;

import org.apache.tapestry.event.PageBeginRenderListener;
import org.apache.tapestry.event.PageEvent;
import org.apache.tapestry.html.BasePage;

/**
 * Java class for the AddProject page; contains a form used to collect data for
 * creating a new {@link tutorial.forms.data.ProjectRelease}.
 
 @author Howard M. Lewis Ship
 */
public abstract class AddProject extends BasePage implements PageBeginRenderListener {
  public abstract ProjectRelease getProject();

  public abstract void setProject(ProjectRelease project);

  public void pageBeginRender(PageEvent event) {
    ProjectRelease project = new ProjectRelease();

    project.setReleaseDate(new Date());

    setProject(project);
  }

  public void doSubmit() {

  }
}

addproject.jpg

폼 서브밋

  @InjectPage("ShowProject")
  public abstract ShowProject getShowProject();

  public IPage doSubmit() {
    ShowProject showProject = getShowProject();

    showProject.setProject(getProject());

    return showProject;
  }

showProject.png

Add new attachment

Only authorized users are allowed to upload new attachments.

List of attachments

Kind Attachment Name Size Version Date Modified Author Change note
jpg
addproject.jpg 154.0 kB 1 16-Dec-2005 12:07 이동국
png
showProject.png 62.4 kB 1 16-Dec-2005 12:33 이동국
jpg
tapestryException.jpg 307.1 kB 1 15-Dec-2005 11:56 이동국
« This page (revision-7) was last changed on 06-Apr-2006 09:45 by 이동국