Dynamic UI

There seems to be a lot of discussion floating around in my comments about "Dynamic XAML", which confuses me (I'm easily confused). No one thinks of "Dynamic C#" or "Dynamic VB", they are languages - it is the application that you create that has dynamic behavior...

Dynamic user interface can be easily created in Longhorn using Avalon in several ways:

  1. Dynamic code
  2. Conditional/Bound markup
  3. Parsed-at-runtime markup
  4. Projection based markup

Projection based markup

I start with projection, because I think it is what most people think of when they asked the question about "dynamic XAML". In the web world today you create projection based user interface. You do work on the server to determine what the static view the client should see (maybe with some interactivity in the form of jscript, etc.), and then you project HTML across the wire and let the (basically) dumb client render that logic.

In the web today there is this uneasy tension with DHTML (W3C DOM or IE DOM) and ASP.NET/PHP/JSP... Here you have a sever and client side programming model, both trying to produce dynamic results. You end up with this bizaree spaghetti code that spans between the tiers. You might do data filtering on the server, but allow for sorting to occur on the client to avoid round trips.

The question then is raise, with this new Windows markup "XAML", can you accomplish projection based UI? The simple answer - yes. We support parsing of markup on the fly.

However for interactivity the programming model for Avalon is .NET classes, which means you need to somehow get IL generated, or have an interpretted language. Today the JScript parser is the closest thing we have to an interpretted .NET language, but I know there are other interpretted languages out there.

Why have we not focused on interpretted or projection based UI? To put it simply - it doesn't scale. Smart client applications aren't really possible in projection based UI. If you look at any even moderately interactive application they have moved the processing logic to the client to leverage the power of the PC - Flash, Java, Anark, all do the logic on the client. Yes, there are some places that do dynamic Flash generation, but that seems to be a limitation that products like Royale and Central will solve.

Parsed-at-runtime markup

If projection based markup is only supported limitedly, then what about parsing at runtime? This is the old DHTML model of doing things like "document.Write" and "someId.InnerHtml='...'" as a programming model.

Avalon has a simple object model for our parser that will allow this type of programming. You can concat a string together, pass it to the parser, and get back a fully realized .NET object, viola!

Of course, parsing and string generation has it's problems - lack of type checking at compile time, performance, debuggability, etc. This model, like projection based markup, is supported - just not encouraged.

Conditional/Bound markup

Hopefully, eventually, I will actually hit one of these mechanisms for dynamic UI that we think is great. Well, wait no longer!

Using databinding, repeating, styling, triggers, frames, etc, for creating truly dynamic UI is the Avalon recommended way. People write "dynamic" UI today using VB.NET and WinForms that gets data from a database and presents it in a great format using DataGrids, etc. In Avalon we are evolving this and adding rich typography, template based repeating, and a new model for triggers and styling.

The nuts and bolts of this? Say that I want to create a news browser, I can create styles for the news objects (note, these are data objects, not UIElements):

<!-- Psuedo-code, I don't have a longhorn box handy right now -->
<Style def:Name="*typeof(NewsReport)">
    <DataElement /> <!-- I forget the exact name of this element... ? -->
    <Style.VisualTree>
        <DockPanel>
            <SimpleText DockPanel.Dock="Top" Text="*Bind(Path=Title)">
            <SimpleText DockPanel.Dock="Top" Text="*Bind(Path=ByLine)">
            <TextBox DockPanel.Dock="Fill" Content="*Bind(Path=Body)" />
        </DockPanel>
    </Style.VisualTree>
</Style>

Now, I could have another format for some other type of story:

<!-- Psuedo-code, I don't have a longhorn box handy right now -->
<Style def:Name="*typeof(ForSaleAdd)">
    <DataElement /> <!-- I forget the exact name of this element... ? -->
    <Style.VisualTree>
        <DockPanel>
            <SimpleText DockPanel.Dock="Top" Text="*Bind(Path=Title)">
            <TextBox DockPanel.Dock="Fill" Content="*Bind(Path=Body)" />
        </DockPanel>
    </Style.VisualTree>
</Style>

Here I could then have a listbox that contains an arbitrary list of NewsReports and ForSaleAdds, and each would be rendered according to the style - thus a WebService (or, heaven forbid!, a database) could return the content. These "data styles" can be associated with the class that defines the data structure also.

Remember The ListBox is really a generic repeating control, it isn't the same as the old scrollbar and horizontal list control. The ListBox in Avalon is more of a peer of the "DataList" in ASP.NET.

Dynamic Code

Finally, if dynamic markup doesn't solve this, you can go to the brute force traditional model for dynamic UI - write code. One of the goals with Avalon was to have a unified model that provided both a simple markup and a simple code based programming model. Thus, if you want to dynamically generate user interface elements you can simply write code like:

void ButtonClicked(object sender, ClickEventArgs e)
{
    someElement.Controls.Add(new Button());
}

Which provides you with unlimited flexibility.

Summary

My not-to-hidden agenda here is simple - dynamic applications should be dynamic on the client. The server should send data - either through web services, database access, or any other wire protocol - and the client should consume that data and generate UI. The model of a server trying to generate the correct display for a client is just broken.

My computer knows what my settings are, I don't need to server to guess them. The application on the client knows my screen resolution, DPI, color depth. It knows if I have a scanner, mouse, keyboard, tablet, printer, etc. The application on the client has full access to a powerful CPU, GPU, and hard disk that are dedicated to *me*.

We are past the world of generating static snapshots of display and blasting them down to a client. Most desktop computers you buy today have 2+Ghz CPU, >256MB of RAM, and a massive hard disk. Use them! Make your application be so engaging and productive for your customers that they want to buy it.

11/02/2003 10:23 PM

I've seen some talk of using xslt to generate XAML UI's, perhaps based on another xml file, but that seems kind of pointless(mostly, more on this later).
However, the limitation of not allowing XAML applications to have embedded code loaded in IE seems a little annoying to me. While I wouldn't generally use it for dynamic applications, I don't think i'd want to load up a compiler every time I'm experimenting with something small. I'd probably end up writing a small app to do whatever is nessecery to host XAML files with embeded code.(Going to look into that when I have time).

What is more pressing on my mind, and relating to the XSLT comment above, is the model for flashy UI feature configuration. I havn't read everything in the SDK yet, but I am curious about the model for controlling effects works. If say I want to provide a way to disable background video or opacity to end users, will there be a standard way to do this per application, or will developers be required to roll their own config classes and write the explicit code .Enabled = false lines?
One of the few features I could see using XSLT to do would be to generate XAML files with the given effect settings, requiring no extra classes to be loaded, etc. However that would require some frustratingly complicated XSLT programming in the end to get it to work.

Daniel O'Connell | mailto:onyxkirxAT NOSPAMcomcast dot net | onyxkirxAT NOSPAMcomcast dot net

11/02/2003 10:26 PM

Err, read "perhaps based on another xml file" into "perhaps based on another xml format, perhaps an even more simplified skin definition language".

Daniel O'Connell | mailto:onyxkirxAT NOSPAMcomcast dot net | onyxkirxAT NOSPAMcomcast dot net

11/02/2003 10:33 PM

"load up a compiler" - you mean you don't want to hit F5 in VS? I mean, IE is running an interpretter to execute your code - what is the concern with running the compiler?

chris anderson | http://www.simplegeek.com | chris_l_andersonAT NOSPAMhotmail dot com

11/02/2003 10:54 PM

Sorry, I didn't express myself clearly. Sometimes I get lazy or my system gets too busy, 3 or 4 running instaces of VS.NET sucks up alot of resources, another one isn't always something I want to load. So I'll just launch notepad and hack up my code into a .cs file or whatever. Currently I would have to launch a cmd prompt with proper env variables set and compile the code, run and test. Being able to just throw a few lines into a .xaml file and launch it(more than likely it would be playing with some simple UI feature, in this case), would be a simplification.

However, I just realized it may end up being that cool new command line that fixes that problem, compile/csharp anyone?

Daniel O'Connell | mailto:onyxkirxAT NOSPAMcomcast dot net | onyxkirxAT NOSPAMcomcast dot net

11/03/2003 7:29 AM

The whole XAML stuff is quite exciting, we've already rolled our own subset for our next generation products, so when the MSDN folks get around to sending me the longhorn stuff I'll be spending some time examining the differences between the two models and seeing what I need to change to make ours "more" compatible.
Printing and Reporting is in particular an area that I'd be interested in, the current .NET 2003 model still isn't good enough at dealing with print preview and font scaling when zooming. Lines drawn below text look awful as the user zooms in and out sometimes the text overlaps the lines, others it doesn't.
The question I have as non-PDC attendee is what about the older clients? I haven't seen much on this so far, does anyone know what the current story is? If MS choose Win2K and higher as a base line then I can see this working, otherwise we talking not just the two years until LongHorn ships but another 6 or 7 until we as developers can start to force users to migrate. (I think all our clients have moved from Win 3.11 now, but we still have plenty of Win95 users)

Peter Ibbotson | mailto:peterAT NOSPAMibbotson dot co dot uk | peterAT NOSPAMibbotson dot co dot uk

11/03/2003 8:51 AM

Chris: In regards to statement: "The model of a server trying to generate the correct display for a client is just broken." This doesn't seem completely valid given the many devices that lack the sophistication necessary to process data *and* generate UI. ASP.NET Mobile Forms comes to mind as an example of the server absolutely needing to make intelligent decisions regarding device capabilities and return back easy to chew UI bits.

So in the Windows Forms world, how is this a problem for rich clients already? I completely agree with your assertion that servers should send data, clients should render it, and mixing the two on either tier leads to confusion and potential design issues. But isn't that how it works today already (assuming you're designing with that separation in mind?) I have a smart client, it consumes data services on the server, displaying that data in various rich WinForms controls, the server plays no role in the presentation to the client.

