jMaki

jMaki는 무엇이고, 왜 jMaki인가?
jMaki 위젯들
jMaki 위젯 사용하기 - 리스트 위젯
jMaki 위젯으로 무엇을 만들수 있나?
jMaki 작업을 어떻게 하나?
jMaki 위젯 사용하기 - Dojo Fisheye 위젯
jMaki application
NetBeans IDE 5.5 & GlassFish를 위한 jMaki 플러그인
리소스들

jMaki는 무엇이고, 왜 jMaki인가?

jMaki를 위한 유도
- 사용자는 현존하는 영향력있는 위젯들, 미래 AJAX 툴킷들과 프레임웍들을 원한다.
  > Dojo, Scriptaculus, Yahoo UI Widgets 그리고 DHTML 제품들
- 현재, 그것들은 그들 소유의 위젯들과 서로 다른 구조와 함께 멀티 AJAX 프레임웍들이다.
  > 그들은 이것들 개개의 위젯들의 공통된 프로그래밍 모델을 위해 필요하다.
- 자바개발자를 위해서 너무 많은 자바스크립트 코드가 필요하다.
  > 자바스크립트 기반의 위젯들의 자바언어적 관점이 필요하다.
jMaki는 무엇인가?
- 프로젝트 jMaki는 wrapper 프레임웍이다.
  개발자들이 일반적인 AJAX 프레임웍들로 부터 위젯들을 만드는 것을 허락한다. 그리고 JSP 또는 JSF 태그안으로 그들을 감싼다.
  > 개발자를 위한 공통된 프로그래밍 모델을 제공한다.
  > 일반적인 프레임웍들 출신의 위젯들에게 영향을 준다.
  > Java EE 어플리케이션 개발자들에게 익숙하다.
- 자바 플랫폼을 위한 자바스크립트 Wrapper 프레임웍이다.
  > jMaki 이름은 Java에서 j가 파생되었고, "Maki"는 wrap라는 일본어 단어이다.
왜 jMaki 인가?
- 프로젝트 jMaki는 JAVA EE 플랫폼 안에서 일반적인 AJAX 프레임웍들의 사용을 좀 더 쉽게 해준다.
- 그것은 좀더 일반적인 프레임웍들로 부터 위젯 주위를 감싸는 기본 셋을 제공한다. (Dojo, Prototype ,Yahoo Widgets과 같은)
- 프로젝트 jMaki는 쉽게 확장 가능하고, 개발자들이 최신의 것과, 가장 유용한 위젯들을 사용할수 있도록 제공한다.
- 자바 개발자들은 JSP 태그 라이브러리 또는 JSF 콤포넌트 처럼 그들의 자바 기반 어플리케이션 안에서 자바스크립트 코드를 사용하는 것이 가능하다.
- 리치 AJAX 스타일의 위젯들을 넘겨주기 위해 자바의 대부분, 자바스크립트의 대부분을 사용한다.
- 프로그램 방법론을 장려한다. 행동(JavaScript), 스타일(CSS), 템플릿 HTML로 깔끔하게 구분한다.

jMaki 위젯들

jMaki 위젯들
- jMaki는 현재 Dojo, Scriptaculus, Yahoo UI Widgets, DHTML 제품들로부터 많은 컴포넌트를 위한 bootstrap 위젯들을 제공한다.
- 또한 RSS 위젯, del.icio.us Bookmark 위젯, 챠트 위젯, 앞으로 더 많이 나올 위젯들과 같은 Web 2.0에 포커스를 둔 AJAX 위젯 셋을 포함한다.

jMaki 위젯 사용하기 - 리스트 위젯

JSP페이지 안에서 jMaki 위젯(List)을 사용하는 예제

<%@ taglib prefix="a" uri="http://java.sun.com/jmaki" %>   <%-- JMaki 태그 라이브러리 선언 --%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
<body>
    <h1>JSP Page</h1>
    <a:ajax name="list" service="listService.jsp" />  <%-- JMaki 위젯 위치 --%>
</body>
</html>

HTML을 jMaki에 표현되어진 예제

