갑자기 궁금한게.. 내가 왜... 이짓을 하는걸까?


정말 단순하게 테이블을 만들고 사용할 수 있다.(당연히 단순한 예제라고 하니까.. ㅎㅎ)

보고 느낀 것은 model 쪽은 Swing, SWT 와 유사한듯 하다.

1. 우선 page class 에 Table 인스턴스 생성하고, 생성하자 헤더 설정 및 onRender() 메소드에 데이터를 작성해 주면 된다.

Table 클래스야 그냥 사용하면 될 거 같구.. Page 클래스에서 onRender() 를 override 해서 사용하는 거를 중심으로 봐야 할듯 하다.  렌더링 하기 전에 onRender() 에서 테이블로 데이터를 set 해준다.

Page Class
@Bindable protected Table table = new Table();

// 생성자
public HomePage() {
        table.setClass(Table.CLASS_ITS);    
        table.addColumn(new Column("no"));
        table.addColumn(new Column("name"));
        table.addColumn(new Column("age"));
        table.addColumn(new Column("job"));
}

@Override
public void onRender() {
    List list = new ArrayList();
      
     for(int i = 0;i<10;i++) {
            DemoTableModel model = new DemoTableModel();
            model.setNo(""+(i+1));
            model.setName("name: " + i);
            model.setAge("33");
            model.setJob("java programmer " + i);
          
            list.add(model);
    }
      
    table.setRowList(list);
}

DemoTableModel class
- User Guide 를 보면 커스텀서비스 어쩌구를 사용하는데.. 그넘 실제로 없다. 그래서 단순하게 하나 만들었다.
public class DemoTableModel {

    private String no;
    private String name;
    private String age;
    private String job;
    public String getNo() {
        return no;
    }
    public void setNo(String no) {
        this.no = no;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getAge() {
        return age;
    }
    public void setAge(String age) {
        this.age = age;
    }
    public String getJob() {
        return job;
    }
    public void setJob(String job) {
        this.job = job;
    }
}

Template Page
<html>
  <head>
    $headElements
  </head>
  <body>

    $table

    $jsElements

  </body>
</html>

$headElements
- 요넘은 사용하면 table이 사용할 수 있는 css, style을 포함시킨다.
(아래는 실제로 가져온 웹 소스)
<link href="/click_demo/click/table.css" rel="stylesheet" type="text/css"/>

<style id="c_1886087593" type="text/css">
 th.sortable a {background: url(/click_demo/click/column-sortable-light.gif)
 center right no-repeat;}
 th.ascending a {background: url(/click_demo/click/column-ascending-light.gif)
 center right no-repeat;}
 th.descending a {background: url(/click_demo/click/column-descending-light.gif)
 center right no-repeat;}
</style>


$jsElements
- 요넘은 JavaScript, js 를 포함시킨다.
<script src="/click_demo/click/control.js" type="text/javascript"></script>
<script src="/click_demo/click/extras-control.js" type="text/javascript"></script>
<script id="c_862758709" type="text/javascript">
    addLoadEvent(function(){
        initMenu();
    });
</script>

요넘.. 필요한거 알아서 참조도 해주고.. 무쟈게 고마운 넘임 ㅋㅋ

Posted by 짱가쟁이
출처

1.  Web Application Structure

WEB-INF/ 디렉토리에 click.xml 과 web.xml 파일을 추가한다.
Click application configuration files
  • WEB-INF/click.xml   -   Application Configuration
  • WEB-INF/web.xml   -   Servlet Configuration  
click.xml
- click.xml 에 아래의 내용을 추가한다.
- page class 와 htm 파일을 package name으로 매핑 시켜 준다.
<?xml version="1.0" encoding="UTF-8"?>
<click-app>
  <pages package="com.demo.page"/>
  <pages package="com.demo.page" autobinding="annotation"/>
</click-app>

web.xml
- web.xml에 아래의 내용을 추가한다.
<?xml version="1.0" encoding="UTF-8"?>
<web-app>

  <servlet>
    <servlet-name>ClickServlet</servlet-name>
    <servlet-class>org.apache.click.ClickServlet</servlet-class>
    <load-on-startup>0</load-on-startup>
  </servlet>
 
  <servlet-mapping>
    <servlet-name>ClickServlet</servlet-name>
    <url-pattern>*.htm</url-pattern>
  </servlet-mapping>
 