Thanks,

Kris

Kris

11/03/2003 10:25 AM

Chris,

I think Avalon is a great programming paradigm, and will eventually get great traction among Windows developers.

But, what's your take on Flash and Macromedia Central as a competitor? They're addressing the x-platform model rather than the Longhorn-specific model of Avalon, and they already have the better typography, timeline, media elements, web service consumption, etc. and they have better reach than just Windows platforms.

If I was thinking of building a rich data-driven app that incorporates data from web services, as well as media elements, and would run on Windows, Mac, and possibly mobile devices, Flash would be my only choice, correct?

Kirk

Kirk Marple | mailto:kirkAT NOSPAMagnostic-media dot com | kirkAT NOSPAMagnostic-media dot com

11/03/2003 3:45 PM

Ya, the problem with Flash however is how abused its been. I keep the "Disable Flash applets" option checked in my browser and generally skip sites that use Flash becuase of all the idiots who have used it to annoy me over the last 5 years.

Oddly, the users of Flash are its biggest downside.

Is Anark cross platform? Its probably to intensive to run on mobile devices, but it may run on linux\macos atleast.

Daniel O'Connell | mailto:onyxkirxAT NOSPAMcomcast dot net | onyxkirxAT NOSPAMcomcast dot net

11/03/2003 4:18 PM

