Tuesday, March 31, 2009

Your Chance to Become Microsoft Most Valuable Professional [Microsoft MVP]

Nominate yourself today for this quarter’s MVP Award.

DesktopMVP

Are You Ready to become MVP?? …

Nominate Yourself for MVP Award Today !!!

Hurry up !! Last date to send nominations is :

 18th April 2009.

Vikram.

Friday, March 27, 2009

Silverlight 3 : Master Pages implementation with Navigation Framework – Part 4

First of all, I wish “Happy New Year” to all my blog readers from India on occasion of “Gudhipadwa-Hindu New Year Day”.

After Introductory articles on Silverlight 3 which you can see as Part1, Part2 and Part3. Now I am going for Part 4.

Few months back I wrote an article on Implementing Master pages in Silverlight 2 , and I got very good response and feedback from all of you, that time I made use of Stack Panel and some small code logic which instructs to load different content dynamically. With Silverlight 2, unfortunately we had no navigation support or framework as such, and we use to do it with such small tricks and workaround.

Let me now make you aware of Navigation Framework in Silverlight 3 with which I am going to rebuild my Master Pages application in Silverlight 3 which I had developed in Silverlight 2. For this, I am making use of some code methodology and concepts shown in screencast by Tim Heuer in his screencast. Using that I am going to build the new code for Master Page implementation with some tweaks in UI Code which I build in past for the same.

Firstly, Create a new Silverlight Project and set reference to following :

  • System.Windows.Controls
  • System.Windows.Controls.Navigation

There is one “Silverlight Navigation Application” template also, but I am not going to talk about it right now, but surely I am going to touch upon that soon.

Well, Most of the XAML code of my last Master Page article I am keeping the same, with new minor changes, new code is :

<Grid x:Name="LayoutRoot" Background="AliceBlue">

<HyperlinkButton x:Name="btnBlog" Click="Redirect_Click" Tag="/Content/Blog.xaml" Height="22" Width="67" Content="Blog" Margin="161.5,36,171.5,0" VerticalAlignment="Top" />
<HyperlinkButton x:Name="btnRSS" Click="Redirect_Click" Tag="/Content/RSS.xaml" Height="22" Width="67" Content="RSS" HorizontalAlignment="Left" Margin="94,36,0,0" VerticalAlignment="Top"/>
<HyperlinkButton x:Name="btnHome" Click="Redirect_Click" Tag="/Content/Home.xaml" Height="22" Width="67" Content="Home" HorizontalAlignment="Left" Margin="27,36,0,0" VerticalAlignment="Top"/>
<HyperlinkButton x:Name="btnDownload" Click="Redirect_Click" Tag="/Content/Download.xaml" Height="22" Width="67" Content="Download" Margin="0,36,104,0" VerticalAlignment="Top" HorizontalAlignment="Right"/>
<HyperlinkButton x:Name="btnAboutUs" Click="Redirect_Click" Tag="/Content/AboutUs.xaml" Height="22" Width="67" Content="About Us" Margin="0,36,20,0" VerticalAlignment="Top" HorizontalAlignment="Right"/>

<TextBlock Height="23" Margin="94,8,116,0" VerticalAlignment="Top" Text="Explore .NET with Vikram Pendse" TextWrapping="Wrap" Foreground="#FF000000"/>
<StackPanel x:Name="stk" Width="400" Margin="0,66,0,30">
<navigate:Frame x:Name="MainMaster"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"/>
</StackPanel>

<TextBlock Height="23" Margin="106,0,104,3" VerticalAlignment="Bottom" Text="Microsoft .NET for everyone!!" TextWrapping="Wrap" Foreground="#FF000000"/>
</Grid>

One thing you must have notice that, Instead of Buttons in old code, now I am making use of Hyperlink button to give exact feel of navigation.Observe carefully that to send request to particular page, you need to set “Tag” property as path or url to the target page. I have added few pages as per requirement in a separate folder Content in my project. To add Separate page, you can do so by right clicking on Silverlight project, then Add New Item, there you will find a separate template for user control and separate template for page, like this :

slmp4
Now understand C# Code :
using System;
using System.Windows;
using System.Windows.Controls;

namespace SL_NavigationDemo
{

public partial class MainPage : UserControl
{

public MainPage()
{
InitializeComponent();
}

private void Redirect_Click(object sender, RoutedEventArgs e)

{
HyperlinkButton hybtn = sender as HyperlinkButton;

string refurl = hybtn.Tag.ToString();

this.MainMaster.Navigate(new Uri(refurl, UriKind.Relative));

}

}

}

The Redirect_Click event we have already associated with each HyperlinkButton Click in xaml code, Here we are just casting it and passing the “Tag” to Navigate() which is method provided by Silverlight 3 Navigation Framework which accepts Relative URL and redirects to the corresponding page. That’s all you need to do in this to implement Master pages kind of functionality.If you are planning to make some default page while navigation, you need to set “Source” property of Navigate tag, Navigate Tag provides two options by default, one is “Frame” and another one is “Page”. If you run the application, you can see change in URL, previously in Silverlight 2 and below versions, it was not showing anything besides “aspx” or “html” in address bar, but now from Silverlight 3 we have navigation support across pages, URLs look like following :


slmp2

