Driving .NET

Ruby on the rise

smash — Sat, 23 Jun 2007 02:41:00 GMT

Ruby the programming language has been around for quite a while, though quite popular in Japan, it never made any inroads into the mainstream of computing. Only recently it made quite a splash with the emergence of Ruby on Rails (RoR) as an alternative web application framework. Yet it still remains stuck in the peripherals, with Java and .NET dominating the corporate computing space. A sad fate indeed for probably the best dynamic object oriented language in geek lore.

But Ruby's fate is about to take a detour, with the upcoming Ruby IDE from CodeGear (the company formerly known as Borland, then Inprise, then Borland again!) and suprise surprise - Netbeans 6.0. The latter has a preview download while the former is still vaporware.

So will Ruby finally become mainstream and pose a threat to java and c#? I will probably have an answer to that after I have installed Netbeans 6.0. The problem is, I might enjoy it a lot and decide to never look back.

Painless Ajax for ASP.NET with Gaia Ajax Widgets

smash — Fri, 22 Jun 2007 05:10:00 GMT

I found this library while researching the web for an alternative AJAX solution for ASP.NET sans Javascript. The thing is, if you know how to use those built in WebControls, then you already know how to use Gaia since most of its widgets mirror those found in ASP.NET. The window and autocompleter controls are very impressive.

Gaia makes the Ajax toolkit from Microsoft look ummm ... outdated. See for yourself here.

a parser tale

smash — Thu, 17 May 2007 00:59:00 GMT

I still can't believe that I'll ever be involved in a project that entails writing a parser. My first crack at writing one was for my college thesis. If I remember correctly, it was part of a C language interpreter which the panel of judges deemed useless since compilers for C were already available. It was so painful to hear that comment since the interpreter did work.

Well I guess, the work I put into that project has finally paid off since our HL7 parser is well on its way, after only less than 24 hours of coding and testing. I was really feeling nostalgic while sketching the state transition diagrams on blank sheets of paper. Ofcourse having those drawings transferred to Visio was really cool.

NUnit is really one heck of a tool. Without it, I could be mired in creating test projects for all the possible use cases for days. Contrast that to writing your testing code side by side with your application code.

Alan Cooper once said, that programming is like digging the Panama Canal with a spoon, and with .NET programming is still hard but it's like digging the Panama Canal with a backhoe. I guess with NUnit you can say that programming is still hard but it's like digging the Panama Canal with two backhoes.

ClassicReport does XPS

smash — Thu, 10 May 2007 23:46:00 GMT

You now can export your ClassicReport documents to Xps as shown below. I'm also experimenting with this auto-zooming report viewer. Check them out.

using Backbase forms in ASP.NET

smash — Mon, 16 Apr 2007 03:23:00 GMT

I finally had the opportunity to take the Backbase Community Edition for a spin - and boy it rocks! After a couple of hours working with this I finally figured out how to make this AJAX framework to work in an ASP.NET web project. One of the usual stuff that we do in web applications is form submission. So it wasnt a surpise to find out that Backbase has its own way of handling forms, which is really incompatible with ASP.NET. Backbase is pure HTML and that could be a curse or a blessing. To test this facility, I created a new HTML form and wrote the following in the body:

<form name="form1"

method="post"

action="reponse.ashx"

b:destination="id('destination')"

b:mode="replace">

User:<input type="text" name="user" />

<b:button b:action="submit" b:target="ancestor::form[1]">Send</b:button>

</form>

</xmp>

The object of this exercise was simple. Enter the name of the user on the textbox and upon clicking the submit button, the name of the user should appear in place of <div id="destination"/> tag. Did it work? Yes it did, even before I could bat an eyelash.

notes on the ClassicReport Control

smash — Sat, 07 Apr 2007 11:36:00 GMT

the next update of the ClassicReports for .NET will include a new databound ClassicReport control so you wont have to write those event handlers unless really necessary. you will be able to edit the report at design time by clicking the small button that appears when the Template property has focus on the PropertyGrid. implementing the UITypeEditor was as simple as dropping the ReportDesigner in a form.

i was flipflopping on whether to use BindingSource or object as the type for the DataSource property. i finally chose the latter which seems to be the norm. the UITypeEditor for the DataSource property will have to wait a little longer, maybe a week or so depending on my free time ofcourse.

