Silverlight Unplugged

Document Sample
Silverlight Unplugged Powered By Docstoc
					                                 Chris Hay
NxtGenUG (Cambridge) / Roskakori Limited
         http://silverlightuk.blogspot.com
About Me
   Blog: http://silverlightuk.blogspot.com
   Email: chrishayuk@googlemail.com
   Coordinator of NxtGenUG Cambridge
   Silverlight Enthusiast
   Lead Developer
   Technologies
        ASP.NET
        C#
        VB
        SQL 2005
        Silverlight
        WPF
        WCF
        WWF (only a little)
        F# (only a little)
Agenda
   Introduction to Silverlight                           Item Controls + Binding (15 minutes)
   Getting Started with Silverlight 2.0                       ListBox
        Creating your first Silverlight application           DataGrid
        XAP File                                              Observable Collection
   Layout Manager Controls (7.5 minutes)                      INotifiable
   Controls from 1.0 (7.5 minutes)                            Master / Detail (User Control)
   Interacting with Controls (5 minutes)                 Networking (15 minutes)
   Button Controls (5 minutes)                                POX
   TextBox + Other Controls + Brushes +                       Web Services / WCF
    Transforms + Animation (10 minutes) (May                   Async
    ditch due to time constraints)                             Sockets
   Styles + Resources(7.5 minutes)                            Security (Client Access Policy)
   Content Model + Control Templates (7.5
    minutes)                                              Storage (10 minutes)
                                                               Isolated Storage
                                                               Open File Dialog

                                                          Html Bridge (1 Minute)
                                                          The End and the Future (1 Minute)
Silverlight
 Used to be WPF/E
 Microsoft’s RIA offering
 Client application that runs in a browser
 Silverlight 1.0
 Silverlight 2
Silverlight 1.0
   Went Live September 2007
   Xaml
   Javascript
   Media
   Not business applications
   Very small subset of WPF
   Supported Platforms
        Windows (XP, Vista, 2003, 2008)
        MAC
        Linux (Moonlight)
        Mobile (Coming Soon)
 Browsers
    IE
    Firefox
    Safari
 Show Video
Silverlight 1.0 for Mobile
 Initially Silverlight 1.0
 Silverlight 2.0 in the future
 Developer CTP 2nd Quarter 2008 (soon)
   Windows Mobile 6
 Nokia signed up to support Silverlight
Silverlight 2
   In Beta 1 (March 2008)
   Used to be Silverlight 1.1
   Xaml
   Desktop CLR
   C# / VB
   Larget subset of WPF (and getting closer)
   Rich Control Set
   Supported Platforms
        Windows (XP, Vista, 2003, 2008)
        MAC
        Linux (Moonlight)
        Mobile (Coming Soon)
 Browsers
    IE
    Firefox
    Safari
 Show Video
Deep Zoom
 Outside of scope of todays talk
 Formerly SeaDragon
 Renders only viewed portion of image
    Little bandwith
    High Definition Images
 Multi-Layered Images
 Deep Zoom Composer
 Show Demo Video
Supported Languages
 Silverlight 1.0
    Javascript
 Silverlight 2.0
    C#
    VB.NET
    Dynamic Lanaguages Supported
       Microsoft JScript
       IronPython
       IronRuby
       (More to come)
Silverlight 2 – Downloads
 Visual Studio 2008
 Silverlight 2 Beta 1 Runtime
 Microsoft Silverlight Tools for Beta 1 for VS2008


 Other useful stuff
   Silverlight Beta 1 SDK (installed with tools install)
   Expression Studio 2
   Deep Zoom Composer
   Silverlight 2 Controls Source Code + Unit Tests
Silverlight 2 - Resources
 http://silverlight.net
        Blogs (including mine)
        Tutorials
        Videos
        Forums
        Samples
 Your favourite search engine
 Good WPF books (Adam Nathan + Chris Anderson)
 Silverlight 1 book (Adam Nathan or Lawrence
  Moroney)
Silverlight 2 – Getting Started
Silverlight 2 – Getting Started
Silverlight 2
Silverlight 2 – Web Application
 Must run within the context of a website
 Supports some offline capabilities however
 Independent of Web Server technology
    Can be hosted on a unix/linux apache web server
 On creation of project in VS
    Website
    Web Application
    Test file
 Can run directly from file system
    Security restrictions however
    Best run from a website
Silverlight 2 – Visual Studio
 Toolbox
 Readonly WYSISWG Design Area
 Xaml Design area
 Builds to ClientBin folder
