<script>
//screen.width  : 현재 운영체제의 너비
//screen.height : 현재 운영체제의 높이
w = 640;    //팝업창의 너비
h = 510;    //팝업창의 높이

//중앙위치 구해오기
LeftPosition=(screen.width-w)/2;
TopPosition=(screen.height-h)/2;

//팝업 호출
function popup_open() {  
    window.open(
        팝업url,
        "팝업창이름",
        "width="+w+",height="+h+",top="+TopPosition+",left="+LeftPosition+", scrollbars=no");
}
</script>



- 부록

window.open()의 모든 옵션들에 대한 이해

  • name = window.open( "창에 보여줄 파일/홈페이지의 이름/주소", "창의 이름", "옵션" )

window.open() 메소드에 전달할 수 있는 파라미터 중 첫 번째는 보여줄 내용이고, 두 번째는 target으로서의 창 이름이며 세 번째가 창의 위치와 크기 및 모양을 지정할 수 있는 옵션 그룹이다. 그리고 window.open() 메소드가 되돌리는 값을 name에 담았다면 그 name은 그 창(자식 창)을 연 opener(부모 창)에서 자식 창을 컨트롤할 수 있는 이름이 된다.

다음과 같이 창을 열어보자.

<input type=button value="창" onClick= "window.open( 'small.htm','new','left=300, top=300, width=400, height=300, toolbar=no, location=yes, directories=no, status=no, menubar=no, scrollbars=yes, copyhistory=yes, resizable=no')">

<INPUT>

참고로 가끔 보면 옵션들 사이에 빈칸이 있으면 안 된다고 말하는데, 이것은 넷스케이프에 관한 설명인 듯하다. 익스플로러에서도 줄바꿈(리턴)이 있으면 안 된다. 하드 리턴(문단 바꿈, <p>)은 물론이고 소프르 리턴(줄만 바꿈, <br>)도 끼어들면 결코 안 될 것이다.

창 열기 옵션은 상당히 많은데, 알아 두면 좋지만 다 외우기는 쉽지 않다. 모든 옵션을 한 번 보되, 나름대로 그룹화하여 소개한다. 이 내용은 1차적으로 http://pl.changwon.ac.kr/~chowing/js/win_open.html을 참고한 것이다. 넷스케이프 전용인지 익스플로러 전용인지 등을 확인하는 데 도움이 될 참고 사이트는 http://www.kbtech777.co.kr/lecture/webprog/jscript/javalibrary.htm(Javascript 속성 라이브러리) 등.

위치

screenX / left(ie전용) : 왼쪽 좌표, screenY / top(ie전용) : 위쪽 좌표

크기

width : 너비, height : 높이

resizable(크기변경 허용 여부)

innerWidth, innerHeight, outerWd\idth, outerHeight(넷스케이프 전용?)

다른 창과의 관계

dependent(opener가 닫히면 함께 닫힘)

alwaysLowered(항상 깔림), alwaysRaised(항상 드러남)

z-lock(yes로 설정하면, 활성화되어도/포커스가 주어져도 다른 창 위로 떠오르지는 못하게 막는다)

기타 옵션들

hotkeys( no로 지정하면 menubar 없이는 (security 및 quit) 핫키를 제외한 어떤 핫키도 사용할 수 없게 된다 )

directories(디렉터리 버튼들)

location(로케이션 엔트리)

menubar(File, Edit, View, 기타의 메뉴바)

scrollbars(필요할 때 나타날 스크롤바)

status(아래쪽 상태바)

titlebar(위쪽 타이틀바)

toolbar(Back, Forward, 기타의 툴바)

IE4(이상)에서만 사용 가능한 옵션들

channelmode(채널바가 있는 창)

fullscreen(전체 화면 차지)

left(screenX), top(screenY)

위와 같은 방식으로 정리하면 저절로 외워지게 하는 데 도움이 되지 않을까 생각한다. 정리한 직후에 남는 궁금증은 z-lock과 alwaysLowered는 동일한 옵션인가? 하는 점이다. 실습이 최상의 선택이라고 믿으므로 차근히 테스트해 보자.

먼저, 아무 옵션도  주지 말고 창을 열어 보자.

<input type=button value="창" onClick= "window.open( 'small.htm','new','')">

 

타이틀바, 메뉴바, 툴바, 로케이션 엔트리, 스크롤바, 상태바 등 아무튼 얼른 보아서 모든 옵션들이 다 yes로 설정되어 나타나는 것 같다. 이번에는 크기와 위치만을 지정하여 창을 열어 보자.

<input type=button value="창" onClick= "window.open( 'small.htm','new','left=300, top=300, width=400, height=300')">

 

