최고보다,최선을...

AJAX 방명록 만들기[6]

휴~6편은 좀 많이 늦게 올리게 되네요!!^^;;제가 이번주는 예비군 훈련이어서....^^;;; 군대에서는 아직 절 버리지 않았나 봐요!!좀 버려도 되는데...ㅋㅋ 암튼...네~~!
 이번에는 글이 들어갈 DB를 어떻게 만들었는지 확인하시고요!! 그다음에 어떻게 DB에 연결해서 넣는지 보도록 하겠습니다!! 보통 DB를 먼저 구성하고 프로그램을 짜지요!!아하...저 또한 그렇게 했는데...제가 처음쓰는 강좌라 DB 부분을 설명을 않하고 프로그램적인 것만 설명한 것 같습니다. ^^;;죄송~ 일단 DB를 어떻게 만드는지 천천히 보도록 하겠습니다. 이부분은 혹시 완전 초보자를 위한 것이므로 아시는 내용이면 그냥 AJAX 방명록 만들기[7] 강좌를 보시면 되겠습니다!그래도 이 강좌에는 제가 만든 테이블과 각각의 컬럼 설명도 있으니깐요 그 부분은 참고 해서 DB를 만들보세요~^^ 아래 그림부터 순서대로 따라해보세요!!^^

1. 그림 - DB생성1

많이 보셨던 화면 일 것 입니다. SQL Server Enterprise 화면 입니다. 테스트하기 위한 DB를 만들기 위해 local서버 >> 데이터베이스를 클릭해서 우리가 잘쓰는 마우스로 오른쪽 버튼을 클릭 합니다. 그럼 위와 같은메뉴들이 나오는데요..딱 보이죠~^^ "새 데이터 베이스"이렇게 하면 손쉽게 만들수 있습니다. (쿼리 분석기로도가능!테이블 생성 쿼리를 만들면 되겠죠!^^)

2. 그림 - DB생성2

위 그림과 같은 화면이 나타나면 테스트하기 위한 DB를 생성합니다~^^ 이름적고 확인 클릭!!간단하죠!!^^ 그럼 아래와 같이 DB가 생성이 됩니다.^^

3. 그림 - DB생성3

DB가 생성 되었다면 dbo권한을 설정해야 겠지요~ dbo 설정 방법은 여러가지가 있습니다. 제가 여기서 설명하는 방법 말고도 다른 방법도 있음을 기억하세요~^^;; 아래 그림을 보도록 하겠습니다.

4.그림 - dbo권한1

위 그림처럼 일단 보안 >> 로그인을 클릭해서 dbo로 설정할 id, password 설정해주세요~그러면서 dbo권한을 설정하면 됩니다. 아니면 여기서는 사용자 id,password를 만들고 DB에서 설정도 가능합니다. 아래 그림을 보도록 하겠습니다.

5.그림 - dbo권한2

위 그림처럼 해당 DB에 사용자를 클릭하셔서 마우스 오른쪽버튼을 클릭하면 "새 데이터베이스 사용자"라는 메뉴가 제일 위에 있습니다. 클릭하시면 위와 같은 화면이 나타납니다. 그럼 보안에서 만들었던 id를 입력하시고 그림과 같이 db_owner를 체크해주세요~^^그럼 끝나요~! 자~ 이제 DB도 생성이 됐으니깐 테이블을 만들어 보도록 하겠습니다!^^ (저는 참고로 DB이름을 "test"라고 해서 만들었습니다!^^)

6.그림 - 테이블 생성1

위 그림의 경로 처럼 test >> 테이블을 클릭하면 그림과 같은 화면이 나타나는데요!! 거기서 역시 마우스 오른쪽 버튼을 클릭하면 메뉴가 나타납니다!! 역시 딱!! 보이죠~^^ "새 테이블" 클릭하 해서 테이블을 생성해 보세요!!^^

7. 그림 - 테이블 생성2

저는 한번 위와 같은 컬럼들을 만들어 보았습니다~ 간단히 설명하자면 아래 같습니다.

 - b_seq : 글의 고유 번호가 되겠습니다.(기본 키설정)

 - b_name : 글을 작성한 사람의 닉네임을 저장합니다.

 - b_pass : 해당 글의 비밀번호를 저장합니다.

 - b_content : 해당 글의 내용를 저장 합니다.

 - b_ip : 글을 작성한 사람의 ip를 저장합니다.

 - b_time : 글의 작성 시간을 저장합니다.(기본값 : getdate())

 - b_icon : 선택한 아이콘파일의 이름을 저장합니다.

