Nuno Filipe Godinho : UX

PDC09 – Day Two – Advanced Topics for Building Large-Scale Applications with Microsoft Silverlight

NunoGodinho — Thu, 19 Nov 2009 01:17:45 GMT

MVVM – Model-View-ViewModel

Separation of concerns
View = handled UI
Model = contains pure data
ViewModel = communicates between View and Model through bindings
Works Great with Silverlight and WPF

XAML based data bindings

Testable

Model

Represents the Data
The entity
Not required to know where it gets the data from

WCF service, WCF Ria Services

View

The Screen, the UI

ViewModel

Main source of logic for the MVVM triad
Connects the Model and the View
Abstracts the View
Public Properties that are bound to the View
INotifyPropertyChanged and INotifyCollectionChanged talk to the view through bindings
Listens for changes from the View made to the Model

Variations of the MVVM

View First

ViewModel is declared as StaticResource in the Views XAML

Works well in Blend

Another way is to create the ViewModel in the View’s code-behind

ViewModel First

View is injected into the ViewModel’s constructor
Doesn’t allow the possibility to use Blend

View and ViewModel Marriage

View must be paired with the ViewModel somehow
Doesn’t allow the possibility to use Blend

What don’t we have with MVVM

Commanding

Prism 2

Prism is a set of options
Use what you want and ignore the rest
Technical Concepts:

Modules
Shell
Commands
Containers
Regions
Bootstrapper
Event Aggregation
Unity and Dependency Injection

PDC09 – Day Two - Keynote

NunoGodinho — Wed, 18 Nov 2009 19:04:10 GMT

Steven Sinofsky

Developing Windows 7

Learning

Solving Problems + Innovation
“Engineering 7” Blog made a very interesting Dialog even without having any code of the product, just about the decisions that were being made
Ecosystem Readiness
Developer Pre-Beta, Beta, RC rhythm
Telemetry

Telemetry

Seed Feedback Button
Hardware and Device Diagnostics
Reliability Analysis Component (RAC)
Software Quality Monitor (SQM)
Windows Error Reporting (WER or “Watson”)

Developing Internet Explorer

Learning

Responsible Engineering
Trustworthy computing
Real-world Interoperability
Innovative Technologies

Updates

Standards Progress

ACID
HTML 5

Performance Improvements

Javascript

Ecosystem Innovations

IE 9 with 3 weeks of development is looking interesting in terms of performance and interoperability
Using Direct2D and DirectWrite to provide better graphics rendering and Hardware Acceleration without any change of the current sites

Windows 7 Call to Action

Integrate with Windows 7 Desktop
Develop 64-bit
Focus on fundamentals in your code
Build on new APIs in Windows 7
Watch more videos today on Channel 9 about Internet Explorer 9

Scott Guthrie – Developer Division

Silverlight 4

Focus

Media

Web and and Microphones

gives you access to the raw access to the input and so you can make the changes you want on that stream, like using PixelShader with it

Multicast streaming

IIS Smooth Streaming

Silverlight Media Framework available today on CodePlex

Output protection
Offline DRM support

Business Applications

Printing

Print Preview Dialogs
Printing Configurations
This is a Print API that you can change however you want and not only a screenshot of the screen

Rich Text
Clipboard access

Local and Central clipboard support

Right Click
Mouse Wheel
Implicit Styles
Drag and Drop
Drop Targets support
Bidi & RTL
HTML

Hosting HTML inside Silverlight application
We can interact with the HTML contents as being a brush

Commanding and MVVM
Data & Networking

Sharing Assemblies across SL and .NET 4.0
Data Binding Improvements
UDP Multicast support
REST Enhancements
WCF Improvements

Main one is TCP channel support

WCF RIA Services

All the capabilities of RIA Services and with all the capabilities of WCF
Works well with OAuth

Visual Studio 2010

WYSIWYG Design Surface
XAML Intellisense
WF and POCO Support

Additional Control
Beyond the Browser

Windowing API
Notification Popups
HTML support
Drop Target support
Opening the Sandbox

Trusted Application

Custom Windows Chrome
Local File System
Cross-file Network
Keyboard support in Full Screen Mode
COM object support in Windows

using dynamic keyword of C#

