Creative Commons License

Community

공지/뉴스
지식공유
질문/답변
자료실
자유로운 글
방명록

공유를 넘어 교류로... 제가 알리는 말씀 및 사이트 이용자들이 함게 참여하는 커뮤니케이션 공간입니다.

.

지식공유

여러분들의 개발 관련 기술이나 팁을 공유해 주세요~ 자신이 가진 작은 팁 하나가 어떤이에게는 몇 일을 삽질하게 만드는 것일 수 있습니다 ^^

SilverLight와 AJAX의 연동

작성자 허둥9단
작성일 2008-11-24 오후 4:47:03,    조회수 : 2062


BatooSignBoard.zip

소스코드 첨부하였습니다.

SilverLight와 AJAX의 연동에 대한 주제이므로 silverlight나 ajax 개별적인 내용들은 배제하였습니다.

소스코드 위주로 설명하였습니다.


 

1. 개요

- SilverLight로 개발하기 위해선 비즈니스 로직과의 연동을 통해 Data를 표현할 수 있어야 합니다.

SilverLight에서 AJAX를 이용하여 비즈니스 로직과 어떻게 연동하는지 알아보는 것이 이 문서의목적입니다.

 

2. 서버와 클라이언트의 요구사항

2.1. 서버

    - SilverLight는 어떠한 서버에서나 동작합니다.

           -유일한 요구사항은 XAML을 서비스 해야 한다는 것입니다.

    - ASP.NET AJAX도 어떠한 서버에서나 동작합니다.

          - AJAX Extension은 서버 플랫폼이 ASP.NET인 경우에만 사용이 가능합니다.

 

2.2. 클라이언트

  - SilverLight를 위해 플러그인만 설치하면 됩니다.

  - ASP.NET AJAX를 위해서는 스크립트만 사용 가능하면 됩니다.

 

3. Sample

  예제를 통해 AJAX(AJAX Extension) SilverLight와 어떻게 연동이 되는지를 알아보겠습니다.

 

3.1. 실행화면

- 아래 그림에서 보는 바와 같이 샘플 페이지에서 검색어를 입력한 후 Exe버튼을 누르면

  검색 문자열에 해당하는 포스트 제목들을 가져와서 전광판 형식처럼 오른쪽에서 왼쪽으로

보여줍니다.

 

 

3.2. BatooSignBoard.aspx

 

--(n) 형식의 주석 설명을 소스 아래에 설명하였습니다.

 

<head id="Head1" runat="server">

    <title>Silverlight Stock Ticker</title>

    <script type="text/javascript" src="Silverlight.js"></script>   --(1)

<script type="text/javascript" src="CreateSilverlight.js"></script>

</head>

 

<form id="form1" runat="server">

 

<input type="text" id="txtSearchText" runat="Server" />

        <input type="button" onclick="getPostNames();" value="Exe" />

       

<!-- Silverlight code -->

        <div id="SilverlightControlHost" >   --(2)

            <script type="text/javascript">

                createSilverlight();

            </script>

        </div>

       

<!-- AJAX code -->

        <asp:ScriptManager runat="server" ID="scriptManager">  --(3)

            <Services>

              <asp:ServiceReference Path="WebService.asmx" />

            </Services>

        </asp:ScriptManager>

 

</form>

 

 

<script type="text/javascript">

    // Global Variables

    var topCanvas; // Reference to the XAML{  --(4)

 

    // This will be run when the page is first loaded

    function root_Loaded(sender, args) {  --(5)

        topCanvas = sender;

    }

   

    // This function will make sure the two tickers are next to each other.

    function AlignTickers()

    {

        var tickerText1 = topCanvas.findName("tickerText1");  --(6)

        var animationText1 = topCanvas.findName("animationText1");

        var tickerSize = tickerText1.ActualWidth;//500

        animationText1.To = -1 * tickerSize; //From 1 To -500

        animationText1.From = 1; //From 1 To -500

    }

   

    function getPostNames()

        {

               SignBoardWebService.WebService.GetPostNames(document.getElementById("txtSearchText").value, getPostNames_CallBack); --(7)

        }

 

        function getPostNames_CallBack(result, eventArgs)

        {

               var tickerText1 = topCanvas.findName("tickerText1"); 

               tickerText1.Text = result; --(8)

       

               AlignTickers();

        }

    </script>

 

 

소스설명

 

--(1) 설명

실버라이트 관련 스크립트를 등록합니다.

Silverlight.js : 실버라이트를 사용하기 위한 스크립트

CreateSilverlight.js : 실버라이트 기본 설정 정보(xaml정보, width,height, 등 정보)

 

--(2) 설명

<div id="SilverlightControlHost" >

