Silverlight del 2 - back to the drawingboard.

by DotNetNerd 24. November 2007 10:25

Basal viden om grafiske elementer i Silverlight 

I Silverlight del 1 snuste jeg en lille smugle til det at lave en brugerflade i XAML, og kom igennem det mest basale med at man skal have et canvas som rod element og jeg viste hvordan man kan indsætte en TextBlock. Nu vil jeg så gå videre og se på en række andre elementer man kan bruge til at tegne brugergrænseflader med.

Faktisk kan man bruge TextBlocken fra sidst som udgangspunkt, da den viser nogle af de grundlæggende properties som findes på alle grafiske elementer: Name, Canvas.Left og Canvas.Top. Disse properties vil man sandsynligvis sætte på et hvert element sådan at det har et navn man kan bruge til at finde elementet programmatisk, og sådan at man kan styre hvor elementer placeres. Hvis man skal finde et element ud fra dets navn er der en funktion som kan kaldes fra alle grafiske elementer der hedder FindName("kontrolnavn") f.eks. kan man finde en kontrol med navnet mySquare således.

var myControl = rootElement.FindName("mySquare");

Basale former 

Der findes 3 helt basale former man kan tegne i silverlight som er:

  • Rectangle
  • Ellipse
  • Polygon

Rectangle 

Rectangle er en af de mest brugte former, da den giver en meget enkel måde at tegne rektangler på. Det er faktisk så enkelt at jeg vil lade et eksempel tale for sig selv.

<Rectangle Width="200" Height="100" Fill="Green" Stroke="Black" StrokeThickness="5" />

Hvad der gør ekementet endnu smartere er at det har to Properties der hedder RadiusX og RadiusY, som kan bruges til at lave runde hjørner. RadiusX kan antage en værdi fra 0 og op til halvdelen af elementets Width - og tilsvarende kan RadiusY være op til halvdelen af Height.

Ellipse

Selvom man faktisk med hjælp af RadiusX og RadiusY som beskrevet kan lave et Rectangle til en ellipse findes der også et element beregnet til formålet hvis man ønsker at regne ellipser.

<Ellipse Width="200" Height="100" Fill="Green" Stroke="Black" StrokeThickness="5" />

Her beskriver Width og Height det areal som ellipsen vil fylde ud, hvilket gør det enormt nemt at arbejde med. Man kan ved at sætte propertien Stretch til enten "None", "Uniform" eller "UniformToFill" ændre på måden ellipsen skaleres på. None gør at ellipsen ikke fylder noget, og det vil derfor kun være Stroke (altså elementets kant) man kan se. Uniform og UniformToFill sørger for at elementet altid er lige så højt som det er bredt. Forskellen består i at Uniform vælger den mindste værdi sådan at ellipsen kan være inden for arealet man definerer hvor UniformToFill vælger den største så kan fylder arealet ud og den overskydende del af ellipsen skæres væk.

Polygon

Den sidste basale form er polygon eller "mangekant som det hedder på dansk". For at definere en sådan form angiver man en række points som er koordinatsæt (x,y) der beskriver skæringspunkterne.

<Polygon Fill="Green" Stroke="Black" StrokeThickness="5" Points="10,10 100,100 200,5" />

Idet en polygon kan være meget kompleks og have flere krydsende punkter kan det være svært at afgøre hvilke områder der er indenfor og ydenfor formen, og der med hvilke der skal fyldes af Fill farven. Til at styre dette har polygoner en property FillRule som kan sættes til "EvenOdd" eller "NonZero". EvenOdd er default og fylder kun regioner hvis man vil krydse et ulige antal segmenter for at gå fra området til et område uden for polygonen. NonZero er en mere kompleks algoritme som oftest vil betyde at alle arealer indenfor polygonen fyldes.

Linier

En anden mulighed for at lave grafiske elementer er at tegne linier. Også her findes der 3 elementer som vi kan benytte os af.

  • Line
  • Polyline
  • Path

Line

Line elementet bruges til at tegne en helt enkel streg fra punkt 1 til punkt 2. 

<Line X1="10" Y1="10" X2="100" Y2="100" Stroke="Black" StrokeThickness="5" />

Polyline

Polyline er som du måske har gættet til at tegne flere linier efter hinanden. Dette gøres ligesom for polygoner ved at definere et antal Points.

<Polyline Points="10,10 100,100 200,5" Stroke="Black" StrokeThickness="5" />

Hvis man sætter Fill propertien på en polyline der ikke udgør en lukket figur vil arealet det bliver fyldt svare til hvis man trækker en linie fra det første til det sidste punkt.

Path

Path er en mere kompleks struktur der kan udtrykke hvilken som helst form. Dette gøres ved at sætte dennes Data element der kan sættes til et vilkårligt geometry element. Da geometry elementer er et helt emne i sig selv vil jeg nøjes med at vise et eksempel der viser hvordan man laver et rektangel.