It shows something..aspx#/Content/Blog.xaml, so it shows which XAML page which you are accessing currently, Also make a point that Browser’s Title is not set automatically, It has been set through individual page, let me drop few lines of XAML of Blogs.xaml page, so that you can get some idea.

<navigation:Page x:Class="SL_NavigationDemo.Content.Blog" xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" Title="Blog Page">
    <Grid x:Name="LayoutRoot" Background="White">
<TextBlock Text="You are on Blog Page" FontSize="20"/>
</Grid>
</navigation:Page>

Observe carefully now, Its now no longer <navigate:Frame> but its <navigate:Page>, This will render inside frame which we have on MainPage.xaml, “Title” attribute helps to set-reset Title of page, This is just like <title> tag in HTML. Inside grid we can put whatever we want to. Each separate XAML Page will act as content page in our Master page implementation scenario.

Now, some of you may raise your eye,since URL is getting expose directly in address bar. so there are few things which if we implement, we can hide that exposing address. What we need to do is set those Tag urls under App.xaml as global resource like this :

<Application.Resources>

<navigate:UriMapper x:Key="uriMapper">

<navigate:UriMapping Uri="Home" MappedUri="/Content/Home.xaml"/>

<navigate:UriMapping Uri="Blog" MappedUri="/Content/Blog.xaml"/>

<navigate:UriMapping Uri="RSS" MappedUri="/Content/RSS.xaml"/>

<navigate:UriMapping Uri="Download" MappedUri="/Content/Download.xaml"/>

<navigate:UriMapping Uri="AboutUs" MappedUri="/Content/AboutUs.xaml"/>

</navigate:UriMapper>

</Application.Resources>




UriMapper will help us to set the URL which we are targeting and MappedUri can be set with the target URL, make note that whatever “Uri” we setting here, same content to be set in place of “Tag” attribute of HyperlinkButton, else application will throw runtime exception. So finally MainPage.xaml’s HyperlinkButton block will look like this :



<HyperlinkButton Click="Redirect_Click" Tag="Blog" Height="22" Width="67" Content="Blog" Margin="161.5,36,171.5,0" VerticalAlignment="Top" />

<HyperlinkButton Click="Redirect_Click" Tag="RSS" Height="22" Width="67" Content="RSS" HorizontalAlignment="Left" Margin="94,36,0,0" VerticalAlignment="Top"/>


<HyperlinkButton Click="Redirect_Click" Tag="Home" Height="22" Width="67" Content="Home" HorizontalAlignment="Left" Margin="27,36,0,0" VerticalAlignment="Top"/>


<HyperlinkButton Click="Redirect_Click" Tag="Download" Height="22" Width="67" Content="Download" Margin="0,36,104,0" VerticalAlignment="Top" HorizontalAlignment="Right"/>


<HyperlinkButton Click="Redirect_Click" Tag="AboutUs" Height="22" Width="67" Content="About Us" Margin="0,36,20,0" VerticalAlignment="Top" HorizontalAlignment="Right"/>



So now URL will look like :

slmp3

And final Output will look like :

slmp1

Hope this example have given you some good introduction of Navigation Framework in Silverlight 3 Beta. I know, something you might be expecting more from me, well as I told in my previous articles, This is just lap around, So I am surely covering each of these features in great details in coming days. Also soon I will be sharing “Deep Linking” with you.Meanwhile I am really looking ahead for your feedback and suggestions,so keep visiting here for more stuff on Silverlight 3.

Vikram.

Tuesday, March 24, 2009

Silverlight 3 : DataForm control features – Part 3

I am now going to talk a bit on DataForm control, I have already two articles on Silverlight 3 which was Lap around Silverlight 3 and Features of Blend 3.

From Silverlight 2, there were several discussions going on about Building “Line Of Business” application using Silverlight technology, I guess Controls like DataForm, DataPager etc. are the next step towards the vision of LOB applications using Silverlight 3 , since we already have excellent support of WCF,REST and rich controls.

DataForm basically will let you to push data from UI for processing, It will also enable to Enter data, provides UI to edit the existing data, We can also customize it to great extent and it also provides good validation support. Now lets discuss it step-by-step :

First you need to create blank Silverlight Project, then you need to add reference to following :

  • System.ComponentModel
  • System.ComponentModel.DataAnnotations
  • System.Windows.Controls.Data
  • System.Windows.Controls.Data.DataForm

There are two ways by which you can bind DataForm, Either by creating a resource to current User Control with set of properties in class or by creating Observable Collection. I am basically using both the approaches, but main focus is on building resource, check this code ,Here I have created a separate class file in which I am declaring some public fields like this :

public class sigheads
   {
       public string FirstName { get; set; }
       public string LastName { get; set; }
       public string Email { get; set; }
       public int Age { get; set; }
       public string SIG { get; set; }
   }

<UserControl.Resources>
        <sig:sigheads FirstName="Vikram"
                      LastName="Pendse"
                      Email="vikram.pendse@puneusergroup.org"
                      Age="27"
                      SIG="Silverlight"
                      x:Key="mySIG"/>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <mydf:DataForm CurrentItem="{StaticResource mySIG}"
                       Header="SEED Infotech Ltd .NET Center of Excellence"
                       Background="#FFEFDCDC"
                       FieldLabelPosition="Auto">
         <mydf:DataForm.Effect>
                <DropShadowEffect/>
         </mydf:DataForm.Effect>
    </mydf:DataForm></Grid>