간단하게 만들었지요~^^;;이렇게 만들고 나서는 테이블 이름을 입력하고 저장하세요~^^저의 테이블 이름은 "guest_board"라고 했습니다. 이렇게 DB가 만들어 졌으니깐 작성한 글을 넣으면 되겠지요~!이제 한번 insert 프로시져을 만들어 보도록 하겠습니다. 아래 그림을 보도록 하시지요~^^

8. 그림 - insert Procedure1

위 그림과 같이 저장 프로시저를 클릭하면 그림과 같은 화면이 나타 나게 되고, 거기에서 마우스 오른쪽을 클릭하면 "새 저장 프로시져"라는 메뉴가 있습니다. 그 걸 클릭!! 따딱~하세요~^^ 그럼 아래 그림과 같이 내용을 입력 하세요~^^

9. 그림 - insert Procedure2

위 그림 처럼 내용을 입력하고 구문 검사 버튼을 클릭한 후 확인 버튼을 클릭하세요~그럼 딱 생성이 됩니다. 혹시 위 그림의 내용이 잘 안보이시는 분들를 위해 아래 코드를 참고 하세요.

Indert Procedure

CREATE proc gb_insert (              @b_name varchar(20),              @b_pass varchar(20),              @b_content varchar(5000),              @b_ip varchar(15),              @b_icon varchar(20) ) as insert into guest_board (b_name,b_pass,b_content,b_ip,b_icon) values(@b_name,@b_pass,@b_content,@b_ip,@b_icon) GO

오호~이제 DB와 프로시저까지 생성이 되었군요~이제 작성글을 넣으면 되겠지요!! 이 다음 강좌에서 내용를 넣어 보도록 하겠습니다~^^ 여기까지 읽어 주셔서 감사 합니다. 참 제가 자~알 설명을 못해서 죄송스럽네요~역시 처음부터 잘하는 사람이 어디있겠습니까~!  계속 노력하고 최선을 다하겠습니다!ㅋ (잘~할수 있습니다~^^)

AJAX 방명록 만들기[5]

이번에는 간단하게 글을 입력하고 유효성 검사를 하는걸 보시겠습니다. 저는 아주아주 간단하게 유효성 체크를 했습니다. 부족한점 이해해 주시고요!!
먼저 아래 그림을 보도록 하겠습니다!

위 그림은 내용을 입력한 모습 입니다 . 이미가 삽입이 되었죠. 어떻게 들어 갔는지 먼저 확인하고 유효성관련 된 내용을 보도록 하겠습니다! AJAX 방명록 만들기[4] 에서 이미지 모음 코드를 보았을 것입니다. 그 코드 거의 마지막쯤에 아래 코드가 있었을 것입니다.

Image Code(.aspx페이지)

<img alt="" src="images/btn/imgok.gif" onclick="imgOK()" /> <img alt="" src="images/btn/cancel.gif" onclick="imgcancel()" />

간단하죠 마우스 클릭을 하면 이벤트가 일어나는 거죠.그럼 imgcancel() 함수의 호출내용을 보도록 하겠습니다. 

Script Code (.aspx페이지)

function imgcancel() { document.getElementById("<%= pnl_imglist1.ClientID %>").style.display = "none";<?xml:namespace prefix = o /><?xml:namespace prefix = o /><?xml:namespace prefix = o /> document.getElementById("<%= pnl_imglist1.ClientID %>").style.height = "0px"; document.getElementById("<%= pnl_imglist2.ClientID %>").style.display = "none"; document.getElementById("<%= pnl_imglist2.ClientID %>").style.height = "0px"; }

간단합니다. document객체중에서 getElementById메소드를 사용해서 해당 아이디를 가진 객체를 찾는 것이지요.그래서 style를 설정하는 코드입니다. 여기서 ID는 이미지 모음 Panel ID가 되겠지요<%= 로 감싸저 있는 이유는 Panel이 서버컨트롤이라 우리가 일반적으로 그냥 ID를 쓰면 접근이 않됩니다. 그렇기 때문에 꼭 위와 같이 지정하고 ClientID를 지정해 주어야 하는것이지요.  다음은 imgOK() 함수내용을 알아 보도록 하겠습니다.

Script Code(.aspx페이지)

