<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="jp"> <head> <title>silverlight Hello World</title> <script type="text/xaml" id="xaml"> <?xml version="1.0"?> <Canvas xmlns="http://schemas.microsoft.com/client/2007"> <TextBlock Text="Hello World!" /> </Canvas> </script> </head> <body> <object type= application/x silverlight id= agcontrol width= 640 height="480"> <param name="source" value="#xaml" /> </object> </body> </html> Copyright 2007 Archway Inc Page 1
Silverlight Development Part1 Essential Silverlight 株 式 会 社 アークウェイ 代 表 取 締 役 社 長.NET コンサルタント 森 屋 英 治 (Hideharu Moriya) Microsoft MVP for Visual Developer Solutions Architect Copyright 2007 Archway Inc Page 2
アークウェイについて ビジョン: 開 発 者 たちの 幸 せ サービス コンサルティングサービス.NET 技 術 を 中 心 としたアーキテクチャ/システム 構 築 のコンサ ルテーション アーキテクチャ 策 定 サービス 最 適 なアーキテクチャ 策 定 をご 支 援 します メンタリングサービス 開 発 現 場 の 一 員 として 参 加 しながら.NET 技 術 やアジャイル 開 発 などの 技 術 指 導 を 行 います トレーニングサービス.NET 技 術 アジャイル 開 発 などのトレーニング Copyright 2007 Archway Inc Page 3
アークウェイについて 製 品 ainote(アイノート) マインドマップ 機 能 対 応 ソフトウェアファクトリ 支 援 ツール ベータ3(2007/09 版 ) 明 日 リリース! 研 究 開 発 ソフトウェアファクトリ NAgile 詳 しくはホームページをご 覧 ください URL:http://www.archway.co.jp モチベーションが 高 い 開 発 者 メンターを 募 集 してい ます! 連 絡 先 :sales@archway.co.jp Copyright 2007 Archway Inc Page 4
Part1 Agenda Silverlightとは コンセプト DAL 開 発 スタイル アーキテクチャ XAML オブジェクトブラウザは 親 友 基 本 コンポーネント X:Name イベント 1.0 と 1.1の 違 い Copyright 2007 Archway Inc Page 5
SilverLightとは Coding Anywhere.NETとの 連 携 ASP.NETとの 連 携 ネットワーク XML LINQ その 他 ファイル MACでの 開 発 Part2 Agenda Copyright 2007 Archway Inc Page 6
Copyright 2007 Archway Inc Page 7
Silverlightとは Microsoft Silverlight は クロスブラウザ クロス プラットフォームに 対 応 する Web ブラウザのプラ グインです.NET を 基 盤 とし Web における 次 世 代 のメディア 体 験 と RIA* を 実 現 します *RIA (Rich Interactive Application) 参 照 :http://www.microsoft.com/japan/silverlight/default01.aspx Copyright 2007 Archway Inc Page 8
Web (2.0-0.5) Copyright 2007 Archway Inc Page 9
RIA バックグラウンド Web (2.0-0.5) ( 現 実 解 ) Web 2.0 より 使 いやすく やや1.0へ 戻 す SAAS より S+S Tool Text pad vs Rich Env Adobe Flash, Adobe Flex Adobe Integrated Runtime(AIR) Google Gears Microsoft Windows Presentation Foundation(WPF) Copyright 2007 Archway Inc Page 10
コンセプト Copyright 2007 Archway Inc Page 11
Silverlightコンセプト クロスブラウザ クロスプラットフォーム RIA.NETの 利 用 XAML Any ware 4M より 小 さく Media 対 応 Mac 対 応 DLR 対 応 Copyright 2007 Archway Inc Page 12
夢 いっぱい Copyright 2007 Archway Inc Page 13
まだ だいぶβ Copyright 2007 Archway Inc Page 14
Copyright 2007 Archway Inc Page 15
New Market Copyright 2007 Archway Inc Page 16
New Market Media&RIA Desktop Web Copyright 2007 Archway Inc Page 17
Essential Copyright 2007 Archway Inc Page 18
Development Style Architecture Style Language Style Copyright 2007 Archway Inc Page 19
開 発 スタイル Copyright 2007 Archway Inc Page 20
配 置 環 境 基 本 動 作 サーバ:あらゆるサーバ クライアント: Win or Mac サーバ:Windows(IIS) クライアント:Win or Mac 実 行 環 境 スタティックコンパイル ダウンロード 実 行 ダウンロード ダイナミックコンパイル 実 行 Copyright 2007 Archway Inc Page 21
開 発 方 法 ( 最 小 ) あらゆるテキストエディタ メモ 帳 あらゆるWebサーバ Apache IIS Copyright 2007 Archway Inc Page 22
開 発 方 法 ( 最 大 ) Microsoft Expression Blend 2 Visual Studio 2008 + Silverlight Extension ASP.NET Futures IIS Copyright 2007 Archway Inc Page 23
最 も 簡 単 なSilverlightアプリケーション <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="jp"> <head> <title>silverlight Hello World</title> XAML <script type="text/xaml" id="xaml"> <?xml version="1.0"?> <Canvas xmlns="http://schemas.microsoft.com/client/2007"> <TextBlock Text="Hello World!" /> </Canvas> </script> </head> <body> <object type="application/x silverlight" id="agcontrol" width="640" height="480"> <param name="source" value="#xaml" /> </object> </body> </html> Silverlightコントロール Copyright 2007 Archway Inc Page 24
ファイル 構 成 呼 び 出 し 元 HTML 基 本 動 作 SCRIPTタグで 下 記 2つのJSファイルを 参 照 CreateSilverlight.js(VSでは TestPage.html.js ) cretateobjetを 呼 び 出 し( 次 ページ 参 照 ) Silverlight.js createobject とcreateObjectEx を 定 義 Page.xaml Page.xaml.cs (.vb ) フォルダ ClientBin Copyright 2007 Archway Inc Page 25
利 用 するHTML <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>silverlight Project Test Page </title> <script type="text/javascript" src="silverlight.js"></script> <script type="text/javascript" src="testpage.html.js"></script> <style type="text/css">.silverlighthost { width: 640px; height: 480px; } </style> </head> <body> <div id="silverlightcontrolhost" class="silverlighthost" > <script type="text/javascript"> createsilverlight(); </script> </div> </body> </html> Copyright 2007 Archway Inc Page 26
CreateSilverlisht.js function createsilverlight() { Silverlight.createObjectEx({ source: "Page.xaml", parentelement: document.getelementbyid("silverlightcontrolhost"), id: "SilverlightControl", properties: { width: "100%", height: "100%", version: "1.1", enablehtmlaccess: true }, events: {} }); document.body.onload = function() { var silverlightcontrol = document.getelementbyid('silverlightcontrol'); if (silverlightcontrol) silverlightcontrol.focus(); } } Copyright 2007 Archway Inc Page 27
XAMLファイル <Canvas x:name="parentcanvas" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Loaded="Page_Loaded" x:class="silverlightproject.page;assembly=clientbin/silverlightproject.dll" Width="640" Height="480" Background="Green" > </Canvas> Copyright 2007 Archway Inc Page 28
DEMO Copyright 2007 Archway Inc Page 29
アーキテクチャ Copyright 2007 Archway Inc Page 30
コンポーネント 構 成 配 置 の 構 成 アーキテクチャ Copyright 2007 Archway Inc Page 31
Browser Host.NET for Silverlight Data WPF Networking MS AJAX Library LINQ XLINQ Extensible Controls REST POX DOM Integration Application Services Ruby DLR Python BCL Generics Collections CLR Execution Engine XAML RSS SOAP JSON Legend V1.1 Legend Deploy Presentation Core V1.0 UI Core Inputs DRM Friction-Free Installer Vector Text Keyboard Mouse Ink Media Auto- Updater Animation Images Media VC1 WMA MP3 Controls Layout Editing Copyright 2007 Archway Inc Page 32
イベント/ メソッド 呼 び 出 し.NET DLR WEBサーバ ブ ラ ウ ザ JavaScript イベント/ メソッド 呼 び 出 し XAML レンダリング メソッド 呼 び 出 し イベント イベント/ メソッド 呼 び 出 し Silverlightプ ラ グ イ ン HTML レンダリング ASP.NET 論 理 的 な 定 義 Copyright 2007 Archway Inc Page 33
XAML Copyright 2007 Archway Inc Page 34
Design <XAML> Code Copyright 2007 Archway Inc Page 35
XAML XAML = extensible Application Markup Language フレキシブルなXML ドキュメントスキーマ WPF, Silverlight, Workflow Foundation 宣 言 ベース より 多 くのツールに 対 応 可 能 Copyright 2007 Archway Inc Page 36
Silverlight XAML Rootは 基 本 的 に<Canvas /> XAMLからアセンブリへの 参 照 は assembly=clientbin/silverlightproject.dll 参 照 するアセンブリは ClientBinの 下 Copyright 2007 Archway Inc Page 37
Markup = Code <TextBlock FontSize="32" Text="Hello world" /> = TextBlock t = new TextBlock(); t.fontsize = 32; t.text = "Hello world"; Copyright 2007 Archway Inc Page 38
オブジェクトブラウザは 親 友 Copyright 2007 Archway Inc Page 39
Object Browser is your Friend. Copyright 2007 Archway Inc Page 40
DEMO Copyright 2007 Archway Inc Page 41
基 本 コンポーネント Copyright 2007 Archway Inc Page 42
基 本 ライブリ 構 成 標 準 コンポーネント 基 本 コンポーネント Copyright 2007 Archway Inc Page 43
利 用 可 能 なコントロール(2007/8 時 点 ) Canvas Ellipse Glyphs Image InkPresenter MediaElement Rectangle TextBlock Line Copyright 2007 Archway Inc Page 44
DEMO Copyright 2007 Archway Inc Page 45
x:name Copyright 2007 Archway Inc Page 46
x:name XAML 要 素 への 名 前 づけ これによってプログラムから 参 照 可 能 に <Rectangle x:name= rectangle /> void OnMouseEnter(object sender, MouseEventArgs e) { rectangle.height = 75; } Copyright 2007 Archway Inc Page 47
DEMO Copyright 2007 Archway Inc Page 48
イベント Copyright 2007 Archway Inc Page 49
イベント MouseMove MouseEnter MouseLeave MouseLeftButtonDown MouseLeftButtonUp KeyUp KeyDown GotFocus LostFocus Loaded Copyright 2007 Archway Inc Page 50
Silverlight Event Example <Canvas xmlns=" " xmlns:x=" " MouseEnter="OnMouseEnter"> </Canvas> = Canvas canvas = new Canvas(); canvas.mouseenter += OnMouseEnter; // or more explicitly: canvas.mouseenter += new MouseEventHandler(OnMouseEnter); Copyright 2007 Archway Inc Page 51
Silverlight Event Example (VB) <Canvas xmlns=" " xmlns:x=" " Height="100" Width="100" Background= Blue" x:name= canvas /> </Canvas> Private Sub something _ (ByVal o As Object, ByVal e As MouseEventArgs) _ Handles canvas.mouseenter rectangle.fill = New SolidColorBrush(Colors.Green) End Sub Copyright 2007 Archway Inc Page 52
Silverlight Event Example <Canvas xmlns=" " xmlns:x=" " Height="100" Width="100" Background= Blue" MouseEnter="OnMouseEnter" /> </Canvas> void OnMouseEnter(object sender, MouseEventArgs e) { } Copyright 2007 Archway Inc Page 53
DEMO Copyright 2007 Archway Inc Page 54
1.0 と 1.1の 違 い Copyright 2007 Archway Inc Page 55
Silverlight Architecture Data WPF for Silverlight.NET for Silverlight Server LINQ LINQ to XML Dynamic Languages Ruby Python Extensible Controls BCL Generics Collections Web Services REST RSS SOAP POX JSON ASP.NET AJAX Libs <asp:xaml> <asp:media> Common Language Runtime XAML Legend V1.1 2D Vectors Animation Text UI Core Images Transforms Inputs Keyboard Mouse Ink Media WMV / VC1 WMA MP3 Controls Layout Editing DRM Media Legend V1.0 Presentation Core Integrated Networking Stack DOM Integration Installer JavaScript Engine Browser Host Copyright 2007 Archway Inc Page 56
Silverlight 1.1 = v1.1 = v1.0 + managed code (CLR) + XAML extensibility + Control class (user control) + sample controls Copyright 2007 Archway Inc Page 57
Feature Plans: Controls 1.1 (alpha) 1.1 (planned) WPF Button Sample Yes Yes TextBox No Yes Yes Scrollbar Sample Yes Yes Slider Sample Yes Yes ListBox Sample Yes Yes CheckBox No Yes Yes RadioButton No Yes Yes ComboBox No Yes Yes TreeView No No Yes RichTextBox No No Yes DataGrid No No 3 rd party UserControl Yes Yes Yes Copyright 2007 Archway Inc Page 58
Feature Plans: Layout 1.1 (alpha) 1.1 (planned) WPF Canvas Yes Yes Yes Grid No Yes Yes StackPanel No Yes Yes ViewBox No Yes Yes Copyright 2007 Archway Inc Page 59
Feature Plans: Other 1.1 (alpha) 1.1 (planned) WPF Mouse events Partial Yes Yes Keyboard events Partial Yes Yes Resource dictionary Partial Yes Yes Data binding No Yes Yes Styling No Yes Yes 3D vector graphics No No Yes GPU h/w accel. No No Yes Out of browser No No Yes Offline No No Yes Cross platform Yes Yes No Copyright 2007 Archway Inc Page 60
まとめ Silverlightとは コンセプト DAL 開 発 スタイル アーキテクチャ XAML オブジェクトブラウザは 親 友 基 本 コンポーネント X:Name イベント 1.0 と 1.1の 違 い Copyright 2007 Archway Inc Page 61
Enjoy Silverlight Copyright 2007 Archway Inc Page 62
ご 静 聴 ありがとう ございました Copyright 2007 Archway Inc Page 63
http://silverlight.net/ リソース http://msdn2.microsoft.com/en us/library/bb428859.aspx Copyright 2007 Archway Inc Page 64