<Path Fill="Blue">
 <Path.Data>
  <RectangleGeometry Rect="0,0 80,80" />
 </Path.Data>
</Path>

Ligesom diskuteret tidligere har RectangleGeometry også RadiusX og RadiusY properties til at lave afrundede hjørner.

Tags:

Silverlight del 1 - helloWorld.

by DotNetNerd 11. November 2007 11:06

Igang med Silverlight

Jeg har besluttet mig for at lege lidt med nogle nye teknologier, og har anskaffet mig nogle bøger omkring Silverlight og F#. Jeg vil derfor det næste stykke tid blogge lidt omkring de ting jeg roder med, på en guide baseret måde som forhåbentlig kan bruges til at komme igang hvis du selv synes et af emnerne lyder interessant.

Her den seneste halve uge har jeg været igang med bogen "Silverlight 1.0 Unleashed", og er begyndt at lege lidt med at kode Silverlight. Jeg vil absolut godt anbefale bogen hvis man vil igang med Silverlight, da den kommer godt omkring teknologien og indeholder både gode eksempler og illustrationer samtidig med at der bliver meldt klart ud omkring bugs og mangler der måtte være rundt omkring.

Hvad angår Silverlight 1.0 er det tydeligt hvilke muligheder det giver fremover, men det er også klart at der mangler en hel del ting som betyder at det først bliver rigtigt anvendeligt når version 1.1 kommer ud. Men hvis man vil igang med at lære teknologien er 1.0 imidlertid et rigtigt godt udgangspunkt, da det indeholder rigeligt til at man kan lære at skrive XAML, håndtere input events og arbejde med animation og video.

Jeg vil derfor blogge lidt omkring nogle af de basale ting man skal vide for at komme igang, og så vil tiden vise hvor mange afsnit jeg skriver og hvor meget af teknologien jeg dækker.

Visning af en Silverlight kontrol

For at få vist en Silverlight kontrol på en webside bruges object eller embed tags alt afhængig af hvilken browser der anvendes. Heldigvis har Microsoft lavet en javascript fil til at håndtere instantieringen af kontrollen, sådan at vi som udviklere slipper for at spekulere over om der skal anvendes det ene eller det ander tag.

Et typisk eksempel kan se ud som vist herunder. I det her tilfælde vises XAML filen HelloWorld.xaml og denne indsættes i container tagget der er navngivet MyContainer.

function createSilverlight()
{   
 Silverlight.createObjectEx(
  {
          source:"xaml/HelloWorld.xaml",
          parentElement: MyContainer,
          id:'SilverlightControl',
          properties:
    {
          width:"350", height:"350", background:"#FFFFFFFF",
   inplaceInstallPrompt: true, version:"1.0"
    },
          events: {onLoad: myOnLoadFunction },
          context: null
 });
}

Som det fremfår kan man angive en række attributter der beskriver en masse ting så som størrelse, farve, version og flere andre ting som jeg dog ikke vil gå i dybden med her. Jeg vil dog nævne attributten inplaceInstallPrompt, som bevirker at man kan installere Silverlight direkte fra siden hvis man ikke allerede har det installeret. Er denne ikke angivet vil man istedet bliver ført videre til en installations side som man kender det fra Flash. Der findes også en anden javascript funktion der hedder blot createObject, men jeg foretrækker createObjectEx, da den er baseret på JSON syntaks, som jeg følger giver er bedre overblik. Som man kan se kan man associere en function med eventet onload - der findes ligeledes et onError event til at lave exceptuion handling. Context værdien giver mulighed for at passe initialiseringsdata til applikationen.

Der er en konvention der foreskriver at denne javascript funktion ligges i en fil der navngives createSilverlight.js.

Med det som udgangspunkt kunne ens html se ud som følger.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Silverlight HelloWorld</title>
    <script type="text/javascript" src="js/Silverlight.js"></script>
    <script type="text/javascript" src="js/createSilverlight.js"></script>
</head>
<body style="position:absolute;left:100px;top:50px;">
    <div id="MyContainer">
    <script type="text/javascript">
        createSilverlight();
    </script>
    </div>
</body>
</html>

HelloWorld

Traditionen tro vil jeg, som du måske allerede har gættet, starte med at lave et helloworld eksempel. Det er lidt en fortærsket cliche men det giver nu engang et godt udgangspunkt for at komme igang.

<Canvas Name="Canvas1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="640" Height="480">

<TextBlock
      Name="myTextBlock"
      Canvas.Left="100" Canvas.Top="25"
      FontFamily="Verdana"
      Foreground="Red"
      FontSize="24"
      Text="Hello world!" />
</Canvas>