function imgOK() { imgcancel(); if(document.getElementById("base_check").checked) icon = "icon01.gif"; var iconn = '<img alt="" src="images/list_img/'+icon+'" />'; document.getElementById("imgAdd").innerHTML = iconn; }

위 코드를 살펴보면 먼저 imgcancel()함수를 먼저 호출하는 것을 볼수 있습니다. 왜냐..일단 이미지모음 부분을 안보이게 해야 하기 때문이겠지요^^ 그런다음에 조건이 하나 붙고있습니다. 이 조건은 이미지 모음에 있는 라디오버튼으로 사용자가 기본 check 이미지를 사용했는지를 확인하는 조건입니다. 기본 체크이미지를 선택했다면 True이기 때문에 조건에 걸려 icon변수(전역변수)에 해당값을 넣게 됩니다. 만약 사용자가 다른 이미지를 선택하게 되면 라디오버튼마다 onclick 이벤트를 주었기 때문에 아래와 같은 함수를 호출하게 됩니다.

Script Code (.aspx페이지)

function img_radio(value) { icon = "icon"+value+".gif"; }

위 img_radio함수는 인자값 하나를 갖습니다. 그 인자같은 radio버튼 속성에 value값을 받는것이지요. 저는 radio 버튼마다 value값을 설정해 주었습니다. 궁금하시면 AJAX 방명록 만들기[4]에 이미지 모음 코드를 한번 살펴보세요^^ 위 내용은 아까도 말했듯 전역으로 선언한 icon 변수에 값을 넣어 주고있습니다. 값은 이미지 파일명이 되겠습니다.value는 무엇인가 1,2,3... 이런 값이 들어 오게 됩니다. 이미지 파일명이 icon1.gif, icon2.gif..이런식으로 구성이 되어 있거든요^^ 그럼 다시 imgOk() 함수의 나머지 부분도 알아보도록 하겠습니다. 보시면 하나의 변수를 선업하고 그 값은 HTML 코드의 내용를 넣고 있습니다. img태그를 사용하고 있는 것 같지요. 맞습니다 img 태그입니다. 그리고 나서는 document개체에getElementById메소드로 imgAdd라는 ID를 찾습니다. imgAdd는 <div id="imgAdd"></div> 이것입니다. 아무것도 없는 div태그에 innerHTML속성을 사용해서 해당 블록에 태그가 동적으로 생성되게 한 것 입니다.그래서 위와같이 글쓰는 부분에 이미지가 들어 갈수 있었던것 입니다.이제 이미지가 어떻게 들어 갔는지 알았으니깐 간단하게 유효성 Script는 어떻게 쓰는지 알아 보도록 하겠습니다. 제일 위에 그림을 보면 "확인"버튼이 있습니다. 저 버튼은 서버컨트롤이 아닙니다. 그래서 클릭하면 Postback이 일어 나지 않습니다. 유효성에서 다 통과가 되야 Postback이 일어나는 거죠. 그럼 확인 버튼을 클릭하면 어떠한 Script 함수가 호출되는지 알아 보도록 하겠습니다. 코드는 아래와 같습니다.

Script Code (.aspx페이지)

function write_Ok() { var id = document.getElementById("<%= txtuserName.ClientID %>").value; var pass = document.getElementById("<%= txtpassword.ClientID %>").value; var content = document.getElementById("<%= txtContent.ClientID %>").value; Check(id,pass,content,icon); }

위 코드는 대충 보시면 이해하실것 같군요 지역변수를 3개 선언을 해서 그 변수에 해당 값을 넣게되는 것입니다. 그래서 Check라는 함수를 호출하게 되는 것입니다.Check 함수는 4개의 parameter을 받습니다. 그것은 아래와 같습니다.

 - id : 사용자가 입력한 닉네임(지역변수)
 - pass : 사용자가 입력한 아이디(지역변수)
 - content : 사용자가 입력한 내용(지역변수)
 - icon : 사용자가 선택한 이미지(전역변수)

그럼 Check함수를 알아 보도록 하겠습니다. Check함수는 따로 .js파이로 빼두었습니다.그냥 코드가 길어질 것 같아서요^^;;

 

boardScript.js페이지

