Xamlon, a small startup in LaJolla, CA, started with a Windows desktop product called Xamlon Pro. This package provides developers with a taste for XAML-based declarative markup programming. XAML is compiled with managed code to produce applications that run in the Xamlon viewer. This is the same approach that was promised in the Longhorn timeframe with the new Avalon user interface engine.
Their newest offering does something similar for Web development, with an interesting twist. The output is a true Macromedia Flash SWF file. This is significant given the market coverage of the Flash player, a small download that is readily available. Applications developed with Xamlon Web run on most any platform or browser combination without installing the .NET framework.
Xamlon is the latest brainchild of Paul Colton, CEO and founder. Paul is best known for the development of JRun, the Java server environment marketed by Macromedia. His long partnership with that company made him intimately aware of the potential for Flash applications.
Flash runs inside a "Virtual Machine" similar to the runtime environments of .NET and Java. A set of instructions called bytecode is loaded into the runtime and translated into machine instructions on the target computer. Flash uses the SWF file format that was made public in 1998. More than 98 percent of all computers are thought to have the Flash player installed. Flash development is historically difficult and there is a shortage of competent developers. The Flash IDE is really designed for graphics and animation, not for business application programming. ActionScript, a JavaScript derivative, has a limited syntax and little support for debugging.
There are other platforms for Flash application development, including Macromedia Flex and Laszlo Systems, but Xamlon replaces the need for ActionScript with the strong foundation of Visual Studio support and a strongly typed .NET managed code library. Once compiled into MSIL, the .NET byte codes can be mapped to the well-known Flash equivalents. This opens the Flash file delivery format to the millions of C# and Visual Basic coders.
Xamlon Web takes several interesting technologies and merges them into a developer friendly platform:
- XAML declarative markup
- .NET byte code compilation
- Flash SWF deployment
- AFLAX Web services
Declarative programming is different from traditional imperative programming. The developer describes a set of conditions but not the order they are executed. The syntax interpreter or compiler is free to analyze the statements and build a suitable algorithm.
Most declarative programming today is done with some variant of XML. Configuration files in Visual Studio and the .NET Framework commonly use XML. Web.config and app.config are good examples of the declarative model:
There are several areas where Microsoft is using declarative style. The server-side controls in ASP.NET are described using a namespace, tags, and attributes. This sample mixes HTML mark-up with CSS and server control declarations:
<?xml version="1.0" encoding="utf-8" ?>
<configuration>
<system.web>
<compilation defaultLanguage="vb" debug="true" />
<customErrors mode="RemoteOnly" />
</system.web>
</configuration>
InfoPath forms are described in an XML dialect. SQL Reporting Services reports store their layout in an XML format called RDL (report definition language). Server applications like Microsoft CRM use XML to describe data, forms, views, reports, and transactions. BizTalk Orchestra-tion defines business process flow in an XML structure. Both SQL Reporting Services and BizTalk compile their XML into .NET assemblies. This is similar to the approach taken by Xamlon.
<TR style="HEIGHT:90%">
<TD style="PADDING:10px; WIDTH:150px; BACKGROUND-
COLOR:wheat" vAlign="top">
<uc1:Menu id="Menu1" runat="server"></uc1:Menu>
</TD>
<TD vAlign="top" style="PADDING: 10px;">
<P>WorkArea</P>
<P><asp:Label id="Label1" runat="server">Label</asp:Label></P>
</TD>
</TR>
Longhorn has a new visual programming model called Avalon. At the heart of this is a new interface dialect called XAML, or eXtensible Application Markup Language. XAML is very powerful in that each element and attribute maps to some object in code. A XAML element name becomes a .NET Framework class name. When you define an XAML element, you are effectively creating an instance of the .NET Framework class with the same name as the XAML element. An XAML attribute name maps to the property or field with the same name, typically in the class instance:
This is equivalent to writing the code:
<Canvas>
<TextBox ID="FirstName" />
<Button ID="Submit" Click="SubmitForm" />
</Canvas>
Dim c As New Canvas
Dim fName As New TextBox
fName.ID = "TextBox"
c.AddChild(fName)
Dim b As New Button
b.ID = "Submit"
AddHandler b.Click, SubmitForm
XAML has a number of advantages. Control and attribute hierarchies are more apparent. Tools can easily be written to generate or interpret the markup. There is useful separation of UI and procedural code.
Simple XAML documents render in a browser much like an HTML Web page. As your application becomes more complex, events and procedural code must be added in a separate file. These are compiled together using the MSBuild utility.
This model is exactly the approach taken by Xamlon. You craft the interface elements in XAML and write managed code in C# or VB to handle logic and events. These are compiled into standard .NET MSIL (Microsoft Intermediate Language). The byte codes from the resulting DLL pass through a post compiler that maps .NET to Flash byte codes. The resulting SWF file can run in any browser or operating platform that has the Flash player.
The Xamlon Development Environment
There is decent support for Visual Studio 2003, including C# and VB.NET. Visual Studio 2005 will be supported at release time, including the inexpensive Express editions. Debugging relies on a Console.WriteLine technique; this is certainly not as smooth as standard .NET de-velopment. Hopefully a future version will fully integrate with the excellent Visual Studio debugging suite.
Notepad or a suitable text editor can be used with the .NET Framework SDK 1.1 if Visual Studio is not available. Xamlon uses the CSWF.exe command line compiler. This command line statement takes an XAML input file, two reference DLLs, and a C# source file to produce the expense.swf output file:
The .NET framework is not required on the client. All .NET language syntax is compiled to MSIL and then prost-processed through the Xamlon command line compiler to produce a standard Flash SWF file. In Visual Studio, this process is transparent to the developer. You can see the steps involved by opening the Output pane after compilation. The final step creates a sample HTML page that embeds the generated SWF. This is useful for testing and snipping an HTML code sample (see Listing 1).
cswf/xaml:expensereport.xaml /r:
SwfNative.dll,XamlControls.dll
/embed:XamlControls.dll /out:
expense.swf /verbose /clean /
launch /compress ExpenseReport.cs
Not all .NET classes are supported. Xamlon does comply with IL ECMA #335. There are basic Winform controls, databinding for controls, DataSet, and Web service support for connectivity to standard Web services like ASMX. GDI+ programmers will be pleased that basic graphic calls are converted to Flash. This feature can be used with or in place of XAML layout.
Flash player 6 or above is needed to run the SWF file. Xamlon calls this "Zero-Install Framework" (ZIF) since the .NET Framework is not required and the resulting file has an extremely small footprint. SWF files runs on most operating systems and browsers, giving unsurpassed market reach. Support for PocketPC is an added bonus since that platform already has a Flash player.
Supported Flash features include font embedding, ActionScript components or movies, SOAP support, video streaming, and MP3 embedding. Several useful tools are provided including a SWF to XAML converter. This takes existing Flash graphics and turns them into XAML layout. The Illustrator SVG to XAML converter does the same for Adobe Illustrator.
The included server component automatically proxies external Web service calls. This works on any available IIS/ASP.NET architecture.
AFLAX Simplifies AJAX
AJAX is the Asynchronous Javascript and XML design pattern. You can build dynamic, rich, Internet applications connected via XML Web services. There is a relatively complex programming model that is deployed through DHTML. The browser must understand XML processing for this to work. The programmer must write JavaScript code that parses XML and binds data nodes to HTML element tags. Popular examples are http://maps.google.com and www.start.com, a browser-based RSS reader created by Microsoft research.
Data is loaded as needed through background XML Web service calls. The page does not refresh or round trip to the server. The user experience is much cleaner than traditional server-based Web page logic.
AFLAX, Asynchronous Flash and XML, delivers a similar result using the simpler programming model offered by C# and VB.NET. The user interface relies on XAML for vector graphics and Xamlon compilation creates a Flash .SWF. This format is ubiquitous and works in most any browser variant.
Xamlon provides a server-side proxy that works as a Web service connection point. Standard C# and VB.NET Web service calls use SOAP to transfer data from the proxy to the running Flash instance. There is basic support for datasets and control databinding. This greatly reduces the amount of code needed for dynamic data-driven applications.
The Xamlon Web site features two excellent AFLAX examples. One is an enterprise application with real-time stock updates pulled directly from Yahoo Finance and Fidelity. The other is a clone of Google Maps.
Building a Simple App - XAML
You can build a Xamlon interface using the XAML declarative model or procedural code. Start by opening a new project. Xamlon installation adds template folders to both VB and C# (see Figure 1).
An SWF Application provides standard controls such as buttons, labels, and textboxes. An SWF Project is for coded Flash API applications. The Solution Explorer lists the files generated by the template (see Figure 2).
App.xaml is used for general layout and graphic objects. Assemblyinfo.vb has the standard .NET compilation directives. File1.vb is a class file that imports several referenced assemblies (see Figure 3).
These assemblies contain the Xamlon bytecode libraries that match Flash primitives. There must be references to these assemblies in the project (see Figure 4).
The XamlControls library contains controls that are familiar to a Windows Forms or ASP.Net developer. Details can be viewed in the object browser, as shown in Figure 5.
The SwfNative library contains objects that map directly to Flash primitives. One of the most used objects is a MovieClip (see figure 6).
The containing window is referred to as the Canvas. There are multiple layers that render on top of each other. Setting the Z-order produces a layered interface. The Desktop object is used in procedural code to create controls and add them to a layer:
Running this sample creates the window shown in Figure 7.
Private Shared Sub CreateSampleWindow()
' create window
Dim window As Window = New Window(200, 80)
window.Text = "Reader Survey"
window.X = 80
window.Y = 10
' add a button
b1 = New Xamlon.Swf.Controls. Button(75, 30)
b1.X = 10
b1.Y = 10
b1.Text = "What do you read?"
' add to window
window.AddChild(b1)
' add window to desktop
desktop.AddChild(window)
' show window
window.Show
End Sub
The size of the window is driven by the XAML declarative markup. The Canvas object has a size:
Button events are coded in typical .NET fashion, including an event handler with one parameter.
<?xml version="1.0"?>
<!-- The width and height of your swf file is set from these -->
<Canvas Width="360" Height="240">
<Canvas.Resources>
</Canvas.Resources>
</Canvas>
This requires some initial set-up. The MovieClip object is used to create a TextField called Con-sole. Writing Console displays the text string at the desired location.
Shared Sub b1_Click(ByVal sender As System.Object) Handles b1.Click
Console.WriteLine(".NET Developers Journal")
End Sub
Pressing the button displays the console text shown in Figure 8.
Public Shared Function CreateConsole()
consoleField = MovieClip.Root. CreateTextField(10, 100, 290, 390, -1)
consoleField.TextColor = &H333333
consoleField.Variable = "Console"
End Function
The project folder contains the solution file, project file, XAML markup, vb class file, and user options(see Figure 9).
The bin folder gets a little busy. There are some resource files, a series of intermediate IL and SWF files, and the compiled exe and swf. The batch file is used for post processing of the compiled .NET MSIL. It has a call to the CWSF compiler.
The HTML file is a testbed for viewing the SWF in a browser. Copy this file, the SWF, and any associated image or movie clips to a Web site. Review the HTML code and copy to your Web application as needed. Here is a sample of the object tag definition:
<object width="100%" height="100%"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase-"http://fpdownload.macromedia.com/pub/shockwave/cabs/
flash/swflash.cab#version
<param name-"allowScriptAccess"
value-"sameDomain" />
<param name="movie" value="SwfApplication3.swf" />
<embed width="100%" height="100%"
src="SwfApplication3.swf" allow-ScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
The codebase statement tells the browser to download the Flash player if one is not already installed on the machine. Depending on browser security settings, the user may be prompted for this download or shown a message indicating that content is blocked. In most cases, the player is already available and movie file is loaded immediately (see Figure 10).
Adding graphics to XAML is a snap. There are several elements in the revised app.xaml file. The rectangle creates a box with a gradient fill. The ellipse draws a blue shape, a given coordinate. The textbox places text as needed. The panel has a set of paths that combine to form an airline seat. These were copied from one of the Xamlon samples. Paths can be generated from an existing SWF or an Illustrator file. The Panel is used to position the seat (see Listing 2). Compiling this version results in the flashy dialog shown in Figure 11.
Imperative programming can be mixed with the declarative XAML design. Add an Image control (JPG and PNG, not GIF) and set the source and location. This code, when added to the button click event, dynamically loads a JPG that displays at a defined coordinate. Flash movies can be loaded in the same fashion offering some interesting animation possibilities:
The picture displays at the lower right corner because the desktop size was used to calculate the X and Y coordinates. Figure 12 shows the finished canvas.
desktop = desktop.GetDesktop()
Xamlon.Internal.Utilities.SetIndex(-10)
Dim i As New Image
i.Source = "billjwolff.jpg"
i.X = desktop.Width - 100
i.Y = desktop.Height - 150
desktop.AddChild(i)
A Complex Web-Driven App - AFLAX
There is an excellent stock market ticker sample included in the Xamlon Web install. The AFLAX design pattern is used to create an animated view of real-time data feeds. One project runs server side to deliver XML data to the client. It uses an ASPX page with content type set to text/xml. An XML list of stock tags is loaded into an arraylist. For each stock, HttpWebRequests connect to the Yahoo Finance sight to collect real-time data. The data is packaged as XML and sent to the client.
The client uses XAML to dress the window frame and a series of graphic images to display historical charts. A timer object fires an event that makes a background call to the server page to retrieve the latest XML. The data drives some graphic primitives that create the real-time chart. Figure 13 shows the finished product, all packaged in a tidy 73K SWF file.
Xamlon Futures
XAML will be a major component of every developer's toolbox in the next few years. Microsoft promises a WinFX release that will deliver parts of Avalon and XAML to Windows XP and Windows Server 2003 early next year. Xamlon technology gets you there today.
Xamlon Web has a compelling value proposition. Compiling next year's declarative markup technology with today's popular .NET languages to produce the ubiquitous SWF file format is a great way to deliver leading edge applications. Xamlon Web is scheduled for release this summer. Watch their Web site (www.xamlon.com) for details.