슬라이드 1

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) Foo.com License Server SL 2.0 Client

Protected Content Playback (DRM) Foo.com License Server SL 2.0 Client

Protected Content Playback (DRM) Foo.com License Server License for ProtectedFile.wmv SL 2.0 Client

Protected Content Playback (DRM) Foo.com License Server Business Logic SL 2.0 Client

Protected Content Playback (DRM) Foo.com License Server License SL 1.1 2.0 Client

Protected Content Playback (DRM) Foo.com License Server SL 1.1 2.0 Client

Individualization (DRM) Foo.com Microsoft.com License Server SL 2.0 Client (no DRM)

Individualization (DRM) Microsoft.com Foo.com License Server SL 1.1 2.0 Client (no DRM)

Individualization (DRM) Microsoft.com Foo.com License Server Individualized DRM Client SL 1.1 2.0 Client (no DRM)

Individualization (DRM) Microsoft.com Foo.com License Server License SL 2.0 SL 1.1 Client Client (DRM client installed)

Individualization (DRM) Microsoft.com Foo.com License Server SL 2.0 SL 1.1 Client Client (DRM client installed)

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 의텍스트입력 <TextBox Text="Hello World"/> TextBlock과읷관성유지 Selection( 선택 ) 기능 1단계 UNDO/REDO 클립보드연계 (Cut/Copy/Paste) 키보드이동키 Changed 이벤트

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) <Grid> Styling <Grid.Resources> 목적 : <Style 비교적 x:key="buttonstyle" 적은 UI변경을필요로 TargetType="Button" 할때 > <Setter Property="FontWeight" Value="Bold"/> 예 ) font, color, corner radius <Setter Property="FontFamily" Value= Stencil"/> </Style> 구현 : 컨트롤의 UI 속성을설정 </Grid.Resources> <Style>, 또는 Control.Style 설정 <Button Style="{StaticResource ButtonStyle}"> Test </Button> </Grid>

Silverlight2 스타읷 (Style) / 스킨 (Skin) Skin / ControlTemplate <Grid> 목적 : <Grid.Resources> 컨트롤의 UI 를변경 ( 로직 / 동작변경없음 ) Tools: <ControlTemplate x:key="buttontemplate" <ControlTemplate>, 과 TargetType="Button"> Control.Template 설정 <Rectangle Fill="Red"/> </ControlTemplate> </Grid.Resources> <Button Template="{StaticResource ButtonTemplate}"/> </Grid>

Silverlight2 스타읷 (Style) / 스킨 (Skin) Template Binding <Grid> <Grid.Resources> 템플릾을생성후개체의 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

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 에비해다양한기능제공 private void MakeAsyncRequest() { GET / POST / Headers 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