[ Silverlight 2 is now released so this post is no longer valid. ]
Silverlight RC0 has been shipped. It is only developers release but will be feature complete. I did not get much time to see if it breaks some of my applications. It does have some features we were waiting for but we expected some more. Anyway lets see how it works with the new expression blend service pack and VS tools.
Installing RC0 might be a bit painful as it needs uninstalling all previous SL things and needs some tools. Here is the steps I did to get it work.
1. Uninstalled everything related to beta 2. (Silverlight tools for VS, Expression Blend, Plugin -- Everything)
2. Installed Silverlight 2 RC0 developer runtime.
2. Installed Microsoft Visual Studio 2008 Service Pack 1.
3. Installed new Silverlight tools for VS 2008.
4. Expression Blend 2 trial version.
5. Blend 2 SP1.
Oops. Finally. :)
Steps might be different but I got it working this way.
One important thing is this is only developers release so publicly only beta 2 is available now. So we can't yet release the application in RC0 but lets prepare for the day. :)
Tuesday, September 30, 2008
Monday, September 22, 2008
Starting Silverlight
[ Links for the tools are updated for Silverlight 2. Some of the sites listed below may not been updated yet and contain beta 2 applications and links. ]
Hi all,
My blog has survived a few months and I was posting on somewhat random articles and applications. Some of my friends have started learning Silverlight and asked me to share some links and samples. Here is my list.
Install Silverlight 2 runtime from here.
Essential for all....
Expression Blend 2
Expression Blend 2 SP 1
Deep Zoom Composer (Used for a feature called DeepZoom in Silverlight)
Silverlight 2 Documentation
If you are interested in design....
Expression Design 2 Trial.
Expression Encoder Trial.
If You are interested in programming....
1. If you don't know C#, start learning basics of it. The basic would be sufficient for building simple Silverlight applications.
2. If you have C# background, probably you have worked with Visual Studio. If not, install it and play a little time with it. Silverlight 2 needs Visual Studio 2008 and you can get a trial version from here. You also need to install SP1 for VS 2008.
3. Install Silverlight Tools For Visual Studio 2008. (It also installs Silverlight plug-in for the browsers if it is not there).
Optional but will help you....
Get an live account and you can get 10 GB of hosting space free for the Silverlight applications you build. Get it here.
Silverlight.net has a great collection of tutorials and videos. You can start from the quick start tutorials.
Using Expression Blend
QuickStart (Mainly for the programmers but designers might see it to get an idea)
You can also start by watching the videos.
Try building something as soon as you feel you can create a simple application.
I am a Flash Developer. Where from I start?
1. You need the basic tools described in the first section.
2. Here is a link that will help you use your existing skills to building Silverlight application.
I know the basics and wanna dig into deeper.
There are some videos and tutorials focused on some advanced topics in Silverlight.net.
You will get a complete set of resources here.
Hey. Let me see some cool samples before I start.
You can find big list of excellent applications created in Silverlight here and here.
PS: Actually you can find almost everything in the Silverlight Community Site. It has a great forum that helps in every type of problems you face working with Silverlight.
Hi all,
My blog has survived a few months and I was posting on somewhat random articles and applications. Some of my friends have started learning Silverlight and asked me to share some links and samples. Here is my list.
Tools
Basic thing you need....Install Silverlight 2 runtime from here.
Essential for all....
Expression Blend 2
Expression Blend 2 SP 1
Deep Zoom Composer (Used for a feature called DeepZoom in Silverlight)
Silverlight 2 Documentation
If you are interested in design....
Expression Design 2 Trial.
Expression Encoder Trial.
If You are interested in programming....
1. If you don't know C#, start learning basics of it. The basic would be sufficient for building simple Silverlight applications.
2. If you have C# background, probably you have worked with Visual Studio. If not, install it and play a little time with it. Silverlight 2 needs Visual Studio 2008 and you can get a trial version from here. You also need to install SP1 for VS 2008.
3. Install Silverlight Tools For Visual Studio 2008. (It also installs Silverlight plug-in for the browsers if it is not there).
Optional but will help you....
Get an live account and you can get 10 GB of hosting space free for the Silverlight applications you build. Get it here.
Learning materials
I am completely new. Where from I start?Silverlight.net has a great collection of tutorials and videos. You can start from the quick start tutorials.
Using Expression Blend
QuickStart (Mainly for the programmers but designers might see it to get an idea)
You can also start by watching the videos.
Try building something as soon as you feel you can create a simple application.
I am a Flash Developer. Where from I start?
1. You need the basic tools described in the first section.
2. Here is a link that will help you use your existing skills to building Silverlight application.
I know the basics and wanna dig into deeper.
There are some videos and tutorials focused on some advanced topics in Silverlight.net.
You will get a complete set of resources here.
Hey. Let me see some cool samples before I start.
You can find big list of excellent applications created in Silverlight here and here.
PS: Actually you can find almost everything in the Silverlight Community Site. It has a great forum that helps in every type of problems you face working with Silverlight.
Some Other Links
Actually nothing new here. But I think this blog would be incomplete if I don't stack some useful links up.
You can get a detail listing of tools and materials here.
Overview
Wikipedia link. :) Don't you think it is a must?
An Excellent Video Tutorial.
Another Big List.
Overview
Wikipedia link. :) Don't you think it is a must?
An Excellent Video Tutorial.
Another Big List.
Thursday, September 18, 2008
Let's Not Stop Here
[ Updated for Silverlight 2 ]
Hi friends,
In my previous post I have listed 10 lesser known things in Silverlight. Here are some more.....
1. Scale Mode: See the following code.
<div style="height:5;width:500;border:solid 3px #00FF00;"">
<asp:Silverlight ScaleMode="None" Width="100%" Height="100%" ...... />
</div>
Now see the blue part. There are 3 values you can set in ScaleMode. None (that is default), Stretch and Zoom.
None: The Silverlight component retains its size specified inside. (in Page.xaml for example)
Stretch: The Silverlight component occupies the available space inside the div.
Zoom: Like Stretch but keeps the aspect ratio.
2. Check Silverlight Version: You can check what silverlight version is installed in your computer in this page.
3. Silverlight Event Bubbling: Silverlight has some events that are called routed events and they bubble from child to its parent element. Mainly mouse and keyboard events fall in this category.
This simple application will show how Silverlight event bubbling works and what you can do to allow or stop it.
Lets have 3 canvases and arranged them like the following
Blue Part is the root canvas, red one is a child inside blue one and green one is inside red canvas.
RootCanvas -> Blue one
Child1Canvas -> Red one
Child2Canvas -> Green one
Now we will write 3 MouseLeftButtonDown event handlers for 3 of them.
public Page()
{
InitializeComponent();
Loaded += new RoutedEventHandler(Page_Loaded);
}
void Page_Loaded(object sender, RoutedEventArgs e)
{
RootCanvas.MouseLeftButtonDown += new MouseButtonEventHandler(RootCanvas_MouseLeftButtonDown);
Child1Canvas.MouseLeftButtonDown += new
MouseButtonEventHandler(Child1Canvas_MouseLeftButtonDown);
Child2Canvas.MouseLeftButtonDown += new
MouseButtonEventHandler(Child2Canvas_MouseLeftButtonDown);
}
void Child2Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
}
void Child1Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
}
void RootCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
}
Now set breakpoints on each of the event handlers to see what is going on. You can also put alert for it. Now run the application and click on the green canvas. You will see the break points are hit in the order green canvas (child 2) to its parent red canvas to its parent the blue canvas.
Now this is the default behavior. Now suppose we want to pass the event from green to its parent red but not to the blue one. Now as at the red canvas we want to stop the bubbling we have to write
e.Handled=true at its event handler. Now the event will not be passed to the blue one.
void Child1Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
e.Handled = true;
}
Now Silverlight controls handles the mouse events internally and they don't let them bubble. So if you place a button or other Silverlight control inside the green canvas you will not be able to catch its mouse down event or pass it to the parent canvas.
See this great blog post and this documentation for details.
4. Enable help for Silverlight in Visual Studio 2008: You already installed Silverlight SDK and still can't see help on Silverlight from Visual Studio? Here is how to enable it.
1. Open Visual Studio (you might have to open VS as an administrator).
2. In the Help menu, choose Index. Microsoft Document Explorer displays.
3. In the Filtered by: drop-down, choose to (unfiltered).
4. In the Look for field, type Collection Manager.
5. Below the Collection Manager heading, double click Help.
6. Below the Collections available for inclusion in VSCC heading, check Microsoft Silverlight 2
SDK Documentation.
7. Click Update VSCC.
Now after restarting visual studio you can see it in help -> contents.
This steps you can find inside the readme file
C:\Program Files\Microsoft SDKs\Silverlight\v2.0\Documentation\VS-Help\en-us\readme.txt
Hi friends,
In my previous post I have listed 10 lesser known things in Silverlight. Here are some more.....
1. Scale Mode: See the following code.
<div style="height:5;width:500;border:solid 3px #00FF00;"">
<asp:Silverlight ScaleMode="None" Width="100%" Height="100%" ...... />
</div>
Now see the blue part. There are 3 values you can set in ScaleMode. None (that is default), Stretch and Zoom.
None: The Silverlight component retains its size specified inside. (in Page.xaml for example)
Stretch: The Silverlight component occupies the available space inside the div.
Zoom: Like Stretch but keeps the aspect ratio.
Now we have one Silverlight application. In the Page.xaml we have set the height and width of the user control to 100 and 400. We have one grid that occupies this usercontrol and has a red background.
Now in the html we have set silverlight contenainer div size to be 500 x 500. If we now set ScaleMode="None" That is default we will see our application rendered like the following.
The green border is the border of the silverlight container div. Red part is our original silverlight component.
Following is in Stretch mode
This is in Zoom mode
See how it preserves its aspect ratio in Zoom mode.
Following is in Stretch mode
This is in Zoom mode
See how it preserves its aspect ratio in Zoom mode.
2. Check Silverlight Version: You can check what silverlight version is installed in your computer in this page.
3. Silverlight Event Bubbling: Silverlight has some events that are called routed events and they bubble from child to its parent element. Mainly mouse and keyboard events fall in this category.
This simple application will show how Silverlight event bubbling works and what you can do to allow or stop it.
Lets have 3 canvases and arranged them like the following
Blue Part is the root canvas, red one is a child inside blue one and green one is inside red canvas.
RootCanvas -> Blue one
Child1Canvas -> Red one
Child2Canvas -> Green one
Now we will write 3 MouseLeftButtonDown event handlers for 3 of them.
public Page()
{
InitializeComponent();
Loaded += new RoutedEventHandler(Page_Loaded);
}
void Page_Loaded(object sender, RoutedEventArgs e)
{
RootCanvas.MouseLeftButtonDown += new MouseButtonEventHandler(RootCanvas_MouseLeftButtonDown);
Child1Canvas.MouseLeftButtonDown += new
MouseButtonEventHandler(Child1Canvas_MouseLeftButtonDown);
Child2Canvas.MouseLeftButtonDown += new
MouseButtonEventHandler(Child2Canvas_MouseLeftButtonDown);
}
void Child2Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
}
void Child1Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
}
void RootCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
}
Now set breakpoints on each of the event handlers to see what is going on. You can also put alert for it. Now run the application and click on the green canvas. You will see the break points are hit in the order green canvas (child 2) to its parent red canvas to its parent the blue canvas.
Now this is the default behavior. Now suppose we want to pass the event from green to its parent red but not to the blue one. Now as at the red canvas we want to stop the bubbling we have to write
e.Handled=true at its event handler. Now the event will not be passed to the blue one.
void Child1Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
e.Handled = true;
}
Now Silverlight controls handles the mouse events internally and they don't let them bubble. So if you place a button or other Silverlight control inside the green canvas you will not be able to catch its mouse down event or pass it to the parent canvas.
See this great blog post and this documentation for details.
4. Enable help for Silverlight in Visual Studio 2008: You already installed Silverlight SDK and still can't see help on Silverlight from Visual Studio? Here is how to enable it.
1. Open Visual Studio (you might have to open VS as an administrator).
2. In the Help menu, choose Index. Microsoft Document Explorer displays.
3. In the Filtered by: drop-down, choose to (unfiltered).
4. In the Look for field, type Collection Manager.
5. Below the Collection Manager heading, double click Help.
6. Below the Collections available for inclusion in VSCC heading, check Microsoft Silverlight 2
SDK Documentation.
7. Click Update VSCC.
Now after restarting visual studio you can see it in help -> contents.
This steps you can find inside the readme file
C:\Program Files\Microsoft SDKs\Silverlight\v2.0\Documentation\VS-Help\en-us\readme.txt
5. Document outline: This is actually a feature in visual studio. If you layout is complex and you want to easily navigate to parent or child elements you can use this. View -> Other winndows -> Document outline.
6. Why my mouse events aint working? Have one simple Silverlight application with a green Grid with height and width 300 and 400. At the MouseLeftButtonDown event handler write one alert.
private void LayoutRoot_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
HtmlPage.Window.Alert("Event is Fired and catched");
}
Now run the application and click the Grid. The alert will come. Now remove the background attribute from the grid and run the application. Click the grid. No alert will come. :). Though I don't know the reason for it but it might be intentional. Guess why? It might prevent bad guys to fool user think clicking an html element.
Thanks all for keep on visiting my blog. I am a bit busy with my work right now and I will post some material for the newbies in Silverlight in my future posts.
private void LayoutRoot_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
HtmlPage.Window.Alert("Event is Fired and catched");
}
Now run the application and click the Grid. The alert will come. Now remove the background attribute from the grid and run the application. Click the grid. No alert will come. :). Though I don't know the reason for it but it might be intentional. Guess why? It might prevent bad guys to fool user think clicking an html element.
Thanks all for keep on visiting my blog. I am a bit busy with my work right now and I will post some material for the newbies in Silverlight in my future posts.
Thursday, September 11, 2008
A Simple Wave Generator In Silverlight
[ Updated for Silverlight 2 ]
Hi,
I was building a simple waveform generator that will generate waveform for an equation containing sin, cos and tan. It will choose random color when drawing the curve and can draw one curve over another. The application in run looks like the following.
I cannot put it here as it wont fit in this width. See it here.
What is going inside......
The curve is actually a collection of ellipses of height and width 5. You can see it better if you draw a curve like tan() x sin().
I am trying to explain it from a top level (less detail) it step by step
1. We will have a stack named EqunList that will put the equation in string elements. For example it will store " sin" if you click sin button and then if you click + it will push "+" in the stack above sin.
2. Now when we click draw button the equation list will be converted from infix to postfix notation so that it eliminates the brackets and let us calculate the values of the equation easily.
3. It then chooses a random color for drawing the curve. Then it starts a timer that will put one ellipse every 15 milliseconds so that it seems the curve is been drawn slowly. We will talk about setting x and y coordinates (Canvas.Left and Canvas.Top respectively) of the ellipses shortly.
4. There will be a counter that will be incremented and after reaching a certain value (width of the drawing plane in pixels) will stop the timer.
5. Now the x value of the ellipse (Canvas.Left) will be incremented by 1 in each timer tick (It can be made higher but then the curve might not look very good). The Y value of the ellipse will be determined by evaluating the equation for an angle that will vary from 0 to 2*PI. Here the angle will be increased by 2 * Math.PI / 200 each time. ( It will actually creates a complete cycle in 200 pixels. Also the resultant value will be multiplied by 100. The reason of the multiplier is because otherwise the curve will have height of only 2 pixel in case of a sine wave. The curve will be drawn not from the top but from the middle of the canvas to take account the negetive values as well as positive values.
There are some minor tasks like disabling the buttons while one curve is drawn or clearing the equation after the curve is been drawn.
Here is the complete source code for it.
Please leave a comment if you have any doubt and also how to improve it. I am still inexperienced in programming field and have lots to know from you...
Thanks....
PS: BTW if you love music check out Madonna's new album Hard Candy. I am listening to the songs right now and they are excellent :)
Hi,
I was building a simple waveform generator that will generate waveform for an equation containing sin, cos and tan. It will choose random color when drawing the curve and can draw one curve over another. The application in run looks like the following.
I cannot put it here as it wont fit in this width. See it here.
What is going inside......
The curve is actually a collection of ellipses of height and width 5. You can see it better if you draw a curve like tan() x sin().
I am trying to explain it from a top level (less detail) it step by step
1. We will have a stack named EqunList that will put the equation in string elements. For example it will store " sin" if you click sin button and then if you click + it will push "+" in the stack above sin.
2. Now when we click draw button the equation list will be converted from infix to postfix notation so that it eliminates the brackets and let us calculate the values of the equation easily.
3. It then chooses a random color for drawing the curve. Then it starts a timer that will put one ellipse every 15 milliseconds so that it seems the curve is been drawn slowly. We will talk about setting x and y coordinates (Canvas.Left and Canvas.Top respectively) of the ellipses shortly.
4. There will be a counter that will be incremented and after reaching a certain value (width of the drawing plane in pixels) will stop the timer.
5. Now the x value of the ellipse (Canvas.Left) will be incremented by 1 in each timer tick (It can be made higher but then the curve might not look very good). The Y value of the ellipse will be determined by evaluating the equation for an angle that will vary from 0 to 2*PI. Here the angle will be increased by 2 * Math.PI / 200 each time. ( It will actually creates a complete cycle in 200 pixels. Also the resultant value will be multiplied by 100. The reason of the multiplier is because otherwise the curve will have height of only 2 pixel in case of a sine wave. The curve will be drawn not from the top but from the middle of the canvas to take account the negetive values as well as positive values.
There are some minor tasks like disabling the buttons while one curve is drawn or clearing the equation after the curve is been drawn.
Here is the complete source code for it.
Please leave a comment if you have any doubt and also how to improve it. I am still inexperienced in programming field and have lots to know from you...
Thanks....
PS: BTW if you love music check out Madonna's new album Hard Candy. I am listening to the songs right now and they are excellent :)
Wednesday, September 3, 2008
Google Chrome - An Exciting Eeperience
Hi,
Lets talk about something not directly related to Silverlight.
Last night Google launched Chrome, its new open source browser. It is currently in beta. I have tried it and it seems exciting. Here is my "half day experience" about it.
Last night Google launched Chrome, its new open source browser. It is currently in beta. I have tried it and it seems exciting. Here is my "half day experience" about it.
Things I like
1.Clean Interface: It has the cleanest interface of all the browsers I have used. While viewing websites you really will see the content not the browser. It has one url bar and that is also used for searching.
2. Task manager: Control -> Developer -> task manager or shift + escape. It shows which tab is using most of your cpu and memory and you can easily end it. It has high details of the processing running in it . Stats for nerds.
3.Most Visited sites: It has opera style speed dial feature that stores most visited 9 sites in thumbnail format for easy accessing. It also keeps trak of recent changes and provide a means to search history.
4.Developer support: It has a powerful javascript console and debugging support for helping developers. It also has support for CSS and html like Firebug in FF.
5. Incognito browsing: ctrl+shift+N. It will help you prevent your privacy while not storing anything of what you do in that window. It is an easy way when we have to surf internet from internet cafe or other untrusted places.
6. Search history: We can search inside the history. ctrl + H.
7. Crash resistant: One tab is completely independent of others and crashing of one tab or taking longer time to load does not afect others. This is really exciting and I have not been successful to have it crash or misbehave.
8. Fast opening and closing time: In my experience it opens faster and close smoothly.
There are lots of other features that I like but above ones are the main ones I have seen now.
PS: It claims about being faster than other browsers that might be debatable. Though I can say it is not slower than those for sure.
Things I don't like
1. Password management: It will show your password if you go to settings -> options -> minor tasks -> show saved password then choose the web site and show password. I think it should be controled by a master password like FF does and also it should not be enabled default.
Acid test : I have make Acid 3 test in it and it got a score of 76. Failed ofcourse. But it is still a decent score as IE 7 scores 11 FF3 71 and Opera-9 80 in it.
And oh Yes Silverlight! I am using Windows Vista as my OS. I have seen my blog in this browser and I can see my silverlight application there. But they do not function properly. :(. In Silverlight.net site I can see Silverlight 2 applications but not the Silverlight 1 applications. Silverlight 2 applications are also not working properly. But that does not seem to be a problem on long go as both are beta right now and if Chrome gets popularity Microsoft will get it work there too.
I will continue using it and will hope it gets good popularity soon.
Download link www.google.com/chrome
Subscribe to:
Posts (Atom)