2010. 8. 13. 04:32
COMPUTER TECH/C# 실전자료

Ajax Control Toolkit

Ajax Control Toolkit

Accordion, DragPanelExtender

 

   

 

@@AjaxControlToolkit 다운로드 및 적용방법!!

STEP1)

AjaxControlToolkit 다운로드 받는 곳: http://ajaxcontroltoolkit.codeplex.com/releases/view/43475


STEP2)

사이트로 들어가서 해당되는 파일을 다운로드를 받습니다. 그리고 파일이 압축되어 있는데 압축을 풀어줍니다.

압축을 풀게 되면, AjaxControlToolkit.dll 파일과 Toolkit에 대한 샘플 코드를 볼 수 있는 압축파일을 확인 할 수 있습니다.

 

 

 

STEP3)

그리고 Visual Studio 2008을 실행시고 웹사이트로 프로젝트 하나를 만듭니다.

도구상자 툴에 가서 탭 추가를 클릭합니다.

 

 

STEP4)

 

그리고 탭이름을 AjaxControlToolkit으로 해줍니다.

 

 

STEP5)

마우스 오른쪽 버튼을 클릭 후 항목 선택을 선택해 줍니다.

 

 

 

STEP6)

-선택을 하게 되면 위에 스크린 화면처럼 도구 상자 항목 선택 창이 나옵니다. 그리고 찾아보기를 클릭합니다.

STEP7)


-처음 다운로드 받은 파일의 경로를 찾아가 AjaxControlTookit.dll 파일을 선택 후 열기를 클릭합니다.

STEP8)

-여러 컨트롤과 Extender가 추가된 것을 확인 할 수 있습니다.

 지금부터 여러기능 중 Accordion과 DragpanelExtender를 사용해 보겠습니다.

그전에 컨트롤과 익스텐더의 차이점을 알아보겠습니다.

 

-컨트롤과 익스텐더는 어떻게 다를까?

컨트롤은 UI를 가지며 독립적으로 자신의 맡은 바 임무를 수행하는 컴포넌트입니다.

익스텐더는 UI를 가지지 않으며 다른 컨트롤에 접목시켜서 특정 기능을 사용할 수 있게 하는 기능 확장 컴포넌트입니다.

 

@@DragPanelExtender 사용하기

 -여러 컨트롤과 연계하여 사용하며, 페이지 내에서 자유롭게 드래그 앤 드롭할 수 있게 합니다.

-AJAX 확장 탭에서 ScriptManager 툴을 선택 후 디자인창에 드래그 합니다.

 

-표준탭에서 Calender 툴을 선택 후 ScriptManager와 마찬가지로 디자인창으로 드래그합니다. 그러면 위에 화면처럼 달력이 나타나게 됩니다.

 

달력을 클릭하면 옆에 작은 화살표가 나타납니다. 화살표를 클릭하면, 자동서식과 Extender추가 작업이 있습니다. 일단 자동 서식을 클릭 후 원하는 모양으로 꾸민 후, Extender 추가를 클릭해보겠습니다.

-       클릭하게 되면 밑에 화면처럼 마법사 창이 나오는데, DragPanelExtender를 클릭 후 확인 !!


-적용 후, 실행을 해보면 드래그가 가능하다는 걸 확인 할 수 있습니다. DragPanel은 달력뿐만 아니라, Panel이라든지 여러 컨트롤에도 적용이 가능합니다. 한번 실습해보세요.

 

@@Accordion 컨트롤 사용하기

-       이번에는 Extender가 아닌 컨트롤도 사용해보겠습니다. Accordion 컨트롤은 웹 서버 컨트롤로서, 다중 영역(Pane)을 출력하지만, 한번에 하나의 영역만을 보여주는 컨트롤입니다. 쉽게 말해, 악기인 아코디언과 마찬가지로 열렸다 접혔다 하는 모습을 생각하시면 됩니다.


-DragPanel과 마찬가지로 처음에는 ScriptManger 툴을 디자인 창으로 드래그합니다. Ajax를 사용할 경우는 처음에는 거의 ScriptManager툴을 사용한다고 생각하시면 됩니다.

 

-도구상자에서 Accordion툴을 사용하여 디자인 창에 드래그합니다.

Accorion속성은 여러가지가 있습니다. 속성에 대한 설명은 밑에서 설명하겠습니다. 이번 실습에서는 가볍게 ContentCssClass, HeaderCssClass, FadeTransitions를 사용하겠습니다.

 

 

 

 

 

 

 

 

