[1] GWT + Maven Login Page 만들기

아래 글 (musicPie) 프로젝트를 이용하여.. Login Page 를 만들어 봅자~!

musicPie 프로젝트에는 현재 hellogwt 라는 main package 로 되어 있음.

뭐 패키지 네임이야 바꿔도 되고 않바꿔도 되고 상관없지만 난 걍 안바꾸고 진행할 예정..

일단 난 디자이너가 아니므로 T스토리 Login 창을 좀 배껴와보자...

<span class="p11 d_999"><b>Email/Username:</b></span>
					<div id="idFieldContainer"></div>
					<span class="p11 d_999"><b>Password:</b></span>
					<div id="passFieldContainer"></div>
					<div style="color: red;" id="errorLabelContainer"></div>

</div>

<div class="emailSaveChk">
					<input id="saveEmail" tabindex="3" type="checkbox" name="save">
					<label title="방문할 때마다 아이디를 입력하는 수고를 덜어줍니다" for="saveEmail">
						아이디 저장</label> <span class="vBar">|</span> <span class="p11 d_999"></span>
				</div>
				<p id="ErrorMessage" class="error"></p>
			</div>
			<div class="login_copy p11 d_999">
				<p>
					<a class="getInv" href="http://periar.tistory.com/">Hslee blog
						Link</a>
				</p>
				<p class="copyLink">
					Copyright (c) <a class="p11 d_999" href="http://www.msuicpie.co.kr/" target="_blank"> 2014
						MUSICPIE.CO.KR.</a> All rights reserved.
				</p>
			</div>
		</div>
	</form>
	<iframe style="DISPLAY: none" name="CommandFrame"></iframe>

위 소스코드를 src/main/webapp/ 에 Login.html 이라고 만들어주자..

만들때 알아서 각각 <head> <body> 를 적어주자 해당 위치에....

기존의 HelloGWT.html 파일의 이름을 뒤에 .bak 를 붙여준 이유는 Application을 Run 시킬때 자꾸 어떤 html 로 실행할거냐구 물어서 귀차나서 바꿔준것이다..

GWT는 HTML파일이 2개 이상일 경우에 Run시 항상 뭘로 처음 실행할거냐고 물어본다..

그런다음 web.xml 파일을 열어

<welcome-file-list>

<welcome-file>Login.html</welcome-file>

</welcome-file-list>

welcom-file-list 의 welcome-file 항목을 수정해줘야 한다...

이건 그냥 index page가 무었인지 설정해주는것일 뿐임.

이제 HelloGWT.java 소스를 수정해야한다..

기존 Example 코드는 뭐.. 다 필요없다....

package com.hellogwt.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.*;
import com.hellogwt.client.service.GreetingService;
import com.hellogwt.client.service.GreetingServiceAsync;
import com.hellogwt.shared.domain.Greeting;

import java.util.List;

public class HelloGWT implements EntryPoint {
	private GreetingServiceAsync greetingService = GWT.create(GreetingService.class);

final Button sendButton = new Button("Send");
	final TextBox idField = new TextBox();
	final PasswordTextBox passField = new PasswordTextBox();
	final Label errorLabel = new Label();

public void onModuleLoad() 
	{
		initWidgets() ;
		initHandlers() ;
	}

private void initWidgets() 
	{
		sendButton.addStyleName("loginBtn");

idField.setHeight("20");
		passField.setHeight("20");
		idField.setFocus(true);
		idField.selectAll();

RootPanel.get("idFieldContainer").add(idField);
		RootPanel.get("passFieldContainer").add(passField);
		RootPanel.get("sendButtonContainer").add(sendButton);
		RootPanel.get("errorLabelContainer").add(errorLabel);

}

private void initHandlers() 
	{
		sendButton.addClickHandler(new ClickHandler() {
			public void onClick(ClickEvent event) {
				String strId = idField.getValue();
				String strPass = passField.getValue();
				
				Window.alert("ID:" + strId + "\n" + "Password:" + strPass);
			}
		});
	}

}

기존 코드는 다 지우고 위 소스코드로 변경한뒤 실행하자!

그럼 위와같은 화면을 볼수 있을것이다..

그럼 이제 각 Text박스에 문구를 넣고 Send 버튼을 눌러보자

그럼 위와같은 화면을 볼수 있을것이다...

뭐 너무 간단한 소스코드 이니까 소스 분석은 알아서~~~

이제 Login Form은 완료되었으니 이제 Database 와 연동하여 Login 처리를 해보도록 하겠음!

저작자표시 비영리 변경금지

'Web Program > GWT' 카테고리의 다른 글

[3] GWT + Maven Login Page Database 연동 (0)	2014.07.01
[2] GWT + Maven Login Page Database 연동 (0)	2014.07.01
[3]GWT + Maven + Spring + MyBatis Example Eclipse Project (0)	2014.06.27
[2]GWT Maven Project에 Spring + MyBatis 연동 (0)	2014.06.27
[1]mojo GWT Maven Plugin 이클립스 Project 설정하기 (0)	2014.06.27

Hslee

[1] GWT + Maven Login Page 만들기

'Web Program > GWT' 카테고리의 다른 글

댓글

티스토리툴바

[1] GWT + Maven Login Page 만들기

'Web Program > GWT' 카테고리의 다른 글

관련글

댓글

티스토리툴바