Silverlight2 - Tistorycfs6.tistory.com/upload_control/download.blog?fhandle... · •Silverlight V1 •Silverlight V2 –2008년3월5읷Beta1 발표(go-live 라이센스) –2008년2분기:

Silverlight2

김대우

개발자 및 플랫폼 사업 본부

차세대 웹 플랫폼 팀

http://www.uxkorea.net

Silverlight2 목차

• Silverlight2의 기능 소개

• Silverlight2 로드맵

• Silverlight2의 모델 향상

• 미디어

• 그래픽 / 텍스트

• 다양한 컨트롤 지원

• 스타읷(Style) / 스킨(Skin)지원

• 네트워킹 지원

• 파읷 오픈/저장 다이얼로그 박스

• Isolated Storage(격리된 저장소) 지원

Silverlight2의 기능 소개

• 2D, Graphics

• Audio, Video

• Animations

• Text, Text Input *

• Controls *

• Layout *

• Styles/Templates *

• Data Binding *

• Networking

– HTTP/S and Sockets *

• .NET Support *

• C# and VB.NET *

• LINQ *

• XML APIs *

• Generics *

• HTML Integration *

• JSON Serializer

• Local storage *

• Crypto APIs (AES) *

• Threading ** : Silverlight2에서 지원

Silverlight2 로드맵

• Silverlight V1

• Silverlight V2

– 2008년 3월 5읷 Beta1 발표(go-live 라이센스)

– 2008년 2분기 : Beta2 예정 (go live 라이센스)

• Tools

– Expression Studio 및 Visual Studio 툴 함께 발표

Silverlight2 모델 향상

• XAML

<Canvas xmlns="http://schemas.microsoft.com/client/2007"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

><TextBlock FontSize="32" Text="Hello world" />

</Canvas>


• 맀크업 = 개체 모델

<TextBlock FontSize="32" Text="Hello world" />

TextBlock t = new TextBlock();t.FontSize = 32;t.Text = "Hello world";

=


• 코드에서 XAML 접근

<Rectangle x:Name="rect" />

void OnMouseEnter(object sender, MouseEventArgs e) {rect.Height = 75;

}


• 이벤트 처리

<Canvas xmlns="…" xmlns:x="…"MouseEnter="OnMouseEnter">

</Canvas>

Canvas canvas = new Canvas();canvas.MouseEnter += OnMouseEnter;

// or more explicitly:canvas.MouseEnter += new MouseEventHandler(OnMouseEnter);

=


• 새로운 어플리케이션 모델

– 압축 패키지 포맷 지원(.XAP)

– 크로스 도메읶 패키지 지원

– 로딩화면(Splash) 스크린

• .NET 프로그램 지원

• 플랫폼, 브라우져, 디바이스 추가

– Windows 2000, OSX 10.5, Safari 3.0 (on OSX)

– Silverlight Mobile


• 프로젝트 생성 - XAP


• 크로스 도메읶 지원

– clientaccesspolicy.xml

– crossdomain.xml


• 스플래쉬 스크린

– OnSourceDownloadProgressHandler 이용

<OBJECT TYPE="application/x-silverlight "SOURCE="MyApplication.xap"SPLASHSCREENSOURCE="SplashScreen.xaml"ONSOURCEDOWNLOADPROGRESSCHANGED="ssDownloadProgressHandler"

...

function ssDownloadProgressHandler(sender, eventArgs){

sender.findName("uxStatus").Text = "Loading: " + Math.round((eventArgs.progress * 1000)) / 10 + "%";

sender.findName("uxProgressBar").ScaleY = eventArgs.progress * 357;}

Silverlight2 미디어– Windows Media Ecosystem

• 성능 개선

• 컨텐츠 보호

– PlayReady DRM

• WMA Pro (5.1 sound)

• 서버측 플레이 리스트(Server side playlists)

– 클라이언트의 미디어 소비 패턴 제어(광고)

– 미디어에 대한 Skip/Stop제어

• 비트레이트 스로틀릿(Bit-rate Throttling)

– 미디어를 Bitrate에 따라 젂송(리소스 젃감)

• 아답티브 스트리밍(Adaptive Streaming)

– CPU/Network 상태에 따라 대역폭 제어


• DRM

– PlayReady DRM 지원

Protected Content Playback (DRM)

SL 2.0 Client

Foo.com License Server


SL 2.0 Client



SL 2.0 Client


License forProtectedFile.wmv


SL 2.0 Client

Foo.com License ServerBusiness

Logic


SL 1.1 Client


License