오류: True값으로 줘야 작동됩니다.

 

-ACCORDION에 속성에 대한 설명입니다. 참고하시고 직접 실습해보세요.

속성

설명

selectedIndex

초기에 보여질 AccordionPane 입니다.

(서수로 지정하며, 0은 첫 번째를 의미합니다)

HeaderCssClass

헤더에 적용할 CSS 클래스명입니다. Accordion에 이 속성이 지정되면 그는 전체 Pane 헤더에 적용되며, AccordionPane에 지정되면 해당 Pane에만 스타일을 적용한다.

HeaderSelectedCssClass

선택된 헤더에 적용할 CSS 클래스명

ContentCssClass

본문에 적용할 CSS 클래스명.

FadeTransitins

페이딩 변화 효과를 사용하려면 true

TransitinDuration

변화가 진행되는 밀리 초 단위의 시간

FramesPerSecond

변화 애니메이션에 사용되는 초 당 프레임 수

AutoSize

Accordion의 크기를 조절합니다.

None은 기본 크기 그대로 유지합니다

Limit은 지정된 크기(height)보다 커지지 못하게 제한을 합니다 (커질 경우, 스크롤)

Fill은 Pane의 크기에 맞게 실제 크기가 맞춰짐을 의미합니다

RequireOpenedPane

열려져 있는 Pane의 헤더가 클릭될 때, 그 Pane이 닫히지 않게 합니다.

SuppressHeaderpostbacks

헤더 내부에 있는 요소의 클라이언트 측 클릭 이벤트가 일어나는 것을 막습니다.

 

-       AccordionPane 툴을 쓰기 위해 소스에 <Pane>을 추가 시킵니다. <Pane> </Pane>안에 AccordionPane툴을 추가 시켜 줍니다.

<cc1:Accordion ID="Accordion1" runat="server" ContentCssClass="content"

            HeaderCssClass="header" FadeTransitions="True">

            <Panes>

                <cc1:AccordionPane ID="AccordionPane1" runat="server">

                <Header>선문비트 1조 명단</Header>

                <Content>박중선 김정학 쿠니씨 성진용 송창은 설성훈</Content>

                </cc1:AccordionPane>

                <cc1:AccordionPane ID="AccordionPane2" runat="server">

                <Header>선문비트 2조 명단</Header>

                <Content>김영찬 유익재 성종현 오두환 윤종수 강병창</Content>

                </cc1:AccordionPane>

                <cc1:AccordionPane ID="AccordionPane3" runat="server">

                <Header>선문비트 3조 명단</Header>

                <Content>황성노 홍광수 강성길 이재욱 유해룡 이도호</Content>

                </cc1:AccordionPane>

            </Panes>

</cc1:Accordion>

-       AccordionPane 툴은 <Header>와 <Content>로 이루어집니다. 위 소스처럼 추가하세요.

 

 

 

-       프로젝트를 실행시켜서, 선문비트 조 명단(헤더부분)을 클릭해보시면 클릭한 부분만 늘어나고 해당되지 않은 부분은 접혀지는 것을 확인할 수 있습니다.

-       이제는 Css클래스를 선언하여 좀더 변화 시켜 보겠습니다.

(참고로 Css클래스는 웹 문서의 전반적인 스타일을 미리 저장해둔 스타일시트입니다.)

<head runat="server">

    <title>제목 없음</title>

    <style type ="text/css">

    .header

    {

       background-color:Blue;

       cursor:pointer;

       border:thin white ridge;

       color:White;

       font-weight:bold;

    }

    .content

    {

       background-color:Silver;

       padding:5px;

       border:thin white inset;

       font-size:medium;

    }

    </style>

</head>

소스의 헤더부분(Accordion 헤더부분이 아닙니다)에 Css클래스를 선언해줍니다. 그리고 실행시켜 보시면..


위 화면처럼 변경이 되는 것을 확인할 수 있습니다.


'COMPUTER TECH > C# 실전자료' 카테고리의 다른 글

사용자 Extender 만들기  (1) 2010.08.13
ADO.NET을 이용한 데이터 접근  (0) 2010.08.13
Ajax Control Toolkit  (0) 2010.08.13
비동기 소켓 프로그래밍 (C#)  (0) 2010.08.13
SqlParameter  (0) 2010.08.13
Http method – get, post  (1) 2010.08.13
Posted by ... XJAPAN
트랙백0 댓글0

댓글을 달아 주세요