  <welcome-file-list>
    <welcome-file>redirect.html</welcome-file>
  </welcome-file-list>
 
</web-app> 

2.  JAR Files

아래의 jar 파일들을 WEB-INF/lib 디렉토리에 추가한다.
  • click-x.x.x.jar
  • click-extras-x.x.x.jar
'x.x.x' 는 Click 의 버전
jar 파일들은 다운로드 받은 Click 의 dist 디렉토리에서 얻을수 있다.

3.  Welcome File

web 루트 디렉토리에 redirect.html 파일을 생성하고, 아래의 내용을 추가해라. redirect.html 은 web.xml 의 welcome-file 에서 설정한 넘임.
<html>
<head><meta http-equiv="Refresh" content="0;URL=home.htm"></head>
</html>

4.  Home Page

welcom file 에서 추가한 home page(Click page)를 만들어야 한다.

4.1> Page를 상속받은 class를 만들고 home.htm 파일을 만들면 될듯.
HomePage.java
- 컴파일된 class 파일은 WEB-INF/classes 디렉토리에 생성되게 한다.
package com.demo.page;

import org.apache.click.Page;

public class HomePage extends Page {

}

4.2> 웹 root 디렉토리에 home.htm 파일을 추가한다.
home.htm
- 아래의 내용을 추가한다.
<html>
<head>
  <title>Home</title>
  <link rel="stylesheet" type="text/css" href="style.css" title="Style"/>
</head>

<body>
 
  <div id="header">
    <span id="title">Home</span>
  </div>

  <div id="container">
    <b>Welcome</b> to Home page your application starting point.
  </div>
 
</body>
</html>

4.3>  web root 디렉토리에 style.css 파일을 생성한다.
style.css
body {
    font-family: Arial;
}

#header {
    background-color: navy;
}

#title {
    color: white;
    font-size: 18px;
    font-weight: bolder;
}

#container {
    padding-top: 1em;
    padding-left: 1.5em;
    position: relative;
    z-index: 0;
}

h3.title {
    margin-top: 0em;
    margin-bottom: 1em;
}

밑 에 처럼 프로젝트를 구성하면 된다.


환 경설정이 성공적으로 끝나고 context path quickstart 면 아래와 같은 결과가 나와야 할듯.
http://localhost:8080/quickstart/


실행결과

Home

Welcome to Home page your application starting point.



5.  Border Template
Page class 를 상속받아서 BorderPage를 만들어 보자. 뭐 내가 아직 실제로 돌려보지 않아서 뭐가 뭔지. 해보면 되것지.. 쩌ㅃ~

우선은 border-template.htm 파일을 생성하고 아래 코드를 추가하면 된다.
border-template.htm
<html>
<head>
<title>Click Quickstart - $title</title>
<link rel="stylesheet" type="text/css" href="$context/assets/style.css" title="Style"/>
<link rel="stylesheet" type="text/css" href="style.css" title="Style"/>
</head>

<body>
 
  <div id="header">
    <span class="title">$title</span>
  </div>
 
  <div id="container">
    #parse($path)
  </div>
 
</body>
</html>

다음으로, border-tamplate.htm 파일의 템플릿을 가지는 BorderPage.java 를 만들자.
BorderPage.java
package com.demo.page;

import org.apache.click.Page;

public class BorderPage extends Page {

   public String getTemplate() {
      return "/border-template.htm";
   }

}

BorderPage 클래스에서 "/border-template.htm" 랑 자동으로 매핑 안해주니까. 알아서 잘 맞춰줘야할듯.

다음으로, HomePage 클래스를 수정해주자.
HomePage.java- Example를 그대로 실행시키고 싶으면 click.xml 의 page 설정을 변경시켜줘야 한다.
change : <pages package="com.demo.page" autobinding="annotation"/>
package com.demo.page;

import org.apache.click.util.Bindable;

public class HomePage extends BorderPage {

    // page 에서 어노테이션을 사용할려면 click.xml 참조 ..
    // <pages package="com.demo.page" autobinding="annotation"/>
    @Bindable protected String title = "Home";

    // 어노테이션 없이 사용할 수도 있음.
    public HomePage() {
        getModel().put("title", "Home");
    }
}


마지막으로, home.htm 에서 page border 를 삭제하고(??) 아래의 내용만 포함시켜라.
(?? 돌려봐야 알듯.. 뭔소린지.. 모르것음 ㅋ)
home.htm
<b>Welcome</b> to Home page your application starting point.

위에꺼 설정 맞춰주면 아래와 같은 구조가 되어야 한다.
Click application web files
하여튼.. 죄다 업데이트 하고 돌려보면 처음에 했던 넘이랑 똑같아 진단다. 쩌ㅃ~
(sytle.css 가 적용이 안되는듯.. 화면이 결과랑 틀리게 나옴)

실행결과

Home

Welcome to Home page your application starting point.


6.  Logging
click.xml 에서 dubug mode 로 설정하면 로그를 볼 수 있단다. 아래와 같이 따라 해보삼.
click.xml
<?xml version="1.0" encoding="UTF-8"?>
<click-app>

  <pages package="com.quickstart.page"/>

  <mode value="debug"/>

