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 들이었습니다.

Posted in jMaki, netbeans | Comment Now!

넷빈에서 jquery 사용하기-basic

Written on 오전 8:17 by 강여사(J.Y.Kang)

이번에는 넷빈 6.7.1에서 jquery(ajax framework)를 사용해보도록 하겠습니다.
이 시리즈는 일단 기본 jquery와 나중에 jmaki-jquery 로도 살펴볼 예정입니다.

우선 프로젝트를 새로 만듭니다.
new project

java web - web application
프로젝트 이름은 적당히 (jqueryproject)

경로도 적당히 - 다음 클릭

서버는 웹 지원이면됩니다. (저는 glassfish v3 선택)
마침

그럼 이번 프로젝트에서 사용할 jquery 다운로드를 위해 jquery 사이트로

http://jquery.com/

사이트의 오른쪽에 보면 download 버튼이 있고, 그 위에 2가지 형태로 공급

2번째의 development 를 체크하고 다운로드 버튼을 누르면 다운로드 사이트로 진행됩니다.

jquery-1.3.2.js 다운
스크립트 파일들을 저장할 공간으로 폴더를 새로 만듬

프로젝트에서 new - folder 폴더 이름은 js

경로는 browse 버튼을 눌러 web 아래로 위치
확인후 마침 클릭
그럼 만들어진 js 폴더에 아까 다운로드 받은 파일을 복사해 놓는다(이 작업은 탐색기에서 프로젝트 폴더로 직접 한다)

스크립트 추가

헤드부분에 jquery 스크립트 추가 - 그림 참고

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>

==============================================
$(document).ready(function(){
$("h1").click(function(){
$(this).addClass("blue");
});
});
==============================================
<style type="text/css">
.blue { color: blue; }
</style>
=============================================
실행(run file)

나타난 화면에서 JSP Page 를 클릭하면 파란색으로 바뀜

addClass("blue"). <- 점을 찍으면 아래 그림과 같이 api가 제공된다. fadeOut("slow")를 선택

기타 여러 사항 추가

==============================
$(document).ready(function(){
$("h1").click(function(){
$(this).addClass("blue").fadeOut("slow");
});
$("a").click(function(event){
alert("나~자바~봐~~~라");
event.preventDefault();
$(this).hide("slow");
});
});
====================================

팁) 만약 메소드들에 있어 브라우저 호환때문에 경고메시지가 뜨거나 함수들에 줄이 그어져있으면 브라우저 설정을 변경한다.

도구-옵션-기타-JavaScript 에서 internet explorer 7 and later 로 변경 - OK

이번에는 jquery의 UI 중 하나인 accordion을 사용해보자.

우선 다음 사이트에서 UI 관련파일을 다운로드한다.

http://jqueryui.com/download (적당한 경로에 다운로드후 압축을 푼다) 스타일 작업 추가 - 그림 참조
UI 아코디온을 위한 자바스크립트 추가 - 2개 - 그림 참고
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript" src="js/ui.accordion.js"></script>
============================================
바디부분에 어코디온 내용 추가
div id="infolist">
<h3><a href="#">Mary Adams</a></h3>
<div>
<img src="pix/maryadams.jpg" alt="Mary Adams">
<ul>
<li><h4>Vice President</h4></li>
<li><b>phone:</b> x8234</li>
<li><b>office:</b> 102 Bldg 1</li>
<li><b>email:</b> m.adams@company.com</li>
</ul>
<br clear="all">
</div>
<h3><a href="#">John Matthews</a></h3>
<div>
<img src="pix/johnmatthews.jpg" alt="John Matthews">
<ul>
<li><h4>Middle Manager</h4></li>
<li><b>phone:</b> x3082</li>
<li><b>office:</b> 307 Bldg 1</li>
<li><b>email:</b> j.matthews@company.com</li>
</ul>
<br clear="all">
</div>
<h3><a href="#">Sam Jackson</a></h3>
<div>
<img src="pix/samjackson.jpg" alt="Sam Jackson">
<ul>
<li><h4>Deputy Assistant</h4></li>
<li><b>phone:</b> x3494</li>
<li><b>office:</b> 457 Bldg 2</li>
<li><b>email:</b> s.jackson@company.com</li>
</ul>
<br clear="all">
</div>
<h3><a href="#">Jennifer Brooks</a></h3>
<div>
<img src="pix/jeniferapplethwaite.jpg" alt="Jenifer Applethwaite">
<ul>
<li><h4>Senior Technician</h4></li>
<li><b>phone:</b> x9430</li>
<li><b>office:</b> 327 Bldg 2</li>
<li><b>email:</b> j.brooks@company.com</li>
</ul>
<br clear="all">
</div>
</div>
============================================

전체코드
===========================================
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

