최고보다,최선을...

AJAX 방명록 만들기[4]

프로그래밍/03.ASP.NET / 2007. 11. 17. 00:53

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>

</tr>

<tr>

</tr>

<tr>

<td><input type="radio" id="base_check" name="img_Radio"

value="01" checked="checked" onclick="img_radio(this.value)" /></td>

</tr>

중간 생략.....

<tr>

</tr>

</table>

</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">

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

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

</Parallel>

</Parallel>

<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] 소스참고)

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

이벤트를 지정해 줍니다.

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

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

<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에 넣는 코드를 한번 보시겠 습니다~!

Posted by happydong

, |

AJAX 방명록 만들기[3]

프로그래밍/03.ASP.NET / 2007. 11. 17. 00:47

AJAX 방명록 만들기[3]

1,2 강좌는 코드에 대한 내용이 별로 없어서 지루했을 것 같습니다.

이제 본격적으로 코드를 한번 살펴 보도록 하겠습니다. .aspx 페이지를 보시면 아래와 같은 코드가 들어가 있을 것입니다.

.aspx페이지

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master"

AutoEventWireup="true" CodeFile="Guest_Board.aspx.cs" Inherits="_Default" Title="Untitled Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"><?xml:namespace prefix = o /><?xml:namespace prefix = o /><?xml:namespace prefix = o /><?xml:namespace prefix = o /><?xml:namespace prefix = o /><?xml:namespace prefix = o /><?xml:namespace prefix = o /><?xml:namespace prefix = o /><?xml:namespace prefix = o />

</asp:Content>

위 코드에서 <asp:Content> 와 </asp:Content> 사이에 아래와 같은 코드를 집어 넣습니다.

.aspx 페이지

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master"

AutoEventWireup="true" CodeFile="Guest_Board.aspx.cs" Inherits="_Default" Title="Untitled Page" %>

<%--########## 여기도 추가해주세요!!아래에서 설명하겠습니다.###### --%>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

<%--##########이렇게 추가해주세요!!###### --%>

<asp:ScriptManager runat="server" ID="Scritemanager">

</asp:ScriptManager>

<asp:UpdatePanel runat="server" ID="Updatepanl">

</ContentTemplate>

</asp:UpdatePanel>

</asp:Content>

위와 같이 코드를 직접 입력해 주셔도 되고요!!아니면 컨트롤을 끌어다가 넣으셔도 상관 없습니다. 컨트롤은 아래 그림과 같이 있습니다.

위 컨트롤을 선택후 원하는 위치에 끌어다가 넣으면 코드가 알아서 생성됩니다. 그럼 ID만 정해주면 되겠죠!그럼 위 코드에서 ScriptManager 와 UpdatePanel 이 왜들어가는지 약간 궁금하시리라 생각됩니다. Ajax 방명록을 만들기위해서 제일 중요한 컨트롤들 입니다. 이 두개의 컨트롤이 없다면 조금 복잡한 코드로 만들어야 하겠죠!
. ScriptManager 컨트롤은 Ajax 컨트롤을 사용하려면 꼭 넣어야하는 코드입니다. 안그러면 일단 에러가 나거든요!! 이름 그대로 Ajax컨트롤들의 Manager 역활을 담당하는것 같습니다.
. UpdatePanel 컨트롤은 정말 대단한것 같습니다. 기존에 Ajax기술을 구현하려면 Ajax engine를 따로 구현해야 했죠. 그렇게 해야 클라이언트 브라우저에서 깜빡이 없이 데이터가 처리가 될수 있었죠. UpdatePanel안에 감싸져 있는 것들은 페이지 깜빡인 없이 데이터가 처리될 수 있습니다! 따로 Ajax engine를 만들필요 없이말이죠. 정말 대단한 컨트롤인것 같습니다. 하지만 UpdatePanel를 너무 남발하면 않좋다고 합니다. 그리고 Ajax컨트롤들도 너무 많이 사용하면 브라우저가 무거워진다고 하네요.자 그럼 이제 글쓰는 부분의 HTML코드를 보겠습니다.

HTML Code (.aspx페이지)

<asp:UpdatePanel runat="server" ID="Updatepanl">

<%--########################방명록 글쓰기 시작 ######################## --%>

※ 주의 닉네임은 1~12자이내,비밀번호는4~12자이네,내용은 1자이상이여야합니다!

Dong wook 방명록 남겨주세요~^^      <asp:Image runat="server" ID="write_Img"

ImageUrl="~/images/btn/imgdown.gif" Style="cursor: pointer;" /></div>

</div>

<asp:Panel runat="server" ID="write_Header2">

<tr>

</div>

이미지삽입 클릭!^^

</div>

</td>

</tr>

 닉네임</td>

<asp:TextBox runat="server" ID="txtuserName" TextMode="SingleLine"

CssClass="Userinfo" MaxLength="12"></asp:TextBox></td>

비밀번호</td>

<asp:TextBox runat="server" ID="txtpassword" TextMode="password" CssClass="Userinfo"

MaxLength="12"></asp:TextBox></td>

</tr>

<tr>