</click-app> 
실행결과는 알아서 보삼. 구찮다.

7.  Whats Next ?
After you have the Quick Start application up and running you might be wondering, where do I go from here? At this point you are recommended to:

   1. Use the Quick Start Project Builder to generate a more complete project example.
   2. Read the Click Best Practices topic.
   3. Review the Click Examples application.

      There is a lot of good code examples and patterns you can lift into your application. 

8.  Quick Start Project Builder
Ant task project-quick-start 를 사용하면 빨리 click web application을 만들수 있다고 한다.

자세한 내용은 출처 참고

내도 이제 시작해봐야할듯...

Posted by 짱가쟁이
User Guide 를 보면 2가지 방법을 소개하고 있다.

1. Page 클래스에서 ActionLink instance 를 생성하고, Control's listener 메소드를 추가한다. listener 메소드 이름은 꼴리는데로 사용해도 되지만, return type 은 boolean 으로 선언해야 한다. true, false 로 이벤트를 계속 처리할 지 말지를 결정하는 듯 싶다.

장점 : 코드를 간결하게 작성 할 수 있단다.
단점 : The disadvantage of this type of control listener binding is that no compile time safety is provided, and you miss out on the compiler refactoring capabilities provided with modern IDEs. (뭔소리임??) 대충 컴파일 하고 있을 때 안전하게 동작하지 않다는 말인듯..

page class
@Bindable protected ActionLink controlListenerType1 = new ActionLink(this, "onLinkClick");
@Bindable protected String msg1;

// controlListenerType1 control's listener
public boolean onLinkClick() {
    msg1 = "controlListenerType1 : HomePage#" +
                   hashCode() + " object method <tt>onLinkClick()</tt> invoked.";
    return true;
}

page template
page template
<b><a href="$controlListenerType1.href">Control Listener Type1</a></b>

#if($msg1)
    <div id = "msgDiv">$msg1</div>
#end 


2. 안전한 컴파일 시간을 제공(아마.. 컴파일 할때 바인딩을 해준다는 말인듯..)하는 ActionListener interfacre 를 사용한다.
page class
@Bindable protected ActionLink controlListenerType2 = new ActionLink();
@Bindable protected String msg2;

page template
public HomePage() {
        controlListenerType2.setActionListener(new ActionListener() {
          
            @Override
            public boolean onAction(Control source) {
                // TODO Auto-generated method stub
                msg2 = "controlListenerType2 : HomePage#"
                           + hashCode() + " object method <tt>onLinkClick()</tt> invoked.";
                return true;
            }
        });
    }

흠.. 매번 이벤트가 도착하면 instance를 새로 생성한다. 뭐.. 계속 읽다보면 다른 해결책일 있을듯.. 따로 찾아보기가 좀 귀찮다. 복덩이는 언제 오냐?? 쩌ㅃ~

setStateful(true);

위 코드를 추가하면 HttpSession 안에 해당 Page를 저장하기 때문에 기존에 작업하던 내용이 그대로 유지된다.


Posted by 짱가쟁이
흠.. 항상 한글이 문제인듯.

User Guide 를 보면 charset 을 설정하는 몇가지 방법을 소개하고 있다.

1. velocity.properties 에 charset 설정
- WEB-INF/ 디렉토리에
velocity.properties 생성 후 설정
velocity.properties
input.encoding=UTF-8

위 방법으로 테스트를 해봤지만 성공하지 못함.(설정을 못해서 그럴수도 있을듯)

2. click.xml
click.xml
<?xml version="1.0" encoding="UTF-8"?>
<click-app> 
    <headers>
         <header name="Content-Type" value="text/html;charset=UTF-8"/>
     </headers>
     <pages package="com.demo.page" autobinding="annotation"/>
     <mode value="debug"/>
</click-app>


<?xml version="1.0" encoding="UTF-8"?>
<click-app charset="UTF-8">
    <pages package="com.demo.page" autobinding="annotation"/>
    <mode value="debug"/>
</click-app>

위 두가지 방법중 성공한 넘은 밑에 넘이 성공했슴.

더 뒤져보면 왜 위 두넘이 실패했는지 알 수 있것지만.. 귀찮다.. 누군가 찾아서 알려줬으면 좋것다. ㅎ

흠.. 요넘 GWT 보다는 개발하기 좀 편한듯(쉽다).. 짧은 시간에 rich web app. 개발 한다면 요넘 추천하고 싶다. 아직은 시작단계라 그런지 단점은 안보인다 ㅎㅎ



Posted by 짱가쟁이
이전버튼 1 이전버튼