jmaki의 accordion들 사용하기(dojo,jquery,jmaki)-advanced
Written on 오후 10:25 by 강여사(J.Y.Kang)
이번에는 jmaki 위젯의 accordion들을 프레임워크별로 사용해보도록 하겠습니다.
참고로 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 들이었습니다.
글
