Microsoft Regional Director

thumpinsplishInternet and Web Development

Nov 18, 2013 (3 years and 6 months ago)

43 views

Gill Cleeren

Microsoft Regional Director

MVP ASP.NET

Ordina .net software architect

About Gill...


.net architect Ordina (
ordina.be
)


Microsoft Regional Director (
theregion.com
)


MVP ASP.net


Writing:


.net magazine


Blogs


MSDN


Speaking:


TechDays


Usergroups(Visug, Biwug, Besug)


Ineta speaker


Blog:
snowball.be



Email:
gill.cleeren@snowball.be


Twitter: gillcleeren / MSN:
gillcleeren@hotmail.com


I present you... the tips


Creating a custom install experience


ASP.NET Membership Integration


Double clickety
-
click


Debugging services


Duplex services


Silverlight and SEO


Virtual Earth in Silverlight


Drag’n’drop and hit testing


Model
-
View
-
ViewModel


Async unit tests







Developers, developers, developers...


Developers create great Silverlight apps


They forget one thing: the install experience!


Maybe they’re happy with the “Silverlight Badge”


Default if the app was created with Visual Studio 2008
and Silverlight tools

Why do should we care?


Problem:


Users don’t understand this medallion


Think it’s a banner


They wonder if it’s worth installing (they don’t see
your fancy app just yet...)


They might be afraid to install something, we
should encourage them, perhaps tease them




In short, the user is confused!



Don’t you want everybody to enjoy your
application?



Some research was done...

And the following was the result...


Let the content jump out!


Convince users that Silverlight is thrustworthy


Show users how to do it


They’re not all developers


Make the experience interactive




Tease them with what they can expect inside!

What would you choose?


Convinced? OK!

Let’s build a better experience...


To start with, a PC can be in several states

User enters
site

OK, show
content

Not installed

Show install
UX and refresh

Old version

Restart
browser

Restart
needed

Incomptible
browser

It all started with a simple <object>

Steps needed to get a great install UX


Configure Silverlight’s object tag


Render UI prompts


Capture callbacks from Silverlight.js



From bad to great...


What you need


ASP.NET membership integration

You need to authenticate users?

You need to authorize users?

You want to create profiles?


One answer: use ASP.NET membership

... Yes, in Silverlight!

A small intro in Membership & Co


Manages users and credentials


Declarative access via W.S. Admin Tool


Programmatic access via Membership API


Simplifies forms authentication


Provides logic for validating user names and
passwords, creating users, and more


Manages data store for credentials, e
-
mail
addresses, and other membership data


Provider
-
based for flexible data storage

Membership architecture

Membership API

Membership

Data

SQL Server

Other

Data Stores

Controls

Login

LoginStatus

LoginView

SqlMembershipProvider

Other Membership

Providers

Membership Providers

Membership

MembershipUser

ActiveDirectory
-

MembershipProvider

Active

Directory

Other Controls

The Membership

API in
-
a
-
slide

Membership class


Provides static methods for performing key
membership tasks


Creating and deleting users


Retrieving information about users


Generating random passwords


Validating logins


Includes read
-
only static properties for
acquiring data about provider settings


Roles


Role
-
based security in a box


Declarative access via W.S. Admin Tool


Programmatic access via Roles API


Simplifies adding role
-
based security to
sites that employ forms authentication


Maps users to roles on each request


Provides data store for role information


Provider
-
based for flexible data storage


Profiles


Store per
-
user data
persistently


Strongly typed (unlike session state)


On
-
demand lookup (unlike session state)


Long
-
lived (unlike session state)


Supports authenticated and anonymous users


Accessed through dynamically compiled
ProfileBase

derivatives


Provider
-
based for flexible data storage


... OK, great... I’m here to learn about
Silverlight!


How can I access server
-
side code?



ASP.NET Application Services


Built
-
in Web services that provide access to
features such as forms authentication,
roles, and profile properties


Useful for many types of client applications