Before this XAML Code, you need to add following lines to your main User Control :

xmlns:mydf="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.DataForm"     
xmlns:sig="clr-namespace:SL_DataForm"

First xml namespace will allow you to have DataForm Control on your layout and second namespace sets a reference to the class [Project itself ] where we have declare those public fields like FirstName,Age,Mail etc.

1.Binding attribute with various modes :

Look at following Code :

[Bindable(true, BindingDirection.TwoWay)]
   public class sigheads
   {
       [Bindable(true, BindingDirection.TwoWay)]
       public string FirstName { get; set; }
       [Bindable(true, BindingDirection.OneWay)]
       public string LastName { get; set; }
       [Bindable(false)]
       public string Email { get; set; }
       [Bindable(true, BindingDirection.TwoWay)]
       public int Age { get; set; }
       [Bindable(true, BindingDirection.OneWay)]
       public string SIG { get; set; }
   }

Look carefully at top level attribute :

[Bindable(true, BindingDirection.TwoWay)] ,If we put “false” in place to “true”, data will not get bind to DataForm. BindingDirection basically provides you two modes “OneWay” and “TwoWay” ,Normally if binding direction is one way then the fields are read-only.

dfbinding

You can see some shadow kind of effect to DataForm, this is because if you observe the XAML above carefully, you can find I have applied DropShadow Effect. Observe screenshot above carefully, you will find some Pencil like symbol on rightmost top corner, that will allow you to change mode of DataForm to Edit mode, once you click on that, Fields will be in edit mode (Provided you have mentioned binding direction in two way) and you will get Save button too like shown below :

dfieditable

2. Implementing IEditableObject Interface :

To have more flexibility in operations like Edit,Save etc, Class can now implement interface IEditableObject which implements 3 methods as BeginEdit(),CancelEdit(),EndEdit(), Inside which you can implement your own logic.

public class sigheads : IEditableObject
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Email { get; set; }
    public int Age { get; set; }
    public string SIG { get; set; }

    #region IEditableObject Members

    public void BeginEdit()
    {
        //Logic while Record is about to getting edited
    }

    public void CancelEdit()
    {
        //Logic on Cancelling Edit
    }

    public void EndEdit()
    {
        //Logic on Ending Edit
    }

    #endregion
}

dfcodeIeditable

3 . Working with “Display” Attribute :

Consider the code below :

public class sigheads
    {
        [Display(Name = "First Name :", Description = "Enter Your First Name", Order = 5)]
        public string FirstName { get; set; }
        [Display(Name = "Last Name :", Description = "Enter Your Last Name", Order = 4)]
        public string LastName { get; set; }
        [Display(Name = "E-mail ID :", Description = "Enter Your E-Mail ID", Order = 3)]
        public string Email { get; set; }
        [Display(Name = "Age :", Description = "Enter Your Age", Order = 2)]
        public int Age { get; set; }
        [Display(Name = "SIG of :", Description = "Enter Your SIG Name", Order = 1)]
        public string SIG { get; set; }
    }

Display attributes basically use to change Label heading of fields and their order in list of fields, so you can set priority in your fields by Order attribute, Description attribute gives you more information about the field by displaying a tool-tip message on a information button created next to the field by same attribute, like this, there are several more attributes like AutoGenerateField,AutoGenerateFilter,Description,Name ,Order,Prompt,ResourceType,ShortName. Each one have their own implementation.

dfdisplayinfo

4. Validations :

You can provide Validations to your fields while entering data like this :

public class sigheads
    {
        [Display(Name = "First Name :", Description = "Enter Your First Name")]
        [Required(ErrorMessage = "Field Cannot be left Blank")]
        public string FirstName { get; set; }

        [Display(Name = "Last Name :", Description = "Enter Your Last Name")]
        public string LastName { get; set; }

        [Display(Name = "E-mail ID :", Description = "Enter Your E-Mail ID")]
        [RegularExpression(@"\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*", ErrorMessage = "Invalid E-Mail ID")]
        public string Email { get; set; }

        [Display(Name = "Age :", Description = "Enter Your Age")]
        [Range(0, 999, ErrorMessage = "Invalid Age")]
        public int Age { get; set; }

        [Display(Name = "SIG of :", Description = "Enter Your SIG Name")]
        public string SIG { get; set; }
    }

Attributes like [Required(ErrorMessage = "Field Cannot be left Blank")] makes your field as “Compulsory Field”

Attributes like [RegularExpression(@"\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*", ErrorMessage = "Invalid E-Mail ID")] allows you to put your own Regular Expressions to validate data.

Those who have worked with Dynamic Data and had customized it, they may find this similar to the way they add custom validations and fields there.

On error, Data Form make the particular field highlighted in Red and also shows the summary of error in Error Summary below the DataForm Control.

dlvalidation

dlvalidglow

  5. Showing Multiple Records :

Below screen shows how you get Pager control to navigate among records, I added multiple records using observable collection, I am not giving code of that since its very basic.

dfpager

Hope, this will encourage you to go ahead and start using DataForm in your Silverlight Project. Soon I am going for few new things like Navigation, Pixel Shading and effects with SlSvcUtil and Silverlight 3 Out of Browser applications, so more things are coming soon, keep visiting here and let me know your feedback.

Vikram.

Friday, March 20, 2009