i also decided to make public the Document property which you will now use to pass to the Preview control or PrinterService. (i will also be making available a PDFService and XPSService soon) the Document object contains the collection of Pages which the ReportComposer populates.

Here's how to use the new control programmatically.

ClassicReport report = new ClassicReport();
report.Template = GetTemplate();  
report.DataSource = GetData();
report.Execute();
PrinterService printer = new PrinterService(report.Document);
printer.PrintAll();

Forcing a visual tree repaint in WPF

smash — Sat, 28 Oct 2006 06:42:24 GMT

So what does InvalidateVisual do? The SDK documentation says it "invalidates the rendering of the element, and forces a complete new layout pass. OnRender is called after the layout cycle is completed". Just what I needed when it was time to implement scrolling for a custom control shown below - or so I thought.

The custom horizontal scrollbar at the bottom of the control is bound to an ICommand whose implementation is shown below:

	
class ScrollCommand : BaseCommand
{
    public ScrollCommand(Controller controller)
	: base(controller)
    {
    }

    public override void Execute(object parameter)
    {
	double value = (double)parameter;
	controller.horScroll = value;
	controller.designer.InvalidateVisual();
    }
}

The Execute method will force the UIElements Field1, Field2 and Field3 to be repositioned in their respective canvas container relative to the value of the scrollbar by calling the host control's InvalidateVisual method. This provides the illusion of scrolling. It was a dud.

I was beginning to doubt this whole WPF Binding thing when I chanced upon the Measure method. The SDK describes this as "Updates the DesiredSize of a UIElement. Parent elements call this method from their own MeasureCore implementations to form a recursive layout update. Calling this method constitutes the first pass of a layout update in the layout engine". It looked very promising, so i replaced the call to InvalidateVisual with Measure as show below:

	
    public override void Execute(object parameter)
    {
	double value = (double)parameter;
	controller.horScroll = value;
	controller.designer.Measure(new Size());
    }

Needless to say it worked!

building a full trust XBAP app

smash — Thu, 12 Oct 2006 20:22:44 GMT

After reading this post by Karsten, I created a WPF XBAP project that displays the ClassicReports designer on a Frame as shown below.

<Page x:Class="IApp.Page3"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Page3"
    >
    <DockPanel>
        <ToolBarTray DockPanel.Dock="Top">
            <ToolBar>
                <Button Name="newButton">
                    <Image Source="images\new.png" />
                </Button>
                <Button Name="openButton" >
                    <Image Source="images\open.png" />
                </Button>
                <Button  Name="saveButton" >
                    <Image Source="images\save.png" />
                </Button>            
            </ToolBar>
        </ToolBarTray>
        <Frame Name="frame1"></Frame>
    </DockPanel>
</Page>

Below is the c# code behind for the XAML above. Notice that the designer control must first be hosted in a WindowsFormsHost before it can be displayed in WPF.

namespace IApp
{
    public partial class Page3 : System.Windows.Controls.Page
    {
        JDJ.ClassicReport.ReportDesigner.ReportDesigner designer;

        public Page3()
        {
            InitializeComponent();
            WindowsFormsHost host = new WindowsFormsHost();
            designer = new JDJ.ClassicReport.ReportDesigner.ReportDesigner();
            host.Child = designer;
            frame1.Content = host;
            openButton.Click += new RoutedEventHandler(openButton_Click);
            saveButton.Click += new RoutedEventHandler(saveButton_Click);
            newButton.Click += new RoutedEventHandler(newButton_Click);
        }

        void newButton_Click(object sender, RoutedEventArgs e)
        {
            designer.NewReport();
        }

        void saveButton_Click(object sender, RoutedEventArgs e)
        {
            designer.Save();
        }

        void openButton_Click(object sender, RoutedEventArgs e)
        {
            designer.OpenReport();
        }

    }
}

This is how the above page looks like. Notice the address I used in runnning the XBAP application. That's my actual IP address as of this writing.

When I clicked on the Open button the dialog box appears.

So after selecting the Sample Report File, the designer then displays the report layout on the design surface. Now I can modify the report to my heart's content.

I almost forgot that I am actually running this rich client application inside a browser!

Implementing the ListCollectionView

smash — Fri, 06 Oct 2006 17:57:48 GMT