Silverlight 2 – .XAP
 Really a zip file in disguise
    Change extension to zip and open it up
 Contains built assemblies
 Contains any content marked to be included in
  download
 .XAP file is what is downloaded to client machine
Silverlight 2 – Html File
 ActiveX object in a div tag
Silverlight 2 – App.Xaml
 Contains Application Resources (later)
 Entry point for the application
 This where you set your start page for the application
 Handles following events
   Application Startup
   Application Exit
   Application Unhandled Exception
Silverlight 2 – Hello World
 Demo : Hello World
Layout Manager Controls
 Canvas
 StackPanel
 Grid
 Border
 More still to come
 You can always create your own 
Layout Management - Canvas
 Silverlight 1.0 Control
 Absolute Positioning
 Supports the following attached properties
    Canvas.Top
    Canvas.Left
    Canvas.Zindex
 Not scalable
 Not really used in Silverlight 2
Layout Management - StackPanel
 New in Silverlight 2.0
 Equivalent to its WPF counterpart
 Stacks controls like a bookshelf
 Vertical (Default) or Horizontal Orientation
    Orientation=“Vertical”
    Orientation=“Horizontal”
Layout Management - Grid
 New in Silverlight 2.0
 Equivalent to its WPF counterpart
 Flexible Positioning (similar to tables in HTML)

 Supports the following attached properties
    Grid.Column
    Grid.Row

 Sizing
    Auto Sizing
    Proporitional Sizing
    Pixel Sizing
Layout Management - Border
 Wraps its children in a border
 Important Properties
    BorderBrush
    BorderThickness
Layout Management -
Future Layout Controls
 More still to come
 Will converge with WPF Controls
 Expect the following controls in the future
    DockPanel
    WrapPanel
    GroupBox
    ViewPort
Layout Management -
Create your own layout controls
 Build your own layout manager
 Use the source for the existing managers as a guide
Layout Management -
Create your own layout controls
 MeasureOverride
    Measure all the children and return available size
 ArrangeOverride
    Arrange all the children and return final size


 Same as WPF
Silverlight 2 – Controls in 1.0
 Layout Management
    Canvas
 TextBlock
 Shapes & Geometries
    Line
    Ellipse
    Rectangle
    Polygon
 Path
 Media
    Image
    MediaElement
Controls in 1.0 - Image
<Image Source="/Assets/Images/WeeMee.jpg"/>

 Supported Image Formats
    JPG
    PNG
 To include in the .XAP
    Must include the leading slash
    Build Action - Content
    Copy to output directory – Copy if newer
    Impact (larger .XAP file to download)
 To reference outside the .XAP
    Absolute path
    Build Action – None
    Copy to output directory – never

    <Image Source="http://localhost:49626/SilverlightNetworking_Web/Assets/Images/WeeMee.jpg"/>
Controls in 1.0 - MediaElement
<MediaElement Source="/Assets/Images/WeeMee.jpg"/>

   Supported Media Formats
        720p HD Video
        VC-1
        WMV
        WMA
        MP3
   Supports Media Markers (will leave to Mike Ormond)
   Supports Streaming
   Supports Progressive Downloads
   To include in the .XAP
        Must include the leading slash
        Build Action - Content
        Copy to output directory – Copy if newer
        Impact (larger .XAP file to download)
   To reference outside the .XAP
        Absolute path
        Build Action – None
        Copy to output directory – never

     <MediaElement Source="http://localhost:49626/SilverlightNetworking_Web/Assets/Video/lego.wmv"
               AutoPlay="True"/>
Interacting with Controls
 x:Name (Xaml attribute) to access control in
 codebehind
      <Button x:Name="myButton" Content="My Button"/>

 Declare Event in Xaml
      <Button x:Name="myButton" Content="My Button" Click="buttonClickTest"/>

 Hookup event in codebehind
      myButton.Click +=new RoutedEventHandler(myButton_Click);
Demo – Simple Media Player
 Start Button
 Stop Button
 MediaElement
 Event Handling


 ASP.NET Futures (3.5) has silverlight 1.0 media control
New 2.0 Controls - Buttons
 Button Controls
    Button
    RepeatButton
        Continuous Clicks (Delay Property)
    HyperlinkButton
    ToggleButton
      Checked Event (as well as Click)
      IsChecked Property
    CheckBox
      Inherits from toggle button
    RadioButton
      Inherits from toggle button
      Implicity Grouping within Layout Manager
      GroupName property allows explicit grouping

 All inherit from ButtonBase