Silverlight 3 : Explore Power of Blend 3 Preview – Part 2

Yesterday we started our journey towards Silverlight 3, now lets hit another milestone in this by learning new stuff about Blend 3 and lets discuss, how Blend 3 will improve things around, especially for designers with less pain, so do more and work less kind of thing.

This is my second part of the lap around article on Silverlight 3 and offcourse I will continue to cover all new stuff about Silverlight 3, I have already given all links to download it, you can now Download Blend 3 Preview. Its again a very smooth installation and offcourse like Silverlight 2 & 3, Small conclusion by me again : Blend 2 and 3 Preview going parallel.

blend1

As I said, you can find both version together, so now lets start with Blend 3 Preview :

blend2

Turn on AutoHide :

I know, this feature was much awaited and big smile on my face, wish same with you, We all know that in Blend 2 dragging those windows was nightmare and even they use to get lost sometime and was very irritating, but now Thanks to Microsoft and Expression Team for adding AutoHide feature [Check Red marked area in snapshot below], so like Visual Studio, now you can put on and off those windows very smoothly.

blend3

Effects :

I just dragged a ComboBox on canvas to check out various effect, so I went to Asset Library [Looks much fast and improved to me], you will find “Effect” tab, click on that, you will find default two effects as “BlurEffect” and “DropShadowEffect”. You need Drag-Drop those effects from Asset Library onto the control which you want to apply those effect.

blend4

You can see how it applies those effects to controls [ I marked them in Red,check left part of snapshot above], You can see  first normal simple combo without any effect and DropShadow effect to second combobox and Blur effect to third. This is how it has been made easy by few clicks.

Projection :

In my last article, I have discuss many things about Plane Projection and Projection overall, so just have a look at screen shot how it can be done using Blend 3 , for rest of information with code, check my previous article.

blend5

blend6

Import Adobe Photoshop and Illustrator File:

Do I need to talk about this?? :) *.psd and *.ai file format are now joining the party !!

blend7

XAML Intellisense and much more :

Now Blend 3 supports XAML Intellisense which is very good news for developers, and also now it comes with built in source control, I like the Intellisense feature a lot.

blend8

Data :

It is always a difficult job for designers and developers to get visuals of application which have some data, so generally each and everything in such cases depends upon prototype, what we consultants call it as POCs, well to have that feel of data, you have a “Data” tab introduce, where you can put some sample test data or even your live data so as to get visualization of application once it get bind with actual data. You drag that sample collection and it will automatically generates listbox type of controls for you. This is bit complicated to explain in one go especially for my designer friends,so I will talk in more details about this features in my upcoming articles.

blend9

Thumbnail Preview :

Now Blend 3 provides you a small thumbnail preview of Images which you have added inside your project, like this :

blend10

So this was all about the small lap around of Blend 3 Preview, I hope the input I given you here will be useful for you to start looking into Blend 3. I have purposefully skipped Animation and Data part for the moment for not to make it complex for new ones, but I will surely talking about it in coming days, well I will keep this series buzzing and in next part, i.e Part 3, I am planning to talk about some other cool features of Silverlight 3. So keep visiting here for more stuff on Silverlight 3.

Vikram.

Thursday, March 19, 2009

Silverlight 3 : Lap around Silverlight 3 Beta 1 : Part -1

You must have seen my yesterday’s article about Silverlight 3, Now from today I am going to explore more on Silverlight 3, offcourse as and when required I may still blog on Silverlight 2 since it might take some time to move you directly on Silverlight 3.

Silverlight 3 Beta 1 SDK, Runtime and Tools for Visual Studio installation is very smooth, While installation, it does not ask me to uninstall my Silverlight 2, Small Conclusion I drawn : Silverlight 2 and 3 Beta 1 right now going parallel. I am looking into Architectural part and covered most of the Silverlight CoreCLR architecture in my last article, For Silverlight 3 Beta 1 I found some new things :

sllauncher.exe at Program Files\Microsoft Silverlight\3.0.40307.0 and SlSvcUtil.exe at Program Files\Microsoft SDKs\Silverlight\v3.0\Tools , I will talk about these in more details in my upcoming articles. One thing to note, Silverlight 3 Beta 1 and Blend 2 not going hand in hand, When I tried so, it shown me “Invalid XAML”.

Once you installed all Silverlight 3 Beta 1 components successfully, You can now start programming it in Visual Studio.

NewProjectSL3

“Silverlight Navigation Application” is new template you can see. Some controls you will also find new, check this out :

SL3Controls 

So, many more things to talk about..so I will cover all stuff part by part so you can learn->Implement->Enjoy !! Silverlight 3 exprience. So to start with some Practical thing I am touching the new 3D support aspect of Silverlight 3.

3D in Silverlight 3 Beta 1 :

Tools Require :

  • Silverlight 3 Beta 1 SDK
  • Silverlight 3 Beta 1 Tools for Visual Studio 2008 [Offcourse with SP of VS and .NET 3.5 Framework]

Step 1 : Open Visual Studio 2008, go to File->New->Project and then choose Silverlight Application

Step 2 : Let me first tell you, there is nothing like 3D control etc., 3D in silverlight is mainly achieve by “Plane Projection” class under System.Windows.Media namespace. [ System.Windows.dll Assembly and there is no mapped XMLNS for xaml ]