// JScript 파일   function Check(id,pass,content,_icon) { if(_icon == "") { alert("이미지를 선택해주세요!"); return; } if(id == "") { alert("닉네임을 입력해주세요!"); return; } else if(!id.match(/[a-zA-Z가-힣0-9]/)) { alert("닉네임을 정확히 입력해주세요!"); return; } if(pass == "") { alert("비밀번호를 입력해주세요!"); return; } else if(pass.length < 4 || !pass.match(/[a-zA-Z가-힣0-9]/)) { alert("비밀번호를 정확히 입력해주세요!"); return; } if(content == "") { alert("내용을 입력해 주세요!"); return; } DateOK(); }

아주 간단하지 않습니까?! 부끄럽습니다! 나중에 좀더 보안할 예정입니다! 일단 간단하게 설명해드리겠습니다. if(_icon == "") 이런 조건식은 사용자가 내용을 입력하지 않고 확인 버튼을 눌렸는지 알아보기 위함이고요, else if(!id.match(/[a-zA-Z가-힣0-9]/)) 이런 조건식은 정규식을 이용한 것입니다. 사용자가 처음부터 스페이스를 이용해서 이름을 넣을 수도 있기때문이죠. 그리고 else if(pass.length < 4 || !pass.match(/[a-zA-Z가-힣0-9]/))는PassWord 입력은 4이거나 그이상이 되야하는데 4자보다 적게 넣었는지 확인하는 것이고요!!그리고 비밀번호도 스페이스로 쓸수 없게 한것입니다. 더 정확하게 하려면 입력한 비밀번호의 length 만큼 반복을 돌려서 스페이스를 넣었는지 검사를 해야겠죠!! 아무튼 유효성을 대충 이러합니다. 아주 간단합니다. 혹시 이걸보고 만들실분들은 유효성을 직접더 짜보세요!나름 재미도 있습니다^^. 이렇게 해서 유효성에 걸리면 경고 메세지가 뜨고 return이 됩니다. 여기서 return은 함수를 아예 빠져나오게 되는 것입니다. 그리고 걸리는게 없다면 제일 아래에 있는 DateOK() 함수를 호출하게 됩니다. 그럼 DateOK() 함수를 알아 보도록 하겠습니다.

Script Code(.aspx페이지)

function DateOK() { document.getElementById("<%= IMG_ICON.ClientID %>").value = icon; <%= Page.ClientScript.GetPostBackEventReference(WriteOK,"")%> }

위 코드에서 IMG_ICON는 서버컨트롤의 히든필드입니다. 히든필드에 값은 icon(이미지파일이름)값을 넣게 되는 것이요! .cs파일에서는 자바스크립트 변수에 접근할수 없기때문에 값을 히든필드에 넣어습니다. 그리고 다음 코드가 처음 보는 코드인가요!! 저 코는 임의적으로 서버컨트롤에 클릭 이벤트를 주는 것입니다. WriteOK는 링크 버튼 ID입니다. 코드에 보시면WriteOK라는 링크 버튼을 보실 수 있을 것입니다. 자세한 코드 설명은 MSDN 설명으로 보시겠습니다.

Page.ClientScript MSDN 설명

Page.ClientScript속성 : ClientScript 속성을 사용하여 웹 페이지에서 스크립트를 관리, 등록 및 추가하는 데 사용할 수 있는 ClientScriptManager 개체를 가져옵니다.ClientScriptManager 클래스는 더 이상 사용되지 않는 :Track('ctl00_LibFrame_ctl16|ctl00_LibFrame_ctl17',this);" href="http://msdn2.microsoft.com/ko-kr/library/system.web.ui.page(VS.80).aspx">Page 클래스 메서드 대신 스크립트를 관리하기 위해 ASP.NET 2.0에 새로 추가되었습니다.

그럼 GetPostBackEventReference는 무엇인가 이 또한 MSDN를 설명을 보시겠습니다

GetPostBackEventReference MSDN 설명

GetPostBackEventReference : 서버에 다시 게시 작업을 발생시키는 클라이언트 이벤트에 사용할 수 있는 문자열을 반환합니다.

GetPostBackEventReference의 오버로드 목록은 아래표와 같습니다.