SL 2.0 Client



SL 1.1 Client


SL 2.0 Client

License Server

Individualization (DRM)

SL 2.0 Client(no DRM)

Foo.com

Microsoft.com

License Server



Foo.com

Microsoft.com

License Server


Foo.com

Microsoft.com

License Server



Foo.com

Microsoft.com

License Server

IndividualizedDRM Client


Foo.com

Microsoft.com

License Server


SL 1.1 Client

Foo.com

Microsoft.com

License Server

License

SL 2.0 Client(DRM client installed)

Foo.com

Microsoft.com

License Server


SL 1.1 Client

Foo.com

Microsoft.com

License Server

SL 2.0 Client(DRM client installed)

Foo.com

Microsoft.com

License Server


• 서버측 PlayList 지원

미디어 리스트 제어를 통한 수익화 모델 제공



– Network / 장비 / 리소스 젃감

서비스 유지 비용 젃감

Progressive 다운로드 방식

web | media | RIA | mobile




Silverlight2 그래픽 / 텍스트

• MultiScaleImage - Deep Zoom

• 한글/읷어/중국어 디스플레이 지원

• 텍스트 입력 지원


• MultiScaleImage

• 단순 이미지가 아닌 “Collection” – 프로그래밍 루틴 포함

– 이미지 구조는 “피라미드” 패턴


• MultiScaleImage

– JPG 또는 PNG

– 피라미드 레이어를 폴더 구조로 저장

– 메타데이터를 XML로 저장

– 타읷 피라미드 방식으로 빠르게 이미지 로드

– 즉각적읶 사용자 응답 후 고화질 이미지로 블렌딩

– 네비게이션 모델로 대역폭 젃감 가능

– 비즈니스 시나리오 적용 / 무한 영역 광고 수익

– 서버측 구성요소 없음

– 캐시 및 CDN 가능

– 편리한 폴더 구조


• MultiScaleImage

– 동영상과 연계

– 동영상은 MultiScaleImage 이 아님

– MultiScaleImage 과 동영상을 동기화 가능

– 동영상이 특정 사이즈읷때 프로그래밍 루틴 적용


• Deep Zoom Composer

서버측 모델 / 자동화를 위한 SDK?


• 텍스트 기능

– TextBlock

– Glyphs

– TextBox


• TextBlock

– TextBlock 레이아웃

• LineHeight

• Center / Right 정렬

– FontURI 제공

• Custom 폰트의 경로 처리 가능

<TextBlock FontFamily="./resources/fonts.zip#Tahoma"Text="Click Me"/>


• TextBlock(계속)

– Bold / Italic 지원

– 한글/읷어/중국어 지원

<TextBlock FontStyle="Italic" Text="Click Me"/>


• TextBox – Silverlight2의 텍스트 입력

• TextBlock과 읷관성 유지

• Selection(선택) 기능

• 1단계 UNDO/REDO

• 클립보드 연계(Cut/Copy/Paste)

• 키보드 이동키

• Changed 이벤트

<TextBox Text="Hello World"/>

Silverlight2 컨트롤 지원


Silverlight2 컨트롤 지원

• Canvas

• FileOpenDialog

• Grid

• Image

• ItemsControl

• MediaElement

• MultiScaleImage

• StackPanel

• TextBox

• TextBlock

• Button

• Popup

• CheckBox*

• DataGrid*

• DateTimePicker*

• GridSplitter*

• Hyperlink*

• ListBox*

• Calendar*

• RadioButton*

• Slider*

• ToggleButton*

• Tooltip*

• WatermarkTextBox*

1) *표시는 별도 라이브러리로 제공2) Beta1과 공식버젼 사이에 추가 컨트롤 발표 예정

Silverlight2 컨트롤 읷반

• 컨트롤 읷반

– Focus 지원

• Focus 이벤트 지원(GotFocus/LostFocus)

• Control 클래스에서 파생된 Control만 지원(Custom Control 포함)

• 기본 Focus UI는 없음

– Focus 사용 설정

• IsTabStop

• TabIndex

– Tab 네비게이션 모델

• Cycle / Local / Once


• 컨트롤 읷반

– Focus된 컨트롤에서 KeyDown / KeyUp 처리

– KeyDown은 이벤트 핸들 가능

– 방향키 읶식 – 적젃한 네비게이션 로직 설정 가능

– 맀우스 휠 처리


• 레이아웃– Canvas

– Grid

– StackPanel

– Border

• 레이아웃 속성 지원– Width, MinWidth, MaxWidth, ActualWidth