Xaml :

<Grid x:Name="LayoutRoot" Background="White">
       <StackPanel Height="200" Width="300" Background="IndianRed" x:Name="MyStack">
           <StackPanel.Projection>
               <PlaneProjection
                   RotationX="0"
                   RotationY="0"
                   RotationZ="0"
                   />
           </StackPanel.Projection>
           <MediaElement Source="Bear.wmv" Height="200" Width="200" />
       </StackPanel>
       <StackPanel Margin="10,40,0,0">
           <TextBlock Margin="230,0,0,0">X:</TextBlock>
           <Slider Margin="10,-20,0,0" x:Name="Slider1" Maximum="360" Minimum="-360" Width="300"  ValueChanged="Slider1_ValueChanged"/>
           <TextBlock Margin="230,10,0,-15">Y:</TextBlock>
           <Slider Margin="10,-5,0,10" x:Name="Slider2" Maximum="360" Minimum="-360" Width="300" ValueChanged="Slider2_ValueChanged" />
           <TextBlock Margin="230,0,10,0">Z:</TextBlock>
           <Slider Margin="10,-20,0,0" x:Name="Slider3" Maximum="360" Minimum="-360" Width="300" ValueChanged="Slider3_ValueChanged"/>
       </StackPanel>
   </Grid>

*Note : In Silverlight 3 Beta 1, you will find Page.xaml now as “MainPage.xaml” with corresponding code behind file. Rest all looks same as it was in Silverlight 2.

C# Code :

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace SL_3D_Demo
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();          
        }

        private void Slider1_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            ((PlaneProjection)MyStack.Projection).RotationX = e.NewValue;
        }

        private void Slider2_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            ((PlaneProjection)MyStack.Projection).RotationY = e.NewValue;
        }

        private void Slider3_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            ((PlaneProjection)MyStack.Projection).RotationZ = e.NewValue;
        }
    }
}

Output :

Flip 3D

Something about Plane Projection :

Simple definition of Plane Projection given by Silverlight 3 docs is :

Represents a perspective transform (a 3-D-like effect) on an object.

Plane Projection Class gives you certain Methods and Properties, Plane Projection helps you to set orientation across X,Y and Z axis with properties like RotationX,Y and Z respectively and no wonder, all of them do take negative values. Basically now UIElement have property as Projection. You can even set the Center of Rotation with CenterOfRotationX,Y and Z property respectively. To know more details about Plane Projection, I encourage you to get hold of Silverlight 3 Beta 1 docs [chm file].

I know, few days back I spend many sleepless nights to get working that kit3D for implementing 3D in Silverlight 2, but I guess now we all should thank Microsoft for making this happen in Silverlight 3 and with great ease.

Hope by this small step towards Silverlight 3 must have given you idea what is the future of Silverlight Technology, many more things to come now, and yes as usual I will try my best to tell you those by making as simple as I can, so that you can start working on it. So go ahead and Download early bits of Silverlight 3 Beta 1, meanwhile I will get ready with my Part 2 of this Lap around article.

Vikram.

Wednesday, March 18, 2009

Silverlight 3 and Blend 3 is finally here…!!!

Just moment ago in keynote by Scott Guthrie [Corporate Vice President of the .NET Developer Platform at Microsoft] announced announced  Preview availability of Expression Blend 3 for Silverlight 3 and much awaited Silverlight 3 SDK Beta 1

Download Silverlight 3 SDK Beta 1 :

http://www.microsoft.com/downloads/details.aspx?FamilyID=D09B6ECF-9A45-4D99-B752-2A330A937BC4&displaylang=en

Check Silverlight 3 Beta 1 Documentation :

http://msdn.microsoft.com/en-us/library/cc838158(vs.96).aspx

Download Silverlight 3 Tools Beta 1 for Visual Studio 2008 SP 1 :

http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=11dc7151-dbd6-4e39-878f-5081863cbb5d

Download Silverlight 3 SDK Beta 1 Developer Runtime :

http://go.microsoft.com/fwlink/?linkid=143433

Download Blend 3 Preview :

http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=a04aa0ae-87be-4201-a65e-e792859122fc

Just few features of Silverlight (Ref. Keynote at MIX 09 )

Silverlight 3 features :

  • Pixel shaders
  • DeepZoom improvement including Hardware Accelaration
  • GPU Hardware Accelaration
  • Deep linking
  • Multitouch Support
  • Navigation improvement
  • Text optmztion

Blend 3 features :

  • C#,XAML Intellisense
  • Sketch Flow
  • Imports from Adobe Photoshop and Illustrator

More good news is You can now enjoy Olympics 2010 at Vancouver Canada with Silverlight powerful Live Smooth Streaming.

Also Expression Web SuperView is here ! .. Read more about it here :

http://baxiabhishek.spaces.live.com/Blog/cns!8C55799877482F9D!1185.entry?sa=353043044

Well..much more to talk about now..I will get back with tons of things here soon !! :)

Vikram.

Monday, March 16, 2009

Start Windows…

For all Windows lovers like me..Amazing Video with Rock Solid Music shared by our fellow Indian MVP Abhishek Baxi at http://www.baxiabhishek.info

Put on High Volume and enjoy with your family and friends !! :) More coming soon …

Some more interesting links to share from India :)

1. Microsoft TechEd India 2009 :