ClientScriptManager.GetPostBackEventReference (PostBackOptions)	서버에 다시 게시 작업을 발생시키는 클라이언트 이벤트에 사용할 수 있는 문자열을 반환합니다. 참조 문자열은 지정한 PostBackOptions 인스턴스에 의해 정의됩니다.
ClientScriptManager.GetPostBackEventReference (Control, String)	서버에 다시 게시 작업을 발생시키는 클라이언트 이벤트에 사용할 수 있는 문자열을 반환합니다. 참조 문자열은 다시 게시 작업과 추가 이벤트 정보의 문자열 인수를 처리하는 지정된 컨트롤에 의해 정의됩니다.
ClientScriptManager.GetPostBackEventReference (PostBackOptions, Boolean)	서버에 다시 게시 작업을 발생시키는 클라이언트 이벤트에 사용할 수 있는 문자열을 반환합니다. 참조 문자열은 지정된 PostBackOptions 개체에 의해 정의됩니다. 유효성 검사에 대한 이벤트 참조도 선택적으로 등록합니다.
ClientScriptManager.GetPostBackEventReference (Control, String, Boolean)	서버에 다시 게시 작업을 발생시키는 클라이언트 이벤트에 사용할 문자열을 반환합니다. 참조 문자열은 다시 게시 작업과 추가 이벤트 정보의 문자열 인수를 처리하는 지정된 컨트롤에 의해 정의됩니다. 유효성 검사에 대한 이벤트 참조도 선택적으로 등록합니다.

저 같은 경우는 위 표에서 두번째 오버로드를 사용했다고 볼수 있습니다. 이렇게 하므로써 WriteOK 링크버튼에 OnClick="WriteOK_Click" 이벤트가 발생하는 것이며, 그로인해 서버에서는 DB에 데이터를 넣겨주는 일을 하는 것이지요! 다음에는 서버에서 DB에 어떻게 넣는지 알아보도록 하겠습니다. 읽어 주셔서 감사합니다. 제가 좀 오타가 많아서 혹시 보시면 이해해 주세요. 자꾸 이해해 달래~~!!(웃찾아 유행어 인용)

AjAX 방명록 만들기[4]

이번에는 이미지 모음이 간단한 애니메이션 효과와 함께 나타나는 코드를 보도록 하겠습니다. 제가 스토리보드 부분에서 "이미지 삽입 클릭~^^" 부분을 클릭하면 이미지 모음이 나타난다고 했습니다. 일단 그림으로 잠깐 보도록 하겠습니다.

1 - 1 그림.

1 - 2 그림

1 - 3 그림

위 그림으로 보았듯 어떤 애니메이션 효과인지 미리 집작할수 있을 것입니다. 그림 일단 이미지 모임 구현 HTML 코드를 보도록 하겠습니다.

.aspx페이지 Code

<%--#####################이미지 리스트 시작 ###########################--%> <?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /><?xml:namespace prefix = o /><?xml:namespace prefix = o /><?xml:namespace prefix = o /><?xml:namespace prefix = o /> <asp:Panel runat="server" ID="pnl_imglist1" CssClass="ImgList" Style="display: none;"> <asp:Panel runat="server" ID="pnl_imglist2" CssClass="imgList" Style="display: none;"> <table border="0" cellpadding="0" cellspacing="0" style="filter: alpha(opacity=80); background-color: White;" width="100%"> <tr> <td colspan="4" runat="server" id="img_title" style="background-color: #CCCCCC; text-align: center;font-size: 20pt; color: White; height: 35px;">이미지 모음~!</td> </tr> <tr> <td><img alt="" src="images/list_img/icon01.gif" /></td> <td><img alt="" src="images/list_img/icon02.gif" /></td> <td><img alt="" src="images/list_img/icon03.gif" /></td> <td><img alt="" src="images/list_img/icon04.gif" /></td> </tr> <tr> <td><input type="radio" id="base_check" name="img_Radio" value="01" checked="checked" onclick="img_radio(this.value)" /></td> <td><input type="radio" name="img_Radio" value="02" onclick="img_radio(this.value)" /></td> <td><input type="radio" name="img_Radio" value="03" onclick="img_radio(this.value)" /></td> <td><input type="radio" name="img_Radio" value="04" onclick="img_radio(this.value)" /></td> </tr>                중간 생략..... <tr> <td colspan="4" style="text-align: center;"> <img alt="" src="images/btn/imgok.gif" onclick="imgOK()" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img alt="" src="images/btn/cancel.gif" onclick="imgcancel()" /></td> </tr> </table> </asp:Panel> </asp:Panel> <cc1:dragpanelextender id="DragPanelExtender1" runat="server" draghandleid="img_title" targetcontrolid="pnl_imglist1"></cc1:dragpanelextender> <%--######################이미지 리스트 끝 ##############################--%>

