Apache Click

APACHE CLICK

Easy & Simple to Learn

POJO Based Lightweight Framework

Event Based Programming model

Servlet Requests & Velocity for rendering the response

JSP, Freemarker, Spring, Hibernate Etc.. Support

Apache Click

No New Feature

Easy, Simple

Fast to Development

Auto Create HTML

Recommend for Prototyping, Management tools

Recommendation

Page

Control

Container

Configurations, Properties

Apache Click Framework

APACHE CLICKPAGE

public class SimplePage extends Page { public SimplePage() { addModel("time", new Date()); }}

SimplePage.java

<html> <body> Time : $time </body> </html>

SimplePage.htm

Page

public class SimplePage extends Page { public SimplePage() { addModel("time", new Date()); }}

SimplePage.java

public class SimplePage extends Page { @Bindable protected Date time = new Date();}

SimplePage.java

<html> <body> Time : $time </body> </html>

SimplePage.htm

Page - Velocity

public class SimplePage extends Page { public SimplePage() {

getHeadElements().add(new JsImport("/static/js/simplepage.js")); getHeadElements().add(new JsScript("alert('Welcome to SimplePage');")); getHeadElements().add(new CssImport("/static/css/simplepage.css")); getHeadElements().add(new CssStyle("body { font-family: Verdana; }")); setStateful(true); } @Override public void onInit() { super.onInit(); } @Override public void onGet() { super.onGet(); } @Override public void onPost() { super.onPost(); } @Override public void onRender() { super.onRender(); } @Override public void onDestroy() { super.onDestroy(); }}

ClickServlet.handleRequest()

Page.onInit()

in session?

Page.onGet() Page.onPost()

Page.onRender()

Page.onDistory()

new Page

setSession removeSession

get post

is stateful ?

HTTP Request

HTTP Response

SimplePage.java

Page - Velocity

<html> <head> $headElements </head> <body> $jsElements </body></html>

SimplePage.htm

Page - Velocity

APACHE CLICKCONFIGURATIONS

Configurations

