Contents tagged with Tools

  • Control a Silverlight Media player in IE9 from Windows 7 taskbar

    IE9

    Following my article on IE9 and Windows 7 integration, here is how you could go further by controlling an IE9 hosted Silverlight video from Windows 7 taskbar.


    Live demo

    If you have IE9 on Windows 7, you can try a live demo by visiting www.runatserver.com and dragging the browser tab to your taskbar, then select “Connected Experience” from the JumpList. (I explain how to create such a list in my previous article).

    alt

    This opens IE9 with a web page containing a Silverlight video:

    alt

    Note that you get a live preview in the taskbar’s thumbnail, and you can control the video!

    alt

     

    How to build this experience ?

    With a bit of JavaScript, and the knowledge to communicate between the browser and Silverlight.

     

    Silverlight project

    1. In my XAML page I have a MediaElement with x:Name="MediaPlayer", so I just need to add 2 methods with the ScriptableMember attribute in code behind:

    [ScriptableMember()]
    public void Play()
    {
        MediaPlayer.Play();
    }
     
    [ScriptableMember()]
    public void Pause()
    {
        MediaPlayer.Pause();
    }

     

    2. Then expose the page instance (as “MyPlayer”) to JavaScript, see line 4 of the following code:

       1: public MainPage(object sender, StartupEventArgs e)
       2: {
       3:     InitializeComponent();            
       4:     HtmlPage.RegisterScriptableObject("MyPlayer", this);
       5: }

     

    With these two steps I am able to call the C# methods from JavaScript.

     

    Web Site

    1. In the HTML (or aspx) page that hosts Silverlight add the following META tag:

    <meta http-equiv="X-UA-Compatible" content="IE=9" />

     

    2. Add some JavaScript:

       1: <script type="text/javascript">
       2:     window.onload = function() {
       3:         var host = document.getElementById("SLObject");
       4:  
       5:         btn1 = window.external.msSiteModeAddThumbBarButton('Play.ico', 'Play');
       6:         btn2 = window.external.msSiteModeAddThumbBarButton('Pause.ico', 'Pause');
       7:  
       8:         document.addEventListener('msthumbnailclick', btnHandler, false);
       9:         function btnHandler(e) {
      10:             if (host) {
      11:                 if (e.buttonID == 1)
      12:                     host.Content.MyPlayer.Play();
      13:                 if (e.buttonID == 2)
      14:                     host.Content.MyPlayer.Pause();
      15:             }
      16:         }
      17:         window.external.msSiteModeShowThumbBar();
      18:  
      19:         window.external.msSiteModeUpdateThumbBarButton(btn1, true, true);
      20:         window.external.msSiteModeUpdateThumbBarButton(btn2, true, true);
      21:     }
      22: </script>

     

    Line 3: SLObject is the Id of my Silverlight object tag.

    Lines 5 and 6: Create 2 buttons

    Line 17: Instantiate them

    Lines 19 and 20: Set both buttons visible and enabled.

     

    Now you will automatically get 2 buttons in the live thumbnail from the Windows 7 taskbar, and be able to play/pause the Silverlight video!

    alt

    The only thing I wasn’t able to do is installing the Silverlight app Out-Of-Browser right from the thumbnail.
    I think because Application.Current.Install(); must be called from a user initiated event (mouse or keyboard event in Silverlight).

     

    Technorati Tags: ,,

  • IE9: integrate your website in Windows 7

    IE9
    As you know Internet Explorer 9 is now available in beta and you can download it here:
    www.beautyoftheweb.com

    Among the new features, you can now integrate your websites with the Windows 7 desktop. Users can pin any website to the Windows 7 Taskbar, Desktop, or Start Menu. Websites can use this experience without having to modify any of their existing content, but as a developer you can extend this and provide customized JumpLists and Notifications by adding Metadata and JavaScript code.

    If you run IE9 now (on Windows 7), you can try by pinning www.bing.com website to your taskbar and you’ll get a nice icon with JumpList (links to web pages) like any Windows program:

    Bing in taskbar 

    Link to the full article on MSDN:
    http://msdn.microsoft.com/en-us/ie/dd797411.aspx

    In this post I want to make a small intro to show you how easy it is.

     

    Make your website “Windows 7 aware” (from IE9)

    Pinning any website from IE9 (drag a tab to Windows 7 Taskbar) gives you a classic shortcut and a right-click gives you this default menu:

    alt

    By adding just a couple of Metadata in your html you can improve the user experience by enabling a nice integration with Windows 7 (Find Metadata description later in this post):

    <meta name="application-name" content="RunAtServer Montreal" />
    <meta name="msapplication-tooltip" content="RunAtServer - Silverlight and Windows Phone Experts in Montreal" />
    <meta name="msapplication-starturl" content="http://www.runatserver.com" />
    <meta name="msapplication-window" content="width=1024;height=780" />
    <meta name="msapplication-navbutton-color" content="orange" />
    <meta name="msapplication-task" content="name=Presentation; action-uri=http://www.runatserver.com/Index.aspx; icon-uri=/favicon.ico" />
    <meta name="msapplication-task" content="name=Trainings catalog; action-uri=http://www.runatserver.com/Trainings.aspx; icon-uri=/favicon.ico" />
    <meta name="msapplication-task" content="name=Silverlight Tour cities and dates; action-uri=http://www.runatserver.com/SilverlightTraining.aspx?tab=dates; icon-uri=/favicon.ico" />
    <meta name="msapplication-task" content="name=Contact; action-uri=http://www.runatserver.com/ContactUs.aspx; icon-uri=/favicon.ico" />

    You can try now and pin www.runatserver.com to your Taskbar and you’ll get this:

    IE9 Jumplist

    In this website we use ASP.NET so I added these Metadata in the MasterPage to get the same experience from any page.

    I also use Resource (resx files) to localize the Metadata, so the Jumplist will be in the user’s language (on that website). Pinning again the website in french refresh the Jumplist:

    IE9 Jumplist in french

    Others website with a similar Windows 7 integration enabled (ironic that MSDN does not use that yet):

     

    Metadata description

    From the MSDN article:

    Name Content
    application-name The name of the shortcut. If missing, the document title is used instead.
    msapplication-tooltip Optional text that is displayed as a tooltip when the mouse pointer hovers over the pinned site shortcut icon in the Windows Start menu or desktop.
    msapplication-starturl The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed.
    msapplication-navbutton-color The color of the Back and Forward buttons in the pinned site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see Color Table. If this meta element is absent, the color is based on the shortcut icon.
    msapplication-window The initial size of the pinned site browser window.
    • width=N (minimum 800)
    • height=N (minimum 600)
    Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance.

     

    Then you can add one or more “tasks” (5 maximum) to populate the Jumplist items:

    <META name="msapplication-task"
              content="name=Task 1;
              action-uri=http://host/Page1.html;
              icon-uri=http://host/icon1.ico"/>

    Note: Links defined in tasks are not restricted to your domain.

     

    And more…

    With a bit of JavaScript you can also add categories, overlay icons, thumbnail preview with action buttons, …

    alt

    I encourage you to read the MSDN article to learn more:
    http://msdn.microsoft.com/library/gg131029(VS.85).aspx

     

    Conclusion

    With IE9 Microsoft wants to integrate websites in your desktop like any Windows app. Pinned sites run in a special branded IE window with no toolbars. It is a good thing as more than just “linked documents” the web is now a collection of applications, and as web developers you know that lot’s of issues comes from… the user (and your bugs)! Browsers are evil to business apps, things like location bar, favorites, Yahoo toolbar, Gooogle toolbar, MSN toolbar, Paypal toolbar, … add distraction and are error prone. I can see a good use of pinned sites for intranet web apps, where the user will launch the app from a taskbar icon or even the start menu and almost won’t notice it is a browser window.

    Might be more useful than WebSlice…

     

    Technorati Tags:
  • [Cool Tool] Assembly minifier tool

    If you are using Silverlight controls from the Telerik suite, you’re going to love this.

    Telerik provide a new free tool to help reduce the size of your Silverlight xap. The Telerik Assembly Minifier can be found here:
    http://minifier.telerik.com/

    From the website: “Telerik Assembly Minifier is a tool that lets you extract only the controls’ classes and resources you need to use in your application development, thus significantly reducing the size of the assemblies. Using the Assembly Minifier you will achieve significantly better loading time when the Silverlight XAP files containing the minified (optimized) assemblies are to be loaded on the client side.”

    Note: this apply to Telerik assemblies only (for now).


    I decided to give it a try and create a fresh new Silverlight 4 app then insert a Telerik GridView in a page. VS automatically adds reference to these assemblies:

    • Telerik.Windows.Data.dll
    • Telerik.Windows.Controls.Input.dll
    • Telerik.Windows.Controls.GridView.dll
    • Telerik.Windows.Controls.dll

    That’s 645KB (compressed) added in your xap file, ouch!

    Now let’s add a CoverFlow and a Scheduler controls in my app. This adds 2 more assemblies in the resulting xap:

    • Telerik.Windows.Controls.Scheduler.dll
    • Telerik.Windows.Controls.Navigation.dll

    That’s an additional 413KB in the xap.


    At that point my xap file is 1.2MB, and my app is quite empty, most of the size is coming from the Telerik assemblies. Great features comes with a price, right ?

    Now let’s try the Assembly Minifier tool.
    Go to http://minifier.telerik.com/ and upload the Telerik assemblies used in your app.

    Then I select the controls to be extracted (GridView, CoverFlow and Scheduler here):

     

    Now I can click on the “Extract” button to download the compressed assemblies and reference them in my app (I removed the originals first).

    After recompiling my xap is now 845KB, that’s 32% off.

    So finally for my very specific test (empty Silverlight 4 app with 3 Telerik controls: GridView, CoverFlow and Scheduler) I get this result:

     xap file size

    Before

    After

    1.2MB

    845KB

     

    [32% gain]

    Overall this is good, as always Telerik innovate in new tools and it’s nice to see them answering concern like xap files size. But to me the whole process to manually choose your controls and manually upload and manually replace dll is totally inefficient for now. The tool is still beta (and free!) so I do not complain, I just hope to see more features and a better integration in VS later. In a perfect world a VS add-in would do the job automatically when I build in release mode.

     

    Note the tool is working properly, but the way to replace your dll in VS is not (always grab the old replaced dll). You can find some tips to fix it but it is definitely painful for now. Hope VS will provide an easier way to handle this in the future, or maybe Telerik to create a VS addin or something... 
    Waiting for that you’ll find great help here:
    http://www.telerik.com/community/forums/silverlight/assembly-minifier.aspx

     

    Technorati Tags: ,
  • [Cool tool] Silverlight Spy

    Silverlight Spy is a free(*) tool that allows you to inspect any online Silverlight app.

    Just launch it and point to a web page with a Silverlight app, then you can:

    • Explore the XAP package
    • Isolated Storage use
    • Monitor performance
    • Browse the UI visual and logical tree
    • Examine objects

    Here is a screen shot of the app that shows the UI inspection (Live XAML outline):

    You can even decompile code inside the dll, for that you need Reflector installed, then go to Tools / Options to configure it:

    It also comes with a tool to check Cross Domain policy files:

    This pane shows some info and interesting warnings:

    Try Silverlight Spy

    You can install it online via ClickOnce:

    http://silverlightspy.com/silverlightspy/download-silverlight-spy/

     

    (*) Silverlight Spy now has a version 3 which won’t be free as soon as it leaves beta mode.
    As seen on the website: ”Silverlight Spy 2 is no longer maintained and will be phased out eventually.”

  • My blog in French, or Spanish, or Chinese, or…?

    Use the Microsoft Translator Widget to translate your web site!

    Translator widget

    Microsoft Translator team has announced a translator widget for web pages at MIX09 (Surprisingly this is not a Windows Live Something…). The Microsoft Translator web page widget allows you to bring real-time, in-place translations to your web site. It uses the Microsoft Translator AJAX API, which was also announced at MIX09, and is a small, customizable widget that you can place on your web page and it helps you instantly makes the page available in multiple languages. Users can hover over the translation to see the original content!

    I have put the widget on this blog and it seems to be working pretty well! The only drawback is the translation quality… far from perfect, but on this side there will always be something to improve!

    The widget is currently in private Technology Preview and will be available at:
    http://www.microsofttranslator.com/Widget/

  • The TechEd 2008 North America DVD fix you’ve been waiting for!

    I made a little tool to fix the TechEd 2008 North America DVD player because it was built for Silverlight 2 beta 2, no more working now.

    The tool generates a fixed htm page that will play the content on your DVD. No need to burn new DVDs.

    > Download link:


    Instructions:

    1. Download and unzip in a folder.
    2. Run TechEd2008DVDfix.exe, select your DVD drive and click OK.
    3. This will generates 2 htm files (Developers.htm and ITPro.htm) and launch the first one in your browser.
    4. Insert the requested TechEd DVD in your drive.
    5. Enjoy!

    Please read notes bellow.

    Note 1:
    The htm page try to access a local Silverlight app so you’ll probably need to “Allow Blocked Content…” in IE yellow security bar at the top.

    Note 2:
    You just need to run the app once. Then you can use your local htm files to see DVDs content, no need to burn a new set of DVDs!

    Note 3:
    I added a menu at the top right of the page so you can navigate from Developers DVDs (1 to 5) to ITPro DVDs (6 to 9).

    Note 4:
    Do not use the Default.htm in your DVD anymore! Use the local htm files only.

     

    Technorati Tags:
  • [Cool Tool] ZoomIt gets an update!

    ZoomIt is a must have free tool for speakers and presenters!

    Introduction

    “ZoomIt is screen zoom and annotation tool for technical presentations that include application demonstrations. ZoomIt runs unobtrusively in the tray and activates with customizable hotkeys to zoom in on an area of the screen, move around while zoomed, and draw on the zoomed image.” (from the author’s website)

    What’s new ?

    “This major update to ZoomIt, the Sysinternals screen magnification and annotation utility, adds a LiveZoom mode on Windows Vista and higher, allows you to change the typing and break timer font, adds the ability to copy the magnified screen to the clipboard with Ctrl+C, and introduces a new configuration interface.” (from the author’s website)

    Download it for free

    http://technet.microsoft.com/en-ca/bb897434.aspx

    [via Eric Moreau]

  • [Cool Tool] Silverlight Defaul Style Browser

    SilverlightDefaultStyleBrowser is a free WPF tool by David Anson that allows you to inspect the styles and templates of the Silverlight controls.

    Follow this link to learn more and download the app:
    http://blogs.msdn.com/delay/archive/2008/09/26/preserving-access-to-silverlight-2-s-generic-xaml-resources-silverlightdefaultstylebrowser-updated-for-the-silverlight-2-rc.aspx

     

    Technorati Tags:
  • [Cool Tool] Microsoft Office Labs: pptPlex

    “pptPlex is a plug-in to PowerPoint that explores an alternate method for presenting a slide deck. Using pptPlex, you can present your slides as a tour through a zoomable canvas instead of a series of linear slides.”

    I tried it and what I found interesting is that pptPlex allows you to group your slides in sections, then you can move slide after slide, and from one section to another with nice animations.

    pptPlex comes with several pre-defined backgrounds for your whole deck:

    Download and try it for free:
    http://www.officelabs.com/projects/pptPlex/Pages/default.aspx

  • IE8 beta 2: shit that’s good!

    IE8

    Downloaded it
    Installed it
    Love it!

    www.microsoft.com/ie8

    Unlike beta 1, I am gladly surprised by this version!
    IE8 really improve the way you browse the web.

    The IE team seems to have listened to users more than usual, did a strong research on how people browse the web, and as a result worked a lot on user experience.

    First we have a wonderful new tab experience. I am a really heavy tab user, usually after 5 minutes of surfing I have more than 25 tabs opened and my browser start to freeze (I have IE taking 400 MB of memory more than often).

    • Related tabs are grouped by color, that means all the tabs opened from links on one tab are identified with the same color.
    • Tabs are more isolated from each other so crashes won’t stop your browsing session anymore.
    • You can reopen closed tabs, or even your entire last browsing session!

    New tab menu:
    IE8 new tab menu

    Related tabs grouped by color:
    IE8 tabs grouped by color

    IE8 also brings nice features I was waiting for (often copied from Firefox):

    • Find as you type! at least!!!!! I use it every time so I had to install an addin before.

    IE8 Find as you type

    • The Search bar also search in your favorites (and history and feeds).

    IE8 search bar 

    I won’t detail but you will also find other features to make your daily browsing more efficient, like Web Slices and Accelerators (new name for Activities).

     

    Conclusions:

    After MIX conference my advice to people was to install the beta 1 in a VPC only because it was developers oriented only and not very user friendly. After a few hours I can tell that IE8 beta 2 is safe ton install on your machine. For those who wonder, beta 2 is much more responsive than beta 1, which is not difficult..


    Can’t wait for the final version!

     

    Technorati Tags: ,