Access to Several devices form the client machine

Silverlight Performance

Twice as fast

uses JIT like the normal .NET Application

30% faster startup
New Profiling support

Google Chrome will support SL4 also

Schedule

Beta

All the features seen today
VS2010 Tools
Expression Tools

RC
Final Release

First half of Next Year (MIX’10 ????)

Kurt DelBene – Office and Sharepoint 2010

Microsoft Business Productivity Infrastructure

Unified Business Platform

Unified Communications
Business Intelligence
Enterprise Content Management
Collaboration
Enterprise Search

Office and Sharepoint Development Platforms

User Experience

Based in Services and in a Object Model that can be extended in order to create better User Experience

Application Services

Expose all the capabilities in the Applications as services to be consumed without loosing any of the features that we have access inside the solution

Content and Data Management
Interoperability with LOB integration

possibility to more easily integrate the external LOB applications inside the products

Tools and Deployment Flexibility

New Tools for Sharepoint Development
Debug capabilities are currently in the Tools

Now Debug really works. Awesome.

Interesting capability to import a Sharepoint solution to start the project
Possibility to deploy the solution in a sandboxed solution. Interesting in terms of security
Deployment

Simply upload the package generated by Visual Studio 2010 into the sharepoint – Real All-in-One working for deployment also. Now it looks really good for Sharepoint Development.

Announcing the Office and Sharepoint 2010 Public Beta to download www.microsoft.com/2010

Office 2010
Sharepoint Server
Project Server 2010
Visio 2010
Mobile is also available today in the mobile marketplace

Sharepoint has a Silverlight WebPart out of the Box.
Sharepoint 2010 now has the Office Ribbon

Announcing Duet Enterprise for Microsoft Sharepoint and SAP

Consume and extend SAP from Microsoft Sharepoint 2010
Available on the Second-half of 2010

Announcing the Outlook Social Connector

Windows Live, Sharepoint Server, Linkedin
Has an Open SDK that can be used to develop new connectors for this connector

TemplateBinding inside ControlTemplate.Triggers

NunoGodinho — Tue, 01 Sep 2009 19:03:36 GMT

One of the limitations of TemplateBinding Markup in WPF is the fact that we cannot use it inside the ControlTemplate.Triggers because it really doesn’t work, since as Mike Hillberg said here, “TemplateBinding is a lightweight, but less functional, version of a Binding with a RelativeSource of TemplatedParent. One of the things that a TemplateBinding can't do is work within the ControlTemplate.Triggers; TemplateBinding only works within the template content” .

So we have this:

MyControl.cs

  1: 	public class MyControl : Control
  2: 	{
  3: 
  4: 		public Boolean Selected
  5: 		{
  6: 			get { return (Boolean)GetValue(SelectedProperty); }
  7: 			set { SetValue(SelectedProperty, value); }
  8: 		}
  9: 
 10: 		// Using a DependencyProperty as the backing store for Selected.  This enables animation, styling, binding, etc...
 11: 		public static readonly DependencyProperty SelectedProperty =
 12: 			DependencyProperty.Register("Selected", typeof(Boolean), typeof(MyControl), new UIPropertyMetadata(false));
 13: 
 14: 
 15: 
 16: 		public Brush SelectedColor
 17: 		{
 18: 			get { return (Brush)GetValue(SelectedColorProperty); }
 19: 			set { SetValue(SelectedColorProperty, value); }
 20: 		}
 21: 
 22: 		// Using a DependencyProperty as the backing store for SelectedColor.  This enables animation, styling, binding, etc...
 23: 		public static readonly DependencyProperty SelectedColorProperty =
 24: 			DependencyProperty.Register("SelectedColor", typeof(Brush), typeof(MyControl), new UIPropertyMetadata(Brushes.Red));
 25: 
 26: 
 27: 		public MyControl()
 28: 		{			
 29: 		}
 30: 
 31: 		protected override void OnInitialized(EventArgs e)
 32: 		{
 33: 			base.OnInitialized(e);
 34: 
 35: 			this.MouseLeftButtonDown += new System.Windows.Input.MouseButtonEventHandler(MyControl_MouseLeftButtonDown);
 36: 		}
 37: 
 38: 		void MyControl_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
 39: 		{
 40: 			MessageBox.Show(this.SelectedColor.ToString());
 41: 			this.Selected = !this.Selected;
 42: 		}
 43: 	}
 44:

