[Silverlight 함수를 Javascript에서 호출]

Silverlight 함수 중에서 Dictionary를 매개변수로 받는 함수 호출 하는 법에 대해 글을 쓰겠습니다.

우선 Silverlight 응용 프로젝트를 생성하신 후,
간단하게 생성자에서

HtmlPage.RegisterScriptableObject("slInternal", this);

을 호출합니다.

HtmlPage.RegisterScriptableObject이 하는 역할은 JavaScript 코드의 스크립트 가능한 액세스 기능을 위해 관리되는 개체를 등록합니다.

즉, slInternal이라는 이름으로 this라는 객체를 JavaScript 코드에서 접근 가능하도록 등록해준다는 말입니다.

그리고, 이제 JavaScript에서 호출한 함수를 작성해줍니다.

1
2
3
4
5
6
7
8
[ScriptableMember]
public void ShowDictionaryPair(Dictionary<string, int> stringDict)
   {
       foreach (var pair in stringDict)
       {
            MessageBox.Show(pair.ToString());
       }
   }

JavaScript에서 호출할 함수를 작성할 때에는 꼭 [ScriptableMember]를 함수 정의 전에 써 줍니다.
저는 Dictionary를 매개변수로 받아서 foreach문을 돌면서 Dictionary에 있는 Key와 Value를 MessageBox를 통해 보이도록 함수를 만들었습니다.

자 이제, JavaScript가 있는 곳으로 이동해 볼까요.
.Web 프로젝트의 속성에 들어가서 웹 태그에 특정 페이지로 설정되어진 .html이나 .aspx파일을 확인한 후,
그 페이지로 들어가서 작업하시면 됩니다.

우선 하단에 있는 Body 태그를 확인하시고, Object 태그에 id 속성을 추가하여 정의해주세요.
바로 요렇게 말입니다.

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%" id="silverlightControl">

저는 silverlightControl이라고 정의하였습니다.

그리고 Load가 되면 silverlight에서 정의한 함수를 호출하도록 하겠습니다.

Param 태그에 이벤트 함수를 추가해주세요.

바로 요렇게 말입니다.

<param name="onLoad" value="onSilverlightLoad" />
 
그 후에, 상단으로 올라가셔서 대략 onSilverlightError이벤트 함수가 정의된 곳에서 onSilverlightLoad이벤트 함수를 추가해주시면 됩니다.
 
1
2
3
4
5
6
function onSilverlightLoad(sender, args) {
    var slObj = document.getElementById("silverlightControl");
        var dict = slObj.content.slInternal.createManagedObject("Dictionary<string, int>");
        dict["Color"] = 1;
        slObj.content.slInternal.SayHelloToMe(dict);
    }

slObj에 아까 object 태그에 id로 정의했던 silverlightControl을 getElementById함수를 이용하여 호출한 뒤,
createManagedObject함수를 이용하여 Dictionary를 생성해주세요.

주의할 점은 Javascript에서 생성할 수 있는 Dictionary는 항상 Key의 Type이 string이여야 합니다.

그 후에, 생성한 Dictionary 객체에 원하는 아이템을 설정한 후,
silverlight에서 정의했던 함수를 호출해주시면 됩니다.

그러면 이제, 디버깅을 해보면!

Good Job!!