Saturday, November 28, 2009

Silverlight 4 : Crossing Language barriers aka BiDiRTL

I have already talked about launch of Silverlight 4 Beta in my last article. We all jumped on new Silverlight 4 Beta bits and I am sure you all must be ready to build next generation web applications.

Silverlight 4 ( We all know its in Beta, so I will not use the word “Beta” again) like its older versions from version 2,3, Supports multiple languages,confused? I am talking about C#,VB.NET,IronRuby etc. which can be use to develop Silverlight applications.

But this post is not about those languages, This post is about the language which we use to communicate. A great news for people who speak “Arabic” language. Silverlight 4 not only helps you to render your content but also now you can right it the way you want, mean to say, you have now “FlowDirection” attribute with which you can write your Arabic Text from Right to Left (A buzz word for above is BiDiRTL support). All you need is just set the FlowDirection attribute and you are done ! Don’t believe what I am saying? Ok, see this :

Bidi1 More clear you can see :

Bidi2

I do not speak Arabic,but I got it translated via “Bing Translator” (You are free to blame Translator if some mistakes are there :) )

Source Code ? Too Simple ! :

Bidi3

As you can see, For this Arabic language, I am not taking any help of Culture Class,Globalization-Localization or any other resource or xml, Simply I have copied the text and pasted in my designer.

For my Arabic friends, If you guys want to shift your complete portal into Silverlight with Arabic support, you can set “FlowDirection” attribute as “RightToLeft” to your UserControl directly, if you want some part as LeftToRight or RightToLeft then offcourse you can override anywhere by reseting FlowDirection attribute. So all you need is Language skill and FlowDirection attribute as and when required. There are so many languages in world which are different in tone and different when it comes to writing, Script I mean to say. I spend my 2 years in college to learn Japanese (“Sankyu” level they say), I find it bit difficult to write especially “Kanji”, I given try for Japanese with this methodology and it worked like charm !

---------------------------------------------------------------

A humble request to Microsoft :

A Complex Japanese script renders well in Silverlight 4 Beta RichTextArea control, but when tried, It fails to render any Indian language like Devnagari Scripts, We know that it does not support Devnagari script like Arabic or Japanese but please consider this as “Feedback” and really looking ahead for Hindi and other India Languages support for Silverlight in future. Attempt made to render but it fails like this :

Bidi4 You can see that it easily renders Katakana and Hiragana,Also render Arabic well, but when Devnagari Script is pasted,It just shows those alien blocks :(

Out of 1 billion Internet population in India, around 66% of people used to with Hindi and Devnagari script (approx)

---------------------------------------------------------------

Well, coming back to our discussion, So till the time you must have realize that there is nothing special skill require to implement this feature of Silverlight 4, Now its your call to use it wisely in your business applications. you can initially try with sample POCs or implementing this into your static content web pages. A must try out feature.

How can I keep my mouth shut without shouting about data binding and that too with my all time favorite DataGrid Control ? I finally given a try to push this feature in DataGrid, Believe me, Results are more than expected ! It rocks !! All you need is declare a class with some properties and just bind it like we do normally in our loaded += event like this :

public class sigheads
       {
           [Required(ErrorMessage = "Field Cannot be left Blank")]
           public string FirstName { get; set; }
           [Range(0, 999, ErrorMessage = "Invalid Age")]
           public int Age { get; set; }
           [RegularExpression(@"\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*", ErrorMessage = "Invalid E-Mail ID")]
           public string Email { get; set; }
           public string Job { get; set; }
       }

Now write one method GetSIGHeads() like this :

public List<sigheads> GetSIGHeads()
       {
           List<sigheads> sglst = new List<sigheads>();

           sglst.Add(new sigheads() { FirstName = "فيكرام", Age = 27, Email = "vikram@dotnetcoe.com", Job = "مطور برمجيات" });
           sglst.Add(new sigheads() { FirstName = "أنيل", Age = 40, Email = "anil@dotnetcoe.com", Job = "إدارة المشروع" });
           sglst.Add(new sigheads() { FirstName = "حيدر", Age = 28, Email = "haider@dotnetcoe.com", Job = "نائب الرئيس" });
           sglst.Add(new sigheads() { FirstName = "أحمد", Age = 27, Email = "ahmed@dotnetcoe.com", Job = "مدير قاعدة البيانات" });
           return sglst;
       }

Point to make a note : I have hardcoded some values to my properties, In real situation, Data will be coming from Database (I am talking to few experts for this scenario especially in Silverlight, So may be in my coming articles, I could drop more light on the same)

Next step is bind this to grid and hit F5 and run for glass of Beer since you are going to see desired output on your screen :)