Window1.xaml

  1: <Window x:Class="WpfApplication13.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4: 	xmlns:local="clr-namespace:WpfApplication13"
  5:     Title="Window1" Height="300" Width="300">
  6:     <Grid>
  7: 		<local:MyControl x:Name="ctrl1">
  8: 			<local:MyControl.Template>
  9: 				<ControlTemplate TargetType="{x:Type local:MyControl}">
 10: 					<Grid Background="Green" x:Name="source"/>
 11: 					<ControlTemplate.Triggers>
 12: 						<Trigger Property="Selected" Value="true">
 13: 							<Setter TargetName="source" Property="Background" Value="{TemplateBinding SelectedColor}"/>
 14: 						</Trigger>
 15: 						<Trigger Property="Selected" Value="false">
 16: 							<Setter TargetName="source" Property="Background" Value="Green"/>
 17: 						</Trigger>
 18: 					</ControlTemplate.Triggers>
 19: 				</ControlTemplate>
 20: 			</local:MyControl.Template>
 21: 		</local:MyControl>
 22: 	</Grid>
 23: </Window>
 24:

When we compile we get the following error, "Cannot convert the value in attribute 'Value' to object of type ''. Error at object 'System.Windows.Setter' in markup file 'WpfApplication13;component/window1.xaml' Line 13 Position 58."

So how can we solve this problem?

Since the problem here is that TemplateBinding is not supported inside the ControlTemplate.Triggers, we have to find another way to make the binding, and so we just change the line 13 to

  1: 							<Setter TargetName="source" Property="Background" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedColor}"/>

And if we look at the TemplateBinding Markup page in MSDN, the usage of TemplateBinding is similar to the Binding Markup using TemplatedPart as the RelativeSource, like {Binding RelativeSource={RelativeSource TemplatedParent}, Path=DependencyPropertyToBind}

Hope this helps.

Silverlight 3 with MEF support

NunoGodinho — Thu, 30 Jul 2009 18:07:23 GMT

One of the things that I really thing would be important for Silverlight in order to make easier the Modularity of the Business applications developed in Silverlight, since the Prism approach is nice but I think that the MEF approach is simpler and so this should be a breakthrough for Silverlight Business Application Development.

After some talks with Brad Adams from Microsoft and also posting some feedback I came to this very interesting post of Brad that talks about how can we use the MEF for Silverlight that was made available on the CodePlex site related to MEF.

Brad make a very good example of the usage of MEF in this blog post.

So enjoy the reading and good coding.

Update .NET RIA Services

NunoGodinho — Thu, 30 Jul 2009 17:55:25 GMT

Recently I posted about .NET RIA Services that is a framework that is associated with Silverlight and will make the development of business applications easier.

So here a some more links in order to understand .NET RIA Services better.

Have a nice reading about .NET RIA Services

.NET RIA Services

NunoGodinho — Tue, 21 Jul 2009 22:32:15 GMT

.NET RIA Services is a framework that is associated with Silverlight and will make the development of business applications easier.

In order to know more I decided to compile a set of articles that I think are very interesting to understand .NET RIA Services better.

Have a nice reading about .NET RIA Services

Silverlight 3.0 RTW

NunoGodinho — Sun, 19 Jul 2009 19:04:29 GMT

As you might already know Silverlight 3 RTW is out and with it the great power of Silverlight 3 was unleashed.

The main features made available are:

Tools

Expression Blend 3 RC

Ability to Import Photoshop and Illustrator
SketchFlow
State Management

Visual Studio 2010

Still in Beta 1 version but with a strong design tools for Silverlight

Controls

DataForm

Simple control that enabled a flexible way to display data of a single entity definition. Support several methods such as Display, Edit and Update and navigating to data.

DataPager

This control gives Paging support such as Next/Previous and Numeric paging on elements that implement the IPageViewCollection interface.

Navigation Framework

