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