Uk Media Center User Group April 2009

485 views

Published on

An introduction to developing Media Center add-ins, given to the UK Media Center and Windows Home Server user group meeting in Birmingham, April 2009.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
485
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Uk Media Center User Group April 2009

  1. 1. Developing Media CenterPresentation Layer Applications<br />Andrew Cherry<br />Digital Living Solutions Ltd<br />
  2. 2. A bit about me<br />UK Media Center & WHS User Group<br />23-Apr-2009<br />2<br />Digital Living Solutions Ltd<br />Hampshire based, specialising in digital home installation, integration, and software development (including Media Center)<br />Microsoft MVP for Media Center since July 2007<br />“Community Dev Expert” for the Media Center Sandbox (Microsoft-run developer forum for Media Center)<br />
  3. 3. Purpose of today&apos;s session<br />Remove the mystery behind Media Center development<br />Give you a taster of how straightforward it is to develop for Media Center<br />Hopefully inspire you to take the next step and start developing your own add-ins!<br />23-Apr-2009<br />UK Media Center & WHS User Group<br />3<br />
  4. 4. Why develop for Media Center?<br />Potential reach<br />Every Vista Home Premium/Ultimate system has Media Center on it already!<br />Cost of entry<br />All the tools you need are free – Visual C# Express, Media Center SDK<br />You can develop some fun stuff!<br />Limited only by your imagination and patience!<br />23-Apr-2009<br />UK Media Center & WHS User Group<br />4<br />
  5. 5. Media Center Presentation Layer (MCPL)<br />Core building block of Media Center<br />The core UI for Vista Media Center is written in MCML<br />XML based Markup Language<br />Developed (and optimised) specifically for Media Center<br />Used in conjunction with “backend” C# code<br />Applications = code + markup<br />Code = “application logic”, Markup = UI<br />Model-View-Controller pattern<br />23-Apr-2009<br />UK Media Center & WHS User Group<br />5<br />
  6. 6. Media Center Markup Language“Code Behind”<br />Application logic (code + data)<br />Managed code language (e.g. C#)<br />Cannot directly modify view properties<br />Can respond to view events<br />Non-visual, code only<br />Known as a “ModelItem”<br />23-Apr-2009<br />UK Media Center & WHS User Group<br />6<br />Model<br />View<br /><ul><li>Look and behaviour
  7. 7. Media Center Markup Language
  8. 8. Can read/write model properties
  9. 9. Can respond to model changes
  10. 10. Visual + UI logic
  11. 11. Known as a “ViewItem”</li></li></ul><li>Media Center Markup LanguageWhy Model-View Separation?<br />23-Apr-2009<br />UK Media Center & WHS User Group<br />7<br />Rendering<br />Engine<br />User Experience<br />Framework<br />Messaging<br />System<br />Native code (e.g. C++)<br />DirectX 9+<br />Managed code (e.g. C#)<br />.NET Framework 2.0<br />
  12. 12. The Bad News <br />“Windows 1.0 programmers had a straightforward life. They had almost no choices about how to do things; either there was an application programming interface (API), or there wasn’t, and most of the time there wasn’t. This meant that developers had to build almost everything by hand.”<br />23-Apr-2009<br />UK Media Center & WHS User Group<br />8<br />MCPL = Windows 1.0<br />Windows Forms 2.0 Programming, Chris Sells & Michael Weinhardt<br />
  13. 13. Media Center Markup LanguageBasics<br />“UI” encapsulates the definition of the user interface at a specific level<br />All content appears within a Content element, within the UI element<br />23-Apr-2009<br />UK Media Center & WHS User Group<br />9<br />&lt;Mcmlxmlns=&quot;http://schemas.microsoft.com/2006/mcml&quot;&gt;<br /> &lt;UI Name=&quot;UI name&quot;&gt;<br /> &lt;Content&gt;<br /> ...<br /> &lt;/Content&gt;<br /> &lt;/UI&gt;<br />&lt;/Mcml&gt;<br />
  14. 14. Media Center Markup LanguageVisual Primitives<br />Three visual primitives<br />&lt;Text&gt;<br />&lt;Graphic&gt;<br />&lt;ColorFill&gt;<br />23-Apr-2009<br />UK Media Center & WHS User Group<br />10<br />&lt;Text Content=&quot;Hello World!&quot; Color=&quot;White&quot; <br /> Font=&quot;Arial,30&quot; /&gt;<br />&lt;Graphic Content=&quot;resx://addin/addin.resources/image&quot; /&gt;<br />&lt;ColorFill Content=&quot;Red&quot; /&gt;<br />
  15. 15. Media Center Markup LanguageVisual Primitives<br />Two “non-visible” container primitives<br />&lt;Panel&gt;<br />&lt;Clip&gt;<br />Seven layout modes<br />Form<br />Anchor<br />Dock<br />Flow<br />23-Apr-2009<br />UK Media Center & WHS User Group<br />11<br /><ul><li>Grid
  16. 16. Scale
  17. 17. Rotate</li></li></ul><li>Media Center Markup LanguageAnatomy of a button<br />23-Apr-2009<br />UK Media Center & WHS User Group<br />12<br />Button background – no focus<br />Button background – with focus<br />Button text<br />Play<br />Play<br />Dormant Button text<br />Play<br />
  18. 18. Media Center Markup LanguageAnatomy of a button<br />Use a combination of visual primitives, layouts, and rules to generate effects<br />23-Apr-2009<br />UK Media Center & WHS User Group<br />13<br />&lt;Content&gt;<br /> &lt;Panel Name=&quot;Panel&quot; Margins=&quot;10,0,10,0&quot; MinimumSize=&quot;[Size]&quot; MaximumSize=&quot;[Size]&quot; Layout=&quot;Anchor&quot;&gt;<br /> &lt;Children&gt;<br /> &lt;Clip Name=&quot;Fade&quot; FadeSize=&quot;10&quot; FadeAmount=&quot;1.0&quot; FarOffset=&quot;-40&quot; ShowFar=&quot;true&quot; ShowNear=&quot;false&quot; Visible=&quot;true&quot;&gt;<br /> &lt;LayoutInput&gt;<br /> &lt;AnchorLayoutInput Left=&quot;Parent,0&quot; Top=&quot;Parent,0&quot; Right=&quot;Parent,1&quot; Bottom=&quot;Parent,1&quot;/&gt;<br /> &lt;/LayoutInput&gt;<br /> &lt;Children&gt;<br /> &lt;Text Name=&quot;Text&quot; Content=&quot;[Description]&quot; Margins=&quot;10,8,10,8&quot; Color=“White&quot; Font=“Segoe Media Center,20”/&gt;<br /> &lt;/Children&gt;<br /> &lt;/Clip&gt;<br /> &lt;Graphic Name=&quot;Background&quot; Content=“[NoFocusImage]&quot; MinimumSize=“[Size]&quot; MaximumSize=“[Size]&quot;/&gt;<br /> &lt;/Children&gt;<br /> &lt;/Panel&gt;<br />&lt;/Content&gt;<br />Play<br />
  19. 19. Media Center Markup LanguageAnatomy of a button<br />Use a combination of visual primitives, layouts, and rules to generate effects<br />23-Apr-2009<br />UK Media Center & WHS User Group<br />14<br />&lt;Content&gt;<br /> &lt;Panel Name=&quot;Panel&quot; Margins=&quot;10,0,10,0&quot; MinimumSize=&quot;[Size]&quot; MaximumSize=&quot;[Size]&quot; Layout=&quot;Anchor&quot;&gt;<br /> &lt;Children&gt;<br /> &lt;Clip Name=&quot;Fade&quot; FadeSize=&quot;10&quot; FadeAmount=&quot;1.0&quot; FarOffset=&quot;-40&quot; ShowFar=&quot;true&quot; ShowNear=&quot;false&quot; Visible=&quot;true&quot;&gt;<br /> &lt;LayoutInput&gt;<br /> &lt;AnchorLayoutInput Left=&quot;Parent,0&quot; Top=&quot;Parent,0&quot; Right=&quot;Parent,1&quot; Bottom=&quot;Parent,1&quot;/&gt;<br /> &lt;/LayoutInput&gt;<br /> &lt;Children&gt;<br /> &lt;Text Name=&quot;Text&quot; Content=&quot;[Description]&quot; Margins=&quot;10,8,10,8&quot; Color=“White&quot; Font=“Segoe Media Center,20”/&gt;<br /> &lt;/Children&gt;<br /> &lt;/Clip&gt;<br /> &lt;Graphic Name=&quot;Background&quot; Content=“[NoFocusImage]&quot; MinimumSize=“[Size]&quot; MaximumSize=“[Size]&quot;/&gt;<br /> &lt;/Children&gt;<br /> &lt;/Panel&gt;<br />&lt;/Content&gt;<br />Play<br />
  20. 20. Media Center Markup LanguageAnatomy of a button<br />Use a combination of visual primitives, layouts, and rules to generate effects<br />23-Apr-2009<br />UK Media Center & WHS User Group<br />15<br />&lt;Content&gt;<br /> &lt;Panel Name=&quot;Panel&quot; Margins=&quot;10,0,10,0&quot; MinimumSize=&quot;[Size]&quot; MaximumSize=&quot;[Size]&quot; Layout=&quot;Anchor&quot;&gt;<br /> &lt;Children&gt;<br /> &lt;Clip Name=&quot;Fade&quot; FadeSize=&quot;10&quot; FadeAmount=&quot;1.0&quot; FarOffset=&quot;-40&quot; ShowFar=&quot;true&quot; ShowNear=&quot;false&quot; Visible=&quot;true&quot;&gt;<br /> &lt;LayoutInput&gt;<br />&lt;AnchorLayoutInput Left=&quot;Parent,0&quot; Top=&quot;Parent,0&quot; Right=&quot;Parent,1&quot; Bottom=&quot;Parent,1&quot;/&gt;<br /> &lt;/LayoutInput&gt;<br /> &lt;Children&gt;<br /> &lt;Text Name=&quot;Text&quot; Content=&quot;[Description]&quot; Margins=&quot;10,8,10,8&quot; Color=“White&quot; Font=“Segoe Media Center,20”/&gt;<br /> &lt;/Children&gt;<br /> &lt;/Clip&gt;<br /> &lt;Graphic Name=&quot;Background&quot; Content=“[NoFocusImage]&quot; MinimumSize=“[Size]&quot; MaximumSize=“[Size]&quot;/&gt;<br /> &lt;/Children&gt;<br /> &lt;/Panel&gt;<br />&lt;/Content&gt;<br />Play<br />
  21. 21. Media Center Markup LanguageAnatomy of a button<br />Use a combination of visual primitives, layouts, and rules to generate effects<br />23-Apr-2009<br />UK Media Center & WHS User Group<br />16<br />&lt;Content&gt;<br /> &lt;Panel Name=&quot;Panel&quot; Margins=&quot;10,0,10,0&quot; MinimumSize=&quot;[Size]&quot; MaximumSize=&quot;[Size]&quot; Layout=&quot;Anchor&quot;&gt;<br /> &lt;Children&gt;<br /> &lt;Clip Name=&quot;Fade&quot; FadeSize=&quot;10&quot; FadeAmount=&quot;1.0&quot; FarOffset=&quot;-40&quot; ShowFar=&quot;true&quot; ShowNear=&quot;false&quot; Visible=&quot;true&quot;&gt;<br /> &lt;LayoutInput&gt;<br /> &lt;AnchorLayoutInput Left=&quot;Parent,0&quot; Top=&quot;Parent,0&quot; Right=&quot;Parent,1&quot; Bottom=&quot;Parent,1&quot;/&gt;<br /> &lt;/LayoutInput&gt;<br /> &lt;Children&gt;<br /> &lt;Text Name=&quot;Text&quot; Content=&quot;[Description]&quot; Margins=&quot;10,8,10,8&quot; Color=“White&quot; Font=“Segoe Media Center,20”/&gt;<br /> &lt;/Children&gt;<br /> &lt;/Clip&gt;<br /> &lt;Graphic Name=&quot;Background&quot; Content=“[NoFocusImage]&quot; MinimumSize=“[Size]&quot; MaximumSize=“[Size]&quot;/&gt;<br /> &lt;/Children&gt;<br /> &lt;/Panel&gt;<br />&lt;/Content&gt;<br />Play<br />
  22. 22. Media Center Markup LanguageAnatomy of a button<br />Use a combination of visual primitives, layouts, and rules to generate effects<br />23-Apr-2009<br />UK Media Center & WHS User Group<br />17<br />&lt;Content&gt;<br /> &lt;Panel Name=&quot;Panel&quot; Margins=&quot;10,0,10,0&quot; MinimumSize=&quot;[Size]&quot; MaximumSize=&quot;[Size]&quot; Layout=&quot;Anchor&quot;&gt;<br /> &lt;Children&gt;<br /> &lt;Clip Name=&quot;Fade&quot; FadeSize=&quot;10&quot; FadeAmount=&quot;1.0&quot; FarOffset=&quot;-40&quot; ShowFar=&quot;true&quot; ShowNear=&quot;false&quot; Visible=&quot;true&quot;&gt;<br /> &lt;LayoutInput&gt;<br /> &lt;AnchorLayoutInput Left=&quot;Parent,0&quot; Top=&quot;Parent,0&quot; Right=&quot;Parent,1&quot; Bottom=&quot;Parent,1&quot;/&gt;<br /> &lt;/LayoutInput&gt;<br /> &lt;Children&gt;<br /> &lt;Text Name=&quot;Text&quot; Content=&quot;[Description]&quot; Margins=&quot;10,8,10,8&quot; Color=“White&quot; Font=“Segoe Media Center,20”/&gt;<br /> &lt;/Children&gt;<br /> &lt;/Clip&gt;<br /> &lt;Graphic Name=&quot;Background&quot; Content=“[NoFocusImage]&quot; MinimumSize=“[Size]&quot; MaximumSize=“[Size]&quot;/&gt;<br /> &lt;/Children&gt;<br /> &lt;/Panel&gt;<br />&lt;/Content&gt;<br />Play<br />
  23. 23. Media Center Markup LanguageAnatomy of a button<br />Use a combination of visual primitives, layouts, and rules to generate effects<br />23-Apr-2009<br />UK Media Center & WHS User Group<br />18<br />&lt;Rules&gt;<br /> &lt;Rule&gt;<br /> &lt;Conditions&gt;<br />&lt;Equality Source=&quot;[Input.KeyFocus]“ Value=&quot;true&quot;/&gt;<br />&lt;/Conditions&gt;<br /> &lt;Actions&gt;<br />&lt;Set Target=&quot;[Background.Content]&quot; Value=&quot;[FocusImage]”/&gt;<br />&lt;/Actions&gt;<br /> &lt;/Rule&gt;<br /> &lt;Condition Source=&quot;[Model.Dormant]&quot; SourceValue=&quot;true&quot;&gt;<br />&lt;Actions&gt;<br />&lt;Set Target=&quot;[Text.Color]&quot; Value=“[DormantBlue]&quot;/&gt;<br />&lt;/Actions&gt;<br /> &lt;/Condition&gt;<br />&lt;Rules&gt;<br />Play<br />
  24. 24. Media Center Markup LanguageAnatomy of a button<br />Use a combination of visual primitives, layouts, and rules to generate effects<br />23-Apr-2009<br />UK Media Center & WHS User Group<br />19<br />&lt;Rules&gt;<br /> &lt;Rule&gt;<br /> &lt;Conditions&gt;<br /> &lt;Equality Source=&quot;[Input.KeyFocus]“ Value=&quot;true&quot;/&gt;<br /> &lt;/Conditions&gt;<br /> &lt;Actions&gt;<br /> &lt;Set Target=&quot;[Background.Content]&quot; Value=&quot;[FocusImage]”/&gt;<br /> &lt;/Actions&gt;<br /> &lt;/Rule&gt;<br /> &lt;Condition Source=&quot;[Model.Dormant]&quot; SourceValue=&quot;true&quot;&gt;<br /> &lt;Actions&gt;<br /> &lt;Set Target=&quot;[Text.Color]&quot; Value=“[DormantBlue]&quot;/&gt;<br /> &lt;/Actions&gt;<br /> &lt;/Condition&gt;<br />&lt;Rules&gt;<br />Play<br />
  25. 25. Media Center Markup LanguageAnatomy of a button<br />Use a combination of visual primitives, layouts, and rules to generate effects<br />23-Apr-2009<br />UK Media Center & WHS User Group<br />20<br />&lt;Rules&gt;<br /> &lt;Rule&gt;<br /> &lt;Conditions&gt;<br /> &lt;Equality Source=&quot;[Input.KeyFocus]“ Value=&quot;true&quot;/&gt;<br /> &lt;/Conditions&gt;<br /> &lt;Actions&gt;<br /> &lt;Set Target=&quot;[Background.Content]&quot; Value=&quot;[FocusImage]”/&gt;<br /> &lt;/Actions&gt;<br /> &lt;/Rule&gt;<br /> &lt;Condition Source=&quot;[Model.Dormant]&quot; SourceValue=&quot;true&quot;&gt;<br /> &lt;Actions&gt;<br /> &lt;Set Target=&quot;[Text.Color]&quot; Value=“[DormantBlue]&quot;/&gt;<br /> &lt;/Actions&gt;<br /> &lt;/Condition&gt;<br />&lt;Rules&gt;<br />Play<br />
  26. 26. Media Center Markup LanguageModelItems<br />Built-in objects “known” to MCML – can be inherited from<br />Can be used safely to interact with View Items(Model Items are created on the application thread)<br />Model Items can trigger actions in their associated View (using the FirePropertyChangedmethod)<br />Have special functions in the Media Center environment (e.g. ArrayListDataSet)<br />23-Apr-2009<br />UK Media Center & WHS User Group<br />21<br />
  27. 27. Media Center Markup LanguageBuilt-in ModelItem Examples<br />ArrayListDataSet<br />BooleanChoice<br />ByteRangedValue<br />Choice<br />Command<br />EditableText<br />Image<br />IntRangedValue<br />ListDataSet<br />ModelItem<br />RangedValue<br />VirtualList<br />23-Apr-2009<br />UK Media Center & WHS User Group<br />22<br />
  28. 28. The Media Center API<br />Access to non-visual elements of Media Center<br />Transport and volume controls<br />Launch applications and navigate to pages<br />Play media<br />Show dialogs<br />Control DVD Changers<br />Access scheduled and recorded TV metadata<br />23-Apr-2009<br />UK Media Center & WHS User Group<br />23<br />
  29. 29. Examples of add-ins for Media Center<br />23-Apr-2009<br />UK Media Center & WHS User Group<br />24<br />GridSearch for Media CenterTM © JFDI Engineering<br />
  30. 30. Examples of add-ins for Media Center<br />23-Apr-2009<br />UK Media Center & WHS User Group<br />25<br />Niveus Weather © Niveus Media, Inc.<br />
  31. 31. Examples of add-ins for Media Center<br />23-Apr-2009<br />UK Media Center & WHS User Group<br />26<br />Life|Ware © Exceptional Innovation, LLC<br />
  32. 32. Examples of add-ins for Media Center<br />23-Apr-2009<br />UK Media Center & WHS User Group<br />27<br />Niveus Movie Library © Niveus Media, Inc.<br />
  33. 33. Where next?<br />Read the SDK help file from start to finish!<br />Play with the MCML Sampler in the SDK<br />Install and play with the Q and Z applications<br />Experiment with creating your own controls<br />Experiment with creating layouts<br />Get help from the community<br />http://discuss.mediacentersandbox.com<br />Start developing!<br />23-Apr-2009<br />UK Media Center & WHS User Group<br />28<br />

×