A Framework that will provide an easy way to provide navigation to applications, and that introduces to Silverlight 2 new controls, called Frame and Page. With it we can partition views into separate XAML files and navigate to each view independently. Also integrates with Browser history providing Browser Back and Forward functions.
SEO – Search Engine Optimization
Deep Linking

Possibility to navigate directly to a specific page in the Silverlight solution

New toolkit controls

Media

Support for H.264 and AAC encoding
Raw audio/video pipeline support that will provide audio/video decoding outside the runtime and render in Silverlight

Graphics

Perspective 3D

Support for 3D scenarios and putting object on a plane for various user experience scenarios.

Pixel Effects

Support for Pixel Shader Effects

Animation Easing

Provides a set of possibilities that will interpolate the animations and provide smoother animation transitions and other visual effects

Bitmap API
GPU Acceleration
Text/Image Improvements

Element-to-Element Binding
Local Connection API

Enable scenarios in order to Silverlight solutions to communicate with each other through an asynchronous messaging system. A pub-sub implementation for Silverlight applications.

Binding Validation API
SaveFileDialog
Dynamic Styling and Based On

Support for DynamicResource
Support for Based On Styles

Caret Brush
Merged Resource Dictionaries
Assembly Caching

Possibility of having the Silverlight solutions load core runtime from a runtime cache rather than having it on the xap file.

Network monitoring API

Possibility to check network status changes.

Out-of-Browser and Offline

Possibility to have the applications run on and off the browser and Offline also, having it work like a desktop solution.

Binary XML

Ability to communicate using WCF with Binary XML data format and providing smaller communications,

Web Service Utility

Slsvcutil.exe that works like the regular WCF svcutil tool but specific for Silverlight

.NET RIA Services (Still in CTP version)

A complete framework that will provide an easy way to develop using the n-tier pattern using the power of ASP.NET to help Silverlight to achieve this.

Know more on the Get Started session of Silverlight.net site.

WPF Charting is already available in WPF Toolkit of June 2009

NunoGodinho — Mon, 06 Jul 2009 21:57:53 GMT

The long wait has finished as the WPF Charting was made available on the last WPF Toolkit release of June 2009 and now we can use all those great charts that were available for Silverlight, now also in WPF.

You can know more about this here.

MIX’09 – Reviewing – Building Microsoft Silverlight Controls

NunoGodinho — Sun, 21 Jun 2009 18:08:30 GMT

Karen Corby – Lead Program Manager on Silverlight Team - http://scorbs.com/work

“One major difference between site with a strong Brand Image … and one with weak Brand Image … is that brand positioning permeates every part of a strong site …” – Forrester, June 9, 2005

Styling
- “Property Bag” styling
- Through the <Style> element
- Works with Controls , UserControls, Shapes, Panels
- App.xaml now support the MergedResourceDictionaries functionality like in WPF
  - <ResourceDictionary.MergedDictionaries>
    - <ResourceDictionary Source=”Assets.xaml”/>
  - </ResourceDictionary.MergedDictionaries>
- Styles now support BasedOn
  - <Style x:Key=”NewStyle” BasedOn=”{StaticResource BaseStyle}”>
Skinning
- Completely replace visuals
- Through <ControlTemplate> element
- {TemplaceBinding} extension
- Works with Custom Controls (not UserControls, Panels, Shapes)
- Based on a well defined separation with: (same way as in Silverlight 2.0)
  - Control Logic
  - Control Visuals
- Parts and States Model
  - Goals:
    - Make it easy to skin your control
    - Defined separation between logic and visuals
    - Explicit control contract
  - Parts:
    - Names element (x:Name) in Template
    - Why is it needed to be a named element? Because, code manipulates element in same way.
  - States:
    - Visual look of control in a particular state
    - Thought <VisualState> element
    - Not all ControlTemplates need a Visual State
  - StateGroups:
    - Set of mutually exclusive states
    - Different state groups are orthogonal
    - Though the <VisualStateGroup> element
  - Using States and Transitions
    - VisualStateManager.VisualStateGroups
      - Attached Properties on root visual of ControlTemplate
    - VisualStateGroup
      - Contains group of related states
    - VisualState class
      - Contains storyboard that represents visual look
    - VisualTransition class
      - Contains duration for automatic transition animations
      - Contains storyboard for explicit transition animations
      - Default, or “To/From” transitions
      - GeneratedEasingFunction that is part of Silverlight 3 and that make it easy to define how an animation will work without the need to a storyboard
