Blog posts by Chris Klug

Blog posts by Chris Klug2011-08-25T10:02:00.0000000Zhttps://world.optimizely.com/blogs/Chris-Klug/ Optimizely World Using ildasm and ilasm to fix the EPiServer Mobile PackOk, so a couple of days ago (or something) EPiServer released a module called Mobile Pack. It is built to make it easy for companies to get their website up and running for mobile browsers, which is pretty cool. It uses “Visitor Groups” and a browser criterion to redirect mobile users to a mobile version of the website. A solution which is actually quite simple, but it works well, and simple well working things are great. At least it works in theory. Unfortunately, in the real world the code doesn’t work… The problem? Well, it doesn’t redirect properly for iFruit devices. I found this out by installing the module on a site, and modifying my FireFox browsers user-agent to that of an iPhone, which looks like this <blockquote> 5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16 </blockquote> Or at least similar to it… But browsing to the site did not redirect me, which annoyed the crap out of me. And after going through every single configuration I could think of, I still couldn’t get it to work. So I assumed I had missed something, and decided to look at the code in .NET Reflector to see what was actually happening in the code. And to my surprise, it wasn’t actually me, it was the code. There is one line of code that checks the browser user-agent to figure out if it is a mobile browser. It looks like this <div style="border-bottom: silver 1px solid; text-align: left; border-left: silver 1px solid; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin: 20px 0px 10px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'Courier New', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow: auto; border-top: silver 1px solid; cursor: text; border-right: silver 1px solid; padding-top: 4px" id="codeSnippetWrapper"> <pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin: 0em; border-left-style: none; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; border-right-style: none; font-size: 8pt; overflow: visible; padding-top: 0px" id="codeSnippet">public override bool IsMatch(IPrincipal principal, HttpContextBase httpContext) { return httpContext.Request.UserAgent.Contains(base.Model.Browser.ToString()); } </pre> </div> This could sort of be fine, but it isn’t. First of all, comparing the user-agent to a compiled enumeration like this is a little bit too limiting for me. My WP7 device would for example not be considered a mobile device… I would have preferred a config setting in web.config or even better using the browser capabilities built in to .NET. But that isn’t the real problem… When comparing strings like this, I recommend doing a case-insensitive check. As Contains() doesn’t support passing in a StringComparison, doing a ToLower() would at least be sweet. In this case, this Contains() call is actually the cause of the redirect problem… As it compares the user-agent, it uses a enum that looks like this <div style="border-bottom: silver 1px solid; text-align: left; border-left: silver 1px solid; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin: 20px 0px 10px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'Courier New', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow: auto; border-top: silver 1px solid; cursor: text; border-right: silver 1px solid; padding-top: 4px" id="codeSnippetWrapper"> <pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; background-color: #f4f4f4; margin: 0em; border-left-style: none; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; border-right-style: none; font-size: 8pt; overflow: visible; padding-top: 0px" id="codeSnippet">public enum BrowserType { Android, Apple, IPhone, IPod, IPad, BlackBerry, MSIE, Opera, Firefox, Safari, Chrome, Webkit } </pre> </div> Caught the problem? Well, iFruits use lower-case I:s… So since the Contains() call is case-sensitive, it fails to identify i-devices as mobile devices, which is quite funny as those would be the first once I checked when building something like this… So, how do we fix it? Well, there are two ways. Either you go to <a href="http://mobilepack.codeplex.com/" target="_blank">Codeplex</a> and download the source, fix the bug, and recompile it, which is probably the easiest way. But being me, and already having the dll on disk from my NuGet “install”, I decided to fix the dll instead… The way to do this, is to disassemble the dll to il code, fix the problem and then recompile it… Let’s start by getting the IL code. This is done by opening ildasm.exe, which is easily done by opening the Visual Studio Command Prompt and typing ildasm followed by enter. This opens up ildasm. Then drag and drop the dll into the opened window and you get a view like this <a href="http://chris.59north.com/image.axd?picture=image_3.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://chris.59north.com/image.axd?picture=image_thumb_3.png" width="404" height="604" /></a> Next, open the File menu and select Dump. In the resulting window, just press OK and select a place to save the resulting il code. This will also create a .res resource file with the same name. This code file can then easily be opened in Notepad. After doing so, press Ctrl+F and search for “iphone”. Now change all the rows that have the incorrect capital I to use the correct spelling, and save the file and close Notepad. Next we need to compile the il code back to a usable dll. This is done by using a tool called ilasm.exe. Unfortunately, if you just pull it up using the command prompt like we did with the ildasm, you might get into problems. The ilasm.exe application is runtime version dependent. Each version comes with its own ilasm. And starting it from the VS2010 command prompt might give you the wrong version depending on what version you are using for the EPiServer project. So instead, we use the full path, which is <blockquote> <pre>%FrameworkDir%\v2.0.50727\ilasm</pre> </blockquote> At least in my case, as my project is .NET 3.5, which means runtime version 2.0. But we also need to pass some parameters to ilasm. Let’s use <blockquote></blockquote> <blockquote> %FrameworkDir%\v2.0.50727\ilasm MobilePakc.il /out=MobilePack.dll /res=MobilePack.res /dll </blockquote> At least is you named the il file MobilePack.il… This will now give you a new dll file that you can drop into the bin folder of your project and you are done… This obviously works for other dll's than MobilePack, as long as they aren’t signed, as well as for other projects than EPiServer. But in this case it just happened to be an EPiServer problem… I also want to mention that I have notified Allan who built this code about the problem, so I assume it will be fixed relatively soon… Cheers! IMPORTANT! If you have used NuGet to install the mobile pack, remember to change the reference to the new bin instead of the one in the packages folder…2011-08-25T10:02:00.0000000Z

