Saturday, March 08, 2008

Silverlight – Lighting up the web!

“Microsoft Silverlight is a cross-browser, cross-platform, and cross-device plug-in for delivering the next generation of .NET based media experiences and rich interactive applications for the Web.

By using Expression Studio and Visual Studio, designers and developers can collaborate more effectively using the skills they have today to light up the Web of tomorrow.”

That’s the quote from Microsoft on www.silverlight.net about this new technology that takes the richness and power of WPF to the web world.

When I first learnt about Silverlight, the available version was 1.0 and was using Javascript as its coding language. After knowing that .NET support is on its way and getting chance to try my hands on the pre-release builds, I waited for version 2.0 to come. The beta version of Silverlight 2.0 was released last week.

Silverlight is a browser plug-in that allows the browser to use some of the user’s local computational horsepower. The plug-in has no external dependencies. For example, Mac users do not need Windows Media Player to play back WMV content. We are already familiar with plug-in technologies like Java Applets and Flash applications. But Silverlight brings all the power of WPF in animation, graphics, video, etc. And with version 2.0, the CLR (Common Language Runtime) is going cross platform and developers can use their favorite .NET language to write code that runs on the client from within a browser.

Wednesday, February 27, 2008

VS 2008 and Visio AddIn Deployment Issues

I stumbled across an issue when I was working on a Visio AddIn Project in Microsoft Visual Studio 2008. It is very easy to create an AddIn for Microsoft Office Applications like Visio using the project templates available in Visual Studio (File > New > Project > Visual C# > Office > Visio 2007 Add-in). It becomes little tougher when we need to deploy this AddIn especially if it has multiple projects and data files. I went for ClickOnce deployment as it was easier as right clicking on the project and choosing 'Publish'. My AddIn had to read a data file while loading.

While installing this application on a client machine using ClickOnce, it never ask you for an installation path and it copies the files into two different folders with random names! Mine looked like this:

C:\Users\Administrator\AppData\Local\Apps\2.0\CA5NQ9ZB.N44\E6TLT686.69V\visi..vsto_11aeaa34550a68ee_0001.0000_14f3717c0aa57ea0
C:\Users\Administrator\AppData\Local\Apps\2.0\CA5NQ9ZB.N44\E6TLT686.69V\visi...dll_11aeaa34550a68ee_0001.0000_none_47ef10bd354219e1

And the frustrating thing is that all dlls gets copied to the first folder and the data files to the other. So my application never found the file it needed to load and I had no idea on how to solve this as the folder names kept changing randomly with every new deployment. I think these are some caching locations and the application dlls were not available anywhere else. Do anybody know what is happening here and what is the solution?

Finally I made my Deployment work by making the data file as an embedded resource (Properties > Build Action) and reading the data as below:

Stream resourceStream = System.Reflection.Assembly.GetExecutingAssembly().GetManifestResourceStream(MyNamespace.MyClass.MyFile.xml");

TextReader tr = new StreamReader(resourceStream);

Thursday, February 21, 2008

WayFormat: Source Code Color Formatter

There are lots of tools and ways to color format source code snippets so that they appear on blog posts and sites as they do in Visual Studio or other source editing tools. One of them is available at http://www.manoli.net/csharpformat/ which nicely formats the code to colorful HTML. But I was looking for a small desktop application that we can take along to use offline. Thankfully Manoli has provided the source code on the website for anyone to make use of it.



So, I made a small utility and named it WayFormat (Yeah… you guessed it right, the ‘Way’ comes from ‘Coolwayfarer’!). This standalone windows client application color formats the source code snippets in C, C++, C#, HTML, ASP, ASPX, XML,XAML, JScript, Java Script, Visual Basic, VB.Net, SQL, TSQL, PL/SQL and MSH (code name Monad) to style sheet enabled HTML code for publishing on a web site or in a blog. The tool has option to display line numbers, provide alternate line background color, and embed CSS.


Here is a sample code snippet formatted using WayFormat. I have hosted the css file at http://sameerct.googlepages.com/csharp.css and added a link tag in the head section of my blogger template pointing to this style sheet.


/// <summary>
/// Provides an option to save the CSS file.
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void lnkCSS_LinkClicked(object sender, LinkLabelLinkClickedEventArgs e)
{
try
{
FileInfo fileCSS = new FileInfo("csharp.css");

SaveFileDialog dlgCSS = new SaveFileDialog();
dlgCSS.FileName = "csharp.css";
dlgCSS.Filter = "Cascading Style Sheet|*.css";
dlgCSS.AddExtension = true;
dlgCSS.DefaultExt = "*.css";

if (dlgCSS.ShowDialog() == DialogResult.OK) fileCSS.CopyTo(dlgCSS.FileName);
}
catch (Exception ex)
{
MessageBox.Show(ex.ToString());
}
}

I have made the source code open and is hosted at CodePlex at http://www.codeplex.com/wayformat so that it is available to anyone interested to add more features or use it along with other applications. Download the executable or source code from CodePlex and use CodePlex Discussion Forum and Issue Tracker to post your comments or report any bugs you may find.

And well, there is an easier way to color format source code without using any tools. Copy paste your source code from Visual Studio to Microsoft Word and the save the word document as html web page. Now copy the content from web page (not the source) and paste directly in the blog post editor. It will look as below:

FileInfo fileCSS = new FileInfo("csharp.css");

See that the system classes like FileInfo are color coded too. :)

Friday, January 25, 2008

Windows Presentation Foundation (WPF)

WPF or Windows Presentation Foundation is an exciting presentation technology from Microsoft shipped in the .NET Framework 3.0 Version along with other technologies called Windows Communication Foundation, Windows Workflow Foundation, and Windows CardSpace.

It has been in the air since long back and I always used to wonder why some critical business application would require such a flashy jazzy user interface technology. Now that I got a chance to work in WPF, I am slowly realizing its benefits and potential.

Earlier the applications were command prompt based. Then came the GUI (Graphical User Interface) revolution that introduced the end users to windows, buttons, drop downs and so forth. But after that, there has been nothing exciting in the user interface world for desktop applications, though the web went through a fabulous UX (User Experience) change. Windows Forms that appeared with .NET was just a better version of old GUIs.

Now there is WPF with an entirely new set of features and technologies that makes it possible to define the UX of desktop application user to a new level. Of course Windows Forms will continue to be in the field, especially for LOB (Line Of Business) applications, but WPF can be used to make compelling data visualizations for applications that require a pleasing user experience.

Developing stunning applications in WPF is much easier than we might think of. In earlier technologies audio, video, etc were islands in an application. With WPF, a single API can be used for all of this. A video can be part of an application just like a button or label.
For example the below code snippet creates a Windows Vista Style Button with content as a playing video.


<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Button Height="100" Width="200">
<Button.Content>
<MediaElement Source="C:\Users\Public\Videos\Sample Videos\Butterfly.wmv" />
</Button.Content>
</Button>
</Page>

The new XAML language helps in creating the UI layer keeping the business logic separately in the code behind files. With features like Templates, Styles, and Animations WPF is opening up a new arena where a normal developer can now create ‘cool’ apps!

Tuesday, January 15, 2008

Playing with XAML

Years back, when I saw HTML in action for the first time I was completely amazed. With just a Notepad and Browser I could do wonders! It was the same feeling I had when I saw XAML in action during the TechEd 2005 at Bangalore. One of the speakers opened up something called XAML Pad and then typed in few tags and voila… it immediately rendered the windows controls! I wanted to experiment XAML then but the heavy SDK downloads and Beta version issues kept me from it. Now my new job at IdentityMine gives me plenty chances to play with XAML.

XAML or eXtensible Application Markup Language is a new declarative programming language that can be used to define the UI elements for latest .NET technologies like WPF (Windows Presentation Foundation) and Silverlight. It helps to separate the design from code, in an ASP.NET passion where the UI can be defined in XAML and the business logic can be implemented through the attached code behind files. Designers can now use the new tool called Expression Blend to design user interfaces without writing any code and the generated XAML can be used in Visual Studio by a developer to implement its business logic.

XAML is so easy to use. It’s just some tags and their attributes. Below is a screen shot from Visual Studio 2008 where XAML code is shown at the bottom and the rendering is shown at the top.



As shown in the image, a button can be defined by Button tag as below:

<Button Content="Click Me" Height="50" Width="100" Click="Button_Click"/>

And in the code behind, we can write as below:

private void Button_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Clicked!");
}

On running this code, it produces a nice Vista style button as shown below:



Easy way to learn XAML is by playing with it. You can use Notepad to create a file with .xaml extension and make sure you include your XAML controls within the Page tags as shown below:

<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Button Content="Click Me" Height="50" Width="100"/>
</Grid>
</Page>

Open this *.xaml file in Internet Explorer 7.0 or Fire Fox 2.0 or higher to see it rendered.If you don’t have Visual Studio 2008 installed, try tools like XAML Pad that comes with the SDK. It works as an independent tool even if you don’t have the SDK installed. Download it from here (it’s just 316 KB) and make sure you have .NET Framework 3.0 or higher installed.If you like to have color coding and intellisense plus few more cool features, download Kaxaml from http://www.kaxaml.com/

Of course you won’t be able to wire up code using these tools, but you can experiment a lot with XAML creating all kinds of fancy UI elements.