In one of my recent Silverlight projects I had to use a ViewStack control. There is few of these already available here and there but I thought it might be fun to build new one from scratch. As image speaks more than words here is the sample.
Hope this helps anyone.
I’m sure everyone who’s interested in Flex Builder for Linux already knows that by following Twitter and Adobe JIRA. So what’s exactly happened? Today, just 5 days before Flex Builder alpha 4 was to expire Adobe released an alpha 5 update on labs.adobe.com which is going to expire in 401 days.
I have the gut feeling that Adobe is working on Flex Builder 4 for Linux but is not keen on sharing the info yet. Specially that there is an unofficial build available from here.
Good decision Adobe.
More information on current release here and here (release notes).
This week at PDC09 Microsoft unveiled latest Silverlight release – first beta of version 4. One of the new features is printing support. There is a great video introduction to printing published by Tim Heuer. It show the basics, after watching it my first question was how to print the data on multiple pages. Here is how I do it. This application is a cut down version of the app published by Tim on silverlight.net.
In this sample we are going to print list of people and display sample header showing page number and some random title. Let’s jump in.
Let’s start with XAML:
<UserControl x:Class="PrintingTest.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<data:DataGrid
ItemsSource="{Binding}"
Height="247" HorizontalAlignment="Left"
Margin="12,41,0,0" Name="dataGrid1"
VerticalAlignment="Top" Width="376" />
<Button
Content="Print data" Height="23"
HorizontalAlignment="Left" Margin="12,12,0,0"
Name="PrintDataBtn" VerticalAlignment="Top"
Width="126" Click="PrintDataBtn_Click" />
</Grid>
</UserControl>
Next is the Person class which is exactly the same as in the original video:
using System;
namespace PrintingTest
{
public class Person
{
public string FirstName { get; set; }
public string LastName { get; set; }
public int Age { get; set; }
public string FullName {
get {
return string.Concat(FirstName, " ", LastName);
}
}
}
}
And now the most important part – the code behind. The MainPage class wires up the Loaded event and when the app is loaded it populates the list of people as well as sets the DataContext on LayoutRoot.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Printing;
using System.Windows.Media;
namespace PrintingTest
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
Loaded += new RoutedEventHandler(MainPage_Loaded);
}
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
List<Person> people = new List<Person>();
for (int i = 0; i < 20; i++)
{
people.Add(new Person() { FirstName = "Al", LastName = "Pacino", Age = 69 });
people.Add(new Person() { FirstName = "Robert", LastName = "De Niro", Age = 66 });
people.Add(new Person() { FirstName = "Val", LastName = "Kilmer", Age = 50 });
people.Add(new Person() { FirstName = "John", LastName = "Voight", Age = 71 });
people.Add(new Person() { FirstName = "Tom", LastName = "Sizemore", Age = 48 });
}
LayoutRoot.DataContext = people;
}
private void PrintDataBtn_Click(object sender, RoutedEventArgs e)
{
// header height:
double headerHeight = 70.0;
// footer height:
double footerHeight = 30.0;
// single line height:
double tboxHeight = 20.0;
// how many elements can we place on one page?
int numElements = -1;
// current page number:
int page = 1;
// total number of pages to print:
int totalPages = 0;
// number of the current item:
int counter = 1;
PrintDocument doc = new PrintDocument();
doc.PrintPage += (s, args) =>
{
};
doc.Print();
}
}
}
The code below is responsible for printing and should be placed inside doc.PrintPage lambda. Let’s discuss what is going on there first.
When the application attempts to compose first page the number of elements per page and total number of pages is calculated. Next, the header is created. It is a Grid with two TextBlocks. First of the text blocks holds the title while the second one displays current and the total pages numbers; header is created separately for each page.
Once the header is constructed the dynamicPanel StackPanel is created and previously constructed headerGrid is added to its Children list. Next, we query dataGrid1.ItemsSource for the first of people to display on current page. We skip as many elements as we fitted on previous pages and take number of elements for the current one.
The penultimate step is enumerating over ppl list and for each one of them create a StackPanel with two TextBlocks. First displays the name of the person, second one the age. Finally we set HasMorePages.
HasMorePages is the key to multiple pages printing. As long as it is set to true Silverlight expects more pages to be printed. That’s why when the number of current page is equal to total number of pages we set it to false. At this point printing the document is finished.
Here is the code:
if (page == 1)
{
numElements = (int)((args.PrintableArea.Height - headerHeight - footerHeight) / tboxHeight);
double totalItems = (double)((List<Person>)dataGrid1.ItemsSource).Count;
totalPages = (int)Math.Ceiling(totalItems / (double)numElements);
}
Grid headerGrid = new Grid()
{
Width = args.PrintableArea.Width,
Height = headerHeight
};
headerGrid.RowDefinitions.Add(new RowDefinition());
headerGrid.ColumnDefinitions.Add(new ColumnDefinition());
headerGrid.ColumnDefinitions.Add(new ColumnDefinition());
TextBlock headerTitle = new TextBlock()
{
Text = "Contact list",
HorizontalAlignment = System.Windows.HorizontalAlignment.Left,
VerticalAlignment = System.Windows.VerticalAlignment.Center,
Margin = new Thickness(50,0,0,0),
FontSize = 20
};
TextBlock pageCounter = new TextBlock()
{
Text = string.Concat("Page ", page, " of ", totalPages),
HorizontalAlignment = System.Windows.HorizontalAlignment.Right,
VerticalAlignment = System.Windows.VerticalAlignment.Center,
Margin = new Thickness(0, 0, 50, 0)
};
headerGrid.Children.Add(headerTitle);
headerGrid.Children.Add(pageCounter);
Grid.SetColumn(headerTitle, 1);
Grid.SetColumn(pageCounter, 2);
StackPanel dynamicPanel = new StackPanel();
// add header to display list:
dynamicPanel.Children.Add(headerGrid);
IEnumerable<Person> ppl = ((List<Person>)dataGrid1.ItemsSource).Skip((page - 1) * numElements).Take(numElements);
foreach (Person p in ppl)
{
// create stack panel for each person:
StackPanel namePanel = new StackPanel();
namePanel.Orientation = Orientation.Horizontal;
TextBlock counterBlock = new TextBlock();
counterBlock.TextAlignment = TextAlignment.Right;
counterBlock.Margin = new Thickness(0, 0, 5, 0);
counterBlock.Text = string.Concat(counter, ".");
counterBlock.Height = tboxHeight;
counterBlock.Width = 50.0;
TextBlock nameBlock = new TextBlock();
nameBlock.Text = p.FullName;
nameBlock.Height = tboxHeight;
TextBlock ageBlock = new TextBlock();
ageBlock.Text = string.Concat("who is ", p.Age, " years old");
ageBlock.Foreground = new SolidColorBrush(Colors.Red);
ageBlock.Margin = new Thickness(5, 0, 0 , 0);
ageBlock.Height = tboxHeight;
namePanel.Children.Add(counterBlock);
namePanel.Children.Add(nameBlock);
namePanel.Children.Add(ageBlock);
dynamicPanel.Children.Add(namePanel);
counter++;
}
args.HasMorePages = !(page == totalPages);
args.PageVisual = dynamicPanel;
page++;
Full source code can be downloaded from here. You can test working example below, please make sure you use Silverlight 4 beta. It can be installed from this location.
It took me a while to figure out how to install Apple Built-in iSight driver so it could be used in Windows 7 x64 running inside VMWare Fusion. I have finally found a solution here.
Installing the drivers:
It will take a while so be patient. Once installed, restart Windows 7 and you are ready to go.
To connect Apple Built-in iSight:
Don’t forget to enable USB sharing.
For a long time my "browser of choice" was Firefox because of fantastic Flashblock add-in. Today I found out that there is similar add-in for Safari called ClickToFlash. Here is a nice article describing what it can do and here is the link to a github project. Pefect!
Following on a tweet from Sean Corfield, I couldn’t believe it is possible to create a function called if, else, while and so on as well as declare variable called var. Here is the code that may hurt your head:
<cffunction name="if"> <cfargument name="val1" /> <cfargument name="val2" /> <cfif val1 eq val2> <cfreturn true /> </cfif> <cfreturn false /> </cffunction> <cffunction name="hello"> <cfset var var = 2 /> <cfreturn var /> </cffunction> <cfif if( hello(), 2 )> LOL </cfif>
How cool is that ;)
For myself, for future reference:
// ==UserScript==
// @name Expert blocker
// @namespace my
// @description Eliminate Experts Exchange results from Google searches.
// @include http://*.google.com/search?*
// @include http://*.google.co.uk/search?*
// ==/UserScript==
var results = document.getElementsByTagName("a");
for ( var i=0; i<results.length; i++ ) {
if (
results[i].href.indexOf("http:/ /www.experts-exchange.com") == 0
|| results[i].href.indexOf("http:/ /swik.net") == 0 ) {
results[i].parentNode.parentNode.style.display = "none";
}
}
Before using, in the URLs replace http:/ / with http://.
I’m using Flex with ColdFusion for a long time now but sometimes I really can’t stand these two products together. I’m sending nested CFCs through the remote object back to Flex so ColdFusion has to serialize them to the form that may be understood by Flex. But I’ve got an error, somewhere I have an empty string where number is expected. You would expect that CF is smart enough to tell you what the problem is? Nope, it says:
Unable to invoke CFC - The value '' cannot be converted to a number.
And here is the stack trace:
[0] "coldfusion.runtime.Cast._double(Cast.java:652)"
[1] "coldfusion.runtime.Cast._double(Cast.java:632)"
[2] "coldfusion.runtime.Cast._double(Cast.java:786)"
[3] "coldfusion.flash.messaging.io.amf.Translator.CFASSerializer.translate(CFASSerializer.java:545)"
[4] "coldfusion.flash.messaging.io.amf.Translator.CFASSerializer.translate(CFASSerializer.java:494)"
[5] "coldfusion.flash.messaging.io.amf.Translator.CFASSerializer.translate(CFASSerializer.java:387)"
[6] "coldfusion.flash.messaging.io.amf.Translator.CFASSerializer.translate(CFASSerializer.java:81)"
[7] "coldfusion.flash.messaging.io.amf.Translator.CFASSerializer.translate(CFASSerializer.java:512)"
[8] "coldfusion.flash.messaging.io.amf.Translator.CFASSerializer.translate(CFASSerializer.java:494)"
[9] "coldfusion.flash.filter.CFCInvokeFilter.invoke(CFCInvokeFilter.java:160)"
[10] "coldfusion.filter.ApplicationFilter.invoke(ApplicationFilter.java:279)"
[11] "coldfusion.filter.MonitoringFilter.invoke(MonitoringFilter.java:40)"
[12] "coldfusion.flash.filter.CFCInvokeDebugFilter.invoke(CFCInvokeDebugFilter.java:54)"
[13] "coldfusion.flash.filter.CFCInvokePathFilter.invoke(CFCInvokePathFilter.java:70)"
[14] "coldfusion.filter.ClientScopePersistenceFilter.invoke(ClientScopePersistenceFilter.java:28)"
[15] "coldfusion.filter.GlobalsFilter.invoke(GlobalsFilter.java:38)"
[16] "coldfusion.filter.DatasourceFilter.invoke(DatasourceFilter.java:22)"
[17] "coldfusion.flash.messaging.ColdFusionAdapter.invoke(ColdFusionAdapter.java:223)"
[18] "flex.messaging.services.RemotingService.serviceMessage(RemotingService.java:173)"
[19] "flex.messaging.MessageBroker.routeMessageToService(MessageBroker.java:1165)"
[20] "flex.messaging.endpoints.AbstractEndpoint.serviceMessage(AbstractEndpoint.java:757)"
[21] "flex.messaging.endpoints.amf.MessageBrokerFilter.invoke(MessageBrokerFilter.java:117)"
[22] "flex.messaging.endpoints.amf.LegacyFilter.invoke(LegacyFilter.java:158)"
[23] "flex.messaging.endpoints.amf.SessionFilter.invoke(SessionFilter.java:48)"
[24] "flex.messaging.endpoints.amf.BatchProcessFilter.invoke(BatchProcessFilter.java:67)"
[25] "flex.messaging.endpoints.amf.SerializationFilter.invoke(SerializationFilter.java:145)"
[26] "flex.messaging.endpoints.AMFEndpoint.service(AMFEndpoint.java:122)"
[27] "flex.messaging.MessageBrokerServlet.service(MessageBrokerServlet.java:438)"
[28] "coldfusion.flex.ColdFusionMessageBrokerServlet.service(ColdFusionMessageBrokerServlet.java:50)"
[29] "javax.servlet.http.HttpServlet.service(HttpServlet.java:853)"
[30] "coldfusion.bootstrap.BootstrapServlet.service(BootstrapServlet.java:89)"
[31] "jrun.servlet.FilterChain.doFilter(FilterChain.java:86)"
[32] "coldfusion.filter.FlashRequestControlFilter.doFilter(FlashRequestControlFilter.java:71)"
[33] "coldfusion.bootstrap.BootstrapFilter.doFilter(BootstrapFilter.java:46)"
[34] "jrun.servlet.FilterChain.doFilter(FilterChain.java:94)"
[35] "jrun.servlet.FilterChain.service(FilterChain.java:101)"
[36] "jrun.servlet.ServletInvoker.invoke(ServletInvoker.java:106)"
[37] "jrun.servlet.JRunInvokerChain.invokeNext(JRunInvokerChain.java:42)"
[38] "jrun.servlet.JRunRequestDispatcher.invoke(JRunRequestDispatcher.java:286)"
[39] "jrun.servlet.ServletEngineService.dispatch(ServletEngineService.java:543)"
[40] "jrun.servlet.jrpp.JRunProxyService.invokeRunnable(JRunProxyService.java:203)"
[41] "jrunx.scheduler.ThreadPool$DownstreamMetrics.invokeRunnable(ThreadPool.java:320)"
[42] "jrunx.scheduler.ThreadPool$ThreadThrottle.invokeRunnable(ThreadPool.java:428)"
[43] "jrunx.scheduler.ThreadPool$UpstreamMetrics.invokeRunnable(ThreadPool.java:266)"
[44] "jrunx.scheduler.WorkerThread.run(WorkerThread.java:66)"
Helpful, heh?
Why, WHY! it does not say what property is causing the problem? Surely it knows, it just keeps it for itself. Adobe – please fix!
Today, while working on a small piece of code I discovered something that appears to be a DateFormatter bug. I was using following DateFormatter:
private var formatter:DateFormatter = new DateFormatter(); ... formatter.formatString = "MMMM";
to display just the month names. I didn’t really care about the year when constructing new Date so I thought I would pick 1970. It appears that for January 1970 the DateFormatter returns an empty string while for 1969, 1971 and any other dates it works fine. Here is the demo.
And the source code below.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.formatters.DateFormatter;
[Bindable] private var names:String = "";
private var formatter:DateFormatter = new DateFormatter();
private function listMonths(year:Number):void {
// get just the month name:
formatter.formatString = "MMMM";
// create dates and get formatted values:
var values:Array = [];
for ( var i:Number=0; i<12; i++ ) {
values.push( formatter.format( new Date(year, i, 1) ) );
}
names = values.join(String.fromCharCode(13));
}
]]>
</mx:Script>
<mx:HBox>
<mx:Button label="1969" click="listMonths(1969);" />
<mx:Button label="1970" click="listMonths(1970);" />
<mx:Button label="1971" click="listMonths(1971);" />
</mx:HBox>
<mx:TextArea width="300" height="200" text="{names}" />
</mx:Application>
It appears that the bug was logged quite a few times, just one of the tickets I’ve found: https://bugs.adobe.com/jira/browse/SDK-14528. It also appears that it won’t be fixed. According to the comments under the linked story DateFormatter class is not an Adobe code. Interesting…
There was an interesting question on stackoverflow.com today. Some unnamed user asked:
Can we change the width of the datagrid column dynamically by clicking on the border of the column in order to display the complete string which is too long to be displayed and needs to be scrolled ? If so, How ?
Also, how can we ensure that the column width changes dynamically based on the number of characters / length of string; since many a times the data is too long to be displayed. Can we set the column width to take the length of data into consideration before displaying onto the datagrid ?
It looked like a cool practice so I thought I would give it a go. This is what I came up, it doesn’t resize columns on double click but rather automatically when data provider is set/updated.
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="onComplete();">
<mx:Script>
<![CDATA[
// imports:
import mx.events.FlexEvent;
import mx.core.UIComponent;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.controls.Text;
import mx.utils.ObjectUtil;
import mx.controls.Label;
import mx.collections.ArrayCollection;
// data provider:
[Bindable] private var dp:ArrayCollection = new ArrayCollection();
private function onComplete():void {
// populate data provider here
// to avoid calcMaxLengths execution when the app is created:
dp = new ArrayCollection(
[
{ col1: "Short", col2: "Other column 1" },
{ col1: "Some long string", col2: "Other column 2" },
{ col1: "Short", col2: "Other column 3" },
{ col1: "Short", col2: "Other column 4" },
{ col1: "The longest value in this column", col2: "Other column 5" },
{ col1: "Short", col2: "Other column 6" },
{ col1: "Short", col2: "Other column 7" }
]
);
}
// this is going to be executed whenever the data provider changes:
[Bindable("dataChange")]
private function calcMaxLengths(input:ArrayCollection):ArrayCollection {
// if there are items in the DP:
if ( input.length > 0 ) {
// and no SPECIAL child exists:
if ( getChildByName("$someTempUICToRemoveAfterFinished") == null ) {
// create new SPECIAL child
// this is required to call measureText
// if you use custom data grid item renderer
// then create instance of it instead of UIComponent:
var uic:UIComponent = new UIComponent();
// do not show and do not mess with the sizes:
uic.includeInLayout = false;
uic.visible = false;
// name it to leverage get getChildByName method:
uic.name = "$someTempUICToRemoveAfterFinished";
// add event listener:
uic.addEventListener(FlexEvent.CREATION_COMPLETE, onTempUICCreated);
// add to parent:
addChild(uic);
}
}
// return an input:
return input;
}
// called when SPECIAL child is created:
private function onTempUICCreated(event:FlexEvent):void {
// keep the ref to the SPECIAL child:
var renderer:UIComponent = UIComponent(event.target);
// output - this will contain max size for each column:
var maxLengths:Object = {};
// temp variables:
var key:String = "";
var i:int=0;
// for each item in the DP:
for ( i=0; i<dp.length; i++ ) {
var o:Object = dp.getItemAt(i);
// for each key in the DP row:
for ( key in o ) {
// if the output doesn't have current key yet create it and set to 0:
if ( !maxLengths.hasOwnProperty(key) ) {
maxLengths[key] = 0;
}
// check if it's simple object (may cause unexpected issues for Boolean):
if ( ObjectUtil.isSimple(o[key]) ) {
// measure the text:
var cellMetrics:TextLineMetrics = renderer.measureText(o[key]+"");
// and if the width is greater than longest found up to now:
if ( cellMetrics.width > maxLengths[key] ) {
// set it as the longest one:
maxLengths[key] = cellMetrics.width;
}
}
}
}
// apply column sizes:
for ( key in maxLengths ) {
for ( i=0; i<dg.columnCount; i++ ) {
// if the column actually exists:
if ( DataGridColumn(dg.columns[i]).dataField == key ) {
// set size + some constant margin
DataGridColumn(dg.columns[i]).width = Number(maxLengths[key]) + 12;
}
}
}
// cleanup:
removeChild(getChildByName("$someTempUICToRemoveAfterFinished"));
}
]]>
</mx:Script>
<mx:DataGrid id="dg" horizontalScrollPolicy="on" dataProvider="{calcMaxLengths(dp)}" width="400">
<mx:columns>
<mx:DataGridColumn dataField="col1" width="40" />
<mx:DataGridColumn dataField="col2" width="100" />
</mx:columns>
</mx:DataGrid>
</mx:WindowedApplication>
Sample:
This code works just fine however it may be not efficient enough when applied to large data providers.
Source code is also available on stackoverflow.com under the original entry.