Først kan man se der oprettes et canvas, som skal bruges som container for andre kontroller. Dette er ikke strengt nødvendigt, men da det er et XML format må der kun være ét rodelement. Det vil sige at hvis applikationen skulle udvides vil det være nødvendigt at have et canvas eller andet som den yderste container. Rodelementet SKAL definere et namespace som beskriver det XAML format der anvendes. Er er angivet både det format der er beregnet til Windows Presentation Foundation og det til Silverlight applikationer.

Næste og eneste andet element er en TextBlock som bruges til at vise tekst. Det første man nok studser over er måden Left og Top er angivet på. Syntaksen Canvas.Left skyldes det er det man kalder en attached property som kan angives på alle elementer, og ikke kun det som definerer attributten. FontFamily fungerer som man kender det fra css ved at man kan angive en komma separeret liste af fonte - men som udgangspunkt kan man dog kun anvende 9 forskellige fonte som er defineret som værende platform uafhængige. Der findes nogle forskellige teknikker hvis man vil anvende andre fonte, men det er et emne der må vente til en anden gang.

Foreground minder også om noget man kender, men hvad man ikke umiddelbart kan se er at der er associeret en TypeConverter med propertien. TypeConverters bruges hvis værdien er kompleks, for at give en kort og koncis syntaks. I det her tilfælde et det et komplekst objekt, da typeconverteren faktisk dækker over at der underlæggende laves et brush objekt, som kan meget andet end blot definere en enkelt farve idet man kan lave gradienter eller brushes baseret på billeder og videoklip!

For lige at berøre eventhåndtering kort har jeg som du så tidligere i createObjectEx defineret at der skal kaldes en onLoad funktion ved navn myOnLoadFunction. Normalt vil man bruge funktionen til at initialisere sin kontrol, men for lige at holde os til helloworld scenariet kan du skrive en funktion som den her.

function myOnLoadFunction()
{
    alert("Hello world!");
}

Konklusion

Silverlight kontroller embeddes på en webside på samme måde som en Flash applikation. Til at beskrive brugergrænseflader bruges markup sproget XAML, som giver en fantastisk fleksibilitet der langt overstiger hvad man kan med en traditionel html baseret aspx side. Vi har rundet nogle af de helt grundlæggende ting, så som hvordan man embedder en kontrol på en webside, og hvordan en helt basal XAML fil ser ud. Dette burde give et godt udgangspunkt for selv at lege lidt og google sig frem til eksempler på hvordan man bruger andre tags til at tegne ellipser, rektangler, billeder og hvad man ellers kan finde på.

Tags: ,

Dynamic Language Runtime

by DotNetNerd 3. November 2007 23:36

DLR - Dynamic Language Runtime.

Jeg fik for et stykke tid siden øje på en blogpost der omhandlede endnu et tiltag Microsoft arbejder på til .NET frameworket - nemlig en Dynamic Language Runtime. Umiddelbart tænkte jeg "fint nok men hvad skal jeg bruge det til". Det spørgsmål fik jeg så besvaret nu her da jeg faldt over en video fra MIX07 omkring dette emne. Jeg vender tilbage til videoen senere, da den indeholdt et temmeligt fedt eksempel som jeg vil gengive.

Kort fortalt er styrken ved dynamiske sprog at de "bare er tekst" ligesom en aspx- eller xaml-fil. Derved giver de nogle muligheder for især webudviklere ved egentlig at vende en smule tilbage til webudviklingens barndom. Idet sprogene er fortolkede, og altså "bare tekst" der ikke skal kompileres for at kunne afvikles, kan man arbejde uden konstant at skulle igennem en code-compile-review cyklus.

Dette kan især være rart hvis man skal udgive rettelser til en webapplikation, men også under selve udviklingen da man kan sidde med browseren fremme på den ene skærm imens man retter i koden på den anden og ser ændringerne slå igennem med det samme.

Hvilke sprog kan man så kode i?

Til at at starte med arbejder Microsoft på at udvikle implementationer baseret på sprogene:

  • IronRuby
  • IronPython
  • JavaScript
  • Dynamic VB

Ligesom med den almindelige CLR er det meningen at det skal være muligt at udvide med flere sprog hen ad vejen. De 4 sprog der er med til at starte med er valgt ud fra at de for det første er meget udbredte, og så for JavaScripts vedkomne fordi det giver mulighed for at man meget let kan genanvende sine eksisterende Ajax scripts i f.eks en Silverlight applikation. VB er som altid representeret af hensyn til Microsofts eget Office team. IronRuby og IronPython er enormt populære sprog der er svære at komme uden om - og de har en force i at de begge har en lækker syntaks der er meget lidt verbos.

Mix and Match

Der før omtalte eksempel fra MIX07 synes jeg gav en virkelig god idé om hvilke muligheder der vil være for at lege "Mix and Match" i fremtiden, da det illustrerer hvor enkelt man kan blande forskellige sprog - hvad end det er CLR eller DLR sprog, og hvad enten det er ASP, Silverlight eller helt almindelig HTML.