The ListCollectionView is a WPF wrapper for an IList. When you add or remove something from the IList, the ListCollectionView must be notified of the change by calling its OnCollectionChanged method so it can sync with the IList.

The problem is, OnCollectionChanged is a protected method i.e. we can't access it from outside of a ListViewCollection object. This means we have to create a new class that inherits from ListCollectionView so we can have the means to call OnCollectionChanged whenever we add or remove something from the IList object we are wrapping e.g.

class StudentListView(ListCollectionView):
	def constructor(theClass as Class): 
		super(theClass.StudentList) 
		theClass.StudentListChanged += OnStudentListChanged
	
	def OnStudentListChanged(sender as object, e as StudentListChangedEventArgs):
		if e.ChangeMode == Class.ChangeMode.Add:
			args = NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction.Add,e.Student,e.Index)
		else
			args = NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction.Remove,e.Student,e.Index)
		OnCollectionChanged(args)

So whenever the parent Class object fires its StudentListChanged event after adding or removing a Student from its StudentList, then the StudentListView object gets to call the OnCollectionChanged method it inherited from ListCollectionView, allowing it to remain in sync with the underlying StudentList object.

The ViewController and XAML

smash — Thu, 05 Oct 2006 18:58:58 GMT

About two nights ago, I learned how to use an external XAML in a WPF application. It was so simple. Just read the XAML, parse it, and then wire the elements to your code. Now if this is how we are supposed to code in WPF, then I might just as well stick to WinForms.

Fortunately XAML was not designed like Winforms or even Webforms. The FrameworkElement in WPF has a DataContext property which is an object type. This means we can feed it any kind of object that fits our purpose. The great thing about this is, XAML has the capability to bind all the elements in the object tree to the root element's DataContext property. All we have to do is bind an element's property or properties to the corresponding property or properties of the object concerned like so:

<StackPanel
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ListBox
        Name="listBox1"
        IsSynchronizedWithCurrentItem="true"
        ItemsSource="{Binding Path=Employees}"/>
    <Button
        CommandParameter="{Binding ElementName=listBox1}"
        Command="{Binding Path=DeleteEmployee}"
        Content="Delete"/>
</StackPanel>

Assuming we have a class called CompanyViewController that exposes the properties Employees (ListCollectionView) and DeleteEmployee (ICommand), and the XAML is stored in EmployeeListView.xaml, the code to drive this XAML could simply look like this:

class EmployeeListView(Window):
	def constructor(company as Company):
		# parse the element tree via the XamlReader
		streamReader = StreamReader("EmployeeListView.xaml")
		xmlreader = XmlReader.Create(streamReader)		
		view as Panel= XamlReader.Load(xmlreader)
                
                # give the view something to chew on
		view.DataContext = CompanyViewController(company)
		
		# display the view in the window
		self.Content = view

If you are a TDD kind of guy, you have to feel that tingling sensation!

XAML meets Boo

smash — Wed, 04 Oct 2006 19:59:12 GMT

My first impression with XAML was that you get to play with it only if your building WPF apps in c#. It seems the .NET3 c# compiler is the only one capable of compiling XAML markup and code into an executable file. It was a big letdown for Boo aficionados like me since XAML is clearly the way to go when it comes to creating user interfaces in WPF.

I was dead wrong. It seems any .NET language like Boo can still leverage XAML with a simple workaround as illustrated by Rob Relyea on his post about the 3 Coding Styles for Avalon Applications.

To see if Rob's workaround will work, I wrote the following markup in XamlPad and copy pasted it to a file called "Exer1.xaml" in my Boo project. I didn't want the Boo compiler to touch this markup at compile time so I set its Build action property to None and its Copy to output directory property to PreserveNewest.

<StackPanel
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Margin="10">
    <DockPanel     Width="300" HorizontalAlignment="Left"    Margin="10 0 0 5">
        <StackPanel DockPanel.Dock="Left">
            <TextBox
                Name="textBox1"
                Width="230"
                FontSize="12"
                FontFamily="Tahoma"
                Margin="0 0 2 2"/>
        </StackPanel>
        <Button
            Name="addButton"
            DockPanel.Dock="Right"
            VerticalAlignment="Top"
            Width="60"
            Content="Add"/>
    </DockPanel>
    <DockPanel HorizontalAlignment="Left" Width="300" Margin="10 0 0 0">
        <StackPanel DockPanel.Dock="Left">
            <ListBox
                Name="listBox1"
                Width="230"
                Height="100"
                FontSize="12"
                FontFamily="Tahoma"
                Background="GhostWhite"
                Margin="0 0 2 2">            
            </ListBox>
        </StackPanel>
        <Button
            Name="delButton"
            DockPanel.Dock="Right"
            VerticalAlignment="Top"
            Width="60"
            Content="Delete"/>
    </DockPanel>