<html>
...
<body>
    <script type="text/javascript" src="http://localhost:8080/jMakiList/jmaki.js"></script>
    <script type="text/javascript">jmaki.webRoot='http://localhost:8080/jMakiList';</script>

    <%-- CSS --%>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/jMakiList/resources/list/component.css"></link>     

    <%-- HTML --%>
    <div id="list0" class="listContainer">
        <form onsubmit="jmaki.attributes.get('list0').submitData(); return false;">
            <input id="list0_entryField" type="text" size="20" value="Enter new Value">
            <input type="button" onclick="jmaki.attributes.get('list0').submitData(); return false;" value="Add to List">
        </from>
        <div id="list0_list" class="listDiv"></div> 
    </div>

    <%-- JavaScript --%>
    <script type="text/javascript">
        jmaki.addWidget
        ({service:'listService.jsp',script:'http://localhost:8080/jMakiList/resources/list/component.js',uuid:'list0', name:'list'});
    </script>
</body>

랜더링에 사용된 HTML 템플릿을 jMaki에서 어떻게 알수 있을까?
- jMaki (실제로 jMaki 태그 핸들러)는 name 속성으로 부터 값을 구한다. - 아래 샘플의 list
  > <a:ajax name="list" service="listService.jsp" />
- jMaki는 list와 같은 위젯 이름을 찾는다.
- list 위젯은 그것과 연상되는 다음의 3개의 파일을 가진다. - 그 파일들은 파라미터화되었다.
  > HTML template: list/component.html
  > CSS template: list/component.css
  > JavaScript code: list/component.js
- 파라메터들이 표현되었을때, 값들도 함께 set 된다.
데모시나리오
- 리스트 위젯을 사용한 간단한 어플리케이션 실행
- jMaki로 표현된 HTML 페이지 알아보기
- jMaki 실행의 내부 구조를 이해하는 코드를 통과하는 단계를 위해 FireBug 자바스크립트 디버거 사용하기
  > 사용자는 사용자의 jMaki 실제 랩안에서 스스로 시도할 수 있다.
- 빌드 & 실행
- jMaki로 표현된 HTML 페이지 알아보기
- FireBug를 사용해서 Breakpoint 만들기

jMaki 위젯으로 무엇을 만들수 있나?

jMaki 위젯으로 무엇을 만들수 있나?
위젯으로 무엇을 만드나?
- HTML template
  > 페이지 레이아웃 선언
- JavaScript file
  > behavior 선언
- CSS file
  > style 선언
  ${{uuid}}처럼 세개의 파일의 파라메터들은 jMaki가 실행되는 동안 실제값들에 의해 바뀌어질것이다.

리스트 위젯의 HTML 템플릿

<div id="${uuid}" class="listContainer">
  <form onsubmit="jmaki.attributes.get('${uuid}').submitData(); return false;">
    <input id="${uuid}_entryField" type="text" size="20" value="Enter new Value">
    <input type="button" onclick="jmaki.attributes.get('${uuid}').submitData(); return false;" value="Add to List">
  </from>
  <div id="${uuid}_list" class="listDiv"></div>
</div>

리스트 위젯의 자바스크립트 파일