http://blogs.technet.com/aviraj/archive/2009/03/16/microsoft-teched-india-2009.aspx

2. “Naked Browser” challenge !!

http://www.abhishekkant.net/2009/03/to-see-browser-take-of-its-clothes.html

3. The Poll - What is Your Favorite Database?

http://blog.sqlauthority.com/2009/02/25/the-poll-what-is-your-favorite-database/

Hope you enjoy !! ..Now I am holding my breath since we are just few hours away from MIX 09..loads of things are coming to us..!! Silverlight 3 is going to be main HOT topic in MIX09..so keep visiting here :)

 

Vikram.

Saturday, March 7, 2009

3D in Silverlight 2 with Kit3D

We all know how much everyone is waiting for Silverlight 3 and various forums and blogs are already flooded with Silverlight 3 wishlist and discussion about the upcoming 3D support in Silverlight. We all know right now 3D is not supported in Silverlight which is supported to extent in WPF. No wonder 3D support will add much more value to Web applications since due to Windows 7 Multitouch capability, everyone these days getting ready to make there application much more close to user.

Now I am discussing despite not having support of 3D in Silverlight 2, how we can do it with a Codeplex project dll file well known as “Kit3D.dll” aka Kit3D Project. I am writing this particular article just to make you aware about this 3D implementation dll in Silverlight 2 so that if you find it useful, you can start working on it and implement it until the real 3D supports come with Silverlight 3, I have downloaded the dll and took some sample code and made some Tweaks/Changes in it. So my code snippet below is derived from original source with modifications.

Kit3D unfortunately don’t have any specific documentation which can talk about the various classes and members in it, Neither we have any video,but now I guess we are mature enough on Silverlight so we can implement it in our way.

Step 1 : Download Kit3D.dll file from CodePlex at :

http://kit3d.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=12582#ReleaseFiles

Step 2 : Create a Silverlight Project and add reference of Kit3D.dll file.

Cube.xaml :

<Grid x:Name="LayoutRoot" Background="White">
       <Canvas Width="0" Height="0">
       </Canvas>
   </Grid>

Cube.xaml.cs :

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using Kit3D.Windows.Controls;
using Kit3D.Windows.Media;
using Kit3D.Windows.Media.Media3D;

namespace SL_Kit3D_Demo
{
    public partial class Cube : UserControl
    {
        private Viewport3D viewport;
        RotateTransform3D Rotate;

        public Cube()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(Cube_Loaded);
        }

        void Cube_Loaded(object sender, RoutedEventArgs e)
        {
            ModelVisual3D Visual = new ModelVisual3D();
            GeometryModel3D MyCube = new GeometryModel3D();
            MyCube.Geometry = CreateCubeMesh();
            MyCube.Material = new DiffuseMaterial(new Kit3DBrush(new SolidColorBrush(Colors.Gray)));

            Visual.Content = MyCube;

            Transform3DGroup Transform = new Transform3DGroup();
            Transform.Children.Add(new ScaleTransform3D(3, 3, 3));

            Rotate = new RotateTransform3D();
            Rotate.Rotation = new AxisAngleRotation3D();
            Transform.Children.Add(Rotate);
            MyCube.Transform = Transform;

            viewport = new Viewport3D();

            viewport.Camera = new PerspectiveCamera(new Point3D(-5, 15, 25),
                                                    new Vector3D(5, -15, -25),
                                                    new Vector3D(0, 1, 0),
                                                    45);
            viewport.Children.Add(Visual);
            viewport.HorizontalAlignment = HorizontalAlignment.Stretch;
            viewport.VerticalAlignment = VerticalAlignment.Stretch;

            this.LayoutRoot.Children.Add(viewport);

            Kit3D.Windows.Media.CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);
        }

        private MeshGeometry3D CreateCubeMesh()
        {
            MeshGeometry3D mesh = new MeshGeometry3D();
            mesh.Positions = new Point3DCollection
            {
                new Point3D(-0.5,0.5,0.5),
                new Point3D(0.5,0.5,0.5),
                new Point3D(-0.5,-0.5,0.5),
                new Point3D(0.5,-0.5,0.5),
                new Point3D(0.5,0.5,-0.5),
                new Point3D(-0.5, 0.5, -0.5),
                new Point3D(0.5,-0.5,-0.5),
                new Point3D(-0.5,-0.5,-0.5),

                new Point3D(-0.5,0.5,-0.5),
                new Point3D(-0.5,0.5,0.5),
                new Point3D(-0.5,-0.5,-0.5),
                new Point3D(-0.5,-0.5,0.5),
                new Point3D(0.5,0.5,0.5),
                new Point3D(0.5,0.5,-0.5),
                new Point3D(0.5,-0.5,0.5),
                new Point3D(0.5,-0.5,-0.5),

                new Point3D(-0.5,0.5,-0.5),
                new Point3D(0.5,0.5,-0.5),
                new Point3D(-0.5,0.5,0.5),
                new Point3D(0.5,0.5,0.5),
                new Point3D(0.5,-0.5,-0.5),
                new Point3D(-0.5,-0.5,-0.5),
                new Point3D(0.5,-0.5,0.5),
                new Point3D(-0.5,-0.5,0.5)
            };

            mesh.TriangleIndices = new Int32Collection
            {
                0, 2, 1, 1, 2, 3,
                4, 6, 5, 5, 6, 7,
                8, 10, 9, 9, 10, 11,
                12, 14, 13, 13, 14, 15,
                16, 18, 17, 17, 18, 19,
                20, 22, 21, 21, 22, 23
            };

            return mesh;
        }

        void CompositionTarget_Rendering(object sender, EventArgs e)
        {
          ((AxisAngleRotation3D)Rotate.Rotation).Angle += 1;
        }
    }
}