Internally, they use SOAP


ASP.NET Application Services

ASP.NET Application Services


3 available services:


Authentication service


Roles service


Profile service


WCF services



Silverlight and double
-
click


A click:
depression of a button on a
computer mouse; “a click on the left button
for example”


A double
-
click: well, the same, but very fast
after one another


Silverlight does not have built
-
in support for
double
-
clicking

Solution 1: use ticks between clicks


private void
myTextBlock_MouseLeftButtonDown
(object sender,
MouseButtonEventArgs

e)


{


if (DateTime.Now.Ticks
-

currentTicks < 2310000)


{


//yes, bingo, a double click!


myResultTextBlock.Text

= "A
doubleclick
, you did it";


}


else


{


//try harder...


myResultTextBlock.Text = "FAIL";


}


currentTicks = DateTime.Now.Ticks;


}

Solution 2: Triggers (SL3 only)


Behaviors:
reusable piece of interactivity
that you can attach to any element


No more copy/paste


Changes element functionality


See
Expression Gallery

Behaviors and Co


Behaviors is actually composed out of


Behavior


Trigger:


causes an Action to happen


Starts the behavior


Action


Let’s create a double
-
click trigger


Services debugging in SL2


Services are not nice when debugging!


Error in Silverlight 2 is not returned to client


OK when you have access to the server


NOK when you don’t

Debugging services from SL2 to SL3


Attempt 1: just run the service


No error info on the wire


Nothing in Silverlight


Attempt 2:
IncludeExceptionDetailsInFaults
=true


Visible in Fiddler


Still nothing in Silverlight


Cause: sends back HTTP status 500


Silverlight can’t work with that




Convert to HTTP status 200 and use SL3


Duplex services


Useful for real
-
time interaction (e.g. chat),

monitoring (e.g. stock ticker), etc.


“Duplex” feature introduced in Silverlight 2


Based on “smart polling”


Hard to use in SL2


Advanced WCF knowledge required


Significantly simplified in Silverlight 3 Beta1


May improve even more after the Beta


Client side


1. “Add Service Reference”


2. Open the Proxy (
Config

not supported)







May get easier in final SL3 release


3. Call Methods and Handle Events


EndpointAddress

address = new

