참고로 jmaki는 기본 설치에는 포함되어 있지 않기때문에 사전에 jmaki 플러그인을 설치후 진행하도록 합니다. (jmaki 플러그인 설치 방법은 다른 게시물에도 여러번 소개했기에 자세한 사항은 생략하겠습니다. 도구-플러그인-사용가능한 플러그인-jmaki 관련2개의 플러그인 설치-IDE 재시작)
그럼 새로이 프로젝트를 하나 만듭니다.
new project
java web - web application
프로젝트명: jmakiJqueryProject (적당히)
경로도 적당히
다음
서버는 웹이 지원되면 됩니다. 저는 glassfish v3 로 진행했습니다.
다음
jMaki Ajax Framework 체크
아래 CSS에서 3개의 칼럼과 풋터(three column with footer)를 선택합니다.
마침
만들어진 index.jsp 페이지에서 left slider 글씨를 지우고 대신 파레트의 jmaki dojo 의 accordion을 드래그해서 놓습니다.
이번에는 right slider 대신 역시 파레트의 jmaki jquery 의 accordion 을 드래그해서 놓습니다.
다시 main content 대신 jmaki widgets 의 accordion 을 드래그 해서 놓습니다
(물론 파레트에 보면 다른 accordion 위젯도 있습니다. 그건 각자 알아서 살펴보시기 바랍니다. 이번에는 이렇게 3개...^^;;)
dojo의 accordion 위젯 내용을 보면 test.jsp 페이지로 내용을 호출하는 예제가 있습니다. 그걸 위해서 test.jsp 를 만듭니다.
프로젝트에서 오른쪽 마우스 클릭 new - jsp
이름 test
마침
바디부분에 this is test page 라고 적었습니다
프로젝트 실행(run)
아래 그림이 jmaki 를 사용한 각 위젯들의 기본 예제입니다.
왼쪽이 dojo, 가운데가 jmaki, 그리고 오른쪽이 jquery 의 accordion 들입니다.
아까 작성한 test.jsp가 dojo(왼쪽)의 magazines 의 내용으로 나타납니다.
dojo나 jquery의 기타 여러 옵션들은 해당사이트의 데모와 문서 등을 통해 더 자세히 살펴볼 수 있습니다. (http://dojotoolkit.org/ http://jqueryui.com/)
그럼 이번엔 jmaki의 widgets의 accordion의 테마를 변경해보도록 하겠습니다. 테마 변경을 위해서는 index.jsp 페이지의 적당한 공백에서 마우스
오른쪽을 클릭하면 jmaki 메뉴가 나타납니다.
jmaki-themes-kame(Green) 을 차례로 선택합니다
그런 다음
다시 실행하면 가운데 위젯의 테마가 변경되어 있는 것을 보실 수 있습니다. (다른 테마로의 변경은 각자)
약간
살펴보면...
config.json에 테마변경이 추가되어 있는 것을 보실 수 있습니다. 사실 이는 페이지에 대한 설정테마가 글로벌로 변경된 것인데 jmaki의 accordion 위젯은 잘 변화되어 나타났지만 전체 페이지는 변경이 없습니다. 이는 css가 정상 동작하지 않아 그렇습니다
위 설정에 있는 경로 즉, resources/css/themes/kame/theme.css 가 현재는 비어 있습니다.
따라서 이 내용을 채우면 됩니다. (현재 작성되어 있는 orange의 theme.css를 복사하여 적당히 변경합니다. 녹색으로..--;)
샘플
============================================================
.jmakiTitleBar {
background:#ACCCD5;
}
.jmakiBackround {
background:#47c620;
}
.jmakiBackroundHover {
background:#ecf7e9;
}
.jmakiFont {
color : #FFFFFF;
}
.jmakiFontHover {
color : #e8f5e4;
}
.jmakiShadow {
color : #e8f5e4;
}
body {
background : #FFFFFF;
}
#outerBorder {
background : #FFFFFF;
}
#header {
color : #000000;
background : #47c620;
}
#subheader, #subheader div a {
color : #FFFFFF;
}
#subheader {
border :0;
}
#main {
}
#content {
background : #FFFFFF;
}
#leftColumn {
background : #FFFFFF;
}
#rightColumn {
background : #FFFFFF;
}
#leftSidebar {
background : #FFFFFF;
}
#banner {
}
#footer {
color : #000000;
background : #e8f5e4;
}
============================================================
다시 실행
이제 페이지의 테마가 그린으로 바뀌었슴을 알 수 있습니다. (다른 테마도 같은 방법으로 변경)
그럼 이제 나머지 actions 에 대한 테스트를 해보도록 하겠습니다.샘플로 제시된 actions 내용은 다음과 같습니다.
=============================================
{label: 'Actions',
menu: [
{ label : 'Select',
action :{topic: '/foo/select',
message: { targetId : 'bar'}}
},
{ label :'Set Content',
action :{topic: '/foo/setContent',
message: { value : 'test.jsp'}}
}
]}
]
}"
=============================================
간단한 action 구현을 위해 footer부분에 dojo 의 table을 드래그해서 놓습니다.(dojo의 table 샘플에 보면 bar 부분이 있습니다. 확인)
그럼 actions 동작을 위해 glue.js 에 다음 코드를 추가 작업을 합니다.====================================================
jmaki.subscribe("/foo/select", function(args) {
jmaki.publish("/table/select", { targetId: 'bar' });
});
jmaki.subscribe("/foo/setContent", function(args) {
jmaki.log("in mytopic");
var row = {
id : 'new',
title: 'Book Title 3',
author : 'Author 3',
isbn : '4413',
description : 'A Some long description'
};
jmaki.publish("/table/addRow",{ value: row });
jmaki.publish("/table/select", { targetId: 'new' });
});
====================================================
다시 실행한후 (run) 가운데 accordion에서 actions 의 select 를 클릭하면 dojo 테이블의 2번째 칼럼이 선택된다. (그림의 노란색) 
그리고 setContent를 클릭하게 되면 테이블에 새로운 row 가 추가됩니다. (그림의 노란색)
이상이 간단히 살펴본 jmaki accordion 들이었습니다.