<!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>JQuery Test</title>
<script type="text/javascript" src="js/jquery-1.3.2.js" ></script>
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript" src="js/ui.accordion.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$("h1").click(function(){
$(this).addClass("blue").fadeOut("slow");
});
//$("a").click(function(event){
// alert("나~자바~봐~~~라");
// event.preventDefault();
// $(this).hide("slow");
//});
$("#infolist").accordion({
autoHeight: false
});
});
</script>
<style type="text/css">
.blue { color: blue; }
</style>
<style type="text/css">
ul {list-style-type: none}
img {padding-right: 20px; float:left}
#infolist {width:500px}
</style>
<link rel="stylesheet" href="css/jquery-ui-1.7.2.custom.css" type="text/css">
</head>
<body>
<h1>JSP Page</h1>
<a href="http://jquery.com/">jQuery</a>
<div id="infolist">
<h3><a href="#">Mary Adams</a></h3>
<div>
<img src="pix/maryadams.jpg" alt="Mary Adams">
<ul>
<li><h4>Vice President</h4></li>
<li><b>phone:</b> x8234</li>
<li><b>office:</b> 102 Bldg 1</li>
<li><b>email:</b> m.adams@company.com</li>
</ul>
<br clear="all">
</div>

<h3><a href="#">John Matthews</a></h3>
<div>
<img src="pix/johnmatthews.jpg" alt="John Matthews">
<ul>
<li><h4>Middle Manager</h4></li>
<li><b>phone:</b> x3082</li>
<li><b>office:</b> 307 Bldg 1</li>
<li><b>email:</b> j.matthews@company.com</li>
</ul>
<br clear="all">
</div>
<h3><a href="#">Sam Jackson</a></h3>
<div>
<img src="pix/samjackson.jpg" alt="Sam Jackson">
<ul>
<li><h4>Deputy Assistant</h4></li>
<li><b>phone:</b> x3494</li>
<li><b>office:</b> 457 Bldg 2</li>
<li><b>email:</b> s.jackson@company.com</li>
</ul>
<br clear="all">
</div>
<h3><a href="#">Jennifer Brooks</a></h3>
<div>
<img src="pix/jeniferapplethwaite.jpg" alt="Jenifer Applethwaite">
<ul>
<li><h4>Senior Technician</h4></li>
<li><b>phone:</b> x9430</li>
<li><b>office:</b> 327 Bldg 2</li>
<li><b>email:</b> j.brooks@company.com</li>
</ul>
<br clear="all">
</div>
</div>
</body>
</html>
================================================
pix폴더와 그 안에 이미지까지 복사해서 위치한 후 실행(run)
부가로, 스타일시트를 수정하기 위해 다운로드 받은 UI 압축 푼 폴더 중 css 폴더를 복사해서 프로젝트에 붙여넣습니다.

스크립트링크 추가
<link rel="stylesheet" href="css/jquery-ui-1.7.2.custom.css" type="text/css">
다시 실행(run)

Posted in jMaki, netbeans | Comment Now!

jmaki+jpa+glassfishv3(eclipselink)+pagination 2

Written on 오전 7:45 by 강여사(J.Y.Kang)

예전 게시물 올렸을 때에는 버튼을 이용하여 각각 페이지 앞뒤로의 이동을 올렸었는데,
이번에는 좀전의 yahoo의 pagination을 이용하여 페이징을 해보고자 한다.

일단 데이터베이스에서의 작업을 위해 JPA 관련 작업을 시작.

프로젝트에서 오른쪽 마우스 new - Entity Classes from Database 선택 (만약 이 메뉴가 안보이면 option (팝업창)- persistence 카테고리에 있다)

Data Source 는 jdbc/sample

선택할 테이블은 customer 를 add
다음
패키지 이름은 data

그리고 persistence unit 를 새로 작성해야 하므로 아래 버튼(create persistence unit) 클릭

이름 : 프로젝트이름+PU
프로바이더: eclipselink(v3 기본값)
나머지는 옵션대로
create
확인후 다음

그럼 자동생성된 customer.java 에 json 객체화 작업을 추가
다음내용 코드 작성
----------------------------
public JSONObject toJSON() throws Exception {
JSONObject thisJSON = new JSONObject();
thisJSON.put("name", this.getName());
thisJSON.put("city", this.getCity());
thisJSON.put("state", this.getState());
thisJSON.put("zip", this.getZip());
return thisJSON;
}
----------------------------
임포트 문제 해결
마우스오른쪽 클릭-fix import
원래 여기 이 대목에서 2개의 클래스 (하나는 서블릿, 다른 하나는 일반 자바 클래스) 를 작성해야 하는데 예전에 했던 대목인지라 작성 상세 내용은 skip 하고 이전 프로젝트의 파일 복사로 진행 (다만 파일만 복사되는 상태이므로 나머지 설정사항들은 수동으로 해줘야 함)

예전 프로젝트의 service 패키지 전체를 복사해서 source package 아래 붙여넣기
참고 1 ( Catalog.java)
-----------------------------

/*
* To change this template, choose Tools Templates
* and open the template in the editor.
*/
package service;

import data.Customer;