Data Binding
- Validation and Binding
  - Flags we need to enable
    - NotifyOnValidationErrors
    - ValidatesOnExceptions
  - Bindings
    - RelativeSource Binding was included
      - Self & TemplatedParent as source
      - Power of full binding in Templates
        
        Attached DP sources, converters, two-way, etc.
    - DependecyProperties as Sources for Bindings
      - Update based on DP changes
  - Out-of-the-Box controls with Validation enabled
    - TextBox
    - CheckBox
    - RadioButton
    - ComboBox
    - ListBox
    - PasswordBox
      - Currently isn’t bindable but it will be in the SL 3.0 RTW
- Binding and Styles
  - ElementName binding
    - “UI to UI binding”
    - FrameworkElement can be used as a binding Source
  - The Styles can now be changed in runtime
    - the “write once” style limitation was removed in SL 3.0
- Silverlight Styling vs WPF Styling
  - Currently not supported in SL 3.0
    - Implicit Styles
      - A workaround was used in the Silverlight Toolkit
    - Dynamic Resources
    - Triggers
      - Blend’s Behaviors
Custom Controls
- Based on Control class
- Add the Control Contract in the Control Logic Class
  - TemplateVisualState elements
  - TemplatePart elements
- Generic.xaml
  - Specific element and it must be placed inside a folder named themes on your project
  - Needs to be placed as a Resource on the project
- Define the DefaultStyleKey property
  - Informs the element that it should go to the generic.xaml to get the default style
- “Look-less” by default
- Silverlight and WPF Skinning Model
  - Same Model
From Silverlight to WPF
- Viewbox in Silverlight is part of the Toolkit and in WPF is part of the core runtime
- VSM in WPF is part of the WPF Toolkit and in Silverlight is in the core runtime – Will be part of the core runtime of WPF in the next version
- EasingFunctions are part of the Silverlight core runtime and will only be part of the next version of WPF
Layout
- Custom Panels
- In Silverlight is two pass algorithm
  - Measure
    - Check How much space do you need
  - Arrange
    - Having the space needed arrange your elements inside it

One more very interesting talk about Silverlight in MIX'09 and that showed up some very important new features in terms of Styling, Skinning and Custom Control definition.

MIX’09 – Reviewing – Future of Expression Blend

NunoGodinho — Mon, 08 Jun 2009 13:14:23 GMT

Douglas Olson – General Manager

Christian Schormann – Director, Program Manager

Expression Mission

Enable professional designers to create great UX with better productivity at lower costs.
Help integrate design and designers into the process of software creation

Expression Blend 3 Goals

Enable early-stage design & prototyping (SketchFlow)
- Created to address issues felt at the start of the software design process:
  - Top-down & bottom-ups design lets you experiments with ideas
  - SketchFlow Player lets you try your design at any time
  - Facilitate communication of design ideas
  - Easy to gather, evaluate and use stakeholders feedback
- Blend Elements
  - SketchFlow Application Flow
    - Important to think on pages like whiteboards to sketch, insert elements, and all what you normally do.
- Usage of SketchStyles that will allow us to maintain the Sketchy style of the Design proposal, that is very important.
- Export to Word
  - Dumps all the SketckFlow elements like Application Flow, Pages, Comments and so on.
Make visual design easier for designer
- Embrace the Design Ecosystem
  - Adobe Photoshop & Illustrator file format import with extensive support for layers
    - Preview of Photoshop in Windows Explorer even without PhotoShop installed
    - Possibility to choose what to do with each layer
    - Blend informs if the font is default or not and gives the possibility to choose other font or even the same font by specifying the path of the font
    - All content will be fully editable
    - Layer Groups are also maintained
    - By selecting an object we can make “Make into Control”
      - We choose the type of control we want to create
      - What’s done is:
        
        A style is created in order for the control to became what was defined when we selected the elements to generate the control.
        
        The control created will replace the selected element and gain the same properties that the original element had.
        
        The style is associates to the control
        
        Note: There’s now a problem when the controls have different parts, like the Slider, and this will generate all but we need to wire-up the style to the correct parts
  - Fast and Easy Control Skinning
  - Enhanced editing of visual States
  - Richer state transitions