이번에는 타이틀바만 나타나고, 다른 모든 것이 no로 설정된 모양이다(최대화 버튼이 죽어 있다). resizable로 no인 것이 분명하다. 옵션 중에 하나라도 설정하면 타이틀바와 hotkeys만 yes로 되고 나머지는 모든 no로 디폴트 설정되는 것이라고 이해하면 될 것 같다.

다음으로, resizable, resizable=yes 또는 resizable=1을 크기, 위치 지정과 함께 주어 보자.

<input type=button value="창" onClick= "window.open( 'small.htm','new','left=300, top=300, width=400, height=300, resizable=1')">

 

최대화 버튼이 살아나고, 가장자리에 마우스를 대면 리사이즈 화살표 모양으로 변한다. 이번에는 디렉터리 버튼들을 나타내어 보자.

<input type=button value="창" onClick= "window.open( 'small.htm','new','left=300, top=300, width=400, height=300, resizable, directories')">

 

타이틀바 아래에 '연결, 링크 사용자 정의, 인터넷 시작' 등 줄이 나타나고 그 줄 오른쪽의 >> 표시를 클릭하면 채널 가이든 등 리스트가 드롭다운된다. 이번에는 로케이션 엔트리를 나타내어 보자.

<input type=button value="창" onClick= "window.open( 'small.htm','new','left=300, top=300, width=400, height=300, resizable, directories, location')">

 

이번에는 디렉터리 버튼들이 오른쪽으로 밀려 나가고, 같은 줄 왼쪽에 '주소'라는 표시와 로케이션 드롭다운이 심어져 있다.

<input type=button value="창" onClick= "window.open( 'small.htm','new','left=300, top=300, width=400, height=300, resizable, directories, location, menubar')">

 

타이틀바와 로케이션/디렉터리 중간에 메뉴바 줄이 삽입된다.

<input type=button value="창" onClick= "window.open( 'small.htm','new','left=300, top=300, width=400, height=300, resizable, directories, location, menubar, scrollbars')">

 

스크롤바를 지정하면, 스크롤할 필요가 없는 경우에도 오른쪽의 스크롤바는 여전히 나타난다.

<input type=button value="창" onClick= "window.open( 'small.htm','new','left=300, top=300, width=400, height=300, resizable, directories, location, menubar, scrollbars, toolbar')">

 

타이틀바, 메뉴바 아래에 뒤로/앞으로/중지/새로고침 등의 툴바가 삽입된다.

<input type=button value="창" onClick= "window.open( 'small.htm','new','left=300, top=300, width=400, height=300, resizable, directories, location, menubar, scrollbars, toolbar, status')">

 

아래쪽 상태바까지 모든 것이 다 나타난다.


- 날짜포멧 API

Letter Date or Time Component Presentation Examples
G Era designator Text AD
y Year Year 1996; 96
M Month in year Month July; Jul; 07
w Week in year Number 27
W Week in month Number 2
D Day in year Number 189
d Day in month Number 10
F Day of week in month Number 2
E Day in week Text Tuesday; Tue
a Am/pm marker Text PM
H Hour in day (0-23) Number 0
k Hour in day (1-24) Number 24
K Hour in am/pm (0-11) Number 0
h Hour in am/pm (1-12) Number 12
m Minute in hour Number 30
s Second in minute Number 55
S Millisecond Number 978
z Time zone General time zone Pacific Standard Time; PST; GMT-08:00
Z Time zone RFC 822 time zone -0800

그리고 아래의 간단한 예제는 API문서에서..
Date and Time Pattern Result
"yyyy.MM.dd G 'at' HH:mm:ss z" 2001.07.04 AD at 12:08:56 PDT
"EEE, MMM d, ''yy" Wed, Jul 4, '01
"h:mm a" 12:08 PM
"hh 'o''clock' a, zzzz" 12 o'clock PM, Pacific Daylight Time
"K:mm a, z" 0:08 PM, PDT
"yyyyy.MMMMM.dd GGG hh:mm aaa" 02001.July.04 AD 12:08 PM
"EEE, d MMM yyyy HH:mm:ss Z" Wed, 4 Jul 2001 12:08:56 -0700
"yyMMddHHmmssZ" 010704120856-0700
"yyyy-MM-dd'T'HH:mm:ss.SSSZ" 2001-07-04T12:08:56.235-0700


이정도면 어느정도 이해는 하고 사용은 할수 있겠다.


- 사용예제

        Date now = new Date();
        SimpleDateFormat format = new SimpleDateFormat("yyyyMMddHHmmss");

  String firstDt = format.format(now);


'공부 > JAVA' 카테고리의 다른 글

JAVA_[ OS 정보 확인 ]  (0) 2013.09.30
JAVA_[ Int & Integer 차이 ]  (0) 2013.03.22
JAVA_[Vector]  (0) 2012.07.31
JAVA_[Thread]  (0) 2012.06.23
JAVA_[객체_직렬화]  (0) 2012.06.23

