지난 번 Visual Editor 설치 포스팅에 이어 이번에는 간단하게 Visual Editor를 사용하는 방법에 대해서 알아보겠습니다 ^^
Visual Editor는 AWT, SWING, SWT 등의 UI 라이브러리로 개발을 해 보셨거나 아님, 책의 간단한 예제라도 공부해 보신 분들이라면 직관적으로 사용할 수 있도록 만들어져 있어서 지금 소개하는 내용만 보시더라고 쉽게 Visual Editor를 이용해 UI 프로그래밍을 하실 수 있으리라 생각합니다.
당연히 이클립스를 실행해야겠죠? ㅎㅎ 그리고 자바 프로젝트를 하나 만드신 후 Alt + Shift + N 단축키 또는 File -> New File을 클릭하셔서 Other ..를 선택합니다.
그럼 아래와 같이 "New" 다이얼로그가 뜨는데요 트리 목록에서 Java -> Visual Class를 선택합니다. 그리고 Next ~
"New Java Visual Class" 다이얼로그에서 "Style"의 Swing -> Frame을 선택합니다. 물론 Dialog를 만드시거나 Applet 등을 개발하실 분은 해당하는 것을 선택하시면 됩니다.
아래와 같이 에디터가 떳습니다.
그럼 버튼을 하나 달아서 클릭을 하면 간단한 메시지 박스가 뜨도록 만들어 볼까요 ~ 오른쪽 Platte메뉴에서 "JButton"을 클릭하고 윈도우의 패널의 Center에 위치시킵니다. 참고로 기본 레이아웃 메니저로 Border Layout이 선택되어져 있습니다.
아래 소스 에디터를 보면 버튼에 대한 소스가 자동으로 나타나는 것을 확인 하 실수 있죠? ㅎㅎ 그럼 버튼에 이름을 붙여볼까요 ~ 버튼 컨트롤에 마우스를 가볍게 클릭해주면 왼쪽 상단에 입력 상자가 나타납다.
버튼에 "Click"이라는 이름이 붙여졌고 아래 소스 에디터에 보면 JButton.setText("Click");이란 소스가 자동으로 생성 되었습니다. 아 ~ 이럴게 편할 수가 ㅡㅜ
이제 이벤트 핸들러만 정의해주면 끝입니다. 이벤트 핸들러를 정의해 주는 방법은 컨트롤에 마우스 오른쪽 버튼을 클릭하고 Events -> actionPerformed를 클릭해 줍니다. 물론 다른 컨트롤에 대해서는 해당 이벤트 핸들러 목록이 나타납니다. 적절히 선택해서 코딩해 주시면 되겠죠 ^^
그럼, 아래 소스 에디터에 이벤트 핸들러 소스가 자동으로 생성되는데 기본으로 생성된 System.out.print 부분을 삭제하시고 메시지 박스 관련 코딩을 해줍니다. 그럼 끝 ~~~~~~~~~~
그럼 실행을 해볼까요? 실행을 하면 아까 함께 만들었던 윈도우가 화면에 나타나고 버튼을 클릭하면 메시지 박스가 뜨네요 ^^
'Tool > Eclipse' 카테고리의 다른 글
| 이클립스 톰캣 제거 후 재 설정 안될때 (0) | 2015.05.19 |
|---|---|
| 이클립스 버젼 정리 (0) | 2014.01.28 |
| eclipse에서 jquery script validate 오류 해결 (0) | 2012.09.24 |
| 이클립스에서 JSP 소스의 코드어시스트가 되지 않을 경우- (0) | 2012.06.29 |
jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jsp를 이용한 달력</title>
<script type="text/javascript">
function selectCheck(form){
form.submit();
}
function monthDown(form){
if(form.month.value>1){
form.month.value--;
}else {
form.month.value=12;
form.year.value--;
}
form.submit();
}
function monthUp(form){
if(form.month.value<12){
form.month.value++;
}else {
form.month.value=1;
form.year.value++;
}
form.submit();
}
</script>
</head>
<body>
<%
//현재 날짜 정보
Calendar cr = Calendar.getInstance();
int year = cr.get(Calendar.YEAR);
int month = cr.get(Calendar.MONTH);
int date = cr.get(Calendar.DATE);
//오늘 날짜
String today = year + ":" +(month+1)+ ":"+date;
//선택한 연도 / 월
String input_year = request.getParameter("year");
String input_month = request.getParameter("month");
if(input_month != null){
month = Integer.parseInt(input_month)-1;
}
if(input_year != null){
year = Integer.parseInt(input_year);
}
// 1일부터 시작하는 달력을 만들기 위해 오늘의 연도,월을 셋팅하고 일부분은 1을 셋팅한다.
cr.set(year, month, 1);
// 셋팅한 날짜로 부터 아래 내용을 구함
// 해당 월의 첫날를 구함
int startDate = cr.getMinimum(Calendar.DATE);
// 해당 월의 마지막 날을 구함
int endDate = cr.getActualMaximum(Calendar.DATE);
// 1일의 요일을 구함
int startDay = cr.get(Calendar.DAY_OF_WEEK);
int count = 0;
%>
<form method="post" action="calendar.jsp" name="change">
<table width="400" cellpadding="2" cellspacing="0" border="0" align="center">
<tr>
<td width="140" align="right"><input type="button" value="◁" onClick="monthDown(this.form)"></td>
<td width="120" align="center">
<select name="year" onchange="selectCheck(this.form)">
<%
for(int i=year-10;i<year+10;i++){
String selected = (i == year)?"selected":"";
String color = (i == year)?"#CCCCCC":"#FFFFFF";
out.print("<option value="+i+" "+selected+" style=background:"+color+">"+i+"</option>");
}
%>
</select>
<select name="month" onchange="selectCheck(this.form)">
<%
for(int i=1;i<=12;i++){
String selected = (i == month+1)?"selected":"";
String color = (i == month+1)?"#CCCCCC":"#FFFFFF";
out.print("<option value="+i+" "+selected+" style=background:"+color+">"+i+"</option>");
}
%>
</select></td>
<td width="140"><input type="button" value="▷" onClick="monthUp(this.form)"></td>
</tr>
<tr>
<td align="right" colspan="3"><a href="calendar.jsp"><font size="2">오늘 : <%=today %></font></a></td>
</tr>
</table>
</form>
<table width="400" cellpadding="2" cellspacing="0" border="1" align="center">
<tr height="30">
<td><font size="2">일</font></td>
<td><font size="2">월</font></td>
<td><font size="2">화</font></td>
<td><font size="2">수</font></td>
<td><font size="2">목</font></td>
<td><font size="2">금</font></td>
<td><font size="2">토</font></td>
</tr>
<tr height="30">
<%
for (int i=1;i<startDay;i++){
count++;
%>
<td> </td>
<%
}
for (int i=startDate;i<=endDate;i++){
String bgcolor = (today.equals(year+":"+(month+1)+":"+i))? "#CCCCCC" : "#FFFFFF";
String color = (count%7 == 0 || count%7 == 6)? "red" : "black";
count++;
%>
<td bgcolor="<%=bgcolor %>"><font size="2" color=<%=color %>><%=i %></font></td>
<%
if(count%7 == 0 && i < endDate){
%>
</tr>
<tr height="30">
<%
}
}
while(count%7 != 0){
%>
<td> </td>
<%
count++;
}
%>
</tr>
</table>
</body>
</html>
css
@charset "utf-8";
* {
margin: 0;
padding: 0;
line-height: 1.5;
font-family: gulim, sans-serif;
font-size:110%;
text-align:center;
}
.a2{
font-size:20px;
text-decoration: none;
color: #5c5c5c;
}
.list_over { background-color:#F3F7FD; }
.list_out { background-color:#FFFFFF; }
.list_over2 { background-color:#e5e5e5; }
a {
text-decoration: none;
color: #5c5c5c;
}
#today{
background-color:#CCCCCC;
color:#000000;
}
.base{
border:1px solid #8e8e8e;
}
.sun{
border:1px solid #8e8e8e;
color:#FF0000;
}
tr{
height:11%;
}
a:hover {
text-decoration: underline;
color: #5c5c5c;
}
.dot {style;
border-top-style: dashed;
border-right-style: dashed;
border-bottom-style: dashed;
border-left-style: dashed;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-color: rgb(71, 71, 71);
border-right-color: rgb(71, 71, 71);
border-bottom-color: rgb(71, 71, 71);
border-left-color: rgb(71, 71, 71);
background-color: rgb(232, 232, 232);
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
p style:margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
table {
border-collapse: collapse;
border-cellpadding: cellpadding;
height:100%;width:100%;
align:center;border:0;
}
주석안에 설명 다 있습니다.
CSS
마우스 온오버 효과 ,오늘날짜 표시,일요일 빨간색
'WebPrograming > JSP' 카테고리의 다른 글
| <jsp:include> 팁 (0) | 2013.01.18 |
|---|---|
| 뒤로가기 방지 (0) | 2012.06.11 |
MySQL 내부함수를 사용하는 방법으로..
SELECT @RNUM:=@RNUM+1 AS ROWNUM FROM (SELECT @RNUM:=0) R
쿼리를 실행해보면 ROWNUM 컬럼에 값이 1이 찍혀나온다..
이걸 응용해서..
function foo(){
if (counter <= 10) return;
// it works!
}
SELECT @RNUM:=@RNUM+1, R.* AS ROWNUM FROM ( SELECT @RNUM:=0, Q.* from ( 페이징 없는 오리지널 쿼리문 ) Q ) R limit 0, 20