<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>/*</url-pattern> </servlet-mapping>

web.xml

automappingListPage.htmlistPage.htmlist_page.htmlist-page.htmlist.htmList.htm

Configurations

<?xml version="1.0" encoding="UTF-8"?><click-app charset="UTF-8" locale="ko"> <pages package="net.daum.cafe.moa.page"/></click-app>

click.xml

net.daum.cafe.moa.page.ListPage.java

Configurations

<?xml version="1.0" encoding="UTF-8"?><click-app charset="UTF-8" locale="ko"> <pages package="net.daum.cafe.moa.page" automapping="false"> <page path="index.htm" classname="Home"/> <page path="login/login.htm" classname="Login"> <header name="Cache-Control" value="max-age=3600, public, must-revalidate"/> </page> <excludes pattern="static/*" /> </pages></click-app>

click.xml

index.htm net.daum.cafe.moa.page.HomePage.java

login/login.htm net.daum.cafe.moa.page.LoginPage.java

APACHE CLICKCONTAINER

public class SimpleTable extends Page { @Bindable protected Table table; public SimpleTable(){ table = new Table(); table.setAttribute("style", "font-family:Gulim; font-size:12px;"); table.setPageSize(10); table.setShowBanner(true); table.setSortable(true); Column cafeColumn = new Column("grpname", "카페"); cafeColumn.setMaxLength(10); cafeColumn.setAutolink(true); cafeColumn.setSortable(true); table.addColumn(new Column("id", "id")); table.addColumn(cafeColumn); } @Override public void onGet() { table.setDataProvider(new DataProvider<Article>() { @Override public Iterable<Article> getData() { ..... } }); }}

SimpleTable.java

<html> <head> $headElements </head> <body> $table $jsElements </body></html>

SimpleTable.htm

Container - Table

Container - Table

Container - Table

@Bindable protected ActionLink deleteLink = new ActionLink("Delete", this, "onDeleteClick"); public SimplePage(){ table = new Table(); table.setClass(Table.CLASS_REPORT); ......

deleteLink.setAttribute("onclick", "return window.confirm('정말 삭제하시겠습니까?')"); Column column = new Column("Delete"); column.setDecorator(new LinkDecorator(table, deleteLink, "id")); table.addColumn(column); } public void onDeleteClick(){ String id = deleteLink.getValue(); delete(id); }

SimpleTable.java

Container - Table

Container - Formpublic class SimpleForm extends Page { @Bindable protected Form form = new Form(); public SimpleForm(){ form.setMethod("GET"); form.setAttribute("style", "font-family:Gulim; font-size:10px;"); FieldSet fieldSet = new FieldSet("심플 폼"); fieldSet.setColumns(2); fieldSet.add(new TextField("name", true)); fieldSet.add(new EmailField("emailField", true)); fieldSet.add(new ColorPicker("Color")); fieldSet.add(new DateField("dateField")); fieldSet.add(new NumberField("numberField")); fieldSet.add(new DoubleField("doubleField")); fieldSet.add(new TelephoneField("telephoneField")); fieldSet.add(new VirtualKeyboard("keyboardField")); fieldSet.add(new CountrySelect("countrySelect")); fieldSet.add(new Submit("OK")); fieldSet.setListener(this, "onSubmit"); form.add(fieldSet); } public boolean onSubmit(){ if(form.isValid()){ ..... } return true; } }

SimpleForm.java

Container - Form

APACHE CLICKCONTROL

Control

Control

Color PickerCalendar

Control

Vertual KeyboardContury Select

Control (3rd Party)

Click Charts

Control (3rd Party)

Click Click

Control (3rd Party)

http://code.google.com/p/clickclick/

http://code.google.com/p/click-jquery/

http://code.google.com/p/click-calendar/

http://code.google.com/p/chainer/

http://code.google.com/p/click-charts/

Click Click

Click jQuery

Click Calendar

Chainer

Click Chart

APACHE CLICKPROPERTIES

field-maxlength-error={0} must be no longer than {1} characters field-minlength-error={0} must be at least {1} charactersfield-required-error=You must enter a value for {0}file-required-error=You must enter a filename for {0}label-required-prefix=label-required-suffix=<span class="required">*</span> label-not-required-prefix=label-not-required-suffix= not-checked-error=You must select {0}number-maxvalue-error={0} must not be larger than {1}number-minvalue-error={0} must not be smaller than {1}select-error=You must select a value for {0}table-first-label=Firsttable-first-title=Go to first pagetable-previous-label=Prevtable-previous-title=Go to previous pagetable-next-label=Nexttable-next-title=Go to next pagetable-last-label=Lasttable-last-title=Go to last pagetable-goto-title=Go to pagetable-page-banner=<span class="pagebanner">{0} items found, displaying {1} to {2}.</span> table-page-banner-nolinks=<span class="pagebanner-nolinks">{0} items found, displaying {1} to {2}.</span> table-page-links=<span class="pagelinks">[{0}/{1}] {2} [{3}/{4}]</span>table-page-links-nobanner=<span class="pagelinks-nobanner">[{0}/{1}] {2} [{3}/{4}]</span>table-no-rows-found=No records found.table-inline-first-image=/click/paging-first.gif table-inline-first-disabled-image=/click/paging-first-disabled.gif table-inline-previous-image=/click/paging-prev.giftable-inline-previous-disabled-image=/click/paging-prev-disabled.gif table-inline-next-image=/click/paging-next.giftable-inline-next-disabled-image=/click/paging-next-disabled.gif table-inline-last-image=/click/paging-last.giftable-inline-last-disabled-image=/click/paging-last-disabled.gif table-inline-page-links=Page {0} {1} {2} {3} {4}production-error-message=<div id='errorReport' class='errorReport'>The application encountered an unexpected error. </div>

Message Properties

Page scope messages :

Global scope messages :

Control scope messages :

Global Control scope messages :

/package/Page.properties

/click-page.properties

/package/CustomControl.properties

/click-control.properties

Message Properties

APACHE CLICKEXAMPLES

http://www.avoka.com/click-examples/home.htm

Examples

APACHE CLICKTHANK YOU

Apache Click

Technology

Transcript of Apache Click