중간 생략 부분은 같은 코드가 반복이라 생략하였습니다. 위 코드를 보시면 이미지 모음 테이블이 두개의 Panel로 감싸저 있습니다. 그리고 두개의 Panel 은Style="display: none;" 으로 설정이 되어 있습니다. 그렇기 때문에 브라우져에 나타나지 않는 것이죠!!그럼 언제 어떻게 나타나느냐!? 아래 코드를 보면 알수 있을 것입니다.

AnimationExtender Code(.aspx 페이지)

<%--##################### 애니메이션 시작 ############################# --%> <cc1:animationextender id="Animation" runat="server" targetcontrolid="Div_img"> <Animations> <OnClick> <Sequence> <StyleAction Attribute="display" Value="block" AnimationTarget="pnl_imglist1" /> <StyleAction Attribute="width" Value="20px" AnimationTarget="pnl_imglist1" /> <StyleAction Attribute="position" Value="absolute" AnimationTarget="pnl_imglist1" /> <StyleAction Attribute="top" Value="110px" AnimationTarget="pnl_imglist1" /> <StyleAction Attribute="left" Value="330px" AnimationTarget="pnl_imglist1" /> <Parallel AnimationTarget="pnl_imglist1" Duration=".3" Fps="25"> <Move Horizontal="10" Vertical="10" /> <Resize Height="600" Width="510" /> <Color AnimationTarget="pnl_imglist1" PropertyKey="backgroundColor" StartValue="#AAAAAA" EndValue="#959695" /> </Parallel> <Parallel AnimationTarget="pnl_imglist1" Duration=".5"> <Color PropertyKey="borderColor" StartValue="#CCCCCC" EndValue="#666666" /> <FadeIn AnimationTarget="pnl_imglist1" MaximumOpacity=".9" /> </Parallel> <EnableAction Enabled="false" /> <StyleAction Attribute="display" Value="block" AnimationTarget="pnl_imglist2" /> <Parallel AnimationTarget="pnl_imglist2" Duration=".3" Fps="25"> <Move Horizontal="10" Vertical="10" /> <Resize Height="600" Width="510" /> <Color AnimationTarget="pnl_imglist2" PropertyKey="backgroundColor" StartValue="#FFFFFF" EndValue="#959695" /> </Parallel> </Sequence> </OnClick> </Animations> </cc1:animationextender> <%-- ########################## 애니메이션 끝 ####################### --%>