Basically, Once you refer Kit3D.dll file, you can import namespaces Kit3D.Windows.Media and Kit3D.Windows.Media.Media3D by which you can make your silverlight application capable to render 3D. There are several classes like GeometryModel3D which talks about various properties by which you can apply shape,color etc to your geometry. CompositionTarget_Rendering is the only event which provides rendering, here in that you can see we are moving cube in circular rotation of 1 degree. Those who know WPF very well they can see common terms like ViewPort,Camera etc.

I tried out to modify some of the co-ordinates in CreateCubeMesh, then I get result like few distorted plane on different axis like this :

1

Frankly speaking, It took much of my time since I am not much use to WPF, but those of you are good at it, might you create much more good stuff than I did from above. Well, output will look like this :

 2

Well, though it might look like some cube which any dumb can create, no, its not like that, Kit3D is bit complex to program but it is very much powerful, if you not satisfied what i am saying, go ahead and visit this URL :

http://www.markdawson.org/Kit3D/

You can check full source code here :

http://kit3d.codeplex.com/SourceControl/changeset/view/14651#234928

Make a note which is mentioned on http://kit3d.codeplex.com/ that “This project is still very early on in its lifecycle”,but still its very good to start using it as a primary step towards 3D graphics in Silverlight 2.

My only wish to make you aware of Kit3D, Hope you will download it and try it out by creating wonderful 3D Silverlight applications.

Vikram.

Wednesday, March 4, 2009

Lap Around ASP.NET Dynamic Data 4.0 Preview

I was just going through my Last Dynamic Data article, and while surfing I came across ASP.NET Dynamic Data 4.0 Preview 1 & 2 (I am going to call it as Dynamic Data Future simply). I was exploring that throughout, so I though it will be good to share with you all if you are unaware of this.

Basically, ASP.NET Dynamic Data 4.0 requires to have Visual Studio 2008 and .NET Framework 3.5 SP to be installed first. I downloaded the bits from Codeplex and there you will find a big note like :

NOTE: These previews contains features that may not be in the next version of the framework. These previews are not production quality and should be used at your own risk.

So right now don’t plan this for your production bits unless you are confident about it. Even I am just still evaluating this one and now note from me : "No harm in Evaluating it, Its too Good !!”

There are few new attributes and Field Templates given, Dynamic Data 4.0 Preview also talks about BusinessLogicDataSource Control (In Common man’s term : Something which sync your UI and BL), It is now also go hand in hand with ASP.NET MVC, Beside Image handler the thing I like most is now we can add Search Capability to Dynamic Data and will be able to tweak it as we like it the way it should be.

Right now I am exploring Image Capabilities in Dynamic Data and sharing the same with you. Below screens are from walkthrough which I have downloaded from Codeplex and I will use same bits to explain you various features.

To enable Dynamic Data Grid with Images you have following newly introduce “Field Templates” :

  • DbImage.ascx
  • Edit_ DbImage.ascx
  • FileImage.ascx

To make Image mechanism smooth, you then need to add HTTP handler in your Web.Config File like this :

<add verb="*" path="ImageHandler.htm" type="Microsoft.Web.DynamicData.ImageHandler"/>

Rest of the steps like adding LINQ-to-SQL data model, drag table which you want to display etc steps are still same like in old one. (Sample bits gives you “Northwind” Database and you have “Categories” table which capable of storing images), Also whatever we do modifications in Global.asax are as it was in old.

To map Image field in database, job is now done by ImageAttributes which you need to add manually, which you will get from namespaces Microsoft.Web.DynamicData and System.ComponentModel.DataAnnotations ,well attributes seems to be powerful since they do allow you to set size of images too. But you need a partial class to map Categories Table which you can do by adding class file and declaring partial class in it like this :

[MetadataType(typeof(CategoryMetadata))]
public partial class CategoryMetadata{}
You can see now first entry page also slightly modified, previously we use to see List of Tables which we include in data model, now for Preview it has been modified slightly like this :
pic0
Once you click on link under “Display database Image columns” you will get output like below :
pic1
If you go ahead and check I done some editing of one field (Check lotus image in above grid, on which I experimented), you add new image or delete particular one like this :
pic2
pic3
A File Uploader makes job easy to add new image from your local physical storage and once you upload image you will promptly see changes in Grid (This image which you can see are actually Cached) and after updating you can see output like this : (lotus image is now replaced by Sunset image)
pic5
Well, That was all about Displaying Images in Dynamic Data,Surely in my future articles I will discuss all these in depth.
What is the Future of Dynamic Data ?? :
http://aspnet.codeplex.com/Wiki/View.aspx?title=dynamic%20data%20roadmap&referringTitle=Dynamic%20Data 

Where you can find more about ASP.NET Dynamic Data 4.0 Preview 1 & 2 ?? :

Preview 1 :

http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=18803

Preview 2 :

http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=20628

Lost in Jungle? Confused ? Looking for something which will be step-by-step?? :

http://quickstarts.asp.net/previews/dynamicdata/dd_WhatsNewInDynamicData.htm

Hope you find this information useful, so don’t wait, download bits from Codeplex and start exploring them with me !

Vikram.

Sunday, March 1, 2009

Calling RESTful Services using JSON format in Silverlight 2

I have already blogged about integration of ASMX and WCF services with Silverlight 2 in my previous posts, Hope they are helpful to all of you. Now going one step ahead, I am now talking about REST and JSON, you find it alien?

Now the whole world knows that Silverlight don’t support anything beyond basicHttpBinding [ If you have any plans to integrate WF (Workflows), better create wrapper and try it out ]

REST is getting popular today firstly because of integration in various types of Applications, Do SOAP understood by every? how much pain in convert XML response to format which we want, performance, well too many questions arises,I am still not able to comment whether REST is best thing to follow or not, but whatever amount I use it, I find it handy and useful,so thought I should share with you all.

REST by default returns XML if we don’t mention return type format, There are two format as POX [Plain Old XML] form or JSON [JavaScript Object Notation]

If you still want in-depth information about REST, you can visit :

http://en.wikipedia.org/wiki/Representational_State_Transfer

You don’t have any separate template for creating RESTful Services for Silverlight 2 in Visual Studio, same for JSON.So I am going to do this with our normal WCF Template.

XAML Code :

<Grid x:Name="LayoutRoot" Background="AliceBlue">
    <TextBlock Height="23" Margin="94,8,116,0" VerticalAlignment="Top" Text="Explore .NET with Vikram Pendse" TextWrapping="Wrap" Foreground="#FF000000" />
    <StackPanel x:Name="stk" Width="400" Margin="0,66,0,30">
        <TextBlock Margin="78,10,0,30" Text="FirstName:"/>
        <TextBox Margin="40,-50,0,30" x:Name="txtFirstName" Height="20" Width="150" Text="{}" />

        <TextBlock Margin="78,-5,25,30">LastName :</TextBlock>
        <TextBox Margin="40,-60,0,10" x:Name="txtLastName" Height="20" Width="150" />

        <Button x:Name="btnSubmit" Height="20" Width="100" Content="Submit" Click="btnSubmit_Click" />
    </StackPanel>

    <TextBlock Width="220" Height="30"  Margin="80,0,100,20" VerticalAlignment="Bottom" x:Name="JsonResult" Foreground="#FF000000"/>
</Grid>

WCF Service Code :

public string ReturnUser(string str1, string str2)
{
     string strtemp;
     strtemp = "Your Complete Name is:" + string.Concat(str1, str2);
     return strtemp;
}

[ServiceContract]
public interface IJsonService
{
    [OperationContract]
    [WebGet(ResponseFormat=WebMessageFormat.Json)] 
    string ReturnUser(string str1, string str2);
}

Note : [WebGet(ResponseFormat=WebMessageFormat.Json)]

Here is the critical step to decide whether the response will be POX or JSON, if you specify nothing,by default it will be XML, if you define as JSON, response will be stream which you need to deserialize where you are managing response.

Web.Config : [You need to make binding as webHttpBinding]

<services>
            <service behaviorConfiguration="SL_JSON.Web.JsonServiceBehavior" name="SL_JSON.Web.JsonService">
                <endpoint address="" binding="webHttpBinding" contract="SL_JSON.Web.IJsonService">
                    <identity>
                        <dns value="localhost"/>
                    </identity>
                </endpoint>
                <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange"/>
            </service>
</services>

Another Important Step is to add Factory Attribute in your svc file markup like this :

<%@ ServiceHost Language="C#" Debug="true" Factory="System.ServiceModel.Activation.WebServiceHostFactory" Service="SL_JSON.Web.JsonService" CodeBehind="JsonService.svc.cs" %>

It will not work unless you add attribute Factory="System.ServiceModel.Activation.WebServiceHostFactory"

Page.xaml.cs :

private void btnSubmit_Click(object sender, RoutedEventArgs e)
{
           WebClient wc = new WebClient();
           string uri = "http://localhost:1603/JsonService.svc/ReturnUser?str1=";
           uri += txtFirstName.Text + "&str2=";
           uri += txtLastName.Text;
           wc.OpenReadAsync( new Uri(uri,UriKind.Absolute));
           wc.OpenReadCompleted+=new OpenReadCompletedEventHandler(wc_OpenReadCompleted);
}

void wc_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
{
           byte[] stream =new byte[200];
           e.Result.Read(stream,0,(int)e.Result.Length);

           string str = String.Empty;

           for (int i = 0; i < stream.Length; i++)
           {
               str += (char)stream[i];
           }

           JsonResult.Text = str;
}

JSON1

JSON2 

Since we set format as JSON, so it will return you the stream, you can read that stream using e.Result.Read(), then with normal logic of reading stream, we are fetching data from Stream and assigning it to TextBlock and Output will be like :

JSON

One thing you must have observe that I have not created any proxy to consume service and I am simply making use of WebClient given to us by System.Net.

I am also want to encourage you to read more on attributes like WebGet and WebInvoke.

I am sure you must have now got idea about REST, JSON etc. I have written this to get overview and surely I will cover in-depth about REST and JSON in coming days.As always, your feedback most welcome.