Blog post

Event bubbling changes in Silverlight 2.0 Beta 2 controlsI got another question about an issue in Silverlight 2.0 Beta 2. My collegue who is at the moment working on a video-player came to me and asked me why MouseLeftButtonDown- and Up didn't work on the slider and after 2 minutes of Googling we found out that he wasn't the only one faced with this problem. I started by Googling a bit more. Google is a developers best friend, but I couldn't find a solution. I found the reason for the problem, which I confirmed by checking the sliders code in Reflector. It is actually not a change in Silverlight as such, but in the controls that ship with Silverlight. For some reason Microsoft changed the implementation of their controls from Beta 1 to 2 and started letting each individual template part handle their on mouse events.So each part of the control encapsulates itsfunctionality nicely and sets the Handled-property of the EventArgs to true in their eventhandlers. This causes the event to stop bubbling and also renders the MouseLeftButtonDown, Up and so on the control more or less useless. The easy solution that some guys suggested, which was also my first solution, was to inherit the control and override the OnMouseLeftButtonDown method. This doesn't really work in my case though. In the case of Button, it might, but the slider doesn't offer that possibility since there are no protected methods to override. The Buttons base class, ButtonBase, implements a couple of protected virtual methods to override, but the slider makes these methods private. So I went through the template for the slider control to figure out how it worked and came up with a solution. I created a class that inherited from Slider. This gave me access to the protected method GetTemplateChild(), which gave me access to elements in the template. I then created a property of type Thumb. The reason for this choice was that I was only interested in mouse events for that specific part of the control, but it works with any part of the template. In that property I then called GetTemplateChild() passing in the name of the thumb, "HorizontalThumb", and casting it to Thumb. Note that the name is for the template for the thumb used when the control is in horizontal mode. Changing to vertical will require that you change the name. This looked nice and might have worked if I hadn't tried to get hold of the Thumb as early as in the Load event. By that time, the ApplyTemplate() had apparently not executed and I got a null reference. So I added some logic to check for null and call ApplyTemplate in those cases. After that I could just add my control and handle the events from my Thumb. This method should be possible to use on basically all controls that might be causing your headaches. Finding the name of the template parts can be dont in several ways. One is disassembling the control in Reflector. Microsoft stores the names of the parts in constants, using relatively easily understood names. The names are also available among the attributes addorning the class. Another way is to disassemble System.Windows.g.resources resource in Reflector. All default templates XAML is available in generic.xaml. And the final one is to open the control in Blend 2.5 and edit the controls template and then take a look at the xaml that it creates. However you do it, it should help you out. It might be an ugly solution, but it's the only one I can see at the moment. Here is the full code for my custom slider. It's not a lot of code, and perhaps not very beautiful, but it will work as an example of what I'm talking about. <blockquote> <div class="code"> [code:c#] public class MySlider : Slider {     Thumb _horizontalThumb = null;     public Thumb Thumb     {         get          {             if (_horizontalThumb != null)                 return _horizontalThumb;             _horizontalThumb = this.GetTemplateChild("HorizontalThumb") as Thumb;             if (_horizontalThumb == null)             {                 this.ApplyTemplate();                 _horizontalThumb = this.GetTemplateChild("HorizontalThumb") as Thumb;             }             return _horizontalThumb;          }     } } [/code]</div></blockquote>2008-07-07T19:25:32.0000000Z