위 코드는 AJAX ControlToolkit중에서 animationextender 컨트롤 입니다. 이름 그대로 애니메이션 효과를 정의할 수 있는 컨드롤인 것이죠! 아직까지는 animationextender 컨트롤 사용법에 대해서 자세하게 나온 책들은 없는 것같아요!(http://www.asp.net/ajax/ajaxcontroltoolkit/samples/Walkthrough/UsingAnimations.aspx)
위 주소를 참고 하시면 여러가지 애니메이션 효과를 사용하실수 있을 것입니다. 참고 하세요!^^ 이제 코드를 본격적으로 살펴 보도록 하겠습니다.

 
<cc1:animationextender id="Animation" runat="server" targetcontrolid="Div_img">

위 코드에서 id는 원하는 이름으로 주시면 됩니다. 그리고 targetcontrolid는 OnClick 이벤트가 일어날 대상의 id를 정의해 주면됩니다.(주의: id를 서버컨트롤이어야 합니다.)저 같은 경우는 "이미지 삽입 클릭" 부분은 <div> 감싸고 id를 Div_img라고 했습니다. (AJAX 방명록 만들기[3] 소스참고)

<Animations>

애니메이션을 명시해 주고 있죠!

<OnClick>

이벤트를 지정해 줍니다.

<Sequence>

단어에서 뜻이 "연속..연달아 일어남.."인 듯한거 보니깐 그 안에 있는 코드가 연달아서 일어 난다고 예상할수 있을 것입니다.

 

<StyleAction Attribute="display" Value="block" AnimationTarget="pnl_imglist1" />

 

어떤식으로 Action이 일어날것인지 정의해 주고 있죠!! Attribute는 style태그를 지정해주고 Value는 그style태그에 맞는 값을 지정해주는 것이죠!그리고 AnimationTarget은 이 style이 적용될 id를 넣어주면 되겠습니다. 위 코드에서 보시면 아시겠지만 pnl_imglist1 는 Panel의 id입니다. 거기 보시면 style에 display가 none으로 설정되어 있습니다. 하지만 클릭이벤트가 발생하면 그 style이 block으로 설정된다는 이야기죠!! 조금 이해가 되시죠!!

 

<Parallel AnimationTarget="pnl_imglist1" Duration=".3" Fps="25">

<Move Horizontal="10" Vertical="10" />

<Resize Height="600" Width="510" />

<Color AnimationTarget="pnl_imglist1" PropertyKey="backgroundColor"

StartValue="#AAAAAA" EndValue="#959695" />

</Parallel>

위 코드도 아주 멋진 애니메이션효과를 주는 코드인것 같습니다~^^

Parallel  뜻을 찾아보니.. "평행의,나란한..."이라고 하는군요!그럼 나란하게 평행하게 애니메이션이 일어 난다는 이야기겠죠!!(맞나!?)저도 공부하면서 알아보는 거라서요!ㅋ 가끔 이런식으로 이야기를 해도좀 이해해주세요^^;;자 그럼 속성을 보도록 하죠!!AnimationTarget 은 이제 바로 이해하시겠죠. Duration 은 뜻을 찾아보니깐 "지속,계속,존속" 이라고합니다.그럼 평행하게 지속적으로 무언가가 일어 난다는 거겠죠!! 저는 .3으로 설정했습니다.그간격으로 일이 진행이 되겠죠.그럼 Fps는 무엇인가..이거는 사전에도 찾을 수 없더라고요!!근데..제가 집작하는 건데요!!왠지 속도를 뜻하는게 아닐까...하네요!! 저는 25로 설정을 했는데..25를 기준으로 낮게 하면 버벅거리면서 열리고요! 높으면 아주 부드럽게 열린다고 해야하나!!그렇더라고요!!그래서 이거는 제가 직잡하는 것 입니다. 나중에 더 공부해서 알아 볼게요^^;;;

 

Move는 움직임을 뜻하겠죠! 수평으로 얼마큼 움직여라..수직으로 얼마큼 움직여라

는 내용입니다.

Resize 는 사이크를 발하는 것이겠습니다. 최종사이즈는 정하는 것이죠!!

Color 는 색의변화를 지정해주는 것입니다. 역시 AnimationTarget를 정하고 PropertyKey는 style태그를 넣고 StartValue 처음보여줄 색과 EndValue 마지막보여줄 색을 정의합니다.위에 Parallel 코드안에 Move와 Resize , Color가 감싸저 있으니 Parallel TargetID 에서 애니메이션이 일어 나겠죠! 자 그 다음 코드들은 반복되는 코드니깐 이제 조금 알수 있을 것이라고 생각이 됩니다!!

자 이제 다시 이미지 모임 구현 HTML 코드를 보시겠습니다. 제일 마지막쯤에 dragpanelextender컨트롤이라고 보이 실것입니다. 그 컨트롤에 대해서 알아보도록 하지요!

dragpanelextender컨트롤은 이름 그대로 드래그를 할 수 있는 컨트롤이라고 할 수 있습니다. 즉 사용자가 원하는 위치로 움직일 수있다는 이야기죠. 이제 이해가 되 셨습니까! 기존에는 이렇게 움직이는 컨트롤을 짜려면 Script로 힘들게 짜야했죠 아니면 어디서 복사해와서 쓰던지요. 그런데 dragpanelextender컨트롤를 이용하면 간단한 설정만으로 그런한 기능이 손쉽게 구현된다는 말씀입니다! 자 한번 속성을 간단하게 알아 볼까요.

 

TargetControlID	드래그를 가능하게 하는 패널 컨트롤의 ID입니다.
DragHandleID	패널 컨트롤을 위해 드래그를 할 수 있는 컨트롤의 ID입니다. 사용자가 이 컨트롤을 클릭하여 드래그하면 패널 컨트롤이 움직이게 됩니다

 

아주 간단하지 않습니다?!^^ 정말 간단해서 제가 따로 설명할 필요가 없을 것 같군요.속성의 내용만 보고도 알것습니다. 그렇죠!

 

그럼 이미지 모음부분은 이만 설명하도록 하겠습니다. 오~정말 제가 초보라서 그런지 설명하는데 부족한점을 많이 느끼고 있습니다.정말 쉽지 않네요. 아무튼 저같은 초보자들에게 조금이나마 도움이 되었으면 하는 바램입니다.그럼 다음에는 간단한 유효성 Script 코드를 보고 DB에 넣는 코드를 한번 보시겠 습니다~!