XAML: First Impressions 15

Finally, the facts are out for
XAML.
I’ve been waiting for this release for a few years now. Prior to this
it has all been roumors and speculation.

First impressions: Very Mixed

The first things that struck me was how MS reinvented everything. A lot of
your exisitng experience for writing applications are totally wasted, at least if
you come from a web background. This is beacuse even though XAML is said to be an
XML language it does not support any other
W3C technology. No
DOM, no
CSS. XAML is just not using an
XML rendering engine as I first
hoped. It is just a serialization model for WinFX applications.

On the other hand I think the reason for not using the W3C DOM is that it
makes the object model XAML uses more friendly to WinForms programmers. The
object model is also type safe, which is a good thing This has however a
serious downside. You need to know 2 different APIs, one for the XML format and
one for the object model. Even if you know how the attribute works you may not
know how the property works. Below are 2 examples that shows examples of this.


<XAML>
<Button ID="foo">Hello World</Button>
foo.Content = "Changed";
</XAML>

<XUL>
<button id="foo" label="Hello World"/>
document.getElementById("foo").setAttribute("label", "Changed");
</XUL>

<XAML>
<Text FontSize="12pt" Background="White">Hello World</Text>
el.FontSize = new FontSize(13, FontSizeType.Point);
el.Background = Brushes.Red;
</XAML>

<XUL>
<label label="Hello World" style="font-size: 12pt; background: white;"/>
el.style.fontSize = "13pt";
el.style.background = "red";
</XUL>

A small comment here: XUL
has bugs preventing DOM Style to work but that does not change the scenario.

The main problem with XAML is that one cannot use W3C DOM. I don’t know why
this decision was made. It can’t be hard because WinFX already knows how to do
the type conversions.

One thing that I do like about this is that it is tightly bound to the WinFX
API. An element directly maps to a class, in fact any class that has a
constructor without any arguments can be an element. All properties of the class
maps to a attributes of the element (how does the type conversion work?) and
finally all events also map to attributes. This model is way more conventient
and useful than both the XBL and behavior solution for extending the markup.

Another nice thing is that properties of the class can actually be declared
as child nodes of the element. This allows more complex attributes to be used.


<Button>
   Hello World
   <Button.Background>
      <LinearGradientBrush >
         <LinearGradientBrush.GradientStops>
            <GradientStopCollection>
               <GradientStop Color="Red" Offset="0" />
               <GradientStop Color="Blue" Offset="0.25"/>
               <GradientStop Color="Orange" Offset="0.75"/>
               <GradientStop Color="Yellow" Offset="1"/>
            </GradientStopCollection>
         </LinearGradientBrush.GradientStops>
      </LinearGradientBrush>
   </Button.Background>
</Button>

Finally I wanted to mention something called style. Styles are note like W3C
Stylesheets, one of the best technologies MS has been pushing (was pushing).
Styles are more like templates. The thing that I like about them in favor of CSS
is that any attribute can be set. The thing that I don’t like about them is the
C of CSS and that is that the do not really cascade and the selectors seems just
way too simple. Just give me the CSS3 selectors will yah?


<Style>
   <VerticalSlider Width="50%" Margin="25%,0,25%,0"
      Minimum="0" Maximum="255" 
      SmallChange="1" LargeChange="16"
      DockPanel.Dock="Fill"/>
</Style>