</StackPanel>

Next, I added the following Boo code to the project. The logic of the program is simple. When you click on the Add button (addButton), whatever you enter in the TextBox (textBox1) is placed on the ListBox (listBox1) below it. When you click on the Delete button (delButton), the selected item on the listbox will be removed.

namespace WinFx.Demo

import System
import System.Collections
import System.Windows
import System.Windows.Controls
import System.Windows.Controls.Primitives
import System.Windows.Input
import System.Windows.Media
import System.Windows.Markup
import System.Windows.Shapes
import System.IO
import System.Xml

class Exer1(Window):
	textBox1 as TextBox 
	listBox1 as ListBox
	addButton as Button
	delButton as Button
	
	def constructor():
		# parse the element tree via the XamlReader
		streamReader = StreamReader("Exer1.xaml")
		xmlreader = XmlReader.Create(streamReader)		
		view as Panel= XamlReader.Load(xmlreader)
		
		# get a reference to the named elements via the LogicalTreeHelper
		textBox1  = LogicalTreeHelper.FindLogicalNode(view, "textBox1")
		listBox1  = LogicalTreeHelper.FindLogicalNode(view, "listBox1")
		addButton  = LogicalTreeHelper.FindLogicalNode(view, "addButton")
		delButton  = LogicalTreeHelper.FindLogicalNode(view, "delButton")
		
		# wire up the elements to your code
		addButton.Click += AddButtonClick
		delButton.Click += DelButtonClick		
		
		# customize the window 
		self.Content = view
		self.WindowStartupLocation = WindowStartupLocation.CenterScreen
		self.Title = "XAML Meets Boo"
		self.Width = 500
		self.Height = 300
		
	protected def AddButtonClick(sender as object, e as RoutedEventArgs):
		listBox1.Items.Add(textBox1.Text)
		textBox1.Text = ""
		textBox1.Focus()
			
	protected def DelButtonClick(sender as object, e as RoutedEventArgs):
		index = listBox1.SelectedIndex
		if index >= 0:
			listBox1.Items.RemoveAt(index)
			
		
[STAThread]
def Main():
	app = Application()	
	Exer1().Show()
	app.Run()

Here's a screenshot of this in action.

The code above looks very much like a regular WinForm code except the contents of the window are defined in an external XAML file. Shades of ASP.NET? One of the neat things about this scenario is that I can retouch the XAML sometime later using Sparkle for some eyecandy effects and then run the same app again with no recompilation whatsoever.

ColorChart XAML code bug resolved

smash — Sat, 30 Sep 2006 10:35:46 GMT

Well what can i say except, my apologies to the XAML team. I was reviewing the XAML code from my last post and there you go, I forgot to set the HorizontalAlignment to Center which was present on the Boo code. After inserting the appropriate setter the problem went away. Here's the correct XAML code for the ColorChart:

<Page x:Class="ColorChart.Page1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Page1"
    >
    <Page.Resources>
        <Style x:Key="CCStyle" >
            <Setter Property="Control.BorderBrush" Value="LightGray"/>
            <Setter Property="Control.BorderThickness" Value="1"/>
            <Setter Property="Control.Margin" Value="3"/>
            <Setter Property="Control.HorizontalAlignment" Value="Center"/>
        </Style>
        <ItemsPanelTemplate x:Key="CCPanel">
            <UniformGrid Columns="6"></UniformGrid>
        </ItemsPanelTemplate>
        <DataTemplate x:Key="CCTemplate">
            <StackPanel>
                <Rectangle     
                    Width="100" 
                    Height="40" 
                    Fill="{Binding Path=Brush}" />
                <TextBlock 
                    FontSize="11" 
                    Text="{Binding Path=Name}" 
                    HorizontalAlignment="Center">
                </TextBlock>
            </StackPanel>
        </DataTemplate>
    </Page.Resources>
    <ListBox 
        Name="listBox1" 
        SelectionMode="Single" 
        ItemsPanel="{StaticResource CCPanel}" 
        ItemTemplate="{StaticResource CCTemplate}" 
        ItemContainerStyle="{StaticResource CCStyle}"/>