Other 2.0 Controls (non item)
 TextBox
 Watermarked TextBox
   Inherits from TextBox


 Slider
 Calendar
 DatePicker
Brushes
 All were available in Silverlight 1.0


 SolidColorBrush
 LinearGradientBrush
 RadialGradientBrush
 ImageBrush
 VideoBrush
Transforms
 All were available in Silverlight 1.0

   RotateTransform
   ScaleTransform
   SkewTransform
   TranslateTransform
   MatrixTransform

 Render Transform only
 No Layout Transform
 Be careful with stackpanels
Styles
 Inline Styles (Supported in Silverlight 1.1)
 Style Element
 Applying Styles
 Overriding Styles
 Expanded Setters
 Missing WPF Features
Styles - Inline
 Inline Styles (Supported in Silverlight 1.1)
    FontFamily
    Foreground
    FontSize
    Etc.
 Not Scalable
    Hard to change style across application
    Messy XAML
    Hard to maintain consistency
Styles – Style Element
 x:Key is required
    Default Styles not supported (Implicit Key)
 Only Named Types are supported
 Target Type is required
Styles – Applying the style
 Applied via Style Attribute (referencing the key)
Styles – Overriding Styles
 Styles are Overridable
 Can override style element style with inline style
 Style inheritance however is not possible 
    BasedOn Attribute (WPF) not supported
Styles – Expanded Setter
 We have seen setting simple xaml



 Also supports complex xaml
Styles – Missing WPF Features
 Default Styles
    Cannot apply a style across all buttons
    Must use a named type
 Untargetted Types
    Must have a TargetType
 Style inheritance however is not possible 
    BasedOn Attribute not supported
 Triggers not supported (Property / Data / Event)
Styles – Styling by a designer
 http://www.corrina_b.members.winisp.net/skins/roug
 h/Testpage.html
Resources
 Static Resource
 Scope
 XAML Elements
 Missing WPF Features
Resources – StaticResource
 Only StaticResource supported in beta
    DynamicResource not supported
 All static resources are loaded on page load
    Resource is loaded even if not used
 Resource is read once (and only once)
 Resource Item is not modifiable at runtime
    Attempting to modify static resource at runtime results
     in catastrophic failure (wooo ha ha ha ha)
Resources - Scope
 Style is available within scope of the resources section
    StackPanel / Grid etc
    UserControl
    Application Wide (App.xaml)
 Not available outside of the scope
 Style Elements can override other style elements
    MyTextBlock style (defined in app.xaml resource)
    MyTextBlock style (defined in grid resources)
    Grid resource style overrides app.xaml resource
Resources – Xaml Elements
 Not just styles supported in resource area
 Other Xaml Elements supported e.g. Brushes
Resources – Missing WPF Features
 DynamicResource

 Direct application of StaticResource



 Dynamic Skinning
    Resource Dictionary (external file for source)
    Merged Dictionaries
    Dynamic Resource
 Themes
Content Model
 Can set complex content (not just text)
    MediaElements
 ContentPresenter to display content


<Button Height="30" Width="100"
          Click="Button_Click">
        <Button.Content>
          <Grid>
            <Ellipse Height="20" Width="20"
                  Fill="Red"/>
            <ContentPresenter Content="Hello World"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"/>
          </Grid>
        </Button.Content>
      </Button>
Templates
   Uses Resource Section
   Applied via style
   Override ControlTemplate for Template property
   Use TemplateBinding to bind to control properties
   Control continues to use content

    <Style x:Key="buttonStyle" TargetType="Button">
           <Setter Property="Template">
              <Setter.Value>
              <ControlTemplate TargetType="Button">
                <Grid>
                  <Ellipse Height="{TemplateBinding Height}"
                        Width="{TemplateBinding Width}"
                        Fill="Red"/>
                  <ContentPresenter Content="{TemplateBinding Content}"
                              HorizontalAlignment="Center"
                              VerticalAlignment="Center"/>
                </Grid>
              </ControlTemplate>
           </Setter.Value>
           </Setter>
        </Style>
Binding and Items Controls
 ListBox
 Datagrid
ListBox
 Manually add items
   Not Just Text (buttons, textboxes etc)




 Set ItemSource
ListBox - DataTemplate
 Customise Listbox