Just when I thought I was finished I realized one more thing. I wish they
will add the XUL box model to this as well. Although XAML seems fairly nice when
it comes to writing UIs that scale it seems that the XUL box model is more
consistent. I hope someone/they adds box, hbox, vbox (with flex and all the
other goodies) before the API is finalized.

  • http://www.forgetfoo.com/ foO

    this was the most informative post on XAML that i’ve read – by far! ;)

    been reading the PDC blogs and have read a crapload of generalizations and some good tidbits, but nothing specific… i practically Null on the XUL Box Model, but i sure know about the IE box model and the subsequent hacks involved with it… so i really REALLY hope they get the box model right with XAML.

    also, XAML seems great for interfaces and integration with .NET and WinFX – but how does this directly translate to basic web stuff like HTML, i wonder? too soon to tell?

  • http://erik.eae.net Erik Arvidsson

    As far as I can tell XAML has nothing, what-so-ever to do with XML + CSS, or (X)HTML.

    The box model consists of DockPanel, FlowPanel, Canvas, TextPanel, GridPanel and Table. A combination of DockPanel and FlowPanel can achieve the same effects as the box element in XUL. I’m just not sure yet if flex can be achieved with this box model.

    <hbox>
    <button flex=”1″/>
    <button flex=”2″/>
    <button flex=”3″/>
    </hbox>

    Adding another button with flex=”4″ is simple. In XAML the only way I think this can be achieved is be recalculating the widths (using percentage).

    IN XAML packing and aligning requires extra boxes around the element.

  • http://www.forgetfoo.com/ foO

    i’m sure more information will be coming out detailing XAML as we get closer and closer to a Longhorn release… most likely with the first wide-release Beta (1 or 2) next year *knocks on wood*

    i’m really curious to see how XAML can be used both in designing the structure of a web-app, and the Longhorn tie-ins to the underlye’n managed API’s that are open to you, y’know? could create a RSS reading app in no time and have it in your website or on your desktop (or accessible via the desktop), which would be kewl as shit.

    i’ve read that Indigo is abhere’n to the “standards” as far as webservices and XML goes, which is good to hear… i’m still curious about CSS2/3 support for the most part, though ;)

  • http://blogs.gotdotnet.com/ffortes/ Filipe Fortes

    Erik: You’re correct that mimicking the XUL sample you’ve shown can be tricky in Avalon. However, this is still an alpha for us, so we’re still looking into providing more functionality in the layout space (as well as everything else).

  • http://erik.eae.net Erik Arvidsson

    I just hope that you consider also supporting the XUL box model for a later version since I think it is more consistant and more powerful than the DockPanel. ( http://www.xulplanet.com/tutorials/xultu/boxes.html )

    Another feature request I have is support for docking using Canvas.Left and Canvas.Right. In CSS2 one can set both left and right, and in that case the width changes with the parent. This is a much more trivial way to do anchoring than the way it is currently done in WinForms. For an example of this see (IE 5.5 or later required):

    http://www.i-see.net/bindows/bindows/samples/applauncher/ then launch AnchorTest.xml

    Is there some official place to submit XAML feedback?

  • http://blogs.gotdotnet.com/ffortes/ Filipe Fortes

    Feel free to post feedback to your weblog or the newsgroups. If it’s on your weblog, just make sure to ping me in case I miss it.

    As for your other comments, all I can say right now is that we’ll be continuing development and tweaking our models, and that all feedback is appreciated.

  • http://www.dept-z.com Tom T.

    Erik, I’d have to say my first impressions are right along side yours…one of the biggest beefs I have with the XUL model is not so much that it’s XML-based (which actually is a problem for me) but more that in order to develop anything useful with it, I have to know 5 languages (XUL, XBL, CSS, RDF and Javascript, if memory serves me right).

    Why one would split the development of an application into that many markup/coding languages I have no idea (ok, I have a good idea, but I think the practical outweighs the ideological).

    As far as XAML goes, I suppose it will find a large audience, but all I can say (directed at Filipe) is thank you for making sure the actual object model is still accessible, so that I could code my apps using that and only that.

    Now one thing that would be seriously useful is for Avalon to be able to take an app that was coded using .NET and spit out an XAML file(s) so that deployment can be made using the serialized version…now THAT would be about as sweet as it gets. You know, similar to the way the .NET runtime does a nice job of isolating one from doing daily SOAP plumbing with Web Services.

  • http://www.forgetfoo.com/ foO

    wow. that’s a good one, tom!

    i’m still wondering how people are saying “XAML” here…. do you say it like “zammel” or what?

  • http://erik.eae.net Erik Arvidsson

    Tom T: Now that I’ve looked more at XAML I might agree with you. Not using DOM and CSS might make it easier since only the specific WinFX object model is needed.

    But I still miss ways to use simpler code. Since I can use “Red” as a Background attribute I think it would make sense for me to have a way to set “Red” directly without going through the hustle of creating a brush every time. Maybe this is what SetValue is doing but it seems to work like this:

    element.SetValue( Panel.BackgroundProperty, MSAvalon.Windows.Media.Brushes.Red );

    vs

    element.setAttribute( “Background”, “Red” )

    Same applies to other areas. Since XAML is XML I expect to be able to achieve everything that the XML format provides just by understanding that.

  • http://erik.eae.net Erik Arvidsson

    Foo: eX-A-eM-eL

  • http://www.dept-z.com Tom T.

    That’s a good point Erik; the verbosity of creating an application with a programming language (as opposed to using a markup language) can be tedious.

    For me, it comes down to a choice: do I deal with the verbosity in favor of a single development environment, or do I learn the second of “more than one way to skin a cat”, so that productivity is, in theory, increased?

    Perhaps a way of defining a set of styles programmatically would be the way to go, like being able to create a library of structs or objects based on a skinning class that allows one to define all of the expected styles/properties in one place, and let all of the controls consume them instead of defining the drawing elements directly…like CSS, but a programmatic version.

    Hmmm, now I’m thinking in different directions…gives me some ideas…uh oh :)

    (The nice thing about doing an app with say C# as opposed to XAML is that what I just described is possible without jumping through major hoops.)

  • http://erik.eae.net Erik Arvidsson

    Tom T: Actually I’m more into using the right tool for the job. The good thing with XAML is that if you know the Avalon Framework and XML you will get XAML almost for free.

    Still, the W3C DOM is not going away any time soon and it is (IMHO) the right tool for the job when working with XML.

  • http://erik.eae.net Erik Arvidsson

    I missed Tom’s last paragraph. That was some good points. I think XAML needs to work without precompiling it. It is crucial to be able to serve text files from the web server if this is ever going to be used for web applications.

    I know things like these can be done with JScript7 and VSA. Heck, if Mozilla can precompile and cache XUL with JS1.5 in binare form why can’t MS do something similar for XAML with JScript7?

    On the topic of JScript; I always wondered why MS is dissing this language?

  • http://www.DylanGreene.com Dylan Greene

    Foo – I’ve heard it pronounced as “Zamel” by a friend on the Longhorn UI team.

  • http://erik.eae.net Erik Arvidsson

    It is supposed to be zammel but it just sounds lame to me. Why not call XML for zemmel then? You don’t have to use the pronounciations that the company gives you. I don’t call XUL “zool”. I call it “xul” (or “zul”). But I do call C# “see sharp” ;-)