Bidi5

Happy ? I can see a bright smile on your face already ! :)

So I hope you like this article, As I told you, initially we will understand the concepts and features of these new bits and then we will hit hard as usual.

Moral of the Story : Arabic and other few languages now can easily get rendered inside your webpage,kudos to Team Silverlight for giving this feature, a milestone I should say.

Your valuable feedback is most welcome, Also, due to day to day boring life of 8hrs work, sometime it is not possible to do lot of research, so if anyone given try for Indian language and worked for them with these Silverlight 4 bits, do let me know, I will love to learn from you.

Vikram.

Monday, November 23, 2009

Silverlight 4 : A long term player

Well, I still not came out of those glorious demos of Silverlight 4 Beta shown by Scott Gu on eve of PDC09..My mind is still in that 2nd Day keynote at PDC..Wow !! Microsoft and Team Silverlight made it !!

Silverlight_Logo

You all must be wondering why this place is still silent despite Silverlight 4 Beta announced 2-3 days back, Nothing like that. I am already getting ready to give you lot of good stuff over next couple of weeks.I do blog about Silverlight with demos which I feel that you can use in your day to day business apps. Last time while Silverlight 3 Beta was announced, I wrote full series of articles. This time I am planning to put more concepts than code, Offcourse working code will be there in article, but main discussion will be around the actual practical application of features introduced in Silverlight 4.

Till the time I start filling my Silverlight 4 Beta articles here, A good thing will be to download environment and get ready to see the future !

A good place to visit : http://silverlight.net/getstarted/silverlight-4-beta/#tools

Here are few highlighted features of Silverlight 4 Beta in nutshell :

  • Out of Browser Applications - Elevated Privileges Support,COM interop
  • HTML Hosting Support
  • WebCam/Mic Support (raw stream only)
  • Printing Support
  • Notification aka “Toast” API
  • RichTextBox,Arabic and Hebrew Text Support
  • MouseWheel Support on ScrollViewer, TextBox, ComboBox, Calendar, DatePicker
  • DataBinding Support for DependencyObjects,IDataErrorInfo Support,StringFormat, TargetNullValue & FallBackValue Properties on Binding,IEditableCollectionView and Grouping support on CollectionViewSource
  • Astoria 2.0 Support,MEF
  • Expose Runtime Version to 3rd Party DLLs
  • NGEN Support for Core Runtime Binaries

iPhone Streaming now available : http://www.iis.net/iPhone

Silverlight Media Framework : http://smf.codeplex.com/

So out of this Treasure Box what we are going to discuss here? Well, I will touch upon highlighted features like Printing,WebCam/Mic Support, HTML Hosting,RichTextBox and our all time happening discussion here..DataGrid :)

So take a long breath and get ready for yet another drive with Silverlight..Silverlight 4 (Beta)..A long term player in world of RIA/Web..Way to go !! :)

Vikram.

Wednesday, November 11, 2009

Bing Maps Silverlight Control .. Wait for Map Control is over !

Hello everyone, hope you enjoying Silverlight and Expression Studio all the time. Well, For a long from Silverlight 2 onwards,we all are waiting for Map Control in Silverlight, Till the time we had DeepEarth Project and various other third party stuff, But now I am happy to share that we now have our own Map Control for our applications, Its free and very much simple to use. Just to give all control in your hand to allow you to explore, I am giving all information in very short manner..A quick review you can say.

Yes ! Bing Maps Silverlight Control is now available. So what you need?

1. Silverlight 3 Setup + Visual Studio and Expression Blend (Expression is optional) (Sorry to say..But with Silverlight 2 it might not work..document says so)

2. Bing Maps Silverlight Control : You can download it from here :

http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=beb29d27-6f0c-494f-b028-1e0e3187e830

3. You need to have account with : (Live ID is must)

https://www.bingmapsportal.com/

Once you install Bing Maps Silverlight Control, It will show you CHM file (If you really read that CHM carefully, you don’t need to read rest of my post,but please don’t do so :) ). All information is there in place with all necessary code snippets.

Now your job is to take normal Silverlight Application Project Template. Add Reference to your Silverlight Project to following dlls :

1. Microsoft.Maps.MapControl.Common.dll

2. Microsoft.Maps.MapControl.dll