</Page>

Now here's the result:

XAML renders differently

smash — Fri, 29 Sep 2006 20:28:59 GMT

I was reading with great interest Keith's posts about creating a color chart in ASP.NET and decided to roll out a similar WPF application in pure code first - in Boo ofcourse - and in XAML second. The former will be a Windows application and the latter will be an XBAP application so I can run it inside a browser - just like Keith's demo.

The motivation for this came about when I realized that the color chart can easily be rendered using the WPF ListBox. The trick was to set the ItemsPanel property of the ListBox to a template containing a WPF UniformGrid.

Coding the windows version in Boo was a breeze. All in all it took only about 20 minutes to get it up and running since Keith had mapped the whole thing already. I used Keith's original method of using Reflection to get the list of predefined colors and adapted it for WPF.

    class ColorService:
	static def GetBrushes() as System.Collections.IEnumerable:
		for propertyInfo as PropertyInfo in typeof(Brushes).GetProperties():
			memberInfo = cast(MemberInfo, propertyInfo)
			brush = cast(Brush,propertyInfo.GetValue(null,null))
			yield NamedBrush(memberInfo.Name, brush)
			
	class NamedBrush:
		[getter(Name)] _name as string
		[getter(Brush)] _brush as Brush
		
		def constructor(name as string, brush as Brush):
			_name = name
			_brush = brush
	
		override def ToString():
			return _name

Here's the c# version:

   
    public class ColorService
    {
        static public IEnumerable GetBrushes()
        {
            foreach (PropertyInfo propertyInfo in typeof(Brushes).GetProperties())
            {
                MemberInfo memberInfo = (MemberInfo)propertyInfo;
                Brush brushValue = (Brush)propertyInfo.GetValue(null, null);
                yield return new NamedBrush(memberInfo.Name, brushValue);
            }
        }

        public class NamedBrush
        {
            public NamedBrush(string name, Brush brush)
            {
                _name = name;
                _brush = brush;
            }

            public string Name
            {
                get { return _name; }
            }

            public Brush Brush
            {
                get { return _brush; }
            }

            public override string ToString()
            {
                return _name;
            }

            string _name;
            Brush _brush;
        }
    }

Here's how the windows app looks like:

Now converting the app into XBAP took quite some time to finish since I'm not well versed in XAML yet. I had to check the Boo layout code repeatedly to get the XAML finally working. Heres the XAML layout code:

<Page x:Class="ColorChart.Page1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Page1"
    >
    <Page.Resources>
        <Style x:Key="CCStyle" >
            <Setter Property="Control.BorderBrush" Value="LightGray"/>
            <Setter Property="Control.BorderThickness" Value="1"/>
            <Setter Property="Control.Margin" Value="3"/>
        </Style>
        <ItemsPanelTemplate x:Key="CCPanel">
            <UniformGrid Columns="6"></UniformGrid>
        </ItemsPanelTemplate>
        <DataTemplate x:Key="CCTemplate">
            <StackPanel>
                <Rectangle     
                    Width="100" 
                    Height="40" 
                    Fill="{Binding Path=Brush}" 
                    HorizontalAlignment="Left"/>
                <TextBlock 
                    FontSize="11" 
                    Text="{Binding Path=Name}" 
                    HorizontalAlignment="Center">
                </TextBlock>
            </StackPanel>
        </DataTemplate>
    </Page.Resources>
    <ListBox 
        Name="listBox1" 
        SelectionMode="Single" 
        ItemsPanel="{StaticResource CCPanel}" 
        ItemTemplate="{StaticResource CCTemplate}" 
        ItemContainerStyle="{StaticResource CCStyle}"/>
</Page>

This is the c# code-behind for the XAML above:

namespace ColorChart
{
    public partial class Page1 : System.Windows.Controls.Page
    {
        public Page1()
        {
            InitializeComponent();
            this.listBox1.ItemsSource = ColorService.GetBrushes();
        }
    }
}

And here's the layout code in Boo which does thesame thing as the XAML above:

