실버라이트 돌릴때 js , xaml.xaml , html 에 관계

.Net/SilverLight : 2007. 9. 15. 22:20

출처: http://cafe.naver.com/mssilverlight/101
이렇게 이해한것을 확인 까지 하시다니 정말 적극적이시네요. ^^

제가 설명을 좀 난해하게 한것 같아서 죄송합니다. ^^

대체적으로 잘 이해하셨어요. ^^

아무이름.xml 이렇게 쓰니까 가독성이 좀 떨어지는 것 것아서 그냥 My라고 통칭하겠습니다. ^^

1.파일구분

My.xaml -실버라이트 스크립트파일

스크립트 파일이라는 표현은 좀 다른것 같고요. Silverlight Content 파일 정도로 쓰면 좋을 것 같습니다. ( Silverlight의 내용을 가지고 있는 파일 )

Silverlight.js -실버라이트를 os에 상관없이 웹에 보여주게해주는 자바스크립트. **이름바뀌면 안됨

OS에 상관없이 보여주는 역할을 하는 것은 아니고요. 정확하게는 브라우저에 상관없이 동일한 UI를 표시하고 만약 Silverlight 런타임(Silverlight를 해석해서 실행하는 역할을 하는 녀석이고요, 컴퓨터 새로깔고 사이트 보면 Flesh 설치하라고 나오는 과정이 Flesh 런타임을 설치하라는 거에요. Silverlight 런타임도 동일하게 이해 하시면 됩니다. ^^)이 없을 경우 안내 메시지를 표시하는 역할을 합니다. 이 파일의 이름이 꼭 Silverlight.js 필요는 없어요. 이름을 바꾸어도 되는데 다른 사람이 보면 헷갈리겠죠? ^^ 또, 이 js 파일은 계속적으로 업데이트 되기 때문에 필요한 함수를 이곳에 넣어 놓으면 관리가 안되요. 그래서 그냥 바꾸지 않고 쓰는거에요. ^^

My.htm -일반 htm파일 실버라이트를 div태그, script 스크립트로 넣을 수 있는 그릇같은역할

플래쉬 동영상을 보려면 플래쉬 동영상을 보여주는 html페이지가 있는것과 같이 Silverlight를 보여주는 페이지의 역할을 합니다. ( 문서에서는 "Silverlight 객체를 호스팅한다."라는 말을 사용하고 있어요. ) 아시다 시피 이 html 페이지의 역할은 Silverlight가 표시될 위치에 <div /> 태그 넣어주고 스크립트로 Siverlight를 불러오는 함수만 호출하는 역할을 하고 있습니다.

My.js -실버라이트 객체에 생성에 필요한 함수와 함수 구성요소를 설정해 주는 자바스크립트, 여기서 실버라이트 소스파일 "My,xaml" 지정해주고 실버라이트가 표현될 div=id 를 지정해줄 수있다.

예. 맞아요. My.js는 html에서 선언한 <div />에 Silverlight.js에서 제공하는 함수를 호출해서 ( 호출할때 크기라든가 XAML파일의 위치 등과 같은 것을 넣어주죠. ) 지정한 XAML 내용을 화면에 뿌려주게 되죠.

My.js에 생성함수를 만든다. (함수 안에 명령은 Silverlight.js 에 함수를 이용한다.)

실버라이트 콘트롤 소스파일 My.xaml 과

웹 상에 보여질 특정 id를 가진 div영역을 지정해주고

실버라이트 콘트롤 이벤트 및 크기를 설정해준다.

예. 정확하게 이해하고 계시네요. ^^

html 실행

1. head 에 script 집어넣은 js 파일을 읽는다. (Silverlight.js , My.js)

2. 본문에 <div 태그로 div 영역이 생성된다.

3. 밑에 script 태그로 My.js 에 div id 값을 넘겨준뒤에 생성함수를 실행한다.

4. 생성함수는 맨먼저 읽어들인 Silverlight.js 에서 sys.Sivler.... 명령어를 사용해 실버라이트가 나타날 특정 id를 가진 div 구역에 실버라이트 콘트롤 호스트를 띄우고 My.xaml 실버라이트 소스를 읽어서 화면에 보여주기시작한다.

5. 계속 실버라이트 xaml 안에서 동작이 이루어진다.

예. 잘 이해하고 계시네요. ^^

div 태그도 잘모르고..

div은 division의 약자고요. html영역을 나눌때 사용하는 태그에요. div는 아주 유연한 동작과 위치를 가질 수 있어서 Silverlight 내용을 호스팅 하기에 적당하죠. ^^

js 파일도 뭔지 몰라서 물어봅니다~

js파일은 javascript 라이브러리 라고하는데요. html안에 <script> ~ </script>가 너무 길면 복자하고 자주사용하는 함수의 경우 다른 페이지에서도 쓸때 <script> ~ </script>를 뚝! 뜯어서 다른 파일로 만들어 놓고 쓰는 거에요. js로 만든다고 해서 별다른 특별한 기능은 없어요. 하지만 한가지 <object />와 같이 외부 리소스를 쓸때 ( 플래쉬나 Silverlight등 )는 html에 넣을때와 js로 쓸대 좀 다른 특징이 있는데 ( 그래서 SIlverlight를 페이지에 표시할때의 함수를 외부 js로 빼서 사용해야 해요. ) 아실것 같아서.. 혹시 모르시면 다시 질문 달아 주세요. ( 좀 장황해 질것 같아서.. ^^ )

그리고 sdk는 뭔가요? 설명서 사이트 인가요??

어렸을때 조립식 장난감을 사면 거기에 설명서, 본드, 장난감이 들어 있잖아요. 설명서에는 색칠을 하시려면 여기를 방문하세요. 이런것도 있고요. 이게 프라모델 Kit 정도 될텐데요.

무언가 개발하려고 할때 필요한게 SDK(Software Developement Kit)이에요. SDK를 다운 받으면 그 안에 설명서, 프로그램, 소스 등이 있어요.

로 소스를 지정해주고

<body 에서

소스.js 안에 있는 함수

</script>

로 소스 안에 있는거 꺼내 쓰는거 맞나요?? ㅡㅡ;;

예. 맞아요. 그냥 편하게 js는 <script> ~ </script>를 페이지에서 뜯어다가 다른 파일로 만든거라 생각하시면 되요. ^^ 그러니까 마치 한개의 파일(html)에 있는 함수처럼 쓰면 되요. ^^

제 설명이 더 난해하게 느껴지는게 아닌지 모르겠네요. ^^;;

바로 툴을 사용하지 않고 막 코딩은 처음 시작하는 분들에 입장에서 도움이 된다고 생각해요. 사실 요즘 툴만 사용해서 HTML을 Edit+ 같은 텍스트 편집기에서 ( 세부적인 값을 조정하기 위해 ) 손도 못 데는 분들을 보면 좀 “뜨악” 하죠? ^^

도움이 되셨으면 좋겠습니다. ^^

즐거운 하루되세요~~

다른 분들이 댓글로 추가 설명해 주시면 더 좋겠네요. ^^

'.Net > SilverLight' 카테고리의 다른 글

Silverlight 버전1.0과 1.1의 공부방법에 관해서... (0)	2007.09.15
MS가 제안한 ActiveX의 대안 'SliverLight' 실버라이트 (0)	2007.08.12
Visual Studio Orcas Beta1 (0)	2007.08.12