I think the shift will be from thinking about Flash as a plugin to Flash as a content browser (or app shim). I would just want to have users click on a link and bring up what looks like a Win32 app, but it's really a Flash UI that runs as a separate app and talks to Web services in the background.

Being able to make something like this that runs on Win32, Mac, etc. is a big plus, especially for our customers in the media industries who love their Macs.

The ability to create a "lite" version that's mobile-friendly would be a huge plus too.

Kirk Marple | mailto:kirkAT NOSPAMagnostic-media dot com | kirkAT NOSPAMagnostic-media dot com

11/03/2003 5:18 PM


Chris,
Projection based markup doesn’t necessarily need to be generated on the server - it can be generated on the client as well. And my argument was not about thin vs. rich client. It was about the technology used for rendering the UI.
One of the good things about projection based markup is that UI can be generated from data at runtime using some kind of transformation (like XSLT). Thus, unlike code driven Win32 UI, markup UI is data driven and you don’t need to write a single line of code for displaying your data on the screen. At first I was disappointed to see that the Avalon UI is in fact code driven, like Win32 UI. Although XAML is a markup language, it is actually used for generating UI code, not rendered directly. Thus, it is not possible to use some kind of transformation (like XSLT) to generate XAML from data and have this XAML rendered. After reading more about XAML’s (data)binding mechanism, however, I am starting to realize that XAML can actually be viewed as a transformation language. There is no need to transform XAML, since XAML is the transformation itself - with the added benefit of having the transformation code type checked at compilation time. Pretty cool.
So, what’s XAML story about (data)binding? Let’s say I am getting XML messages from a web service using Indigo. I have created my XAML templates. I know the structure of my data but I don’t how much of it I’m going to get. Can I display my data on the screen without writing a single line of code? Also, can I bind to an XML file, for example? Also, would it ever be possible to have XQuery code embedded in XAML.

George Mladenov

11/03/2003 5:30 PM

George: First, XSLT is code, so I have a hard time understanding how you can use it without writing code. Just because you use angle brackets doesn't make it not code. XSLT uses match, foreach, and select as it's construct - similiar in spirit somewhat to SQL... anyway.

In the example above you could easily match on each message type instead of the type of the business objects. However, we don't do XPATH selection of templates when binding against XML documents, so you would need to write the template selection logic in VB.NET, C#, COBOL, or some other language.

