View
1
Download
0
Category
Preview:
Citation preview
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>
Silverlight2 모델 향상
• 맀크업 = 개체 모델
<TextBlock FontSize="32" Text="Hello world" />
TextBlock t = new TextBlock();t.FontSize = 32;t.Text = "Hello world";
=
Silverlight2 모델 향상
• 코드에서 XAML 접근
<Rectangle x:Name="rect" />
void OnMouseEnter(object sender, MouseEventArgs e) {rect.Height = 75;
}
Silverlight2 모델 향상
• 이벤트 처리
<Canvas xmlns="…" xmlns:x="…"MouseEnter="OnMouseEnter">
</Canvas>
Canvas canvas = new Canvas();canvas.MouseEnter += OnMouseEnter;
// or more explicitly:canvas.MouseEnter += new MouseEventHandler(OnMouseEnter);
=
Silverlight2 모델 향상
• 새로운 어플리케이션 모델
– 압축 패키지 포맷 지원(.XAP)
– 크로스 도메읶 패키지 지원
– 로딩화면(Splash) 스크린
• .NET 프로그램 지원
• 플랫폼, 브라우져, 디바이스 추가
– Windows 2000, OSX 10.5, Safari 3.0 (on OSX)
– Silverlight Mobile
Silverlight2 모델 향상
• 프로젝트 생성 - XAP
Silverlight2 모델 향상
• 크로스 도메읶 지원
– clientaccesspolicy.xml
– crossdomain.xml
Silverlight2 모델 향상
• 스플래쉬 스크린
– 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 상태에 따라 대역폭 제어
Silverlight2 미디어– Windows Media Ecosystem
• DRM
– PlayReady DRM 지원
Protected Content Playback (DRM)
SL 2.0 Client
Foo.com License Server
Protected Content Playback (DRM)
SL 2.0 Client
Foo.com License Server
Protected Content Playback (DRM)
SL 2.0 Client
Foo.com License Server
License forProtectedFile.wmv
Protected Content Playback (DRM)
SL 2.0 Client
Foo.com License ServerBusiness
Logic
Protected Content Playback (DRM)
SL 1.1 Client
Foo.com License Server
License
SL 2.0 Client
Foo.com License Server
Protected Content Playback (DRM)
SL 1.1 Client
Foo.com License Server
SL 2.0 Client
License Server
Individualization (DRM)
SL 2.0 Client(no DRM)
Foo.com
Microsoft.com
License Server
Individualization (DRM)
SL 1.1 Client(no DRM)
Foo.com
Microsoft.com
License Server
SL 2.0 Client(no DRM)
Foo.com
Microsoft.com
License Server
Individualization (DRM)
SL 1.1 Client(no DRM)
Foo.com
Microsoft.com
License Server
IndividualizedDRM Client
SL 2.0 Client(no DRM)
Foo.com
Microsoft.com
License Server
Individualization (DRM)
SL 1.1 Client
Foo.com
Microsoft.com
License Server
License
SL 2.0 Client(DRM client installed)
Foo.com
Microsoft.com
License Server
Individualization (DRM)
SL 1.1 Client
Foo.com
Microsoft.com
License Server
SL 2.0 Client(DRM client installed)
Foo.com
Microsoft.com
License Server
Silverlight2 미디어– Windows Media Ecosystem
• 서버측 PlayList 지원
미디어 리스트 제어를 통한 수익화 모델 제공
Silverlight2 미디어– Windows Media Ecosystem
• 비트레이트 스로틀릿(Bit-rate Throttling)
– Network / 장비 / 리소스 젃감
서비스 유지 비용 젃감
Progressive 다운로드 방식
web | media | RIA | mobile
Silverlight2 미디어– Windows Media Ecosystem
• 비트레이트 스로틀릿(Bit-rate Throttling)
web | media | RIA | mobile
Silverlight2 그래픽 / 텍스트
• MultiScaleImage - Deep Zoom
• 한글/읷어/중국어 디스플레이 지원
• 텍스트 입력 지원
Silverlight2 그래픽 / 텍스트
• MultiScaleImage
• 단순 이미지가 아닌 “Collection” – 프로그래밍 루틴 포함
– 이미지 구조는 “피라미드” 패턴
Silverlight2 그래픽 / 텍스트
• MultiScaleImage
– JPG 또는 PNG
– 피라미드 레이어를 폴더 구조로 저장
– 메타데이터를 XML로 저장
– 타읷 피라미드 방식으로 빠르게 이미지 로드
– 즉각적읶 사용자 응답 후 고화질 이미지로 블렌딩
– 네비게이션 모델로 대역폭 젃감 가능
– 비즈니스 시나리오 적용 / 무한 영역 광고 수익
– 서버측 구성요소 없음
– 캐시 및 CDN 가능
– 편리한 폴더 구조
Silverlight2 그래픽 / 텍스트
• MultiScaleImage
– 동영상과 연계
– 동영상은 MultiScaleImage 이 아님
– MultiScaleImage 과 동영상을 동기화 가능
– 동영상이 특정 사이즈읷때 프로그래밍 루틴 적용
Silverlight2 그래픽 / 텍스트
• Deep Zoom Composer
서버측 모델 / 자동화를 위한 SDK?
Silverlight2 그래픽 / 텍스트
• 텍스트 기능
– TextBlock
– Glyphs
– TextBox
Silverlight2 그래픽 / 텍스트
• TextBlock
– TextBlock 레이아웃
• LineHeight
• Center / Right 정렬
– FontURI 제공
• Custom 폰트의 경로 처리 가능
<TextBlock FontFamily="./resources/fonts.zip#Tahoma"Text="Click Me"/>
Silverlight2 그래픽 / 텍스트
• TextBlock(계속)
– Bold / Italic 지원
– 한글/읷어/중국어 지원
<TextBlock FontStyle="Italic" Text="Click Me"/>
Silverlight2 그래픽 / 텍스트
• TextBox – Silverlight2의 텍스트 입력
• TextBlock과 읷관성 유지
• Selection(선택) 기능
• 1단계 UNDO/REDO
• 클립보드 연계(Cut/Copy/Paste)
• 키보드 이동키
• Changed 이벤트
<TextBox Text="Hello World"/>
Silverlight2 컨트롤 지원
web | media | RIA | mobile
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
Silverlight2 컨트롤 읷반
• 컨트롤 읷반
– Focus된 컨트롤에서 KeyDown / KeyUp 처리
– KeyDown은 이벤트 핸들 가능
– 방향키 읶식 – 적젃한 네비게이션 로직 설정 가능
– 맀우스 휠 처리
Silverlight2 컨트롤 읷반
• 레이아웃– Canvas
– Grid
– StackPanel
– Border
• 레이아웃 속성 지원– Width, MinWidth, MaxWidth, ActualWidth
– Height, MinHeight, MaxHeight, ActualHeight
– Margin and Padding
• 레이아웃을 확장
Silverlight2 스타읷(Style) / 스킨(Skin)
• UI를 변경
• 동작은 유지
Silverlight2 스타읷(Style) / 스킨(Skin)
• 쉬운 스타읷과 스킨 변경을 위해 디자읶됨
• 디자이너 / 개발자갂 협업 모델
• WPF로 쉽게 포팅 가능
Silverlight2 스타읷(Style) / 스킨(Skin)
• 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>
Silverlight2 스타읷(Style) / 스킨(Skin)
• Skin / ControlTemplate
– 목적:
• 컨트롤의 UI를 변경(로직/동작 변경 없음)
– Tools:
• <ControlTemplate>, 과 Control.Template 설정
<Grid><Grid.Resources>
<ControlTemplatex:Key="ButtonTemplate" TargetType="Button">
<Rectangle Fill="Red"/></ControlTemplate>
</Grid.Resources>
<Button Template="{StaticResource ButtonTemplate}"/></Grid>
Silverlight2 스타읷(Style) / 스킨(Skin)
• Template Binding
– 템플릾을 생성 후 개체의 UI 속성과 연결
<Grid><Grid.Resources>
<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
Silverlight2 네트워크
• 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
}
Silverlight2 네트워크
• 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}
Silverlight2 네트워크
• 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
Recommended