- 우선, STRUTS 에서 구성하는 방법 세가지

1. POJO(Plain Old Java Object)

2. implements Action

3. extends ActionSupport    (유효성 체크 가능 : validate() )

요건 알고 시작해야지!

- 2번째 implements Action 에서 도메인 오브젝트(모델영역 : ex - User.java)

모델영역의 도메인 오프젝트를 독립적으로 분리시킴으로써, 어떤 프레임워크 상에서 어떤 뷰를 사용해서 어떻게 구현하였는지

에 대한 영향을 받지 않도록 하기위함.


MVC 패턴지향의 예(교재 : 스트럿츠2 프로그래밍 입문)

1. Model

2. Action

3. Dao

- 모델(Model : Bean.java) 생성(Getter * Setter) 후 struts.xml 에  <action name="" class=""></action> 등록하고

  package model;

public class User {

    private String userId;
    private String userPw;
    private String userName;

    /* Getter & Setter */
    public String getUserId() {
        return userId;
    }
    public void setUserId(String userId) {
        this.userId = userId;
    }
    public String getUserPw() {
        return userPw;
    }
    public void setUserPw(String userPw) {
        this.userPw = userPw;
    }
    public String getUserName() {
        return userName;
    }
    public void setUserName(String userName) {
        this.userName = userName;
    }

    /* toString */
    @Override
    public String toString() {
        String result;
        result =  "User [userId=" + userId + ", userPw=" + userPw + ", userName="
                + userName + "]";
        return result;
    }// end - toString Method

}// end - UserClass


- <action></action> 밑에 <interceptor-ref name="params"/> 등록해서 입력 폼에서 요청 파리미터와 같은 이름을 가진

   액션 프로퍼티에 값을 저장, 액션 수행 execute() 후 실행할 result 페이지 등록

<struts.xml>

        <!-- 도메인 오브젝트 테스트 -->
        <action name="UserRegForm2">
            <result>/jsp/userRegForm2.jsp</result>
        </action>
        <action name="UserRegAction2" class="action.UserRegAction2">
            <interceptor-ref name="params"/>
            <result name="success">/jsp/userRegSuccess.jsp</result>
        </action>


- action 페이지에서 도메인 오프젝트(Model : Bean) 생성, get, set 생성 후

execute() 메서드에서 Dao 호출하여 DB 작업

<UserRegAction2.java>

  package action;

import model.User;

import com.opensymphony.xwork2.Action;

import dao.UserDao;

public class UserRegAction2 implements Action {

    private User user;

    public User getUser() {
        return user;
    }

    public void setUser(User user){
        this.user = user;
    }

    @Override
    public String execute() throws Exception {
        /* Dao Instance Create */
        UserDao userDao = new UserDao();
        userDao.create(user);
        return SUCCESS;
    }// end - execute Method

}// end - UserRegAction2 class


- action 에서 Model 객체 Dao 넘김 -> Dao 에서 데이타베이트 처리(현 예제는 간단히 Model 객체 출력으로 대처)

<UserDao>

package dao;

import model.User;

public class UserDao {

    public void create(User user) {
        System.out.println("사용자를 추가하였습니다.");
        System.out.println("추가된 사용자의 정보");
        System.out.println(user);
    }// end - create Method

}// end - UserDao class


이런 방식인데. 현 주제의 implements Action 도메인 오브젝트 를 사용하면 입력 폼이 있는 JSP 페이지에서

<form action="action Name"> 으로 넘겨줄때 Parameter 이 액션객체로 넘어갈때. 액션에 생성된 Model 인스턴스명 + 변수명 을

같이 지정해 주어야 한다.

(※ 책에서 그냥 도메인오브젝트명이래서 긴가민가 하다 액션에서 Model 인스턴스명 변경하고 테스트하니 오류 발생)

<input type="text" name="액션에서생성한Model 인스턴스명.변수명"> -> <input type="text" name="user.userId">  이렇게!!!

또. action execute() SUCCESS 이후 struts.xml 에 등록한 <result name="success"></result> 에 등록한 페이지에서 보여줄때도

같은방식으로 보여줘야 한다. 예를 들면 아이디 : ${user.userId} 이렇게!!!!


와~ 신기하다!! 근데 조금만 쓰면 입력 폼이 존재하는 JSP 와 결과를 보여줄 JSP 모든 뷰에서 action 에서 생성한 인스턴스명을 꼭

붙여주여야 해서 어간 불편한게 아닐수 아닐수 아닐수 없을수 없다.

그래서. 사용하는것이 "ModelDriven" 와 "Preparable" 두개이다. 이건 다음장에서 설명









+ Recent posts