Eksemplet er en Silverlight applikation skrevet i Ruby og benytter en knap skrevet i C#, som kører et animationsscript skrevet i DLR JavaScript der viser tekstelementer der floater rundt. Teksterne er hentet fra en service skrevet i VB, udfra et ord der er indtastet i en HTML textbox som tilgås via Silverlights HTML DOM.

require 'Silverlight.Samples.Controls.Version=0.0.0.0'

Controls = Silverlignt.Samples.Controls
Document = System.Windows.Browser.HtmlPage.Document

JS = require '3dText.js'
VB = require 'technorati.vbx'

def initialize(s, e)
    button = Controls.Button.new
    button.Text = "Click me"

    JS.initialize

    root.children.add button

    button.click do |s, e|
        JS.clearList
        term = Document.txtSearchTerm.Value
        items = VB.GetTitles(term)
        items.each { |item| JS.initializeName(item)}
        JS.playAnimation
    end
end

Som man kan se er Ruby meget letvægts, og hvis man tænker over antallet af komponenter skrevet i forskellige sprog fra forskellige miljøer der arbejder sammen her kan man ikke undgå at blive lidt imponeret over hvor smertefrit CLR og DLR sprog taler sammen.

Det er værd at bide mærke i de første 5 linier fra eksemplet hvor man ser hvor let det er at importerer komponenter fra serveren, samt at referere til dynamisk kode skrevet i andre sprog. Det er ganske enkelt bare at bruge en simpel require statement.

Derefter viser eksemplet en initialize metode, som det er defineret i den tilhørende XAML fil skal kaldes ved init. I initialize instantieres så en knap, og en tilsvarende initialize metode på JavaScript komponenten kaldes. Knappen tilføjes så til et canvas der er navngivet root. Knappen for derefter tildelt en anonym eventhandler, der clearer den liste af tekster og tilføjer nye ord hentet fra VB servicen. Til sidst er det blot at starte animationen og så er koden kørende.

Hvordan platformen blev til.

En sjov historie fra videoen er at en af dem der har været med til at lave det oprindeligt startede med at ville skrive en artikel for at lave grin med Microsoft, da han havde hørt at .NET var elendigt at bygge dynamiske sprog oven på.
Han skrev så en implementation af Python oven på CLR'en - og til hans store overraskelse sparkede den røv på den originale Python. Med andre ord viste benchmarks at hans implementation performede dobbelt så godt! Derefter endte han så med at arbejde for Microsoft og har været med til at bygge denne platform til at hoste dynamiske sprog.

Model-View-Controller - seperation of concerns

by DotNetNerd 2. November 2007 16:19

Model-View-Controller Framework

Frameworks der bygger på et Model-View-Controller pattern er blevet meget populære indenfor webudvikling, især Ruby on Rails vil mange kunne nikke genkendende til.

En af de store fordele ved MVC frameworks er at de giver "seperation of concerns" hvilket vil sige at man får adskilt datamodellen og brugergrænsefladerne. ASP.NET har været kritiseret for at netop det at opnå en klar adskillelse kan være meget svært idet en url mapper direkte til en aspx, som indeholder både markup og codebehind.

En anden force ved MVC frameworks er at de gør det muligt - og ligefrem naturligt - at basere sin udvikling på unittests. Dette er vigtigt ved udviklingen af større systemer, da man derved kan refaktorere uden at være nervøs for ikke at kunne overskue konsekvenserne.

Som alternativ til den almindelige aspx model er Microsoft derfor gået igang med at udvikle deres eget MVC framerwork, som skal passes direkte ind i .NET frameworket og understøtte både CLR og DLR sprog. MVC frameworket designes udfra at det skal være "extensible and pluggable", hvilket vil sige at der skal være muligt for udviklere at skifte ALLE enkeltdele af modellen ud hvis de ønsker at lave deres egen implementation. Derudover bliver der gjort meget ud af at frameworket skal performe godt og være "mockable" - altså det skal være muligt at lave unittesting baseret på mockups.

Routing regler 101

Routing er et kernebegreb i MVC frameworks, som går ud på at mappe en url til en given controller der skal håndtere det aktuelle request. Som standard vil MVC frameworket understøtte to former for mapning:

<Controller>/<Action>/<Param>
<SomeName>/<Action>/<Param> => <Controller>

Eksempelvis kunne man dermed lave en struktur der tillader redigering af produkter, hvor de følgende vil mappes til "rediger produkt med Id 4".

ProductsController/Edit/4
Products/Edit/4 => ProductsController

Udover at mappe til Controllers er det også muligt at mappe til ControllerFactories, som giver et abstraktionslag der kan dirigere videre til forskellige controllere alt efter hvad der skal udføres.

Routing kan f.eks sættes op i ApplicationStart eventet på Global.asax, og i de eksempler der har været vist indtil videre gør man sådan her:

Router.Routes.Add(
new Route("Products", "/Products/[action]/[id]", typeof(ProductController));


Controllers - systemets knudepunkt

Som tidligere nævnt er målet at designet skal være "extensible" og ud fra den devise er der flere mulige klasser der kan extendes, når man skal implementer sin egen controller.

Hvis man vil lave sin helt egen kan man tage udgangspunkt i interfacet IController, som har én metode kaldet Execute der modtager en IHttpContext og RouteData. RouteData er en dictionary af tokens fra url'en der udgør de parametre siden kaldes med.

public void Execute(IHttpContext context, RouteData routeData)
{
   
}

Alternativt kan man bygge videre på klasserne ControllerBase, Controller, Controller<T> eller IControllerFactory.
Det mest oplagte er at arbejde med Controller<T>, som er en typestærk standard implementation af IController.

Hver metode mapper her til en action, og parametre til de efterfølgende tokens i urlen. ControllerAction attributten fortæller at der er tale om en action, og ved at sætte DefaultAction=true indikerer man at denne metode skal kaldes hvis ingen action er givet af url'en. Udover denne attribut kan man tilføje andre til f.eks at håndtere caching.

class Products : Controller<ProductData>
[ControllerAction(DefaultAction=true)]
[OutputCache(Duration=10)]
public void List(int? number)
{
    ViewData["number"] = number;
    ProductData viewData = new ProductData();
    viewData.Number = number;
    RenderView("ProductView", ViewData); 
}

public class ProductData
{
    public int Number { get; set; }
}

ViewData bruges til at holde de data der skal passes til viewet. Der er som udgangspunkt en Dictionary til dette, med ved at bruge Controller<T> kan man angive en type man selv definerer.

Metoden RenderView bruges til at kalde et specifikt view og passe data til viewet.

Komplekse objekter kommer også til at kunne bruges som parametre ved hjælp af Type Descriptors som kan plugges ind.

Views - brugerflader rensede for logik

Views kan være aspx eller ascx filer med alt hvad de normalt kan, inclusiv brug af masterpages, bortset fra postbacks ikke er mulige og dermed undgår man at bruge viewstate.

Dette skyldes at views skal tilgås igennem en Controller, hvilket man ville bryde med ved at tillade postbacks.

Til at understøtte links ud kommer der blandt andet en hjælpeklasse der hedder html samt nogle extention methods. Skal man generere et link kan man f.eks. gøre følgende.

string link = Html.Link("Products", new {Action="Edit", param="4"});
string link = Html.Link<Products>(controller => controller.Edit(4));

På samme vis findes der en .Url metode der udelukkende returnerer url'en.

I den lidt mere fikse afdeling findes der også en metode til at lave links til paging som en pæn xhtml ul/li liste. Dette kræver at den liste man arbejder på implementerer IPagedList, som indeholder properties der beskriver det samlede antal elementer og index.

string paginationLinks = Html.PaginationLinks(viewData, "Products", "List", "10");

Af andre smarte metoder jeg lige vil nævne kort er der RedirectToAction til at håndtere redirects, og en UpdateFrom extention method, til at tage data fra Request.Form, et dataset eller andet og udfore en update.

RedirectToAction<Products>(c => c.List(0))

product.UpdateFrom(Request.Form)
Data kan fra views tilgås som tidligere antydet igennem ViewData, som kan være en type man selv definerer ellers igennem en Dictionary. Det er muligt på views det implementerer ViewPage<T> at tilgå data både via indexer og ved at tilgå properties direkte.

public class ProductView : ViewPage<ProductData>
{
    int i;
    i = ViewData["Number"];
    i = ViewData.Number
}

Ønsker man at benytte ajax vil der blive lavet sådan at man kan lave et kald og indsætte det returnerede html i en ny type panel.

Astoria - next generation dataservices

by DotNetNerd 2. November 2007 15:53

Astoria Data Services - Data in the cloud.

Microsoft arbejder for tiden på et projekt under kodenavnet "Astoria" som skal gøre det muligt at lave dataservices der lader applikationer tilgå og manipulere data via almindelige HTTP requests ved hjælp af et URI format. Idéen er at man skal kunne arbejde med ren data i sine klientapps - altså Ajax og Silverlight implementationer. Data kan efterspørges som XML eller JSON der er simple dataformater, som kan beskrive datastrukturer på en generisk måde.

Standard HTTP verber som GET, POST, PUT og DELETE definerer operationen der skal afvikles - altså om det er en select, update, insert eller delete operation.

"Under kølerhjelmen" består Astoria Dataservices af en Windows Comminication Foundation Service der stiller data til rådighed, som er defineret ved hjælp af entities frameworket over en database. Astoria er altså bygget på eksisterende teknologier, hvor der er bygget en HttpHandler over som tillader at et query defineres som en URI.

JavaScript Object Notation vs Extensible Markup Language.

Som nævnt kan data efterspørges i formaterne JSON og XML. Overordnet set kan man sige at JSON sigter imod Ajax implementationer og XML imod Silverlight, da det er "the format of choice" for tiden for de to domæner.

Da JSON er knap så kendt som XML vil jeg lige beskrive det kort. Formatet er fordelagtigt at bruge i Ajax applikationer, da det er et meget kompakt format der er velunderstøttet i Javascript, idet man kan hente en JSON.js eller bruge Microsofts implementation der følger med frameworket fra .NET 3.5.

Kort fortalt defineres et objekt således

{name:value,name:value}

og et array således

[value,value]

Ud fra disse definitioner kan man definere arrays hvor værdierne er objekter og omvendt, og det er derved muligt at beskrive komplekse datastrukturer med meget lidt overhead.

JSON serialisering.

Ved hjælp af ASP.NET Ajax er det meget enkelt at arbejde med JSON, hvilket jeg vil illustrere med et lille eksempel.

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<script>

var value = new Person();
value.Name = "Jens";

var result = Sys.Serialization.JavaScriptSerializer.serialize(value);

alert(result);

//Objektet kan derefter gendannes enten ved at deserialisere eller ved hjælp af eval
var obj = Sys.Serialization.JavaScriptSerializer.deserialize(result);
obj = eval("(" + result + ")");

function Person()
{
    this.Name;
}
</script>

På samme måde kan man naturligvis også serialisere objekter til JSON i .NET også.
using System.Web.Script.Serialization;

...

JavaScriptSerializer serializer = new JavaScriptSerializer();

Person person = new Person();
person.Name = "Hans";

string result = serializer.Serialize(person);

Response.Write(result);

Person person2 = serializer.Deserialize<Person>(result);

Response.Write(person2.Name);
Querying via URI.

Den URL-baserede query syntax understøtter en del forskellige operatorer, men lad os lige først se på et par eksempler som jeg har fra et screencast på MSDN der bygger på Northwind databasen.

Helt enkelt kan man tilgå data ved at "slashe" ('/') sig igennem en struktur og bruge hårde klammer ('[]') til at angive nøgler som sådan:

northwind.svc/Customers[ALKFI]/Orders

Næste skridt er at man kan bruge simple operatorer, som her hvor jeg efterspørger Kunder fra London:

northwind.svc/Customers[City eq 'London']

Og slutteligt er der nogle mere advancerede operatorer - den nedenstående gør at ordrene fra kunden "ALKFI" flettes ind i de data der returneres. Det vil sige at man effektivt set kan hente kunde og ordre oplysninger som ét kald.

northwind.svc/Customers[ALKFI]?$expand=Orders

Simple query operatorer.

Operatorerne er vidst så selvbeskrivende at jeg vil nøjes med at liste dem.

eq (Equal)  /Customers[City eq 'London'] 
ne (Not equal)  /Customers[City ne 'London'] 
gt (Greater than)  /Orders[OrderDate gt '1998-5-1'] 
gteq (Greater than or equal)  /Orders[Freight gteq 800] 
lt (Less than)  /Orders[Freight lt 1] 
lteq (Less than or equal)  /Orders[OrderDate lteq '1999-5-4'] 


Advancerede query operatorer.

De advancerede operatorer giver mulighed for at hente sammensat data og lave paging. Derved er en de mest almindelige scenarier understøttet "ud af boksen".

?$expand=Orders  inkluderer ordrer inline, således at man undergår at lave to kald. 
?$orderby=ProductName  Sorterer efter ProductName. 
?$top=2  Returnerer de 2 første rækker. 
?$skip=2  Springer de 2 første rækker over. 


Custom Service Methods.

Hvis man ønsker at definere et query som er for advanceret til at kunne løses med de eksisterende operatorer er det muligt selv at skrive metoder der også kan kaldes ved hjælp af Astorias URI format.

Eksempelvis kan man lave så det er muligt at hente kunder ud fra hvad stat de bor i - hvor queriet kunne se sådan her ud:

/CustomersByState?state=WA

Implementationen af servicen er enormt simpel, da der er en Astoria template i Visual Studio man kan tage udgangspunkt i. Derefter kan metoden skrives sådan her.


[WebGet]
public static ObjectQuery<Custumers> CustomersByCity(NorthWindEntities db, string city)
{
 if (city == null || city.length < 3) {throw new Exception("Bad city");}
  
 return db.Customers.where("it.City = @city", new ObjectParameter("City", city));
}


Hvordan ser den payload jeg modtager ud?

For at give syn for sagen kan du her se det der returneres fra det simple kald til Customers[ALKFI] hvis man efterspørger XML.
<DataService xml:base="http://myserver/data.svc">
 <Customers>
  <Customer uri="Customers[ALFKI]">
   <CustomerID>ALFKI</CustomerID>
   <CompanyName>Alfreds Futterkiste</CompanyName>
   <ContactName>Maria Anders</ContactName>
   <ContactTitle>Sales Representative</ContactTitle>
   <Address>Obere Str. 57</Address>
   <City>Berlin</City>
   <Region />
   <PostalCode>12209</PostalCode>
   <Country>Germany</Country>
   <Phone>030-0074321</Phone>
   <Fax>030-0076545</Fax>
   <Orders href="Customers[ALFKI]/Orders" />
  </Customer>
 </Customers>
</DataService>

Og hvis man efterspørger JSON får man det her tilbage.

[
    {
        __metadata: {
            Type: "Customer",
            Base: "http://myserver/data.svc",
            Uri: "Customers[ALFKI]"
        },
        CustomerID: "ALFKI",
        CompanyName: "Alfreds Futterkiste",
        ContactName: "Maria Anders",
        ContactTitle: "Sales Representative",
        Address: "Obere Str. 57",
        City: "Berlin",
        Region: null,
        PostalCode: "12209",
        Country: "Germany",
        Phone: "030-0074321",
        Fax: "030-0076545",
        Orders: {
            __metadata: {
                Uri: "Customers[ALFKI]/Orders"
            }
        }
    }
]

Hvordan forbruger jeg så en service?

Næste skridt er så naturligvis at kalde servicen, hvilket jeg vil demonstrere ud fra både en Ajax og en Silverlight kontekst. Ved at bruge Microsofts Scripting Library, som er en del af ASP.NET Ajax, kan en service tilgås på den her måde:
function GetCustomer(id)
{
 var req = newe Sys.Net.WebRequest();
 req.set_url("northwind.svc/Customers[" + id + "]/Orders");
 req.get_headers()["Accept"] = "application/json";
 req.add_completed(OrdersCompleted);
 req.invoke();
}

function OrdersCompleted(response)
{
 if (response.get_statuscode() != 200){//Error}
 else
 {
  var orders = response.get_object();
  var html = Sys.StringBuilder("<ul>");

  for (var i = 0; i<orders.length; i++)
  {
   html.append("<li>" + orders[i].OrderDate + "</li>");
  }

  html.append("</ul>");

  $get(Orders).innerHTML = html.toString();
 }
}
Ligeledes kan man i Silverlight udforme et query, og der er endvidere muligt ved hjælp af et tool generere proxy klasser så man kan arbejde med strongly typed data.
WebDataContext dataContext = new WebDataContext(txtDataserviceUrl.Text);

foreach (Customer customer in dataContext.CreateQuery<Customer>("/Customers"))
{
 cmbCustomers.Items.Add(customer.Name);
}
if (cmbCustomers.Items.Count > 0)
{
 cmbCustomers.SelectedIndex = 0;
}
Hvis man vil lave inserts er det også rimeligt enkelt, hvilket jeg har fundet et eksempel på som viser hvordan en Note føjes til en Artikel i et typisk Artikel system.
Article article = (Article)lstArticles.SelectedItem;

Note note = new Note();
note.Comments = txtNewNote.Text;
note.Article.RelatedObject = article;

dataContext.Add(note, "Notes");
dataContext.SaveChanges();

lstNotes.Items.Add(note.Comments);
txtNewNote.Text = "";

Blod på tanden?

Idet trenden går imod at webapplikationer skal minde mere og mere om "rigtige" applikationer, er RIAS (Rich Interactive Applications) et af de mest hotte emner verden over inden for webudvikling. I den forbindelse er teknologier som Astoria en vigtig brik, da de gør det muligt at lave generiske applikationer der direkte fra klienten selv kan tilgå og vise data.

Jeg finder derfor emnet meget interessant og jeg håber artiklen her har giver dig blod på tanden, da jeg selv glæder mig til at teknologien bliver færdigudviklet så jeg selv kan komme til at anvende den i mine løsninger.

Tags:

DataBinding - performance, læsevenlighed og fleksibilitet

by DotNetNerd 2. November 2007 15:41

Jeg har ved flere lejligheder hørt forskellige udviklere snakke for og imod forskellige måder at lave databinding på - så nu besluttede jeg mig for at lave en test for at se hvad forskellen reelt er.

Udgangspunktet er en Person klasse med 1 property (Name), som der skabes en liste af der bindes til et gridview.
Jeg har lavet 3 scenarier, der henholdsvis binder ved hjælp af binding expressions med og uden brug af Eval, og ved at håndtere RowDataBound eventet på et gridview.

Lige for at gøre klart hvordan man databinder via binding expressions med og uden eval er her de to tags der er tale om:

Binding med eval:

<%# Eval("Name") %>

Binding uden eval:

<%# ((Person)Container.DataItem).Name %>

Efter at have kørt disse 3 binding scenarier en række gange fremgår det tydeligt at Eval performancemæssigt er noget tungere, og tager ca. dobbelt så lang tid som de to andre scenarier der performer rimeligt ens. Dette skyldes naturligvis at Eval benytter reflection. Det skal dog siges at vi snakker henholdsvis 1 og 2 millisekunder ved den her mængde data så vi snakker detaljer med mindre der er virkelig meget data.

Konklusion:

Håndtering af RowDataBound og brug af binding expressions uden eval er klart at foretrække ud fra et rent performancemæssigt synspunkt.

Personligt synes jeg at det er uskønt at skulle skrive en RowDataBound eventhandler i helt simple tilfælde, da det er knap så læsevenligt som at bruge et binding expression og da det kræver mere kode.

Derfra kan man så vælge ud fra om det vigtigste kriterie er performance eller fleksibilitet. Eval har en fordel i og med at aspx'en i højere grad fungerer som template det er fri for at vide hvilken type der bindes til den. I nogen tilfælde kan denne fleksibilitet veje tungere end performancemæssige hensyn - da det ved relativt små datamængder stadig vil være svært at mærke forskel. Skal man derimod lave en simpel binding af store mængder data virker expression binding ved at tilgå Container.DataItem som det rigtige valg.

 

Tags: ,

"Nice to know" om strings

by DotNetNerd 1. November 2007 15:30
For ikke ret lang tid siden gik det op for mig hvor lidt den gennemsnitlige programmør egentlig ved om den datatype der nok bruges allermest - altså strings. Jeg skal på ingen måde gøre mig bedre end andre for min viden omkring operationer på strings var heller hverken værre eller bedre end de fleste andres, før jeg læste "CLR via C#".

Derfor vil jeg lige skrive lidt "nice to know" information om strenge, dog startende med ting de fleste nok i nogen grad er klar over bare for at få alle up to speed.

1. Strings er immutable, hvilket vil sige at når en streng først er oprettet på heapen kan dens indhold på ingen måde ændres. Operationer med strings vil altid medfører at en ny string skabes. Dette er hovedårsagen til klassen StringBuilder som istedet arbejder på et char-array således at der ikke skabes en string før ToString() kaldes. Der er dog naturligvis også et overhead ved brug af StringBuilder, så to gode råd er at bruge den hvis mere end 2 konkatineringer foretages, og at angive en størrelse i constructoren så vidt det er muligt - da det vil betyde at arrayet redimentioneres så få gange som muligt.

2. .NET frameworket giver mulighed for noget der kaldes string interning, som går ud på at en string oprettes i en intern hashtable. På den måde undgår man at have flere ens strenge idet der vil returneres en reference til den eksisterende streng hvis man interner en streng der allerede findes - se metoderne string.Intern og string.IsInterned. Dette skal dog benyttes sparsomt, da en interned string sandsynligvis ikke vil blive garbage collected før app domainet lukker!

3. På grund af string interning - og fordi det giver pænere kode - er string.Empty at foretrække frem for "" sådan at man slipper for at oprette et streng objekt blot for at angive en tom streng. Ved sammenligning med en tom streng anbefales det dog istedet at man enten bruger string.IsNullOrEmpty, som er en pæn måde at checke både for null og empty, eller "myString.Length = 0" - som faktisk er den hurtigste måde at checke for empty rent performancemæssigt.

4. Som standard bruger == operatoren en Ordinal algoritme til sammenligning af strenge. Det vil sige at der ikke tages højde for Culture, men at der er forskel på små og store bogstaver. Med andre ord kan man opnå en pæn hastighedsoptimering ved specifikt at bruge en algoritme som OrdinalIgnoreCase til at sammenligne strenge der kun bruges i kode, og man kan opnå en bedre sammenligning af Culture specifik kode ved at bruge CurrentCulture / CurrentCultureIgnoreCase. Faktisk anbefaler Microsoft at man altid bruger Equals metoden med specifik angivelse af StringComparison enumeration, som beskriver hvilken algoritme der bruges, da koden derved er mere beskrivende for hvilken sammenligning man ønsker.

Hvis du vil se hvor stor forskellen rent faktisk er på algoritmernes hastighed er her en test udført af en af Microsofts egne udviklere: http://blogs.msdn.com/noahc/archive/2007/06/29/string-equals-performance-comparison.aspx

5. string.ToUpperInvariant har modtaget særbehandling i frameworket, således at den er optimeret i forhold til ToLower/ToLowerInvariant/ToUpper, derfor kan den med fordel benyttes som den foretrukne løsning hvis man ønsker at lave en streng hvor alle tegn er ens cased.

Tags:

Who am I?

My name is Christian Holm Diget, and I work as an independent consultant, in Denmark, where I write code, give advice on architecture and help with training. On the side I get to do a bit of speaking and help with miscellaneous community events.

Some of my primary focus areas are code quality, programming languages and using new technologies to provide value.

Microsoft Certified Professional Developer

Microsoft Most Valuable Professional

Month List