<!-- jMaki는 이 자바스크립트 코드-List()함수-가 실행되기 전에 파라메터들의 모든값을 캡쳐한 위젯 자바스크립트 객체를 생성한다. -->
function List() {
  var uuid = widget.uuid;
  var service = widget.service;

  function getXHR(url) {
    if (window.XMLHttpRequest) {
      return new XMLHttpRequest();
    } else if (window.ActiveXObject) {
      return new ActiveXObject("Microsoft.XMLHTTP");
    }
}

this.submitData = function() {
  var list = document.getElementById(uuid + "_list");
  var req = getXHR(service);
  req.onreadystatechange = function() {
    if (req.readyState == 4) {
      if (req.status == 200) {
        list.innerHTML = req.responseText;
      }
    }
};
req.open("POST", service, true);
var entryField = document.getElementById(uuid + "_entryField");
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send("command=add&entry=" + entryField.value + "&uuid=" + uuid);

리스트 위젯의 CSS 파일

.plain {
color: black;
height:25;
font-size:18px;
font-weight: bold;
font-family: Arial;
background: white;
}
.over {
color: white;
height:25;
font-size:18px;
font-weight: bold;
font-family: Arial;
background: blue;
cursor: pointer;
}
.listDiv {
position: relative;
width: 400px;
height: 300px;
overflow: auto;
}
.listContainer {
width: 400px;
height: 350px;
}

jMaki 작업을 어떻게 하나?

jMaki 작업을 어떻게 하나
- jMaki는 초기화 페이지를 표현하기위해 자바를 사용하여 오른쪽 일부분에 함께 넣는다.
  > HTML 템플릿, CSS 템플릿, JavaScript 파일
- JSF 컴포넌트, JSP 태그 양쪽의 경우 inputs는 동일하다. 그리고 output도 동일하다.
  > output은 HTML 페이지이다.
- The service behind the widget may differ if there is one
  서비스는 만약 다르다면 위젯에 숨어있다.
- 감싸진 jMaki 위젯 아래에서 JavaScript 위젯들은 파라메터화되어 재사용된다.
- jMaki 적절한 파라메터들이 자바스크립트 bootrapper를 사용하는 개개의 위젯 코드를 통과했는지 확인한다. 그것은 페이지안에 위젯들을 초기화한다.
- JSP 태그들과 JSF inputs은 (a JavaScript/CSS/Template HTML file) 같은 결과 위젯을 만든다.
- jMaki's 디자인은 생성된 위젯들을 매우 쉽게 만든다. 그리고 곧 나올 자바스크립트 라이브러리들을 지원한다.
- jMaki의 위젯들은 웹어플리케이션으로 실행하도록 충분히 구성되어 있다.

jMaki 위젯 사용하기 - Dojo Fisheye 위젯

Dojo 툴킷의 Fisheye

이것은 jMaki위젯 예제이다. 이것은 일반적인 3rd-party 프레임웍 - Dojo 툴킷 으로부터 현재의 위젯을 만들어 낸다.
Dojo 툴킷의 Fisheye와 대응하는 파일로 부터 HTML 템플릿의 jMaki 버전, CSS 템플릿, JavaScript 파일을 만든다.
FishEye Widget
FishEye jMaki Widget

FishEye's component.htm

<div class="outerbar">
<div dojoType="FisheyeList"
     itemWidth="50" itemHeight="50"
     itemMaxWidth="200" itemMaxHeight="200"
     orientation="horizontal"
     effectUnits="2"
     itemPadding="10"
     attachEdge="top"
     labelEdge="bottom"
     enableCrappySvgSupport="false"
     id="${uuid}"
>
<div dojoType="FisheyeListItem" onClick="load_app(1);"
     iconsrc="images/icon_browser.png" caption="Web Browser">
</div>
<div dojoType="FisheyeListItem" onClick="load_app(2);"
     iconsrc="images/icon_calendar.png" caption="Calendar">
</div>

FishEye's component.css

.dojoHtmlFisheyeListBar {
    margin: 0 auto;
    text-align: center;
}
.outerbar {
    background-color: #666;
    text-align: center;
    position: relative;
    left: 0px;
    top: 0px;
    width: 100%;
}

FishEye's component.js

dojo.require("dojo.widget.FisheyeList");
dojo.widget.createWidget(widget.uuid);

jMaki application

jMaki Applications의 예
- 기본 jMaki Application
- 3rd-party 라이브러리 사용하기
- jMaki와 함께 리소스 해결
기본 jMaki 샘플 Application
- 가장 기본적인 웹어플리케이션은 "delicious"로 명명된 index.jsp 페이지안에 선언된 간단한 jMaki 위젯을 포함한다.
  Delicious 웹사이트에 의해 관리되는 북마크 셋으로 디스플레이될 것이다.
- index.jsp파일은 <a:ajax name="delicious"/>로 선언된 태그 라이브러리를 포함한다.
기본적인 jMaki 샘플 어플리케이션의 구조
- 'delicious' 디렉토리는 component.js, component.css, component.htm 파일들을 포함한다.
- jmaki.js 자바스크립트 파일은 top 디렉토리에 위치한다.
- jmaki.jar 는 /WEB-INF/lib 디렉토리안에 위치한다.
3rdparty Lib (Dojo)를 사용한 간단한 어플리케이션의 구조
• dojo.js와 src 디렉토리는 클라이언트가 필요로 하는 Dojo 소스를 포함한다.
jMaki 실행
- jMaki는 JSP 2.0/JSF 1.1 태그 라이브러리로 씌어졌다. JSP 2.0 과 JSF 1.1 스펙을 지원하여 좀더 빠르게 컨테이너를 실행할수 있다.