Just converted my PHP / CSS-based Homepage to a Silverlight 2.0 WebsiteThomas Claudius Huber
Three weeks ago on a saturday morning I spent my thoughts on what to do with this last free saturday before the football-season starts. Unfortunately my girlfriend was not here, so Tabletennis was no alternative. But there were other possibilities:
- Play Guitar all day long
- Play on my new Tenorhorn (I haven’t told you that, right?)
- Put my snowboard under my feet and go up on the mountain
- Do some muscle-training and try to push up the 105kg more than 12 times
- Look that Bankjob-DVD
… while I was thinking about all that, I surved on www.silverlight.net and then I thought, why not just build my classic homepage (http://www.thomasclaudiushuber.com) totally with silverlight 2.0. And that’s what I’ve done on that morning. :) Yesterday I’ve finished the page by implementing a php-call from Silverlight to make the contact-formular work (I’ve no ASP.Net-Support on my Webserver) Take a look at the resulting Silverlight-page on http://www.thomasclaudiushuber.com/pageInSilverlight.
I wanted the result to be as close as possible to the original page, and I think it is. Just with some animations. :-)
It was a rapid development process, but keep in mind that it’s also a really simple site. The language switch the php/css site has I left off in the Silverlight-Version, because I went also snowboarding in the afternoon as the snow-height is 63cm on the Belchen, a mountain in the black forest not far away from my home. Instead of the language-switch I’ve created a "fullscreen"-button (It was a one-liner :-)). I also didn’t make a real Dataaccess through WebService-calls. The text-parts are statically inside the XAML-documents. But that wouldn’t be a big thing to change.
Through the development process of the Silverlight-page there were different things I knew from WPF and I was missing really extremly in Silverlight. Other things didn’t work as good as I thought they should. And at least there were also some good things. Let’s take a look at those that are "not so good":
The First "not-so-good": The TextBlock-Element can contain Inline-Elements. In WPF, there are many such Inline-Elements to format the text inside, like Bold, Italic, Run, LineBreak, Hyperlink, Span and so on. In Silverlight there are only two, LineBreak and Run. The one you will be missing most in Silverlight, as you are developing web-applications, is the Hyperlink-Inline. In WPF it allows you to create a hyperlink anywhere in the Text. As Silverlight doesn’t have this one, you can’t create a hyperlink inside your text out of the box. Silverlight has a HyperlinkButton, but that can’t be put inside a TextBlock. So what’s the solution? I’ve used a WrapPanel in combination with multiple TextBlocks and Hyperlinks so that it looks like the Hyperlinks are inside the Text. But in fact they aren’t, it just looks so. There are also ThirdParty-Controls available allowing you to write text that contains hyperlinks. I hope the Hyperlink-Inline will be available in Silverlight 3.0
The Second "not-so-good": The TextBlock-Element can’t justify the text it contains.
The Third "not-so-good": The Image-Element only supports jpeg and png-files. As the images in the "articles"-Section of my homepage were gif-files, I needed to convert them. Maybe in a future release of Silverlight the Image-Element supports more types. But this point isn’t really bad, it’s not a big thing to convert images.
The Fourth "not-so-good": If you set the silverlight plugin’s params windowsless to true and background to transparent, you can display a custom html-background. I tried that and set the silverlight-plugin to a width of 800. If you use such a html-background, your silverlight-content will flicker when you animate it. That’s because the plugin is in an overlay over the website. That wouldn’t change in future versions. So the golden rule is not to use animations if the plugin’s background is transparent and the plugin is windowless. Or another option is to set the plugins width and height to 100% so that you don’t see any other html-contents. The latter I’ve done.
The last "not-so-good": The Enum-class has no GetNames-Method. To loop through an enum, you’ll need reflection. I’ve done it this way, where Category is my enum:
foreach (FieldInfo fi in typeof(Category).GetFields(
BindingFlags.Static | BindingFlags.Public))
Category category =
(Category)Enum.Parse(typeof(Category), fi.Name, true);
Ok, that’s all. There are also more points, e.g. Silverlight doesn’t support Triggers and Commands out of the box. But I’ll only mention those points that have been important when converting my website to Silverlight 2.
Now let’s take a look at the great things. I’ll just mention three:
The First "great one": You can use C# and common .NET classes you are already familar with. This aspect is really a big one, even if it was said already so much.
The Second "great one": With Expression Blend and Visual Studio, Animations and UI-Design can be done very fast. If you’ve some experience with WPF-Userinterfaces, you’ll do it in Silverlight the same way.
The Last "great one": As my Homepage contains a contact-formular, I needed some service to call to send an email from that formular in Silverlight. Unforetunately my webserver doesn’t understand .asmx or .svc. So I tried to call a php-script from Silverlight for sending the email. And hey, it wasn’t difficult at all. The WebClient-class in Silverlight has everything you need to make a call on a lower level to anything in the web.
So stay tuned and take a look at the Site on http://www.thomasclaudiushuber.com/pageInSilverlight