Whiteship's Note

주소록 화면 완성



사용자 삽입 이미지

Gmail을 따라 그리다가 개발이 한도 끝도 없이 길어질까봐 일단 화면을 좀 더 간추리고 단순하게 만들었습니다. 한 화면에서 모든 멤버 보기와 새로운 멤버 추가, 그리고 삭제가 가능한 화면입니다.

이전에 만들어둔 새로운 멤버 추가 화면은 멤버의 정보를 수정하는 화면으로 살짝 바꿨습니다.
사용자 삽입 이미지

화면을 보니 대강 프로그램이 어떻게 진행되어야 할지 선명하게 눈에 들어옵니다.

삭제 시나리오
맨 위에 있는 화면이 제일 처음 이 프로그램의 사용자가 보게 될 화면입니다. 그곳에서 삭제 버튼을 누르면 "정말로 삭제 하시겠습니까?" 라고 물어보는 팝업창(이건 어떻게 만들지;;)이 뜨며 거기서 확인을 클릭하면 해당하는 주소가 지워지고 다시 첫화면을 뿌려줍니다.

새로운 멤버 추가 시나리오
첫 화면의 빈 칸들에 적당한 문자들을 입력한 후 add버튼을 클릭합니다. 이 때 입력된 값들이 적당한 값들인지 확인 하고 email이 중복 됐거나 얼토당토 않은 문자들이 입력 됐을 때는 해당하는 메시지를 출력하고 적당한 값들이 입력 됐다면 저장이 되었음을 알려주는 팝업창을 띄워주고 다시 첫 화면을 뿌려줍니다.

수정하기 시나리오
첫 화면의 오른쪽에 있는 modify 버튼을 클릭하면 두 번째 화면(수정 화면)으로 넘어가고 그 곳에는 첫 번째 화면에서 수정을 원했던 사용자의 정보들이 input box안에 적혀 있습니다.(이건 또 어떻게 하지;;) 그리고 수정할 부분의 input box에 원하는 문자열로 수정한 뒤 Commit 버튼을 클릭하면 "새로운 멤버 추가 시나리오"에서 거쳤던 검증을 거친 뒤에 첫 번째 화면을 다시 뿌려줍니다.

'Spring > 주소록 만들기' 카테고리의 다른 글

Web Application Context 작성  (3) 2006.12.25
Spring MVC 구동을 위한 web.xml 작성  (0) 2006.12.25
이클립스에서 웹 프로젝트 생성하기  (0) 2006.12.25
Spring MVC 공부 중  (10) 2006.12.23
CSS 공부 중  (2) 2006.12.21
주소록 화면 완성  (3) 2006.12.19
중간점검  (0) 2006.12.17
HTML 공부 중 2탄  (2) 2006.12.14
Strict HTML 4.01 지침서  (6) 2006.12.14
HTML 공부 중  (2) 2006.12.13
페이징 기능 구현하기(TDD, Easymock, iBATIS, MySQL)  (2) 2006.12.11
top




: 1 : ··· : 16 : 17 : 18 : 19 : 20 : 21 : 22 : 23 : 24 : ··· : 46 :