Tuesday, May 1, 2007
Using Code Creator to Create SilverLight Controls (WPF/E)
SilverLight is small, efficient and has the promise of making great Web experiences for the browser user. To fufill this promise SilverLight code (Xml) must be created dynamically. This can be done via JavaScript in the client browser or at the server. We believe using CodeCreator at the server is a much simpler, faster and more maintainable approach.
Below is an example of a SilverLight control with CodeCreator constructs. This can be used to dynamically create a control demonstrated in this link.
CodeCreator will create the following code.
The JavaScript code will also need to be created using simalar techniques. See the CodeCreator Blog posting for more information.
Demonstrated at Ottawa Demo Camp
Below is an example of a SilverLight control with CodeCreator constructs. This can be used to dynamically create a control demonstrated in this link.
<!--<cc:Repeat/>-->
<Canvas >
<Rectangle x:Name="button0"
Width="120"
Height="75"
Canvas.Left="0"
Canvas.Top="0"
Stretch="Fill"
MouseEnter="javascript:ImageButtonEnter"
MouseLeave="javascript:ImageButtonLeave"
MouseLeftButtonDown='javascript:ImageButtonDown0'
>
<!--<cc:Replace Attribute="Canvas.Top">$Top$</cc:Replace>
<cc:Replace Attribute="x:Name">button$Counter$</cc:Replace>
<cc:Replace Attribute="MouseLeftButtonDown">
javascript:ImageButtonDown$Counter$</cc:Replace>-->
<Rectangle.Fill>
<ImageBrush ImageSource="images/JetSki.jpg" ></ImageBrush>
<!--<cc:Replace Attribute="ImageSource">$Images$
</cc:Replace>-->
</Rectangle.Fill>
</Rectangle>
</Canvas>
<!--<cc:Evaluate>Top = Top + 30;</cc:Evaluate>-->
<!--<cc:Evaluate>Counter = Counter + 1;</cc:Evaluate>-->
<!--<cc:RepeatEnd/>-->
CodeCreator will create the following code.
<Canvas>
<Rectangle x:Name="button0"
Width="120"
Height="75"
Canvas.Left="0"
Canvas.Top="0"
Stretch="Fill"
MouseEnter="javascript:ImageButtonEnter"
MouseLeave="javascript:ImageButtonLeave"
MouseLeftButtonDown="javascript:ImageButtonDown0"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle.Fill>
<ImageBrush ImageSource="images/cf18.jpg"></ImageBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
<Canvas>
<Rectangle x:Name="button1"
Width="120"
Height="75"
Canvas.Left="0"
Canvas.Top="30"
Stretch="Fill"
MouseEnter="javascript:ImageButtonEnter"
MouseLeave="javascript:ImageButtonLeave"
MouseLeftButtonDown="javascript:ImageButtonDown1"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle.Fill>
<ImageBrush ImageSource="images/jetski.jpg"></ImageBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
<Canvas>
<Rectangle x:Name="button2"
Width="120"
Height="75"
Canvas.Left="0"
Canvas.Top="60"
Stretch="Fill"
MouseEnter="javascript:ImageButtonEnter"
MouseLeave="javascript:ImageButtonLeave"
MouseLeftButtonDown="javascript:ImageButtonDown2"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle.Fill>
<ImageBrush ImageSource="images/soundbarrier.jpg"></ImageBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
The JavaScript code will also need to be created using simalar techniques. See the CodeCreator Blog posting for more information.
Demonstrated at Ottawa Demo Camp
Labels: SilverLight, WPF/E
Tuesday, February 27, 2007
WPF/E Controls (SilverLight Controls)
Lately we have looking at creating a better forms environment for our work with workflows and SharePoint. XML forms look interesting, but have a number of drawbacks. Recently we have been evaluating WPF/E for use as a Forms package base.
Here are some controls that we have created as part of a science project. The code is very crude, doesn't cover all the conditions, but you get the idea of how it can be done.
Short list of WPF/E (SilverLight) example controls.
ListBox - enhanced using a card shuffle style list. Shows some of the power WPF/E. Mouse over the thumbnails on the left to view animation.
ComboBox - Hard coded number of list items.
TextBox - Javascript code for this control only covers some of the conditions. Required is the ability to cut, paste, highlight and drag. In addition the cursor positioning (which is absolute and relative to the root canvas) needs to take into the account the scaling used, which could be difficult if this control is embedded in other controls each its own scaling factor.
The above controls are stand alone. For production they would need some sort of framework to work within (there are some examples at the Microsoft blog site).
Our conclusion (see foil) is to work with WPF/XBAP sacrificing some universality for speed of implementation. In the meantime we will continue look at putting together some controls and a framework as a continuation of this science project.
Here are some controls that we have created as part of a science project. The code is very crude, doesn't cover all the conditions, but you get the idea of how it can be done.
Short list of WPF/E (SilverLight) example controls.
ListBox - enhanced using a card shuffle style list. Shows some of the power WPF/E. Mouse over the thumbnails on the left to view animation.
ComboBox - Hard coded number of list items.
TextBox - Javascript code for this control only covers some of the conditions. Required is the ability to cut, paste, highlight and drag. In addition the cursor positioning (which is absolute and relative to the root canvas) needs to take into the account the scaling used, which could be difficult if this control is embedded in other controls each its own scaling factor.
The above controls are stand alone. For production they would need some sort of framework to work within (there are some examples at the Microsoft blog site).
Our conclusion (see foil) is to work with WPF/XBAP sacrificing some universality for speed of implementation. In the meantime we will continue look at putting together some controls and a framework as a continuation of this science project.
Labels: SilverLight, WPF/E
Subscribe to Posts [Atom]