ListBox - Binding
 {Binding MyPropertyName}


 Binding Modes
    OneWay
    TwoWay
    {Binding LikesFootball, Mode=TwoWay}
Observable Collections
 Notifies the Items Control if the underlying collection
 has changed
INotifyPropertyChanged
 Notifies the Items Control if the underlying collection
  has changed
 Implements INotifyPropertyChanged


 Raises Event (PropertyChangedEvenHandler)
DataContext
   Sets the scope of the binding
   Useful for master detail
IValueConverter
   Used to convert data for UI display
IValueConverter
       Converter declared as a resource
         <local:DateToString x:Key="DateConverter"/>


       Converter specified within binding
       <TextBlock Text="{Binding PublishDate,
        Mode=OneWay, Converter={StaticResource
        DateConverter}}"/>
Networking
 POX + Web Client
 Security
    CrossDomain.xml
    ClientAccessPolicy.xml
 WCF Service is recommended approach
    SOAP
    (Was JSON in Silverlight 1.1)
    JSON is supported but is a pain
 ASMX is supported but use WCF
 ADO.NET Data Services
 Sockets
Plain Old Xml
 Grab Xml Data
 Use Web Client
Pox – Calling the service
 Setup the Service


 Setup the Completed Event Handler




 Call the Service (asynchronously)
LINQ to Xml
 LINQ to Xml Supported
 No Xpath Support
Service Security
 Can only access hosted Web Server unless server has:
    ClientAccessPolicy.xml
    CrossDomain.xml (flash)
 Be careful misuse can open security risk
 See my blog posting regarding
CrossDomain.xml
ClientAccessPolicy.xml
WCF Service
 Echo Service Demo


 Create Service as normal
 Must change binding of WCF Service to
 basicHttpBinding (default is wsHttpBinding) in
 web.config
WCF Service – Client Proxy
 Within Silverlight Application
   Add Service Reference
   Click Discover (will find service)


 Only asynchronous calls supported
 ServicesReferences.ClientConfig is ignored
WCF Service – Calling the service
 Setup the Service


 Setup the Completed Event Handler




 Call the Service (asynchronously)
WCF Service – Membership
 Supports Membership Provider Model
 ASP.NET Compatibility Mode
 Leverages existing website login mechanism
 Restricts service access to logged in users


 See my blog posting regarding
ADO.NET Data Services
 Silverlight supports it
 Ask Guy about it
Sockets
 Outside of scope of todays talk
 Can only create a socket with hosted web server
    CrossDomain.xml & ClientAccessPolicy.xml have no
     effect
 Port Range supported: 4502-4532
Storage
 Isolated Storage
 Open File Dialog
Isolated Storage - Security
 Applications have no direct access to file system
    (except via open file dialog, later)
 Isolated Storage is only area that can be saved to
 Can store pretty much anything
 Size is limited by default and increasable by user
  permission
Isolated Storage – User Store
Isolated Storage – Storage Limits
 100kb default per user per application
 Can query available free space
    AvailableFreeSpace Property (in bytes)
 Can query maximum available (Quota)
    Quota Property (in bytes)
 Can request increase in quota
    Requires user approval
    TryIncreaseQuotaTo method
    Can only increase not decrease
Isolated Storage – File System
 Lives in AppData\LocalLow\Microsoft\Silverlight\is
 Folder Structure / Underlying file system is
  synchronised
 Directory is worth 1Kb in Isolated Storage
   Only if created in Silverlight
 Supports Hierarchical Directory Structure
    userStore.CreateDirectory("aa/a1")
 Can recurse the file system
Open File Dialog
 Only way to access file system outside of Isolated
 Storage
Html Bridge
 Not covering today
 Can access Html of hosted web page (2 way)
 HtmlDocument (System.Windows.Browser)
 HtmlPage
 GetElementByID
 http://www.silverlight.net/Quickstarts/Dom/DomAcc
 ess.aspx
The Future
 More Beta’s (this year)
 Silverlight 2 release (this year)
 Silverlight 2 port to Moonlight
 Silverlight 2 port to Mobile Devices
 Silverlight moving closer to WPF (more WPF features)
 The end of the web as we know it 
The End
 Slides up on my blog
 http://silverlightuk.blogspot.com
 Email: chrishayuk@googlemail.com
 Hope to do some screencasts (see blog)


Thanks for coming

				
DOCUMENT INFO
Shared By:
Categories:
Stats:
views:36
posted:3/26/2011
language:English
pages:83