Blog post

And the solution is AssemblyPart...A couple of weeks ago I had a look at a "module" for EPiServer CMS 5. It's going to be a part of our new package called Create+, and is called InteractiveScene. It basically gives the editor the ability to add and configure Flash-based content using EPiServer. So, how does this end up being an entry on my blog? Well, it got me thinking. But first off I have is to say that I'm not here to replace InteractiveScene in any way. Neither am I here to tell you to do it. My concept builds on top of InteractiveScene, using it, not replacing it. It would of course be possible to use my thoughts to use this outside of EPiServer, in which case you would have to build the parts that I use from InteractiveScene manually. So, back to the question, why am I blogging about a third party application for EPiServer? And why the @#!*% am I blogging about something that is using Flash? Everybody knows what I think about Flash... I love it, but don't know how to use it. The whole idea about how to use Flash is built around people who have minds that don't work in the same way as mine. So...thats actually the answer to the question. The "education" I got in "IS" was mostly based around the editors interface. All the cool development is actually made in Flash and just configured through EPiServer and thats no good for me. So I do of course have to find a way to tweak the system to use Silverlight instead of Flash. So, how does "IS" work? Well, it's a standard EPiServer solution. It uses pages in EPiServer to "tell" the Flash what to do and show. Basically it is a slideshow player, but it lets you use Flash-files (.swf) as slides giving you a lot of possibilities. The solution to "telling" the Flash what to do is to let the pages render as XML. Then the Flash makes a call to the page on the server, requesting it in XML-mode. It then parses the XML and does whatever processing is necessary using it. The actual slideshow builds around the concept of a playlist with slides. In EPiServer the playlist is actually an EPiServer page as well as each one of the slides. But my focus here isn't actually the EPiServer integration so I'll leave that area a bit untouched. The actual application is a Flash-application that works as a host. The host uses that playlist to get hold of the slides. Each of the slide pages contains a reference to an SWF-file that should be used as a slide. It then downloads that slide and adds it to the application. Then there is possibility to set the slideshow timers as well as transition effects between the slides. This is of course a very simplified version of "IS", but it is the core of my thoughts. I immediately started asking myself questions about Silverlight. "How can I load external UserControls?" was my first one. The developers have to be able to create UserControls, dump them on the server, OUTSIDE of the XAP-file. The XAP can only contain the core application, the actual host. The rest of the controls must be downloaded dynamically. Can this be done? It has to...it's so simple. So what do a good developer do when he needs a solution to a problem. Well, I open Google, but I might not a good programmer. I Googled my question and found AssemblyPart... AssemblyPart is a class that is basically made for the scenario I'm talking about. It can create an instance of the Assembly-class from a stream. From that assembly object you can then create instances af all classes inside the assembly. The only issue is that you can only create instances of controls using a parameterless constructor. But that will suffice. The actual constructor parts can be solved by creating an interface. So I created a Silverlight Classlibrary to hold my interfaces. The resulting assembly from this project will be in the XAP file and as such available to the dynamically created objects. So inside the library project I created a single interface to begin with and called it IInitializableControl. This interface declares a single method, void Initialize(XElement xml). This method will be called by the host after instantiation. Of course I will first have to check if the control implements the interface, since it would be possible to create a slide that didn't need initialization and therefore didn't implement it. The method takes an XElement object as parameter, making it possible to pass in the xml-configuration for that specific slide. The library project is referenced by both the host application project and the projects containing the slides. A basic example of downloading a UserControl and instantiating it could look as the following: <blockquote> <div class="code"> [code:c#] public HostControl() {      InitializeComponent();      WebClient client = new WebClient();      client.OpenReadCompleted += new OpenReadCompletedEventHandler(AssemblyDownloaded);      client.OpenReadAsync(url to assembly, name of assembly); } void AssemblyDownloaded(object sender, OpenReadCompletedEventArgs e) {      string assemblyName = (string)e.UserState;      _assembliesToDownload.Remove(assemblyName);      AssemblyPart assPart = new AssemblyPart();      Assembly ass = assPart.Load(e.Result);     UserControl ctrl = (UserControl)ass.CreateInstance(classname);     if (ctrl != null)     {          IInitializableControl initCtrl = ctrl as IInitializableControl;          if (initCtrl != null)              initCtrl.Initialize(slide.ConfigXML);     } } [/code]</div> </blockquote> This is the foundation to my slideshow. Hopefully I will finish it in the near future, and when I do I will publish the source code here. Unfortunately my slideshow started out as a simple little thing, but grew as I added features and all of the sudden my design didnt quite work and it got all messy. So I decided to rebuild it and make the design more flexible. Unfortunately that means that the publication of the source code is a bit delayed.2008-07-07T19:25:11.0000000Z