class CCStyle(Style):
    def constructor():
        s1 = Setter(ListBoxItem.BorderThicknessProperty, Thickness(1))
        s2 = Setter(ListBoxItem.MarginProperty, Thickness(3))
        s3 = Setter(ListBoxItem.BorderBrushProperty, Brushes.LightGray)
        s4 = Setter(ListBoxItem.HorizontalAlignmentProperty, HorizontalAlignment.Center)
        self.Setters.Add(s1)
        self.Setters.Add(s2)
        self.Setters.Add(s3)
        self.Setters.Add(s4)

class CCPanel(ItemsPanelTemplate):
    def constructor():
        root = FrameworkElementFactory(UniformGrid)
        root.SetValue(UniformGrid.ColumnsProperty, 6)
        self.VisualTree = root

class CCTemplate(DataTemplate):
    def constructor():
        root = FrameworkElementFactory(StackPanel)
        ch1 = FrameworkElementFactory(Rectangle)
        ch1.SetValue(Rectangle.WidthProperty, 100.0)
        ch1.SetValue(Rectangle.HeightProperty, 40.0)
        ch1.SetValue(Rectangle.FillProperty, Binding("Brush"))
        ch2 = FrameworkElementFactory(TextBlock)
        ch2.SetValue(TextBlock.TextProperty, Binding("Name"))
        ch2.SetValue(TextBlock.HorizontalAlignmentProperty, HorizontalAlignment.Center)
        root.AppendChild(ch1)
        root.AppendChild(ch2)
        self.VisualTree = root
        
class ColorChartView(ListBox):
    def constructor():
        ItemContainerStyle = CCStyle()
        ItemsPanel = CCPanel()
        ItemTemplate = CCTemplate()
        ItemsSource = ColorService.GetBrushes()

An XBAP application needs to be compiled and then published to an IIS server first. After you have done that open your IE browser - or Firefox browser if you have the IE Tab extension installed - and type in the url of your application. In my case I typed in http://localhost/winfx/colorchart.xbap and here's what came out:

Now that was neat. The keyboard navigation and mouse selection works just like in the windows version. But if you will look at it more closely you'll notice that there's something different about the XAML rendered view.

XAML by the way is tokenized into BAML during compilation and is embedded as a resource inside the executable file. Maybe the XAML team needs more time to tweak their engine.

Not your father's ListBox

smash — Wed, 27 Sep 2006 21:08:41 GMT

[Edited: I changed the code to use one template this time to emphasize the proper use of styling. I also moved the the definition for the style to a class to make the code cleaner.]

After only a couple of days hacking away at WPF using the SDK docs and Google as reference, I may finally be gaining a toehold into the vast and exciting world of Avalon. So many things about WPF are new e.g. FrameworkElementFactory, DependencyProperty, DataTemplate and the list goes on. If you are not careful you'll loose yourself following the inheritance heirarchy.

I finally gave up doing that and decided that the best way to learn WPF was to leave all those fancy stuff first - like transformations, animation, 3D etc. - and work on the normal stuff like take some data from a service object and display the information on the screen. So to get the ball rolling, I whipped up a couple of rudimentary classes - Customer and CustomerService. After spending half a day pounding the keyboard, studying compiler error messages, checking the docs, googling, cursing - here's what i managed to do with the ListBox:

Although styling and templating are indisputably easier to accomplish in XAML, I believe programmers must also know how to do these things in pure code. Knowing how things are done under the hood will prove invaluable in the long haul. The days when Web developers would smirk at the sight of our user interfaces are about to end.

import System
import System.Windows
import System.Windows.Controls
import System.Windows.Controls.Primitives
import System.Windows.Data
import System.Windows.Documents
import System.Windows.Input
import System.Windows.Markup
import System.Windows.Media
import System.Windows.Navigation
import System.Windows.Shapes
import System.Globalization

class Customer:
	[property(Name)] _name = ""
	[property(Address)] _addr = ""
	
	def constructor(name as string, addr as string):
		_name = name
		_addr = addr
	
	override def ToString() as string:
		return _name

class CustomerService:
	static def GetCustomers():
		yield Customer("brent","davao")
		yield Customer("manny","gsc")
		yield Customer("robert","cagayan")
		yield Customer("george","cebu")
		yield Customer("thomas","iloilo")
		yield Customer("lelanie","tagum")
		yield Customer("bong","digos")
		yield Customer("hazel","bicol")		
			