<asp:TextBox runat="server" TextMode="MultiLine" ID="txtContent"

CssClass="txtContent"></asp:TextBox>

</td>

</td>

</tr>

</table>

</td>

</tr>

</table>

</asp:Panel>

<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"

TargetControlID="write_Header2" ExpandControlID="write_Img"

CollapseControlID="write_Img" ImageControlID="write_Img"

ExpandedImage="~/images/btn/imgUp.gif" CollapsedImage="~/images/btn/imgdown.gif">

</cc1:CollapsiblePanelExtender>

<%--########################### 방명록 글쓰기 끝 ####################### --%>

</ContentTemplate>

</asp:UpdatePanel>

위 코드가 아래의 그림처럼 보여지게 되겠지요!

음.. 코드가 좀 길네요! 근데 기본적인 HTML코드를 아시는 분들은 이해하시리라 생각 됩니다. 저는 여기서 주요 요소만 설명해드리겠습니다. 먼저 한눈에 딱 들어오는 코드가 있죠! CollapsiblePanelExtender 컨트롤!! 컨트롤 앞에 cc1: 가 붙은 이유는 젤위에 코드에 아래와 같은 코드가 있기때문이죠.

Register(.aspx페이지)

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" <?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

TagPrefix="cc1" %>

마치 ASP.NET server 컨트롤과 비슷하게 사용되지 않습니까 <asp:TextBox....> 비슷하죠!!TagPrefix 부분에 자신이 사용한 원하는 이름으로 바꾸셔도 상관없습니다. test로 바꾸시면<test:CollapsiblePanelExtender로 쓰시면 되겠죠^^!아무튼 CollapsiblePanelExtender 컨트롤이 모하는 컨트롤이냐면요!! 스토리보트에서 보면 글쓰는 부분이 닫혔잖아요!!그걸 가능하게 해주는 컨트롤 입니다. 기존에는 자바스크립트로 어렵게 만들어야 했지만 이컨트롤을 이용하면 아주 쉽게 해결이 됩니다. 속성은 아래표와 같습니다.

TargetControlID	확장하거나 축소하는 동작을 실행할 Panel 컨트롤 ID 입니다.
CollapsedSize	축소된 상태일 때의 대상 컨트롤의 사이즈로써, 픽셀 단위로 지정합니다.
ExpandedSize	확장된 상태일 때의 대상 컨트롤의 사이즈로써, 픽셀 단위로 지정합니다.
Collapsed	처음 컨트롤이 로딩될 때 축소된 상태 또는 확장된 상태로 화면에 보이게 할 것인지를 정의합니다. (bool형 지정)
AutoCollapse	대상 컨트롤인 Panel에서 마우스를 벗어나게 했을 경우 자동적으로 축소시킬 것인지를 정의합니다(bool형 지정)
AutoExpand	대상 컨트롤인 Panel에 마우스를 올렸을 경우 자동적으로 확장시킬 것인지를 정의합니다. (bool형 지정)
ScrollContents	컨텐츠(내용)가 패널 자신보다 더 클 경우 스크롤바를 보이게 할 것인지를 정의합니다. (bool형 지정)
ExpandControlID / CollapseControlID	확장되거나 축소하게 하는 클릭 이벤트를 줄 컨트롤 ID을 정의합니다.
TextLabelID	Panel 컨트롤이 위치된 곳에서 보여줄 "상태 글자(status text)"를 나타내는 Label 컨트롤의 ID를 정의합니다.
CollapsedText	Panel 컨트롤이 축소되었을 때 TextLabelID에 의해 정의된 컨트롤에서 보여지는 글자를 정의합니다.
ExpandedText	Panel 컨트롤이 확장되었을 때 TextLabelID에 의해 정의된 컨트롤에서 보여지는 글자를 정의합니다.
ImageControlID	Panel 컨트롤이 위치된 곳에서 축소된 상태를 가리키는 Image 컨트롤의 ID를 정의합니다.
CollapsedImage	Panel 컨트롤이 축소되었을 때ImageControlID에 의해 사용되는 이미지의 경로를 지정합니다.
ExpandedImage	Panel 컨트롤이 확장되었을 때ImageControlID에 의해 사용되는 이미지의 경로를 지정합니다.
ExpandDirection	Panel 컨트롤이 상하 또는 좌우로 확장될 것인지에 대한 "Vertical"이나 "Horizontal"을 지정합니다.

위 속성을 보시면 제가 설정한 속성을 한번에 알수 있을 것 입니다.

CollapsiblePanelExtender (.aspx 페이지)

<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"

TargetControlID="write_Header2" ExpandControlID="write_Img"

CollapseControlID="write_Img" ImageControlID="write_Img"

ExpandedImage="~/images/btn/imgUp.gif" CollapsedImage="~/images/btn/imgdown.gif">

</cc1:CollapsiblePanelExtender>

아주 간단하지 않습니까^^ 초보인 저도 이렇게 가능합니다~!
이번 내용은 여기까지 다루도록 하고요 다음 편에서는 이미지 모음이 어떻게 나타나는지 알아 보도록 하겠습니다!!

Posted by happydong