Blog post

InitParams...a good way to startA feature that is often missed in Silvelright is the possibility to give the application information at start up. Sort of like sending parameters to a constructor. This is done by passing values through the InitParams property. This feature has been available since Silverlight 1.0, but it has changed in 2.0. A 2.0 application is split in two parts, an Application class and a UserControl, and the InitParams is sent to the Application part. If you listen to the Application.Startup event, you will get hold of an StartupEventArgs object. This control contains a InitParams property containing the values sent to the control. The InitParams is a comma separated string when added in markup, but a IDictionary<string,string> when in code. How you pass it from the Application object to the UserControl is up to the developer. There are several ways of doing this. The simplest is to add a parameter to the contructor of the UserControl and pass in the Dictionary there. Another is to add a property on the Application class and "publish" the information there and let the UserControl fetch it. This parameter is available to us if we use the <asp:Silverlight /> control. This makes it a very simple way for us to pass a certain amount of data from serverside aspx code to our clientside Silverlight application without having to use Ajax or webservices. Or maybe we could use the InitParams to tell our application the Uri to the webservice...2008-07-07T19:24:32.0000000Z

Blog post

Globalization Demo from Developer Summit '08 At the EPiServer developer summit a couple of weeks ago I held a session about multilanguage support in EPiServer. For those of you who were there, you know why I've added this entry. I screwed up the demo completely and promised to upload the demo code to my blog. My, at that moment, not existing blog. So here it is. I've created a blog and added the code for download. It is a simple plug-in for EPiServer CMS 5. Just add the plug-in files in the admin folder in you project, and the xml-file in the lang folder and you are done. Almost, you must of course also compile the project to get the plug-in compiled and into your assembly... Using this plug-in you can export the content of your pages to xml and also import it after it has been translated. Just go to the plug-in in admin mode and choose to export some pages. When exporting you have to choose a root page for the export as well as the language to export. Save the export to disk. Change the content in the xml file. Update the content language by setting the identifier for the new language in the root element. Then update the property values according to the new language. After this you can import the xml and the system will automatically add new pages or update existing pages in the new language. I hope you understand what I'm writing. If not, check out the code. <a rel="enclosure" href="http://chris.59north.com/file.axd?file=Globalization+Demo.zip">Globalization Demo.zip (4.83 kb)</a> 2008-06-09T23:26:00.0000000Z

Blog post