class CustomerTemplate(DataTemplate):
	def constructor():
		super(Customer)
		panel = FrameworkElementFactory(StackPanel)		
		child1 = FrameworkElementFactory(TextBlock)
		child1.SetValue(TextBlock.TextProperty, Binding("Name"))		
		child1.SetValue(TextBlock.FontSizeProperty, 20.0)
		child2 = FrameworkElementFactory(Label)
		child2.SetValue(Label.ContentProperty, Binding("Address"))		
		panel.AppendChild(child1)
		panel.AppendChild(child2)	
		self.VisualTree = panel
		
class CustomerStyle(Style):
	def constructor():
		super(ListBoxItem)
		setter1 = Setter(ListBoxItem.HorizontalContentAlignmentProperty, HorizontalAlignment.Stretch)
		setter2 = Setter(ListBoxItem.MarginProperty, Thickness(2))
		setter3 = Setter(ListBoxItem.BorderThicknessProperty, Thickness(1))
		setter4 = Setter(ListBox.BorderBrushProperty, Brushes.Gold)
		setter5 = Setter(ListBox.BackgroundProperty, Brushes.Bisque)
		setter6 = Setter(TextBlock.ForegroundProperty, Brushes.Orange)
		self.Setters.Add(setter1)
		self.Setters.Add(setter2)
		self.Setters.Add(setter3)
		self.Setters.Add(setter4)
		self.Setters.Add(setter5)
		self.Setters.Add(setter6)


class Home(Grid):
	def constructor():	
		self.ColumnDefinitions.Add(ColumnDefinition(Width:GridLength(200.0)))
		self.ColumnDefinitions.Add(ColumnDefinition(Width:GridLength(10.0)))
		self.ColumnDefinitions.Add(ColumnDefinition(Width:GridLength(400.0)))
		self.RowDefinitions.Add(RowDefinition(Height:GridLength(20.0)))
		self.RowDefinitions.Add(RowDefinition(Height:GridLength(100.0)))
		self.RowDefinitions.Add(RowDefinition(Height:GridLength(10.0)))
		self.RowDefinitions.Add(RowDefinition(Height:GridLength(100.0)))
		self.RowDefinitions.Add(RowDefinition(Height:GridLength(10.0)))
		self.RowDefinitions.Add(RowDefinition(Height:GridLength(200.0)))
		self.RowDefinitions.Add(RowDefinition(Height:GridLength(10.0)))
		
		regularListBox = ListBox()
		regularListBox.ItemsSource = CustomerService.GetCustomers()
		Grid.SetColumn(regularListBox,2)
		Grid.SetRow(regularListBox,1)
		
		templatedListBox = ListBox()
		templatedListBox.ItemTemplate = CustomerTemplate()	
		templatedListBox.ItemsSource = CustomerService.GetCustomers()
		Grid.SetColumn(templatedListBox,2)
		Grid.SetRow(templatedListBox,3)
		
		styledListBox = ListBox()			
		styledListBox.ItemContainerStyle = CustomerStyle()
		styledListBox.ItemTemplate = CustomerTemplate()
		styledListBox.ItemsSource = CustomerService.GetCustomers()						
		Grid.SetColumn(styledListBox,2)
		Grid.SetRow(styledListBox,5)
		
		text1 = TextBlock(Run("A Regular ListBox "))
		text1.FontSize = 14
		text1.HorizontalAlignment = HorizontalAlignment.Right
		text2 = TextBlock(Run("A Templated ListBox "))
		text2.FontSize = 14
		text2.HorizontalAlignment = HorizontalAlignment.Right
		text3 = TextBlock(Run("A Styled Templated ListBox "))
		text3.FontSize = 14
		text3.HorizontalAlignment = HorizontalAlignment.Right
		Grid.SetRow(text1,1)
		Grid.SetRow(text2,3)
		Grid.SetRow(text3,5)	
			
		self.Children.Add(regularListBox)
		self.Children.Add(templatedListBox)
		self.Children.Add(styledListBox)
		self.Children.Add(text1)
		self.Children.Add(text2)
		self.Children.Add(text3)				