- Focus On Your Art
  - Redefined artboard interaction
  - Better gradient editing
Design with Data (Data Generation / Sampling inside Blend)
- In the Data Tab we will have the possibility to define the DataSource structure that we want, and then just generate the data, and there are some templates like Phone Numbers, Strings, Dates, and so on.
- Make it easy to build a data-driven applications:
  - Sample Data:
    - Design applications without access to live data source
    - Create sample data on the fly
    - Populate with configurable random data
  - Drag and Drop Master-Detail creation
  - Better user experience for data binding
  - Design-time support for Silverlight 3 controls
- There’s a Master and a Details Mode in the Data Tab that will make it easier to perform the Master-Details view
  - in this version of Blend we need to wire-up the Master and Detail elements, and this will not be needed in the last version of Blend
Build interactivity without code (Behaviors)
- Introduction to Behaviors:
  - Production-quality interactivity applied with Drag & Drop ease
  - A design pattern for reusable interactivity
  - Example: MouseGestureBehavior
    - You can define the gesture that will be used and make changes to the elements based on that gesture
Enable Source Code Control (Integration with Source Safe and TFS by default) – This is available also inside Expression Web
- Design for Developers
  - Source Control
    - Visual Studio Team Foundation Server Support
    - New editor with Intellisense for code & XAML
Support for Silverlight 3

Note:

The same features are available for WPF and Silverlight in Blend 3.

It’s important to avoid having final or high-definition elements in the Sketch design because customers will start looking in the direction of the rendering instead of the functionality.

Mix09 Day 1 - “Go beyond Best Practices : Evolving the Next Best Practices to Prosper in the 21st Century” with Lou Carbone

NunoGodinho — Tue, 24 Mar 2009 23:44:39 GMT

How does your business causes its customers to feel?

This is important because some of us lost track of what’s the purpose of the business, because the purpose is bringing value to the business and having the profit has an added bonus.

Running businesses as being made of Greed is not the way, but this is so in the community that even in bills we have phrase like “In greed we trust”. Isn’t this scary?

Movements that Lou Carbone is involved:

- Experience Management Institute

- Phoenix effect

There’s too much effort in the company and too less in the customers

“Emotions are important determinants of economic behavior …”

Firms of Endearment

- Amazon.com

- Costco

- JetBlue

- Apple

- Harley Davidson

- BMW

- Google

- Toyota

- IKEA

- Commerce Bank

- Carmax

- ….

What make this firms so unique?

- They developed the SPICE Model that is:

- Society

- Partners

- Investors

- Customers

- Employees

- Thinking about things without putting in case any of the constituents

- It’s important to think what people give attention to. example: St. Patrick’s Day, Some companies placed that inside their we site and businesses other didn’t, that causes impacts.

Experience Management

- Behaviors

- Attitudes

- Emotions

Value relationships

- Brand Value – How we feel about the company

- Customer Value – How customers see your company

Types of clues

Categories of clues

- functional - rational

- mechanic - emotional

- humanic – emotional

“You cannot NOT have an experience”

We need move from the ROI obsession to

- ROY(Return of Y(Why’s)) obsession

- Y are we Doing it (Effect)

- Y will it make a difference

- Y wouldn’t we do it

- Y does it make sense

MIX’09 – Keynote 1

NunoGodinho — Fri, 20 Mar 2009 20:20:49 GMT

Here we are for the start of great event MIX’09

Starting with Bill Buxton from Microsoft Research with “Return of Experience – By Design”

- This is the right time to think in Design

In this troubled times this is what drives the differences

- Examples:

- Raymond Loewy 1929, Coca Cola, and so on…

- Walter Dorwin Teague 1926, Vanity Kodak in 1928, iPod Mini 2003, learning from the past

- What’s Experience Design?

- It’s Balancing between multiple approaches and the value of them, by using Sketching

- Steps:

- Sketches

- State Diagram

- Define all things about the transition as well as the States because other way it will go wrong

- Six Degrees

- All teams in Microsoft are in the process, from the Design to the Development always thinking about the Experience