You will find them usually under Program Files -> Bing Maps Silverlight Control -> V1-> Libraries

Then you need to set reference like this in your XAML file :

xmlns:BingMap="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl"

Then you need to write following XAML :

<BingMap:Map CredentialsProvider="Your Key Here"/>

Wait !..One step is mandetory before this, First you need to create Account with https://www.bingmapsportal.com/

You will get following UI once you perform login :

Capture

Well, you can see 3 options there :

1. Create an account : You need to enroll your self (Typical “I Agree all the terms” kind of stuff :D )

2. Create or View Keys : This is something similar to Silverlight Live Streaming account procedure, you need to give some name to your application and URL where you want this etc. For testing purpose you can give any URL (Specific URL is recommended though)

3. Update or View Account Details : Typical Account information.

Below these three you can find links to SDK and Blogs and forums which talk about Bing Map Control. (Ajax Control is also there beside Silverlight, My ASP.NET friends should give try for that too)

Then now come back to Visual Studio, Inside your app now, Place that key to “CredentialsProvider” and you done. Now you will see the Control on your designer like this :

Bing1

This even opens in Blend, If at all you want to place some design around it :

BlendBing

Control as such will not expose any properties which you can set-reset in Property windows, you need to play with XAML and C# Code.Now after all this just play with it by pressing F5 and you can see the output like this : (For this simple Hello World kind of example, there is no C# code, but once you start digging inside this control and Maps, you need to play with C#)

OutputBing

Not satisfied?? Want to have more stuff?..Want to handle its events? Want to place Videos,Images on it??..well you can do it easily by just few line of code !..No I am not taking that small pain..you can simply refer CHM along with it, For those CHM word does not make sense, it looks like this :

BingCHM

So, Now let it be your ASP.NET or HTML Page, Mapping with Bing Map Control will add value to your application and more important is that, Its Bing and its free..Bing Bing Bingo !! :)

Hope you like this post, I kept this small since this is very exciting and I don’t want to kill your excitement, Still if you feel I should drop some code snippets here, feel free to talk with me, Will then go for some more apps or another in depth post,Keep visiting here since very soon lot more new stuff is on your way !

Vikram.

Monday, November 9, 2009

Expression Encoder 3 Screen Capture : A small wonder…

Me and my other blogger friends all over the world already written many things about Expression Studio and Tools inside Expression Studio like Blend,Web,Encoder etc. With the launch of Expression Studio Version 3, Microsoft given us a simply amazing tool name as “Expression Encoder 3 Screen Capture” which though is not much talk about but already created wave in communities across the world.

While giving feedback to my articles here, Many suggested me that why I am not going for any screencasts here? Believe me, I still prefer typing long post over screencasts, But yes I am planning to have some screencasts in near future. When I took this activity and initiate it to hunt down a tool which will help me to do so, I found a big player in this arena as “Camtasia Studio”. My first impression was its freeware, then I realized that its paid software(They do give 30 days trial), well for good things cost hardly matters, But its always good to first look for other options. When I installed Expression Studio 3 on my machine, I was more keen towards Blend,Design and Encoder being a Silverlight enthusiast like you all, I totally neglected this Screen Capture that time (How dumb !).

Well, enough of story, now lets talk about Expression Encoder 3 Screen Capture. In a nutshell, Its a screen capturing utility introduce by Microsoft along with Expression Studio 3. You can find it in your start menu once you install Expression Studio 3. Once you click on that, you will find following on your screen :

Screen1

You can see four basic buttons on this UI, Out of these first two belong to Audio and Video, Then other two are Settings and Recording respectively. Once you click on Settings,you will find following window :

Screen2

You can see various Tabs here, each corresponds to some specific operation, Screen tab is only to set Bitrate and Frame rate, Camera Tab helps you to choose your Built-In Cam or attached cam for recording like this :

screen3

You will get all necessary settings option for your camera here. Moving ahead to Audio :

Screen4

It will help you to choose Audio Options and even here you can set Bitrate and Format in corresponding dropdowns, HotKey Tab basically help you to configure this player and you can set your own hotkeys here,else it will take default :

Screen5

Once all these setting are done, Another important Tab here is “Other” which will let you know where this screen capture going to get store and what other options are there like this :

Screen6

After these steps, Once you you back to main screen, After clicking on “Record” button, It will show you a Red Box covering your screen along with two free guidelines which will allow you to select which part of screen you want to capture, Remember by default it is screen as capturing object and not camera, For camera you need to go to Camera and do the necessary settings there. It will look like this :