EndpointAddress
("
http://example.com/Service1.svc
");


CustomBinding

binding = new
CustomBinding
(


new
PollingDuplexBindingElement
(),


new
TextMessageEncodingBindingElement
(



MessageVersion.
Soap12WSAddressing10
, Encoding.UTF8),


new
HttpTransportBindingElement
());

Server side


1. Define a Service with a Callback Contract


[
ServiceContract
(
CallbackContract
=…
)]


[
OperationContract
(
IsOneWay
=true
)]



2. Implement the service


OperationContext.Current


.
GetCallbackChannel
<
ICallbackContract
>()



3. Host the service


No
config

support


May get much easier after Beta1



What is SEO?

From
WikiPedia
:

Search engine optimization (SEO) is the process of
improving the volume or quality of traffic to a web
site from search engines via "natural" ("organic" or
"algorithmic") search results.


Typically, the earlier a site appears in the search
results list, the more visitors it will receive from the
search engine.

Silverlight and search engines


Information contained in XAP file is not
discoverable by a search engine



Engine only cares about the source of the page


Consequence: no direct links to “pages” in SL
your application



<!DOCTYPE html PUBLIC "
-
//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1
-
strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">


<head>


<title>Silverlight Application</title>


</head>


<body>


<div id="content">


<object data="data:application/x
-
silverlight
-
2,"
type="application/x
-
silverlight
-
2">


<param name="minRuntimeVersion" value="3.0.40305.0" />

<param name="source" value="ClientBin/MyApp.xap" />


<div class="down
-
level">



<h1>Down level content goes here.



</h1>



<p>Lorem ipsum dolor sit amet...</p>


</div>


</object>


</div>


</body>

</html>

<!DOCTYPE html PUBLIC "
-
//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1
-
strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">


<head>


<title>Silverlight Application</title>


</head>


<body>


<div id="content">


<object data="data:application/x
-
silverlight
-
2,"
type="application/x
-
silverlight
-
2">


<param name="minRuntimeVersion" value="3.0.40305.0" />

<param name="source" value="ClientBin/MyApp.xap" />


<asp:ContentPlaceHolder ID="DownLevelContent"
runat="server"/>



</object>


</div>


</body>

</html>

Silverlight and SEO


Silverlight and ASP should talk to same logic







Can be achieved through RIA services


And its helper controls

App logic:
Domain
-
Service

Silverlight

WPF

ASP.NET

Linq
-
to
-
SQL

EntFW

...

Silverlight and SEO


Use a domain service (RIA services)

<asp:DomainDataSource runat="server" ID="SitemapDataSource"
DomainServiceTypeName="MyApp.Web.NorthwindDomainService"
SelectMethod="GetSuperEmployees" />

<ria:SeoSilverlightApplication EnableGPUAcceleration="true"
EnableUserState="false" ID="SilverlightApplication"


Source="~/ClientBin/SilverlightStore.xap"
MinimumVersion="3.0.40220.0" Width="100%" Height="640px"
runat="server">


<PluginNotInstalledTemplate>


...


<asp:ContentPlaceHolder
ID="SilverlightDownLevelContent" runat="server" />


</PluginNotInstalledTemplate>


</ria:SeoSilverlightApplication>


Use VirtualEarth in Silverlight


Available through Virtual Earth Silverlight
Map Control (currently in CTP)


Allows embedding VE in SL apps


Important for online apps that require
geographical information


Rich SDK

Excuse me, but AJAX can do that also...


Pro’s of using VE in Silverlight


Rich, interactive mapping experience


zooming, panning


Opens up ability to do things that are not
possible with Ajax map such as scaling images
and video in a seamless manner


Development environment working with
Managed Code and Visual Studio development,
debugging tools, unit tests for our developers
and our customer developers


Performance improvements regarding number
of items to render on the map


pushpins
(
UIElements
),
polylines
, polygons

This is VE in SL

Neat, isn’t it...?



Drag’n’drop


Evolves around 3 events:


MouseLeftButtonDown
: To start the drag
operation.


MouseMove
: To move the item as the mouse
moves.


MouseLeftButtonUp
: To end the drag operation


Need to use a flag


CaptureMouse
() and
ReleaseMouseCapture
() are vital methods


Avoid “losing” the dragged item



Hit testing


Intensive calculation work


Evolves around
FindElementsInHostCoordinates method
(System.Windows.Media.VisualTreeHelper)


Best practice: do a hittest first on the
surrounding rectangles for the 2 elements


Nice design with MVVM


MVVM == Model View ViewModel Pattern


Problems it solves:



Tight coupling of layers (ex a query in the UI)


Unit testing is hard/impossible, only functional
testing is possible


Assures codes still works correct after a change


MVVM solves these


Combination of MVP and MVC


ViewModel is new


Provides View with data model and behavior


View will bind to ViewModel


Wraps data access entirely



Async unit tests


MVVM is great for unit tests


However, not all code runs synchronously


By default, unit tests don’t wait for async
results

Hello! I’m going to do some stuff now. And when this
method returns, well, I’m going to continue doing work.
So don’t report any results yet…

… In fact, wait for me to send you a ‘test complete’
message


or throw an unhandled exception


to make a
call, OK?

Async unit tests


Entire method is executed, then queued
-
up
items are run afterwards


Enqueue calls to list of commands before test is
a success or not


Use


EnqueueConditional: instruct the test to wait for
a condition to be valid and proceed


EnqueueCallback: call some action


EnqueueTestComplete: queues a call to
TestComplete() which ends the test



Gill Cleeren

Microsoft Regional Director

MVP ASP.NET

Ordina .net software architect