Silverlight Tip 잘레시아 Copyright c 2010 Zalesia Co., Ltd.
Agenda I Silverlight 지원환경 II Silverlight 호스팅을위한 IIS 구성 III Cross-Domain 접근방법 IV Slider 컨트롤에 MouseLeftDown 이벤트발생시키기 V Parameter 처리 VI Silverlignt 에서 HTML DOM 객체접근 VII ObservableCollection 기반 ListBox/DataGrid Refresh VIII Silverlight 성능향상관련 Tip Copyright c 2010 Zalesia Co., Ltd. 2
Silverlight 지원환경 현재실버라이트는윈도우, MAC, Linux 환경의 OS 환경을지원하고왼쪽과같은브라우저환경을지원합니다. 웹에실버라이트를적용할때혹시나사용자가지원하지않는구버전의 OS 나웹브라우저를사용하는지여부를확인하고싶다면, 실버라이트프로젝트에서 Silverlight.js 파일에포함된 Silverlight.supportedUserAgent() 라는함수를이용해서손쉽게체크해볼수있습니다. 아래와같이사용해볼수있습니다. 이예제는실버라이트를지원하지않는사용자에게윈도미디어플레이어를대체해서보여주는예제입니다. Sample if (Silverlight.supportedUserAgent()) { // play video in Silverlight } else { // play video wmv directly } Copyright c 2010 Zalesia Co., Ltd. 3
Silverlight 호스팅을위한 IIS 구성 IIS 6.0 (Windows Server 2003) - IIS 관리자실행 - 통합모니터링이설치된웹사이트의속성을클릭해등록정보다이얼로그창을띄움 - HTTP 헤터탭에서 MIME 형식을클릭 - 새형식버튼을클릭 - 확장명 :.xaml MIME 형식 : application/xaml+xml 입력 - 확장명 :.xap MIME 형식 : application/octet-stream 입력 - 두개의확장명이정상적으로입력되었는지확인 IIS 7.0(Windows Server 2008) - 서버관리자 > 기능 > 기능추가를선택해기능추가마법사실행 -.Net Framework 3.0 기능 > WCF 활성화가체크되어있는지확인하고체크되어있지않다면체크한후설치 - IIS 실행 - 통합모니터링이설치된웹사이트로이동 - IIS 항목의 MIME 형식을더블클릭 - 오른쪽클릭후추가를선택 - 확장명 :.xaml MIME 형식 : application/xaml+xml 입력 - 확장명 :.xap MIME 형식 : application/octet-stream 입력 - 두개의확장명이정상적으로입력되었는지확인
Cross-Domain 접근방안 보안문제때문에 Silverlight 는쿠키전달이나재전송 redirection 허용과같은보안에위협이될만한것들에대한크로스존 Cross-zone, 크로스도메인, 크로스스키마 URL 접근을기본적으로제한합니다. 예를들어, 한웹도메인에호스팅된실버라이트기반의애플리케이션을가지고있고 WebClient 개체를사용하여다른도메인에저장되어있는파일에접근을시도한다면그요청은실패할것입니다. 아래테이블에이러한규칙이정리되어있습니다. 실버라이트로다른도메인의파일을접근하려면이기능을명시적으로활성화할필요가있습니다.. WebClient object Media, images, ASX XAML files, Font Streaming media files 허용된스키마 HTTP, HTTPS HTTP, HTTPS, FILE HTTP, HTTPS, FILE HTTP 크로스스키마접근 No No No HTTPS로부터는안됨 크로스웹도메인접근 No HTTPS가아닐경우 No Yes Yes 크로스존 No No No No 접근 (Windows에서) 크로스존 No Yes No Yes 접근 (Macintosh에서) 재전송허용 같은도메인에서 Yes 같은도메인에서 No Copyright c 2010 Zalesia Co., Ltd. 5
Cross-Domain 접근방안 용어정의는다음과같습니다. * 크로스스키마 Cross-scheme : 어떤스키마 ( 예를들어 HTTP, HTTPS) 에서다른스키마를접근하는것. * 크로스웹도메인 Cross-Web domain : 어떤웹도메인과다른웹도메인사이의접근 ( 예를들어 www.contoso.com 에호스팅된애플리케이션이 www.fabrikam.com 에있는콘텐트에대한접근을시도 ). * 크로스존Cross-zone : 보안영역간의접근. 예를들어인터넷서버에서인트라넷리소스에접근을시도하는것. 예를들어, 애플리케이션을호스트하고이미지를다른서버에서가져오고싶다면앞에서본표에있는 "Media, images, ASX" 항목을체크해볼수있습니다. 만약애플리케이션이 HTTP 사이트에호스팅된다면 HTTPS 스키마를사용한사이트에서이미지를가져올수없습니다. 그도메인의스키마가 HTTPS가아닌한다른도메인에서이미지를가져올수있습니다. 만약애플리케이션이인터넷에있고사용자가 Mac을사용하지않는다면이미지를인트라넷에서가져올수없습니다. URL이같은도메인에있는한다른이미지 URL로재전송할수있습니다. Copyright c 2010 Zalesia Co., Ltd. 6
clientaccesspolicy.xml 설정 <?xml version="1.0" ENCODING="utf-8"?> <!-- 크로스도메인접근 cross-domain-access하기위한서비스를설정하기위해도메인의루트에놓는파일. --> <access-policy> <cross-domain-access> <!-- 도메인의접근가능설정. --> <policy> <allow-from http-request-headers="*"> <!-- 모두허용시는 * 표시를두어모두허용한다. --> <domain uri="*" /> <!-- 특정도메인만허용시해당도메인명을넣어준다. 추가시엔그냥더넣어주면된다. --> <domain uri="http://taewony.net" /> <domain uri="http://taewony.net" /> </allow-from> <!-- 권한설정. --> <grant-to> <!-- 루트부터하위의모든폴더의권한을준다면. --> <resource path="/" include-subpaths="true"/> <!-- game 폴더만권한을준다면. --> <!-- <resource path="/game/" include-subpaths="false"/> --> </grant-to> </policy> </cross-domain-access> </access-policy>
crossdomain.xml 설정 crossdomain.xml 크로스도메인의접근을하기위한세컨파일. 어도비에서플레쉬용으로만든것이다. <?xml version="1.0"?> <!--서비스가호스트된도메인의루트에놓는파일. --> <!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd"> <!-- 도메인과해더의접근가능설정. --> <cross-domain-policy> <!-- clientaccesspolicy.xml 이후에접근한다. --> <allow-http-request-headers-from domain="* " headers="*" /> </cross-domain-policy>
Slider 컨트롤에 MouseLeftDown 이벤트발생시키기 Slider 컨트롤은 MouseLeftDown 이벤트가발생하지않는다. Thumb 컨트롤이 down 이벤트를우선적으로발생시키기때문에일반적인방법으로는 MouseDown 이벤트를발생시킬수없지만 AddHandler 를이용하면간단하게이벤트를발생시킬수있다. void slider1_mouseleftbuttondown(object sender, MouseButtonEventArgs e) { MessageBox.Show( Hello Silverlight"); } public MainPage() { InitializeComponent(); } slider1.addhandler(frameworkelement.mouseleftbuttondownevent, new MouseButtonEventHandler(slider1_MouseLeftButtonDown), true);
Parameter 처리 Intro.html <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%"> <param name="initparams" value="linkuri=http://www.naver.com"/> // IDictonary 객체 LinkUri 에 Value 값을설정 <param name="source" value="clientbin/params.xap"/> <param name="onerror" value="onsilverlighterror" /> <param name="background" value="white" /> <param name="minruntimeversion" value="4.0.50826.0" /> <param name="autoupgrade" value="true" /> <a href="http://go.microsoft.com/fwlink/?linkid=149156&v=4.0.50826.0" style="text-decoration:none"> <img src="http://go.microsoft.com/fwlink/?linkid=161376" alt="microsoft Silverlight 얻기 " style="border-style:none"/> </a> </object> App.xaml.cs private void Application_Startup(object sender, StartupEventArgs e) { string linkuri = e.initparams["linkuri"]; // Intro.html 에서설정한 Idictonary 객체 LinkUrl 값을받아온다. this.rootvisual = new MainPage(linkUri); }
Parameter 처리 Main.xaml private string _param = null; public MainPage(string uri) { InitializeComponent(); _param = uri; // LinkUri 에 Value 값 www.naver.com 을받아온다. hyperlinkbutton1.navigateuri = new Uri(_param); }
Silverlignt 에서 HTML DOM 객체접근 1 HTML 영역에실버라이트 Object 설정 <div id="mydiv" style="background:blue;width:20%;height:20%"> // Div 영역설정 <asp:silverlight ID="Xaml1" runat="server" // Silverlight object 선언 Source="~/ClientBin/SilverlightApplication27.xap" MinimumVersion="2.0.30930.0" Width="50%" Height="100%" /> </div> 2 실버라이트영역에서이벤트를버튼생성 <UserControl x:class="silverlightapplication1.page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"> <Canvas> <Button Click="Button_Click" Content="Change Colors"></Button> // Button 생성 </Canvas> </UserControl>
Silverlignt 에서 HTML DOM 객체접근 3 HTML 영역에있는 DIV DOM 객체에접근 private void Button_Click(object sender, RoutedEventArgs e) { HtmlDocument doc = HtmlPage.Document; HtmlElement div = doc.getelementbyid("mydiv"); // mydiv 에접근 div.setstyleattribute("background", "green"); // mydiv 의 background 를 green 으로변경 } before after
ObservableCollection 에서 Property Update 시 ListBox / DataGrid Refresh 하기 ObservableCollection 은항목이추가 (Add) 되거나제거 (Remove) 되거나, 전체목록이새로고쳐질때알림을제공하는동적데이터컬렉션이다. 그래서줄곳데이터항목이동적으로바뀔수있는데이터목록에 Binding 객체로사용된다. 그런데간혹 ObservableCollection 에서특정필드값이변경될때가있는데, 그때는 ListBox / DataGrid 등이자동으로갱신 (Refresh) 되지않는다. 이문제는 INotifyPropertyChanged 인터페이스를구현하므로써해결이가능하다. 1. ObservableCollection 의요소형식으로사용하고있는 Class 에 INotifyPropertyChanged 인터페이스를구현한다. 이로써특정필드가변경되면 ListBox 나 DataGrid 는수정되었다는통보를받을수있게된다.
ObservableCollection 에서 Property Update 시 ListBox / DataGrid Refresh 하기 2. ObserbableCollection 에서특정필드값을수정한다.
Silverlignt 성능향상팁 1. IsWindowless=false - 실버라이트컨텐츠가다른 HTML 컨텐츠와겹쳐서표현될필요가없다면 ( 즉, 실버라이트를호스팅하는 DIV 가 postion:absolute 가될필요가없다면 ) IsWindowless 속성을사용하지않는것이좋다. 2. 불투명한배경이더빠르다. - 다른컨텐츠와겹쳐서표현될필요가없다면실버라이트 HTML 컨트롤배경색상속성에투명도를설정하지않는것이좋다. 3. 디자인에딱필요한만큼의퀄리티를제공 - Framerate : 실버라이트 HTML 컨트롤의속성에서최대 framerate 를설정할수있다.. 많은웹사이트들은모든애니메이션과미디어를약 15fps(frames per second) 로제공하고있다. - Media : 미디어파일을인코딩할때웹에적당한파일은대략 320x240 정도의사이즈에 15fps 정도 4. 테스트 & 디버깅 - 똑같은코드라도서로다른머신에서다른품질와성능을보여줄뿐만아니라 OS 와브라우저의설정에따라서도다르다. - 아래와같은코드를 Page 의 onload 이벤트핸들러에사용하여 IE 나사파리의상태바에 framerate 를보여줄수있다. 원하는 fps 를초과한다면 framerate 속성을낮게잡아서사용자의 CPU 를낭비하지않는것이좋다. agcontrol.settings.enableframeratecounter = true;
Silverlignt 성능향상팁 5. Opacity 로 Visibility 를흉내내지말것 - 가끔 Visibility 를 Collapsed 로숨기는것대신에 Opacity 를 0 으로설정하여보이지않게설정할때가있다, Opacity 가 0 으로설정되어컨트롤이보이지않더라도런타임은여전히히트테스트를수행하게되는데. 따라서더이상보이지않는컨트롤은명시적으로 Visibility 를 Collapsed 로설정하는것이좋다. 실버라이트는렌더링과미디어에멀티 - 코어를사용한다. 그러므로실버라이트는컨트롤을렌더링하거나미디어를재생할때멀티 - 코어의이득을얻을수있다. 6. 실버라이트애니메이션을사용하는게프레임단위의애니메이션을만드는것보다빠르다. - 가능한실버라이트가제공하는 Timeline 기반의애니메이션을사용하여속성을변경하는것이 Javascript 에서하던것처럼프레임단위로애니메이션효과를주는것보다빨라요. 7. Text 크기를동적으로변경하는건좋지않다. - 텍스트크기를변경하면많은시스템리소스를소비한다. 실버라이트가텍스트를렌더링할때각텍스트마다부드럽게표시하는처리를하기때문에. 텍스트사이즈를동적으로변경 (Transform 과 FontSize 모두 ) 하는건굉장히버겁고프레임저하의원인이될수있다. 꼭텍스트를동적으로조정할필요가있다면텍스트를표시하는벡터그래픽으로처리하는게낫다.
감사합니다