Embed Size (px)
Citation preview
Silverlight Tip
Copyright ⓒ 2010 Zalesia Co., Ltd.
㈜ 잘레시아
Agenda
2 Copyright ⓒ 2010 Zalesia Co., Ltd.
I
II
III
IV
V
VI
VII
VIII
Silverlight 지원 환경
Silverlight 호스팅을 위한 IIS 구성
Cross-Domain 접근방법
Slider 컨트롤에 MouseLeftDown 이벤트 발생시키기
Parameter 처리
Silverlignt에서 HTML DOM 객체 접근
ObservableCollection기반 ListBox/DataGrid Refresh
Silverlight 성능향상관련 Tip
3 Copyright ⓒ 2010 Zalesia Co., Ltd.
Silverlight 지원환경
현재 실버라이트는 윈도우, MAC, Linux 환경의 OS 환경을 지원하고 왼쪽과 같은 브라우저환경을 지원합니다. 웹에 실버라이트를 적용할 때 혹시나 사용자가 지원하지 않는 구 버전의 OS나 웹브라우저를 사용하는지 여부를 확인하고 싶다면, 실버라이트 프로젝트에서 Silverlight.js 파일에 포함된 Silverlight.supportedUserAgent() 라는 함수를 이용해서 손쉽게 체크해 볼 수 있습니다. 아래와 같이 사용해 볼 수 있습니다. 이 예제는 실버라이트를 지원하지 않는 사용자에게 윈도 미디어 플레이어를 대체해서 보여주는 예제입니다. Sample if (Silverlight.supportedUserAgent()) { // play video in Silverlight } else { // play video wmv directly }
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 접근 방안
5 Copyright ⓒ 2010 Zalesia Co., Ltd.
보안 문제 때문에 Silverlight는 쿠키 전달이나 재전송redirection 허용과 같은 보안에 위협이 될만한 것들에 대한 크로스 존Cross-zone, 크로스 도메인, 크로스 스키마 URL 접근을 기본적으로 제한합니다. 예를 들어, 한 웹 도메인에 호스팅된 실버라이트 기반의 애플리케이션을 가지고 있고 WebClient 개체를 사용하여 다른 도메인에 저장되어 있는 파일에 접근을 시도한다면 그 요청은 실패할 것입니다. 아래 테이블에 이러한 규칙이 정리되어 있습니다. 실버라이트로 다른 도메인의 파일을 접근하려면 이 기능을 명시적으로 활성화할 필요가 있습니다..
WebClient object
Media, images, ASX
XAML files, Font files
Streaming media
허용된 스키마 HTTP, HTTPS HTTP, HTTPS, FILE HTTP, HTTPS, FILE HTTP
크로스 스키마 접근 No No No HTTPS로부터는 안됨
크로스 웹 도메인 접근 No HTTPS가 아닐 경우 Yes
No Yes
크로스 존 접근(Windows에서)
No No No No
크로스 존 접근(Macintosh에서)
No Yes No Yes
재전송 허용 같은 도메인에서 Yes 같은 도메인에서 No
6 Copyright ⓒ 2010 Zalesia Co., Ltd.
용어 정의는 다음과 같습니다.
* 크로스 스키마Cross-scheme : 어떤 스키마(예를 들어 HTTP, HTTPS)에서 다른 스키마를 접근하는 것.
* 크로스 웹 도메인Cross-Web domain : 어떤 웹 도메인과 다른 웹 도메인 사이의 접근(예를 들어
www.contoso.com에 호스팅된 애플리케이션이 www.fabrikam.com에 있는 콘텐트에 대한 접근을 시도).
* 크로스 존Cross-zone : 보안 영역간의 접근. 예를 들어 인터넷 서버에서 인트라넷 리소스에 접근을 시도하는
것. 예를 들어, 애플리케이션을 호스트하고 이미지를 다른 서버에서 가져오고 싶다면 앞에서 본 표에 있는
"Media, images, ASX" 항목을 체크해볼 수 있습니다.
만약 애플리케이션이 HTTP 사이트에 호스팅된다면 HTTPS 스키마를 사용한 사이트에서 이미지를 가져올 수
없습니다. 그 도메인의 스키마가 HTTPS가 아닌 한 다른 도메인에서 이미지를 가져올 수 있습니다.
만약 애플리케이션이 인터넷에 있고 사용자가 Mac을 사용하지 않는다면 이미지를 인트라넷에서 가져올 수
없습니다. URL이 같은 도메인에 있는 한 다른 이미지 URL로 재전송할 수 있습니다.
Cross-Domain 접근 방안
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객체 접근
<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>
<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>
1 HTML 영역에 실버라이트 Object 설정
2 실버라이트 영역에서 이벤트를 버튼 생성
Silverlignt에서 HTML 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
3 HTML 영역에있는 DIV DOM 객체에 접근
ObservableCollection 에서 Property Update 시 ListBox / DataGrid Refresh 하기
ObservableCollection 은 항목이 추가(Add) 되거나 제거(Remove) 되거나, 전체목록이 새로 고쳐질 때 알림을 제공하는 동적 데이터 컬렉션 이다.
그래서 줄곳 데이터 항목이 동적으로 바뀔 수 있는 데이터 목록에 Binding 객체로 사용된다.
그런데 간혹 ObservableCollection 에서 특정 필드값이 변경될 때가 있는데,
그 때는 ListBox / DataGrid 등이 자동으로 갱신(Refresh) 되지 않는다.
이 문제는 INotifyPropertyChanged 인터페이스를 구현하므로써 해결이 가능하다.
1. ObservableCollection 의 요소형식으로 사용하고 있는 Class 에 INotifyPropertyChanged 인터페이스를 구현한다. 이로써 특정 필드가 변경되면 ListBox 나 DataGrid 는 수정되었다는 통보를 받을 수 있게 된다.
2. ObserbableCollection 에서 특정 필드 값을 수정한다.
ObservableCollection 에서 Property Update 시 ListBox / DataGrid Refresh 하기
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;
5. Opacity로 Visibility를 흉내내지 말것
- 가끔 Visibility를 Collapsed로 숨기는 것 대신에 Opacity를 0으로 설정하여 보이지 않게 설정할 때가 있다, Opacity가 0으로 설정되어 컨트롤이 보이지 않더라도 런타임은 여전히 히트테스트를 수행하게 되는데. 따라서 더 이상 보이지 않는 컨트롤은 명시적으로 Visibility를 Collapsed로 설정하는것이 좋다.
실버라이트는 렌더링과 미디어에 멀티-코어를 사용 한다.
그러므로 실버라이트는 컨트롤을 렌더링하거나 미디어를 재생할 때 멀티-코어의 이득을 얻을 수 있다.
6. 실버라이트 애니메이션을 사용하는게 프레임 단위의 애니메이션을 만드는 것보다 빠르다.
- 가능한 실버라이트가 제공하는 Timeline 기반의 애니메이션을 사용하여 속성을 변경하는 것이 Javascript에서 하던 것 처럼 프레임 단위로 애니메이션 효과를 주는 것보다 빨라요.
7. Text 크기를 동적으로 변경하는건 좋지 않다.
- 텍스트 크기를 변경하면 많은 시스템 리소스를 소비한다. 실버라이트가 텍스트를 렌더링 할 때 각 텍스트 마다 부드럽게 표시하는 처리를 하기때문에. 텍스트 사이즈를 동적으로 변경(Transform과 FontSize 모두)하는건 굉장히 버겁고 프레임 저하의 원인이 될 수 있다. 꼭 텍스트를 동적으로 조정할 필요가 있다면 텍스트를 표시하는 벡터 그래픽으로 처리하는게 낫다.
Silverlignt 성능 향상 팁
감사합니다