, |

AJAX 방명록 만들기[2]

프로그래밍/03.ASP.NET / 2007. 11. 17. 00:43

AJAX 방명록 만들기[2]

이제 Ajax 방명록이 어떻게 만들어 졌는지 하나하나 보도록 하겠습니다!! 항상 말하지만 저또한 .NET 초보자니깐요!! 잘못된 부분이나 부족한부분 알려 주세요~! 근데 사람들이 보기는 할까 의문입니다ㅋ 제일 먼저 Visual Studio를 실행해야 겠죠!^^ 아~! 그리고 AJAX 방명록을 만드시려면 몇가지 갖추어야 할 사항이 있습니다.

ㅁ ASP.NET Extensions 를 설치를 해야 합니다.

ㅁ ASP.NET Ajax controlToolkit 참조해야 합니다.

(다운로드 받을수 있는 곳입니다. http://www.asp.net/ajax/downloads/ 가시면 ControlToolkit과 ASP.NET Extensions v1.0버전을 다운로드 할수 있습니다! 설치 방법도 간단 합니다.실행후 다음다음...아시죠!^^)
ASP.NET Extensions는 .NET Framework 2.0 이상에서 지원이 된다고 합니다. 고로 Visual Studio2005로 AJAX방명록을 만들어야 겠죠!^^
VS2005를 실행하시면 상단 메뉴에 파일 >> 새로만들기 >> 웹사이트 클릭하시면 아래와 같은 그림이 나타 납니다.

그리고 ASP.NET Extensions 설치했다면 AJAXEnabledWebSite 템플릿이 보일 것입니다. 그걸 선택을 하고 프로잭트 이름을 주면 되는 거죠! 저는 "guest_board"라고 해봤습니다! 자 이제 프로젝트가 실행이 되었겠죠!! 그럼 이제 Ajax controlToolkit dll를 참조해야합니다.

프로제트에서 오른쪽 마우스를 클릭하면 위 그림과 같이 메뉴가 나타나는데요!! 참조추가는 클릭하면 아래와 같은화면이 나타나는데요!!거기서 찾아보기 텝을 선택하신다음에 다운로드 하신 Ajax controlToolkit dll 파일을 찾아서참조해주세요!!

자 참조 추가도 했습니다!! 이제 저와 같이 파일을 추가해볼까요!!

아마 기본적으로 Default.aspx 페이지가 있을 텐데요!! 저는 그냥 MasterPage를 만들어 보았습니다. 혹시 나중을 위해서요!!저 같이 마스터페이지를 만드실거면 처음에 생성된 Default페이지는 그냥 지워 버리세요!! 지우지 않으셔도 되긴 하지만...안에 코드를 조금 바꿔야 하거든요! 그냥 지우고 만드는 좋을것 같아서요!! 그럼 아까 처럼 프로젝트에 마우스 오른쪽클릭하면 "새 항목 추가"가 있습니다. 그걸 클릭하면 여러가지 템플릿들이 나오는데요!! 거기서 마스터 페이지를 선택하세요!! 그럼 마스터 페이지만 생길거예요!! 그 다음에 MasterPage.master 파일이 생기죠 거기에서 다시 마우스 오른쪽 클릭하면 또 여러가지 메뉴가 나타나는데요!! 거기서 콘텐트 페이지 추가를 선택하세요. 그럼 .aspx페이지가 생성됩니다. 그럼 이름을 바꾸시면 됩니다. 저는 "Guest_Board.aspx" 라고 했습니다. 지금까지 이해 안되시는 부분 없으셨죠~^^ 그 다음에 위 그림과 같이 .js파일, .css파일, images폴더, boardClass.cs, dbClass.cs 를 생성합니다. 이 파일역활을 갈약하게 설명하자면 아래 같습니다.

- boardClass.cs : 글쓴 내용을 받아서 프로시져의 Parameter를 생성하는 역활을 합니다.

(왜 이렇게 코드를 짯을까...그냥 이렇게 해보고 싶었어요!!)

- dbClass.cs : 데이터 베이스에 연결하고 쿼리를 실행하는 역활을 합니다.

- js파일 : 유효성 체크하기 위함

- css파일 : style를 적용하려고요!!(근데...짜다보니깐 별로 안쓰더라고요!제가 아직 미흡해서 그런 것 같아요!!)

아무튼 저는 이렇게 파일을 생성했습니다~^^ 이제 여기끼지 준비가 되었다면 이제 다음 강좌에서 글쓰는 부분을 만들어 보도록 하겠습니다!! 빨리빨리 만들어야하는데...짜꾸 이렇게 말만 많았네요!! 저같은 초보자들을 위해서 하나하나 차근차근 집고 넘어가기 위해서 입니다. 그러니 양해해주세요!^^

Posted by happydong

, |

«이전 1 ··· 449 450 451 452 453 454 455 다음»

최고보다,최선을...

카테고리

달력

공지사항

태그목록

최근에 올라온 글

AJAX 방명록 만들기[4]

AJAX 방명록 만들기[3]

AJAX 방명록 만들기[2]

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

링크

티스토리툴바