[STAThread]
def Main():
	# define main window
	win = Window(Title:"ListBox Demo")	
	win.Content = Home()
	# define application
	app = Application()
	app.Startup += { win.Show() }
	app.Run()

WinFx TestDrive with Boo

smash — Sun, 24 Sep 2006 22:37:33 GMT

Learning the ins and outs of WPF is like climbing Mount Apo for the first time - minus a guide. Oh yes, judging by the sample applications you see on the Internet, Microsoft may have succeeded in creating a very compelling framework that will change the face of computing as we know it today. The engineers who dared build this thing has probably thrown in every piece of computing gobbledygook ever imagined - including the proverbial kitchen sink.

That kitchen sink may very well be the new markup language called XAML, which those bloody engineers lovingly pronounce as zammel. The fact that it is being hyped in every WPF literature as the de facto standard in writing the next generation UIs leaves me utterly breathless. WPF is all about this new markup (XAML) and code-behind (C# or VB.NET) - similar to the combo made popular in WebForms.

Whatever similarities between WebForms and WPF abruptly ends there. Even a six year .NET developer won't have any comfort zones if that's any consolation. I once had this illusion that since WPF is basically .NET, I will be hitting the ground running by the time I decided to study WPF. It actually felt more like being hit by a runaway truck. Microsoft did err when they labeled WinFX as .NET3. They should have concatenated a higher number - like .NET5 perhaps.

There are a thousand ways to skin a cat . XAML is first translated to raw C# or VB.NET code during the compilation process. This gives those who are zammel challenged like me, a glimmer of hope that perhaps learning the new mark up can be postponed until a much much later date. That old aphorism may still apply to programming WPF applications. Hope indeed has an uncanny way of manifesting itself even during the bleakest of moments!

If you've been watching the events that have been taking place in the .NET sphere of late, you'll probably notice that there seems to be a language renaissance of sorts. Phython, Ruby, PHP, Smalltalk and other obscure languages, new and old, are in the process or have been successfully ported to .NET. What was once considered a second rate Java VM copycat is fast becoming the United Nations of programming languages.

Among these new .NET languages, Boo is my favorite. It has a very compact syntax, yet it does not compromise anything. It belongs to a new breed of smart programming languages designed specifically for .NET that has been slowly emerging from the underground. The value of Boo becomes evident when you are prototyping something. And that is exactly what most of us will be doing with WPF between now and next year, writing prototype applications to test the waters so to speak.

To start writing WPF applications sans XAML with Boo (or even c#), start by creating a new Boo WinForm application and then delete the dummy WinForm file. Delete all references except Boo.Lang.Useful (you dont need this in c#) and System, then add references to PresentationCore, PresentationFramework and WindowsBase. Add a new Empty Boo File then type the following code like so:

namespace Boo.WinFx
import System
import System.Windows
import System.Windows.Navigation

[STAThread]
def Main():
	# create a window
	win = NavigationWindow()
	# create an application
	app = Application()	
	# the first window to be shown becomes the main window
	win.Show()
	# fire the application
	app.Run()

Hit F5 to run this barebones WinFx Navigation Application. Notice that we did not enclose the Main function inside a class, yet the program did execute as expected. This is one of the facets of Boo that makes it special. It adopts very well to procedural style of programming.

There are two types of windows we can use in our applications - the Window and the NavigationWindow. The Window class looks like the old WinForm but that's where their similarities end. The NavigationWindow class inherits from the Window class and extends it with content navigation support. With it we now can create desktop applications that mimic the fuctionality of web applications, without really trying.

Let's say I would like to build an application that displays a button on the first page. If I click on the button, the app will then navigate to the second page. To do this modify the original code like so:

namespace Boo.WinFx
import System
import System.Windows
import System.Windows.Controls
import System.Windows.Navigation

[STAThread]
def Main():
	# create a window host
	win = NavigationWindow()	
	# create a textblock
	para = TextBlock(Text:"Hello World!!!", FontSize:36)
	para.VerticalAlignment = VerticalAlignment.Center
	para.HorizontalAlignment =HorizontalAlignment.Center	
	# create a button 
	button = Button(Content:"Click Me", Height:30, Width:100)
	# display the textblock when the button is clicked
	button.Click += { win.Navigate(para) }
	# display the button first
	win.Navigate(button)
	# create an application host
	app = Application()
	# show the window
	win.Show()
	# fire the application
	app.Run()