import java.util.List;
import javax.naming.InitialContext;
import javax.persistence.EntityManager;
import javax.persistence.Query;
import org.json.JSONArray;
import org.json.JSONObject;

/**
*
* @author carol mcdonald
*/
public class Catalog {

/** Creates a new instance of Catalog */
public Catalog() {
}
private Customer customer;

private EntityManager getEntityManager() throws Exception {
EntityManager em = (EntityManager) (new InitialContext()).lookup("java:comp/env/persistence/em");
return em;
}
private int batchSize = 5;
private int firstItem = 0;

public Customer getCustomer() {
return customer;
}

public void setCustomer(Customer customer) {
this.customer = customer;
}

public List getCustomers() throws Exception {
EntityManager em = getEntityManager();

Query q = em.createQuery("select object(o) from Customer as o");
//////kj 2009-10-01
int count = ((Long) em.createQuery("select count(o) from Customer as o").getSingleResult()).intValue();
q.setMaxResults(count);
// q.setMaxResults(batchSize);
q.setFirstResult(firstItem);
return q.getResultList();
}

public JSONArray getNextCustomersJSON(int page) throws Exception {
if (page < firstitem =" 0;" firstitem =" page" customersjson =" new"> customers = getCustomers();
for (Customer customerData : customers) {
JSONObject customerJSON = customerData.toJSON();
customersJSON.put(customerJSON);
}
return customersJSON;
}

public Customer findCustomer(String id) throws Exception {
EntityManager em = getEntityManager();
try {
Customer o = (Customer) em.find(Customer.class, id);
return o;
} finally {
em.close();
}
}

public int getItemCount() throws Exception {
EntityManager em = getEntityManager();
try {
int count = ((Long) em.createQuery("select count(o) from Customer as o").getSingleResult()).intValue();
System.out.println("size:"+ count);
return count;
} finally {
em.close();
}
}

public int getFirstItem() {
return firstItem;
}

public int getLastItem() throws Exception {
int size = getItemCount();
return firstItem + batchSize > size ? size : firstItem + batchSize;
}

public int getBatchSize() {
return batchSize;
}
}

------------------------------
참고2 CatalogServlet.java
------------------------------
/*
* To change this template, choose Tools Templates
* and open the template in the editor.
*/
package service;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONArray;

/**
*
* @author carol mcdonald
*/
public class CatalogServlet extends HttpServlet {

/**
* Processes requests for both HTTP GET and POST methods.
* @param request servlet request
* @param response servlet response
*/
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();

int page = 0;
int rowsonly = 0;
Catalog catalog = new Catalog();
response.setContentType("text/plain;charset=UTF-8");

String temp = request.getParameter("page");
if (temp != null) {
page = Integer.parseInt(temp);
}
temp = request.getParameter("rowsonly");
if (temp != null) {
rowsonly = Integer.parseInt(temp);
}

try {

// JSONArray array = catalog.getNextCustomersJSON(page);
JSONArray array = catalog.getCustomersJSON();
if (rowsonly == 1) {
out.println(array.toString());
} else {
out.println("{columns : [" +
"{ label : 'Company', id : 'name'}," +
"{ label :'City', id : 'city'}," +
"{ label : 'State', id : 'state'}," +
"{ label : 'Zip', id : 'zip'}" +
"],");
out.println("rows: ");
out.println(array.toString());
out.println(" }");
}
} catch (Exception e) {
out.println(e);
} finally {
out.close();
}
}

//
/**
* Handles the HTTP GET method.
* @param request servlet request
* @param response servlet response
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}

/**
* Handles the HTTP POST method.
* @param request servlet request
* @param response servlet response
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}

/**
* Returns a short description of the servlet.
*/
public String getServletInfo() {
return "Short description";
}//
}
-----------------------------
(이전프로젝트에서 service 패키지 복사)
(지금프로젝트의 source package 에 붙여넣기)
그런 다음 이 중 CatalogServlet 은 서블릿이므로 web.xml 을 열어 수동으로 편집
web.xml 을 연후 Servlet 탭을 클릭
오른쪽 아래 Add Servlet Element 버튼 클릭
팝업창에서 이름은 CatalogServlet 으로
클래스는 찾기에서 service - CatalogServlet 찾아서 선택
아래 URL Pattern 에는 /CatalogServlet (그림 참고)
OK
index.jsp 에서 yahoo datatable 위젯 수정

(내용은 그림 참고)source package 의 CatalogServlet.java 에서 다음 수정

47라인
// JSONArray array = catalog.getNextCustomersJSON(page);
JSONArray array = catalog.getCustomersJSON();
Catalog.java 의 50라인 수정

int count = ((Long) em.createQuery("select count(o) from Customer as o").getSingleResult()).intValue();
q.setMaxResults(count);
// q.setMaxResults(batchSize);

web.xml 에 persistence 관련 추가

그림 참고

프로젝트 실행(run)

Posted in jMaki, netbeans | Comment Now!