Extending the UI platform
description
Transcript of Extending the UI platform
![Page 1: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/1.jpg)
![Page 2: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/2.jpg)
Extending the UI platform
Philip JapikseSenior Developer Evangelist, Telerik3-173
![Page 3: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/3.jpg)
Why should I care?Properties/eventsMake it toolableDistributionResources
Agenda
![Page 4: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/4.jpg)
The personality of Windows controlsOptimized for touch firstDesigned for keyboard and mouseIndependently animated
![Page 5: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/5.jpg)
Windows “out of the box” common controls
![Page 6: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/6.jpg)
Data views
6
ListView GridView FlipView
![Page 7: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/7.jpg)
Why extend the UI platform?
![Page 8: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/8.jpg)
Adapting to your unique personality
![Page 9: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/9.jpg)
Extending the UI platform through custom controls
![Page 10: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/10.jpg)
Custom control motivationEncapsulate logicPromote reuseIncrease consistencyIncrease quality Release fasterGet home on time!
![Page 11: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/11.jpg)
As easy as 1-2-3 (4-5)Create the user interfaceAdd properties/methods/eventsAdd metadata for IntelliSenseMake it toolable in Blend/Visual StudioShip it!
![Page 12: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/12.jpg)
Creating the control assembly (XAML / C#)Start with a class library (Windows Store apps)
Set property for GenerateLibraryLayoutAdd templated control
Adds themes \ Generic.xamlDesign your control
Control must have default no-arg constructor
![Page 13: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/13.jpg)
<Project …> <Import …/> <PropertyGroup> … <GenerateLibraryLayout>true </GenerateLibraryLayout> </PropertyGroup> …</Project>
Creating the control assembly (XAML / C#)Project file update Build result
![Page 14: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/14.jpg)
Creating the control UI (HTML / WinJS)Start with a JavaScript fileAdd WinJS namespace and WinJS class
Constructor needs ‘element’ as first parameterDraw your control
![Page 15: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/15.jpg)
Defining the WinJS control(function () { "use strict"; WinJS.Namespace.define("Samples.UI", { ClockControlHTMLUI: WinJS.Class.define(function (element) { // Create an element if none provided element = element || document.createElement("div"); element.winControl = this; this.element = element; element.style.display = "inline-block"; this._drawClock(); }, {
_drawClock: function () { // Draw the control }, }, { }) }); })();
![Page 16: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/16.jpg)
Demo: Creating the control UI
![Page 17: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/17.jpg)
Adding and consuming properties
![Page 18: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/18.jpg)
Adding/consuming properties (XAML / C#)Adding
Dependency properties (if using styles)Standard getter/settersSet defaults in XAML or #
ConsumingThrough markup Through code
![Page 19: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/19.jpg)
Adding properties (XAML / C#)// Creating dependency properties
public static readonly DependencyProperty ClockFillBrushProperty = DependencyProperty.Register("ClockFillBrush", typeof(Brush), typeof(ClockControlXAMLProps), new PropertyMetadata(null));
public Brush ClockFillBrush { get { return (Brush)this.GetValue(ClockFillBrushProperty); } set { this.SetValue(ClockFillBrushProperty, value); } }
-------------------------------------------------------------------------------------<!—Defaults in XAML--><Setter Property="ClockFillBrush" Value="Red"/> <Setter Property="MinWidth" Value="200"/> <Setter Property="MinHeight" Value="200"/>
![Page 20: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/20.jpg)
Consuming properties (XAML / C#)<localProps:ClockControlXAMLProps Grid.Column="1" x:Name="MyClockControlProps" ClockFillBrush="Gray" MinWidth="150 MinHeight="150 />
-----------------------------------------------------------------
var myClock = new B_CustomClockXAMLProps.ClockControlXAMLProps() { ClockFillBrush = new SolidColorBrush(Colors.Blue), MinWidth = 150, MinHeight = 150 };
MyClockControlProps.ClockFillBrush = new SolidColorBrush(Colors.Black);
![Page 21: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/21.jpg)
Adding/consuming properties (HTML / WinJS)Adding
Add options parameter to class constructorCall WinJS.UI.setOptionsAdd properties as class instance methodsRedraw control as necessaryOrder of processing is key!
ConsumingThrough markup via data-win-optionsThrough code
![Page 22: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/22.jpg)
Adding properties (HTML / WinJS)ClockControlHTMLProps: WinJS.Class.define(function (element, options) { // allow a null options parameter options = options || {}; // WinJS utility function to assign/create properties from anonymous options object WinJS.UI.setOptions(self, options); //Omitted for brevity } , { color: { get: function () { return this._color || "red"; }, set: function (value) { if (this._color != value) { this._color = value; //Redraw the User Interface this._drawClock(); } } }, }, })
![Page 23: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/23.jpg)
Consuming properties (HTML / WinJS)<div id="clockControlPropsDiv" data-win-control="Samples.UI.ClockControlHTMLProps" data-win-options="{color:'yellow',width:400, height:400}"></div> ---------------------------------------------------------------var clock = new Samples.UI.ClockControlHTMLProps(MyClock, { color: 'blue' }); clock.color='green'; clockControlPropsDiv.winControl.color='green‘;
![Page 24: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/24.jpg)
Demo: Adding/consuming properties
![Page 25: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/25.jpg)
Adding/consuming events
![Page 26: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/26.jpg)
Adding/consuming events (XAML / C#)Adding
PropertyChangedCallBack to dependency properties
Standard .NET eventsConsuming
Through markup / code-behindThrough standard event handlers in C#
![Page 27: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/27.jpg)
Adding callback events (XAML / C#)public static readonly DependencyProperty IsRunningProperty =
DependencyProperty.Register("IsRunning", typeof(bool), typeof(ClockControlXAMLEvents), new PropertyMetadata(true,
PropertyChangedCallback(OnIsRunningChanged)));
private static void OnIsRunningChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{ var clock = d as ClockControlXAMLEvents; clock.UpdateTimerState(); }
![Page 28: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/28.jpg)
Adding standard events (XAML / C#)public event EventHandler<ClockEventArgs> Ticked;
public class ClockEventArgs : System.EventArgs { public DateTime When { get; set; } public ClockEventArgs(DateTime when) { this.When = when; } }
private void RaiseEvents() { var currentTime = DateTime.Now; var eh = this.Ticked; if (eh != null) { eh(this, new ClockEventArgs(currentTime)); } }
![Page 29: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/29.jpg)
Consuming events (XAML / C#)<localEvents:ClockControlXAMLEvents x:Name="MyClockControlEvents" FiveSecondsElapsed="MyClock_FiveSecondsElapsed" /> ------------------------------------------------------------------- MyClockControlEvents.Ticked += MyClock_Ticked;
private void MyClock_Ticked(object sender, ClockEventArgs e) { ticker.Text = e.When.ToString(); } private void MyClock_FiveSecondsElapsed( object sender, ClockEventArgs e) { ticker5.Text = e.When.ToString(); }
![Page 30: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/30.jpg)
Adding/consuming events (HTML / WinJS)Adding
Use WinJS.Class.mix to add the eventsWinJS.UI.DOMEventMixin
WinJS.Utilities.createEventPropertiesUse this.dispatchEvent to raise the event
ConsumingUse addEventListener to bind to the event
![Page 31: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/31.jpg)
Adding events (HTML / WinJS)WinJS.Namespace.define("Samples.UI", { ClockControlHTMLEvents: WinJS.Class.define(function (element, options) { //omitted for brevity }, { //omitted for brevity _drawHands: function () { //Omitted for brevity this.dispatchEvent("tick", { when: now }); if (sec % 5 == 0) { this.dispatchEvent("fiveseconds", {when:now}); }; }, }, { }) }); WinJS.Class.mix(Samples.UI.ClockControlHTMLEvents, WinJS.UI.DOMEventMixin, WinJS.Utilities.createEventProperties("tick","fiveseconds"));
![Page 32: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/32.jpg)
Consuming events (HTML / WinJS)clockCtDiv.winControl.addEventListener("tick", function (e) { tick.innerText = e.detail.when; }); clockCtlDiv.winControl.addEventListener("fiveSeconds", function (e) { fiveSeconds.innerText = e.detail.when; });
![Page 33: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/33.jpg)
Demo: Adding/consuming events
![Page 34: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/34.jpg)
Supporting IntelliSense
![Page 35: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/35.jpg)
Supporting IntelliSense (XAML / HTML)XAML/C#
Add /// comments to:Dependency properties: Add to CLR propertyCLR properties, events, methods
HTML/WinJSAdd /// comments to In class constructorAbove class fields, properties, methodshttp://msdn.microsoft.com/en-us/library/hh524453.aspx
![Page 36: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/36.jpg)
IntelliSense support (XAML / C#)public static readonly DependencyProperty IsRunningProperty = /*Omitted for Brevity*/;
/// <summary> /// Is it running? /// </summary> public bool IsRunning { get { return (bool)this.GetValue(IsRunningProperty); } set { this.SetValue(IsRunningProperty, value); } }
/// <summary> /// Event that fires every five seconds /// </summary> public event EventHandler<ClockEventArgs> FiveSecondsElapsed;
![Page 37: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/37.jpg)
IntelliSense support (HTML / WinJS)/// <summary>Creates a Clock Control</summary> /// <param name="element" type="HTMLElement">The root element for the control</param> /// <param name="options" type="Object" optional="true">The JSON options for the control</param>
/// <field name='color' type='string'> Sets the color of the hands and the outline of the clock face</field> /// <field name='height' type='int'> Sets the height of the clock face</field>
![Page 38: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/38.jpg)
Visual Studio / Blend Support
![Page 39: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/39.jpg)
Make your control toolable (XAML / C#)Visual Studio / Blend:
Create files / metadata packageSDKManifest.xmlAdd DLL, PRI, and themes
Add to the Windows 8 extensions folder%program files (x86)\Microsoft SDKs\Windows\v8.0\
ExtensionSDKs
![Page 40: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/40.jpg)
Make your control toolable (HTML / JS)Visual Studio / Blend:
Create files / metadata packageSDKManifest.xmlsamples.ui_api_oam.xmlui_<controlname>_oam.xmlAdd to the Windows 8 extensions folder%program files (x86)\Microsoft SDKs\Windows\v8.0\ExtensionSDKs
Blend specific: Properties must use getter/setter paradigm
![Page 41: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/41.jpg)
Distribution
![Page 42: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/42.jpg)
Create a VSIX package (XAML / C#)Install the Visual Studio 2012 SDK
http://bit.ly/12B32zmCreate a VSIX project
Create proper folder structureAdd .pri, themes\xaml, .dll as assets
Build project in release mode
![Page 43: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/43.jpg)
ResourcesVisual Studio 2012 SDK: http://bit.ly/12B32zm Creating VSIX packages: http://bit.ly/11sQN5p XAML XML documentation: http://bit.ly/14nGf67WinJS specific
OpenAjax API Metadata Spec: http://bit.ly/108fHpYOpenAjax Widget Metadata Spec: http://
bit.ly/11sPy6aXML Documentation: http://bit.ly/15reEzM
My blog: http://www.skimedic.com/blog
![Page 44: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/44.jpg)
Evaluate this session
Scan this QR code to evaluate this session and be automatically entered in a drawing to win a prize!
![Page 45: Extending the UI platform](https://reader036.fdocuments.in/reader036/viewer/2022062315/56815cbc550346895dcabb77/html5/thumbnails/45.jpg)
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.