Screen7

You have full freedom to set the size and/or some specific resolution by following option which you will get :

Screen8

After your recording, you will see a Preview of what you capture on screen like this :

Screen9

Screen10

At this Preview player, you have 2 options, First is to save this project as XESC format or Second option is to encode this properly via Encoder(Still you have to save that file before going to encoder), Yes you do have Encoder option at right side bottom of this preview player, Then story is pretty straight, Encode and upload it wherever you want, On blogs, forums anywhere, Silverlight hosting is definitely a good option always.

So, do you like this new way of doing Screen Captures? Isn’t it useful for Screencasts, This is power by Expression Encoder,Big plus point about this tool is the “simplicity” which we always find in any Microsoft Product.(Attempt here is not to blindly compare with Camtasia Studio or other screen capturing tools, But to create awareness about it since its part of Expression family).Its quick,efficient and most important is small in size..hence I name this tool as “A small wonder…”, I hope you like this article, This is bit away from Silverlight and Expression Blend and Design which we talk here a lot, But I found this tool worth blogging and I feel it might be useful to most of you, So I made this attempt. I am now again will go back to our main arena of Silverlight from next article. Thanks and let me know your feedback as usual.

Vikram.

Sunday, November 1, 2009

Expression Blend 3 SketchFlow : New era in Prototyping – Part 3

First of all sorry for delay in posting this last part of this series which is quick wrap up of first two, I was under heavy work load and rest of the time went into Windows 7 Party preparation which will be around next weekend.

In last part, we saw various aspects of SketchFlow and how we can improve our design with the SketchFlow controls, How we can program it and make it more real, We also saw how we can render that inside browser and navigate among various pages, Lastly we saw how we can give feedback with Ink tool provided to us and how it empower us to give correct feedback, We even went ahead and store feedback of that last example in a separate feedback file.

Now lets open that feedback file by going to Project->Add Existing Item.. Once you load that file you will see a Lamp kind of symbol inside Sketch Map and once you get your mouse pointer there, you will see the feedback available,Also you will see the corresponding feedback in your designer too like this :

feedback

loginfeedback

So, once we import this particular feedback file, Designer will be able to see the changes and what all things he/she need to improve in the same. This is how its very interactive for Designers,Developers as well as to Clients/End Users who give feedback.

What add cherry on the cake kind of thing is the feature introduced by Microsoft to import your Adobe Photoshop and Illustrator work inside blend and on top of that, You can scan images and make your design(Do refer videos shown on Virtual Kitchen), You can also import your PowerPoint work inside blend, So for these all you need is to visit File menu and you will get following options :

imports

Note that, for PowerPoint, there is no assurance that Animations inside PPT will work on Silverlight, This is a twist and there was lot many discussions went into community to have PPT with Animations directly exporting to Silverlight. Well, A paid solution is there, Check this out :

http://www.erain.com/products/convexion/default.asp?erain=cnvannc

Another question may come to your mind that, till this part of this article, I am talking all the scenarios happening on local machine, But how will one export that? A simple way to export this SketchFlow is just go to file Menu and choose “Package SketchFlow Project…” you will get following output :

export

Yes ! everything will be exported as a proper package and a TestPage is in place to check out.

Now for my designer friends, there is always a lot of pain to prepare documents and put these screens inside as specs, No wonder lot of efforts take place and time also get waste in that most of the time. But thanks to Microsoft who coming with new revolution in Blend and yes ! now you can create documentation of your design work. All you need is just save your work and go to File Menu-> “Export to Microsoft Word…” and see the magic ! :

doc1

doc2

doc3

Point to make a note here is that, if you open feedback file and export this to Word, you will not find the feedback reflected, So its a general export of your actual screen with a neat layout and schema in form of Microsoft Word Document (PDF?? well you need to take pain for that to export from doc/docx to PDF :) )

Well this was all about SketchFlow inputs I want to share with you and I am very sure this will help you a lot to move ahead in your prototype development, maybe in coming future I will try to build and demonstrate an end-to-end application via SketchFlow.

Meanwhile there is a must have book for SketchFlow which is a great refer which you can find it here :

http://www.dynamic-prototyping.com/

Another good resource you can find on my blogroll, Blog by Renuka Prasad, A fellow MVP in India and good friend of mine who have made some posts on Expression Blend SketchFlow, Check those too.

Thanks for your feedback and mails, I will soon back here with Silverlight and much more things.

Vikram.