What is the concern with writing in imperitive code vs. declarative code? What is the developer benefit in writing XSLT over VB?

chris anderson | http://www.simplegeek.com | chris_l_andersonAT NOSPAMhotmail dot com

11/03/2003 10:18 PM


Yes, XSLT is also code. But it's on an even higher level of abstraction than VB. The benefit to the developer is that you write less code which is less error prone, since the syntax is even more limited.
Remember how in the old days you could buy a stereo with a 12 band equalizer. Now stereos come with three pre-build modes - Disco, Rock, and Movie Theater. The same goes for imperative vs. declarative languages.

George Mladenov | mailto:mladenovAT NOSPAMpacbell dot net | mladenovAT NOSPAMpacbell dot net

11/03/2003 10:43 PM

Ah, yes that makes sense - but I would argue that it is all about choosing the right tool for the right job. XSLT is great for transforming one markup into another - XSLT is horrible at imperitive tasks, like building a dynamic application. The spaghetti code that XSLT leads to for this type of task tends to be "write only", no one can ever read it. Now of course, that is an opinion, as many people are very proficient at XSLT. I would argue that code like:

switch (Message.Id) {
case 1: DoSomething();
case 2: DoSomethingElse();
}

is more understandable and maintainable then (I don't know the XSLT for this off the top of my head, so i'll make it up):

<match select="/Message/Id==1">
DoSomething();
</match>

<match select="/Message/Id==2">
DoSomething();
</match>

But that is just one person's opinion...

chris anderson | http://www.simplegeek.com | chris_l_andersonAT NOSPAMhotmail dot com

11/06/2003 7:43 AM

I wonder if XQuery 1.0 (in the next version of the framework ?) can be considered as an alternative to XSLT, when it comes to XAML generation. It is a functional programming language, easy to write, read and hack.

Ahmet Zorlu | http://www.zoode.org | zorluAT NOSPAMzoode dot org

06/12/2004 8:41 AM

rfgser

rfgagaer | http://becula.smutpipe.com/index2345.html | drgazersgeAT NOSPAMyahoo dot com

06/14/2004 3:30 AM

视频编解码器 光纤收发器 视频光端机

视频编解码器 光纤收发器 | http://www.gyhx.com | linkAT NOSPAMgyhx dot com

06/14/2004 12:11 PM

发电机

发电机 | http://www.zgpt.cn/pro1.htm | linkAT NOSPAMzgpt dot cn

06/15/2004 1:29 AM

实验室设备 防静电地板

防静电地板 实验室设备 | http://www.anchuang.com.cn | linkAT NOSPAManchuang dot com dot cn

06/15/2004 5:27 AM

商标 专利 专利代理 商标代理

商标 专利 | http://www.bjkhp.com | linkAT NOSPAMbjkhp dot com

06/15/2004 5:27 AM

商标 专利 专利代理 商标代理

商标 专利 | http://www.bjkhp.com | linkAT NOSPAMbjkhp dot com

06/15/2004 8:38 PM

商标 商标注册 商标代理

商标 商标注册 | http://www.tmrr.com | linkAT NOSPAMtmrr dot com

06/16/2004 12:26 AM

健身器材 跑步机 按摩椅

健身器材 跑步机 按摩椅 | http://www.ruilong.com.cn | linkAT NOSPAMruilong dot com dot cn

06/16/2004 12:27 AM

视频会议 电话会议 polycom 电话会议

视频会议 电话会议 polycom 电话会议 | http://www.plcm.com.cn/defaultflash.asp | linkAT NOSPAMplcm dot com dot cn

06/16/2004 1:16 AM

会计

会计 | http://www.cfeenet.com/Examzhichen/default.asp | linkAT NOSPAMcfeenet dot com

08/04/2004 5:05 PM

http://lipitor2.hotusa.org
http://lipitor3.fateback.com
http://lipitor4.fateback.com
http://lipitor5.imess.net
http://lipitor6.deep-ice.com
http://lipitor7.undonet.com
http://lipitor8.noneto.com
http://lipitor9.enacre.net
http://lipitor10.fateback.com
http://lipitor11.hotusa.org
http://lipitor12.bebto.com
http://lipitor13.imess.net
http://lipitor14.deep-ice.com
http://lipitor15.sinfree.net

lipitus | mailto:loonaticAT NOSPAMlunixmail dot org | loonaticAT NOSPAMlunixmail dot org

Add New

Name

Email

Homepage

Security Word

Type in the security Word

Content (HTML not allowed)