– Height, MinHeight, MaxHeight, ActualHeight

– Margin and Padding

• 레이아웃을 확장

Silverlight2 스타읷(Style) / 스킨(Skin)

• UI를 변경

• 동작은 유지


• 쉬운 스타읷과 스킨 변경을 위해 디자읶됨

• 디자이너 / 개발자갂 협업 모델

• WPF로 쉽게 포팅 가능


• Styling

– 목적:

• 비교적 적은 UI변경을 필요로 할때

• 예) font, color, corner radius

– 구현:

• 컨트롤의 UI속성을 설정

• <Style>, 또는 Control.Style 설정

<Grid><Grid.Resources>

<Style x:Key="ButtonStyle" TargetType="Button" ><Setter Property="FontWeight" Value="Bold"/><Setter Property="FontFamily" Value=“Stencil"/>

</Style>

</Grid.Resources>

<Button Style="{StaticResource ButtonStyle}">Test

</Button></Grid>


• Skin / ControlTemplate

– 목적:

• 컨트롤의 UI를 변경(로직/동작 변경 없음)

– Tools:

• <ControlTemplate>, 과 Control.Template 설정


<ControlTemplatex:Key="ButtonTemplate" TargetType="Button">

<Rectangle Fill="Red"/></ControlTemplate>

</Grid.Resources>

<Button Template="{StaticResource ButtonTemplate}"/></Grid>


• Template Binding

– 템플릾을 생성 후 개체의 UI 속성과 연결


<ControlTemplate x:Key="ButtonTemplate" TargetType="Button">

<Rectangle Fill="{TemplateBinding Background}"/></ControlTemplate>

</Grid.Resources>

<Button Template="{StaticResource ButtonTemplate}"Background="Blue"/>

</Grid>

Silverlight2 네트워크

• WCF / REST, WS*/SOAP, POX, RSS, 표준 HTTP

• Socket


• WebClient

– 사용 편이

– 이벤트 처리 비동기 방식

– Progress 이벤트 지원webClient.DownloadStringCompleted

+= new DownloadStringCompletedEventHandler(DownloadCompleted);webClient.DownloadProgressChanged

+= new DownloadProgressChangedEventHandler(DownloadProgressChanged);

webClient.DownloadStringAsync("http://www.data.com/data.xml");...

void DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e){

Stream stream = e.Result;// Use stream

}

http://www.data.com/data.xml


• HttpWebRequest/Response– HTTP 요청/응답을 위한 API

– WebClient에 비해 다양한 기능 제공

• GET / POST / Headers …private void MakeAsyncRequest(){HttpWebRequest request = (HttpWebRequest)

WebRequest.Create("http://foo.com/api?token=89");IAsyncResult asyncResult = request.BeginGetResponse(

new AsyncCallback(ResponseCallback), request);}

private void ResponseCallback(IAsyncResult ar){HttpWebRequest request = ar.AsyncState as HttpWebRequest;WebResponse response = request.EndGetResponse(ar);Stream responseStream = response.GetResponseStream();

// Use stream}


• Socket – TCP 스트림

– 비동기(Asynchronous) 모델

– 보안정책

Silverlight2 FileOpen / FileSave

• OS의 읶터페이스를 제공

• API는 파읷명과 스트림을 젂달

• 여러파읷 선택 지원// Create file dialog

OpenFileDialog openFileDialog1 = new OpenFileDialog();

Stream myStream;

openFileDialog1.Title = “텍스트 파일을 선택하세요..";

openFileDialog1.Filter = "Text Files (*.txt)|*.txt|All files (*.*)|*.*";

openFileDialog1.FilterIndex = 1;

if (openFileDialog1.ShowDialog() == DialogResult.OK) {

foreach (FileDialogFileInfo fi in openFileDialog1.SelectedFiles) {

// Get the safe filename

string filename = fi.Name;

// Open the file

Stream filestream = fi.OpenRead();

// Do something with the filestream

// Close it

filestream.Close();

}

}

Silverlight2 Isolated storage

• 격리 공갂을 저장소로 사용

• 캐시 및 성능 향상 목적

• 사용자의 알람을 통해 저장소 공갂 확장 가능

Q&A

감사합니다.

김대우

개발자 및 플랫폼 사업 본부

차세대 웹 플랫폼 팀

http://www.uxkorea.net

Documents

Silverlight2 - Tistorycfs6.tistory.com/upload_control/download.blog?fhandle... · •Silverlight V1 •Silverlight V2 –2008년3월5읷Beta1 발표(go-live 라이센스) –2008년2분기: