Visual Studio 2010 Professional Beta Download

17 07 2009

Visual Studio 2010 Mascots!?Visual Studio developers rejoice! Microsoft is on the verge of releasing its brand new version of Visual Studio, simply named Visual Studio 2010 which will run applications on the yet to be released .NET Framework 4.0. It is currently at beta and you can start downloading Visual Studio 2010 Professional Beta here right now. The new features which consists of a new enhanced user interface, parallel programming to make use of multi-core processors, new code features, cloud development and better database support are pretty nifty and cool. It also includes full Silverlight and WPF support without the need of an add-on this time around.

Visual Studio 2010

If you have been a big fan all along and want to try it out before its actual release, do so right now! Screenshots and reviews will be back right after I am done with my own download. 😀





Microsoft Silverlight 3 Deep Zoom for Your Images…

12 07 2009

Deep Zoom LogoMicrosoft Deep Zoom is yet another impressive web app based technology piggybacking on the recently released Silverlight 3 which allows users to pan around and zoom in a large, high resolution image or a large collection of images.  Anyone who have checked out sites like the Hard Rock Memorabilia would surely be impressed with the way their collections have been organized. Not convinced? Just have a look at the video demo on the Hard Rock Memorabilia below:

Creating applications like what you saw above ain’t hard and the possibilities of what you can do is great. Some of the applications possible would be virtual newspapers, virtual mind maps and virtual picture galleries which are zoomable to several levels according to your liking. To create, you only require a simple drag n drop tool called the Deep Zoom Composer and some creativity to come up with your Deep Zoom app. By following this guide, you will be able to create your deep zoom applications in no time!

Step 1: Download the Deep Zoom Composer

Click here to get the latest version of the Deep Zoom Composer from Microsoft.

Step 2: Create a New Project and Add your Images

To start composing a Deep Zoom application, click on the ‘New Project‘ button. Right after that, the first step that you will need to perform is to import the pictures that you want into the project first by clicking on the ‘Add Image‘ button. In this sample, I will try to embed multiple playing card pictures into a single card. Try to keep the color tone of the images in the number to be as close as the larger picture so that it looks more natural.

Deep Zoom 01

Click on 'New Project'

Add your Selected Images after Clicking on the 'Add Image' Button

Add your Selected Images after Clicking on the 'Add Image' Button

Step 3: Composing your Deep Zoom App

Once you have added your images (you can always go back and add more if you want to), click on the ‘Compose’ button at the top center of the program to start composing your Deep Zoom application. To do so, just drag the images from the bottom of the composer into the workspace and compose the application in any way that you desire. The best practice is to of course get images of higher resolution to be used as it will provide a more clearer viewing experience. To move around your image, make use of the navigator located on the bottom left of your workspace, highlighted in red below.

Drag your Images into the Workspace and Resize them accordingly

Drag your Images into the Workspace and Resize them accordingly

Step 4: Finalize and Export your Project

The final step should not be an issue too. What you should see once you click on the ‘Export’ button would be a preview of your entire project that you have composed earlier. If you are not happy and would like to apply certain changes, just go back to the previous step by clicking on the ‘Compose’ button at the top center of the composer.

If you are happy with it however, you may choose to either export your application to the Internet through your DeepZoomPix account which you must register first OR by clicking on the Custom tab to export the project to your local computer. In this case, I will be exporting the project to my own PC so that I can view it locally.

For exporting, you may choose to export into a ‘Silverlight Deep Zoom’ application or a ‘Seadragon AJAX’ application. In this case, choose Silverlight Deep Zoom if you would like your Deep Zoom application to be viewed through the Silverlight plug in or  Seadragon AJAX if you do not want your application to be viewed by the Silverlight plugin. Do take note that Seadragon AJAX’s performance may not be as good or satisfactory as Silverlight even though it is viewable without the Silverlight plugin.

You can also choose the quality and the type of the images being exported in your project too to scale the loading time of your application. Once you are done, press ‘Export’. All steps are listed down below

Set the settings of your Exported project on the Right hand side of the Composer and click on the Preview in Browser button to check out your application!

Set the settings of your Exported project on the Right hand side of the Composer and click on the Preview in Browser button to check out your application!

After completing the previous step, you should get a dialog box telling you that your export have been completed. In this case, select ‘Preview in Browser’ to view your Silverlight Deep Zoom application in your browser.

Step 5: Mission Accomplished

If your preview works well, you may now publish your Silverlight application into your IIS server. Just copy the exported folder into IIS and everything should work as what you have seen in your preview.

Hint: Do check out the toolbar at the top of your Deep Zoom app as it has many functions, most notibly zooming to highlighted areas/images in your project.

That’s it for today’s tutorial. Come back to my blog for more on Silverlight and ASP.NET application development!





Demystifying AJAX and Creating ASP.NET AJAX Applications using VS2008

19 06 2009

asp-net-ajax copyThis post was created after I have realized that most people gives me a blank (O.o) look when I first tell them about AJAX technologies on the web. In Malaysia, most people will mistakenly think that AJAX is a floor cleaning soap named Ajax Fabuloso due to its really cheesy advertisement on Malaysian TV. Football fans on the other hand always links AJAX to a famous Dutch based football club thus causing even more confusion. In this post, I will be highlighting what AJAX is (in the web development world) and how you can start creating your very own AJAX applications on ASP.NET using Visual Studio 2008 in 5 minutes.

What is AJAX!?
Simply speaking in layman terms, AJAX (shorthand word for Asynchronous Javascript and XML) is basically Javascript with the addition of XML involved as data passes through. In other words, a page can have its content changed dynamically without doing a page refresh or by going to another page. As a result, what you get is a really cool, desktop like experience on your web application because the page does not require any form of postback (refresh) to obtain/show new data.

If you have been wondering how AJAX is being used today, just refer to Facebook.  Facebook is one of the popular websites to advocate AJAX and uses it frequently in almost every page. From adding your friends, chatting, checking out pictures in a gallery, getting updated news feeds and doing quizzes, most of the time, a page refresh is never used there.

As a result, your web server will also get better performance because all that is being downloaded by the client browser is just parts of the page, not the entire chunk unlike what is being done in non-AJAX pages. It also provides a more responsive and easy to use website for your visitors.

I am Interested! So how do I Create my AJAX Page?
One way to use AJAX on your web page is to use type the relevant Javascript into your HTML files. But if you are a ASP.NET developer, you can rejoice because AJAX controls and functions have already been built in into Visual Studio 2005 and 2008. This means that you can create cool AJAX applications really quickly and easily. The only thing that will stand in your way is creativity in how you want to develop your applications. In this tutorial, I will be working on Visual Studio 2008 to create a AJAX RSS Reader to get most read most read RSS news from The Star Online, a Malaysian newspaper portal. If you are doing it on Visual Studio 2005, the process should be similar.

Step 1 – Startup Visual Studio and create a New Web Application

Step-01 Dialog Box OptionsThe first part should be pretty straightforward… Just open up Visual Studio and click to File->New->Web Site to get the “New Web Site” dialog box. In the dialog box, ensure that ASP.NET Web Site is selected and then give your site’s folder a name.

After doing so, you should be getting your empty page called Default.aspx. Please ensure that you switch to Design View by clicking on the “Design” button on the bottom left of the code editor so that we can add AJAX controls into it.

Step 2: Adding your ASP.NET and AJAX Controls

Step-02 - ToolboxAJAX controls are available inside your toolbox by default under the category “AJAX Extensions”. In order to use AJAX on your ASP.NET web application, it is COMPULSORY for you to insert a ScriptManager into your web page. This is because the script manager will be used to handle all AJAX calls or functionality by doing the necessary javascript conversion for the functions on your page.

The next control that you should have in your page should be the “UpdatePanel“. The update panel is the location of your web page where you would like functions to run without doing a page refresh. This is where I will place a GridView (a table to show the news details) and a Button which will be clicked in order for the news to be displayed on the GridView. Note: Make ensure that both your Gridview and Button is placed inside the UpdatePanel! Your design view should resemble the following:

Step-02 - Your Design View

Step 3: Add your Code Behind

Now we need to tell the button to download the news from The Star Online and place the details into the GridView. To do so, double click on your button in Design view to trigger the click event. The code should mirror the following:

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
     Dim reader As XmlTextReader = New XmlTextReader("http://thestar.com.my/rss/mostview/nation.xml")

     'return a new DataSet
     Dim ds As DataSet = New DataSet()
     ds.ReadXml(reader)

     GridView1.DataSource = ds.Tables(3)
     GridView1.DataBind()
 End Sub

If you want, you can basically try running your application by clicking on the debug button or pressing F5. If you get a dialog box requesting for debugging, just enable it. What you should get would be a page which will download latest news from The Star without any reloading or page refresh once you press on the button!

Step 4: Add Loading Effects

Usually in AJAX pages, you will be shown with a loading animated GIF while the data is being fetched from the server. These animated GIFs are useful to show your visitor that the site is currently fetching data. Currently in our web application, the data is being fetched asynchronously but the visitors may not be too sure whether the news is being fetched or not. But firstly, you will need to get an animated GIF for displaying the progress. You can generate and download dynamic and interesting loading GIFs from www.ajaxload.info. In this site, you can create dynamic loading animated GIFs that you want to place in your site really easily.

Since you have already got it, lets place it into our ASP.NET web page. Go back to your design view of your web page and add the control under AJAX Extensions called UpdateProgress. Place it into wherever you want the animated GIF to show when the page loads. Lastly, you must insert your animated GIF that you would like to display into the UpdateProgress Control. Your Design view for your web form should now resemble the following:

Step-04 - Design View with UpdateProgress

Step 5: Test your Application

Congratulations! You have successfully created your first AJAX web site. Now you can test it by debugging the application or right clicking on the Default.aspx file and clicking on “View in Browser”. You will notice the animated GIF appearing while it is fetching data from The Star, and the best part is, the page does not refresh one single bit.

News Details Loading upon Pressing the Button

News Details Loading accompanied by your animated GIF upon the click of the Button

The Star News Showing on your Page without Page Refresh/Reload

The Star News Showing on your Page without Page Refresh/Reload

But of course, your journey for AJAX does not end here. There are also many other cool AJAX features that you can play with by downloading the AJAX Control Toolkit

This toolkit is an add in to Visual Studio and contains plenty of other AJAX controls for you to try. To learn more about AJAX Control Toolkits, please head over to www.asp.net’s AJAX mini site.

Conclusion
So that is it. I hope you enjoyed this tutorial and start your own ASP.NET AJAX web application soon. If you want to get the source code without trying, please get it here. Be back for more about tech at Derek’s Tech Blog.

Source Code: AJAXSite.zip (6.82 KB)





Photosynching with Microsoft PhotoSynth~! Share and View Photos with a Different Point of View

16 05 2009

Photosynth LogoIntroduction to PhotoSynth

I am not joking when I used “Share and View Photos with a Different Point of View” for describing Microsoft Photosynth in the main title of the article.  That’s because Photosynth (www.photosynth.net) really does that by creating 3D models of your photos and allows you share them in ways you wouldn’t have imagined before. First developed by an undergraduate at the University of Washington in 2006, the tech of Photosynth have been improvised and meshed with web browser technologies to allow us to create and view “Synths” anywhere we are.

Basically, this technology is possible with the use of pattern recognition and matching algorithms. Photos which are uploaded into the Photosynth server are compared to find identical points so that they can be merged together to form a single 3D model. This means the more images you place in your synth, the more detailed your 3D model becomes. Once the Synth has been uploaded, Microsoft will allow visitors to view the Synths using Microsoft Silverlight, a browser based plug-in which could be installed on most browsers available today.

By using Photosynth, you can now enjoy photos of famous landmarks such as Piazza San Pietro at Rome, San Marco at Venice, the Eiffel Tower and even our very own KLCC in Synth 3D glory. You may even create 3D shows for your collectibles like how I did for my toys.

KLCC Photosynth. Photos by Seok Chern

KLCC Photosynth. Photos by Seok Chern

Toy Photosynth. Photos by Derek Chan

Toy Collection Photosynth. Photos by Derek Chan

Creating Your Own Synths

Like the idea of viewing Synths? How about creating one Synth of your own, upload it and start sharing your 3D Synths with your friends? Creating and uploading a Synth is really simple. The only pre-requisite for creating Photosynths is a Windows Live ID. Go get one for free if you don’t have it as every user is allotted with 20GB of space to create synths. Below are the steps that you may follow:

Step 1 – Download Photosynth Client Tool

Firstly, move your mouse over to http://photosynth.net/create.aspx to download the Photosynth client tool first. You should get a page as shown below:

Create your own Photosynth Page

Create your own Photosynth Page

Once you are here, just click on the “Create a Synth” button. If this is the first time you are creating Photosynth, you should be prompted to download a Photosynth client tool with the filename “PhotosynthInstall.exe”. The download is about 10MB in size, so be patient – it’s worth the wait!  When you have finished installing the client tool, open it up and login using your Windows Live ID.

Step 2 – Select the images that you want to Synth

After you have successfully logged in, you may now add the images that you would like to synth. Do that by clicking on the “Start a new synth” button and add the photos that you would like to have in your Synth. Ensure that the images have some background or props in common so that the Photosynth server can mesh your pictures together.

Photosynth Desktop Client Tool to Add Pictures and Description

Photosynth Desktop Client Tool to Add Pictures and Description

You may then provide any tags or a description that you feel is necessary. Be sure to set the visibility of your synth too. Public will allow your pictures to be seen by anyone while Unlisted will only allow you to hide and share out the link of the synth only to those whom you allow.  If you would like to set any one of the images to become the main photo to be displayed for your synth, just select one of the pictures and click on the ‘Use Selected Photo’ button.

Step 3 – Synth, have a Cup of Tea & Wait

Once you are done, click on the ‘Synth’ button, sip a cup of tea and wait for the photos to upload. The time to compile and upload will depend on the number and size of your images.

Photosynth Synthing and Synthy Score

Photosynth Synthing and Synthy Score

Upon completion, you should get a synthy percentage which represents how many photos were successfully synthed together. A percentage less than 100 would mean that some pictures were not successfully merged due to some possible differences in your shots.

To view your synth, just click on the view button and your web browser should open with your newly created synth. You may also add highlights to images and set several settings so that it will be easier for people to get around your synth by clicking on the ‘Edit Synth and Highlights’ button here.

Photosynth Completed

Photosynth Completed

Start Snapping and Happy Synthing!

That’s all it takes to create your very own Photosynth synth. Pretty simple isn’t it? Don’t stay there and wonder anymore, go create your synths now at www.photosynth.net and start sharing your creative synths!





Silverlight Slide.Show for your Site!

13 04 2009

Fancy creating a cool slide show for your uploaded photos to be viewed online? Use Slide.Show, a Silverlight slideshow viewer created by Vertigo. Want to know why its nice? Just have a look at the screenshots below and view a sample done by me here on my toy collection. You may also check out a generic sample here.

As they say, “A Picture is Worth a Thousand Words”! It would have been more interesting if I could place the Silverlight control directly into this post. Unfortunately, I can’t do so on WordPress.com’s blog. 😦

My Toys Photo Gallery in Vertigo's Slide.Show

My Toys Photo Gallery in Vertigo's Slide.Show

A Set of Generic Photos using Vertigo's Slide.Show

A Set of Generic Photos using Vertigo's Slide.Show

Vertigo's Slide.Show Photo Gallery and Categorization

Vertigo's Slide.Show Photo Gallery and Categorization

To learn more on how to use Vertigo’s Silverlight Slide.Show, click here to visit Vertigo’s official Slide.Show page. You can place all your pictures in by just editing the data.xml file.





Fixing Silverlight Applications that Requires East Asian Languages Installed

6 04 2009

Recently, when working on CRSM’s Computer-Based Training Silverlight application, I have encountered quite a big problem where people whose PC does not have East Asian Language installed are unable to view it. Basically, the problem started because we have used a video carousel control which has globalization applied. Globalization allows programmers to localize and create their software in multiple languages.

Upon the loading of the XAP file, if a file under certain language is not found, Silverlight somehow disable the showing of the application altogether unless East Asian languages are installed. The error which was displayed is  “Unhandled Error in Silverlight 2 Application” with code 2105 as shown below.

silverlighteastasianlanguageerror

As our application do not require Chinese language that has been utilized by the video carousel, the chinese language DLL file which should be loaded is unnecessary for PCs without East Asian languages installed. However, Silverlight 2 automatically loads it even after knowing that the computer do not have support for East Asian Languages. This is basically a bug which has already been fixed for the next version of Silverlight, which is Silverlight 3. To temporarily fix this problem, all we need to do is to ensure that Silverlight does not load other language’s DLL file.

To do so, simply use any zipping program (i.e. Winzip or Winrar) to open the XAP file. Inside the zipped XAP file, you should get a set of files which looks like this:

xapcontentWhat we would like to do is to edit the AppManifest.xml file which is located inside this XAP file (not the one which is located in the same folder as your XAP file). After opening it, all I did was to remove the languages DLL Assembly Parts which were causing me problems. i.e:

<AssemblyPart Source=”zh-Hans/System.Windows.Controls.resources.dll” />
<AssemblyPart Source=”zh-Hans/Cokkiy.Display.VideoCarousel.resources.dll” />

Once I have taken these 2 lines ouf of the AppManifest.xml file, my Silverlight application could now run on any system whether they have East Asian languages installed or not.

However, this temporary hack won’t help in globalization because what we have basically done above will delete any initialization to different language resources. As I have mentioned before above however, this will be fixed come Silverlight 3. There are more advanced hacks available out there to allow your AppManifest.xml to load based on the language that is available in the PC if you still require globalization to be done on your application. You can find it here at http://wpf-e.spaces.live.com/blog/cns!2B248D261D0E0035!407.entry





CRSM’s Silverlight Computer-Based Training Application

3 04 2009

Recently, I have supervised some students to come up with a Silverlight Computer-Based Training Portal for the Crisis Relief Squad of MCA. By using Microsoft Expression Blend for design and Microsoft Visual Studio 2008 for back-end coding, we have created quite a unique Silverlight UX for this application. Some of the effects used were Video Carousel, Slide Show and a little 3D. Check out the site here! Credits go to Kee Kok Foo and Kueh Tai Yong for creating such an interesting app!

Below are some of the screenshots of the application:

The Landing Page for CRSM's Silverlight Computer-Based Training

The Landing Page for CRSM

Welcome page for CRSM's Silverlight CBT

Welcome page for CRSM

Slide Viewer on CRSM's Silverlight CBT

Slide Viewer on CRSM

Video Carousel Viewer on CRSM's Silverlight CBT

Video Carousel Viewer on CRSM

Hopefully we can come up with some improvements on this system in terms of performance soon. Currently, the loading time is a little slow. It requires approximately 5 minutes of downloading to view at the moment. A custom loading screen would also be a good idea to replace the usual Silverlight loading screen, but we still need to learn how to do that!