<script type="text/javascript">

        createSilverlight();

    </script>

</div>

CreateSilverlight.js에서 정의한 createSilverlight() 함수를 호출하여 div 태그인 SilverlightControlHost 영역을 실버라이트 영역으로 정의한다는 의미입니다.

 

--(3) 설명

실버라이트와 연동할 웹서비스를 정의합니다.

 

--(4) 설명

topCanvas는 javascript에서 xaml 코드를 제어하기위한 global 변수입니다.

silverlight에서의 최상위 엘리먼트는 Canvas 이므로 이 객체를 얻어오면 모든 xaml 요소들에 대해 제어가 가능합니다.

 

--(5) 설명

Xaml 코드의 최상위 Canvas 엘리먼트에 Loaded="root_Loaded" 속성을 둠으로써

Xaml 코드가 로드된 후 root_Loaded 스크립트 함수를 호출하는 내용입니다.

topCanvas = sender; 이렇게 함으로서 스크립트에서 XAML 코드의 제어가 가능해 집니다.

 

--(6) 설명

(5)에서 설명햇듯이

var tickerText1 = topCanvas.findName("tickerText1");

이렇게 정의함으로서xaml코드의 tickerText1 이름의 값을 제어할 수 있게 됩니다.

 

--(7) 설명

SignBoardWebService.WebService.GetPostNames(document.getElementById("txtSearchText").value, getPostNames_CallBack); --(7)

네임스페이스명.클래스명.메소드명(파라미터) AJAX 통신을 수행하게 됩니다.

웹서비스 통신 후 결과는 getPostNames_CallBack 메소드로 콜백합니다.

 

--(8) 설명

var tickerText1 = topCanvas.findName("tickerText1"); 

tickerText1.Text = result;

(7)에서 웹서비스 통신 후 받은 결과값을 XAML tickerText1 태그에 바인딩합니다.

이렇게 함으로써 AJAX 통신으로 얻은 결과값을 XAML 코드에 바인딩함으로서 Silverlight

AJAX의 통신이 가능하게 됩니다.

 

3.3. WebService.cs

 

--(n) 형식의 주석 설명을 소스 아래에 설명하였습니다.

 

using System.Web.Script.Services;

 

[WebService(Namespace = "http://randar.name/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[ScriptService] --(1)

public class WebService : System.Web.Services.WebService

{

[WebMethod]

        public string GetPostNames(string searchText)

        {

               string postNames = string.Empty;

               int dataCount;

               PostManager manager = new PostManager();

               DataTable dt = manager.GetPostList(null, searchText, null, 0, 10, 1, out dataCount);

               for (int i = 0; i < dt.Rows.Count; i++)

               {

                       postNames += dt.Rows[i]["Title"].ToString() + " || ";

               }

               return postNames; --(2)

      }

}

 

--(1) 설명

웹 사이트에서 비동기로 호출하기 위해서는 [ScriptService] 어트리뷰트를 지정해줘야 합니다.

이렇게 지정해 주지 않으면 웹 서비스로만 호출이 가능하며 스크립트 상에서는 호출이 되지 않습니다.

 

--(2) 설명

DB에서 포스트 제목을 얻어와서 클라이언트에 반환합니다.

 

 

3.4. BatooSignBoard.xaml

 

--(n) 형식의 주석 설명을 소스 아래에 설명하였습니다

 

<Canvas xmlns="http://schemas.microsoft.com/client/2007"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Loaded="root_Loaded">  --(1)

        <Canvas>

               <Canvas.Triggers>

                       <EventTrigger RoutedEvent="Canvas.Loaded">

                              <EventTrigger.Actions>

                                      <BeginStoryboard>

                                             <Storyboard x:Name="tickerAnimation" Completed="RefreshTicker" >

                                                     <DoubleAnimation x:Name="animationText1" Storyboard.TargetName="tickerText1" Storyboard.TargetProperty="(Canvas.Left)" BeginTime="0" Duration="0:0:16" From="1" To="-550" />

                                             </Storyboard>

                                      </BeginStoryboard>

                              </EventTrigger.Actions>

                       </EventTrigger>

               </Canvas.Triggers>

               <!-- These contain the stock market information that are visible to the client. -->

               <TextBlock x:Name="tickerText1" Canvas.Top="3" FontSize="12" Foreground="Yellow" FontFamily="Arial Black" Text="" />

        </Canvas>

</Canvas>

 

--(1) 설명

xaml 코드가 로드되고 난 후 root_Loaded 라는 스크립트를 호출하게 합니다.

이름
비밀번호
홈페이지
QG <- 왼쪽의 문자를 오른쪽 박스에 똑같이 입력해 주세요