Contents tagged with IE

  • 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: ,,

  • Speaking at TechDays Canada 2010

    alt

    This year again I’ll be speaking at TechDays Canada!

    I will take care of 3 talks in Montreal on November 23-24:

     

    DEV302: A Lap around Windows Internet Explorer 9 for Developers
    Wednesday, November 23, 12:30pm to 12:50pm

    Internet Explorer 9 contains many new features that give developers many new options for building rich Web applications. From enhanced features like the developer tools or support for more DOM interactivity – Internet Explorer 9 is the browser you’ve been asking for. In this TurboTalk you will learn about these features and how you can take advantage of brand new APIs like HTML5, SVG, and Direct2D Graphics support.”

     

    OPT217: Speeding up Silverlight development using 3rd Party Controls
    Wednesday, November 24, 12:30pm to 12:50pm

    “Learn how to cut Silverlight development time significantly using your new Telerik RadControls. As a TechDays attendee, you will receive a complimentary license for Telerik’s RadControls for Silverlight. This TurboTalk will demonstrate how you can speed up application development while adding more functionality to your Silverlight applications with the Telerik tools. See how high-performance data controls like RadGridView and RadChart can take your applications to the next level. See how layout controls like RadDocking and RadTileView can add both richness and increased functionality, helping you maximize screen real estate. And see how RadRichTextBox is unlocking Silverlight’s power to enable editing of HTML, DOCX, and XAML content. Jumpstart your development with the RadControls for Silverlight and get the most out of your new tools by joining this developer-to-developer talk.”

     

    Breakout: A Lap Around Visual Studio LightSwitch
    Wednesday, November 24, 3:40pm to 4:45pm

    LightSwitch is a newcomer in the Visual Studio suite and allows you to create Silverlight business applications with little or no code. Discover this tool via a demo and be amazed like I am, also you will learn how to customize and extend its capabilities. Wow effect guaranteed!”


    Early bird price is expired, but if you plan to register contact me as I can give you a 50% off coupon.

    See you there!

     

  • 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:
  • Silverlight EnableFrameRateCounter not displayed in IE status bar

    As you may know you can set the EnableFrameRateCounter="true" property of the <asp:Silverlight> control to display the actual Silverlight framerate in the status bar of the browser.

    (You can also set the enableFramerateCounter param if you use the <object> tag or even enable it by code:

    Application.Current.Host.Settings.EnableFrameRateCounter = true;)

    But if nothing appears in your IE status bar you may have to change some security settings:

    In IE go to: Tools / Options / Security

    Select “Internet” zone and “Custom level…”
    In the “Settings” window go to the “Scripting” section and enable “Allow status bar updates via script”.

     ie-settings

  • Developing for IE8 (Accelerators and Web Slices)

    IE8 MSDN

    Lately I wrote an article for MSDN to introduce Accelerators and Web Slices in IE8 and show how to build them.

    Here is an overview:

    Web Slices bring the user’s favorite data (sports scores, weather reports, stock quotes, etc.) directly into the Favorites Bar. So Web Slices are like snippets of a page that a user can subscribe to. Changes and updates are retrieved and users are notified visually of the updated information status. Like any page, a “slice” can display text, links, pictures and even RIA elements (Silverlight!)… think about RSS on steroids.

    […]

    Creating a Web Slice
    Web Slices can be hosted in any web page. In fact you just have to define which part of you page can be “sliced” for the user. That means that you can turn any part of an existing web page into a Web Slice!

    Web Slices use a combination of the hAtom microformat and the Web Slice format to describe a subscribable portion of a webpage.

    hAtom is a microformat for content that can be syndicated, primarily but not exclusively weblog postings. hAtom is based on a subset of the Atom (http://www.atomenabled.org/) syndication format. hAtom will be one of several microformats open standards. More information

    So to enable a Web Slice on your website, you just annotate your page with specific class names for the title, description, and content.

    Here is the basic skeleton of a Web Slice:

    <div class="hslice" id="sliceId"> 
      <p class="entry-title">My Slice Title</p> 
      <div class="entry-content">
      </div> 
    </div>

    hslice defines the Web Slice section and must have an Id.
    entry-title is the title which appears in the favorites bar.
    entry-content is the body of your Web Slice (you can use any HTML content here).

    […]

    Accelerators in IE8 are contextual services to quickly access information from another website in your current browser page. The goal here is to be more efficient than the old "copy-navigate-paste" model. As soon as users select some text in a page, a blue icon appears to list available accelerators. Clicking on an accelerator opens a new tab with desired results. Optionally accelerators can have a preview window.

    For example, suppose you’re on a page with a street address. You can highlight the address and choose an Accelerator such as Map with Live Maps. The accelerator will then display the map in a pop-up or open another tab, depending on how the Accelerator has been written for that site.

    […]

    Creating an Accelerator
    Building an Accelerator is really just about creating an XML file which describes your service. Results can be fetched from any service that can be queried over HTTP (GET or POST requests). This includes popular search engines like Live Search or Google but also sites such as Wikipedia, Facebook, eBay, Yahoo, Twitter or Digg.

    […]

    Here is a sample code using the Live Search query URL passing the user’s selected text as “q” parameter in querystring to get related images:

    <?xml version="1.0" encoding="utf-8"?>
    <os:openServiceDescription xmlns:os="http://www.microsoft.com/
    schemas/openservicedescription/1.0"
    >
      <os:homepageUrl>http://search.live.com/</os:homepageUrl>
      <os:display>
         <os:name>Search Images with Live Search</os:name>:
         <os:description>Find related images with Live Search</os:description>
         <os:icon>http://search.live.com/s/wlflag.ico</os:icon>
      <os:display>
      <os:activity category="Search">
         <os:activityAction context="selection">
           <os:execute action="http://search.live.com/images/results.aspx" method="get">
             <os:parameter name="q" value="{selection}" type="text"/>
           <os:execute>
         </os:activityAction>
      </os:activity>
    </os:openServiceDescription> 

    The heart of your Accelerator is defined by these XML elements. The XML document is based on the OpenService specification:

    os:activityAction specifies the interaction with the service provider based on the target of the Accelerator. The optional context attribute specifies the target: document, selection (default), or link.

    os:execute specifies the action (page to call) when the user invokes the Accelerator and the method (GET or POST).

    os:parameter specifies the parameters for the page. Note the use of a special variable {selection} which represents the user’s highlighted text. Alternatively, the variable {link} can be used to get the href of a selected link.

    […]

    Read the full article here:
    http://www.microsoft.com/youshapeit/msdn/content/knowledge/2008-10/ie8_improve_the_browsing_experience.aspx

    Also check my Accelerators available on the IE gallery:

  • Search Images with Live Search
  • Search with Google Canada
  • Find Songs on Zune Social *
  • Find Albums on Zune Social *
  • Find Artists on Zune Social *

  • * For some reasons Microsoft has removed my Zune Accelerators. Sorry about that.

    Technorati Tags: ,,
  • You shape it – a new Microsoft tech portal

    You shape it

    Microsoft has a new web site to start the excitement on his new dev technologies: IE8, WPF, Silverlight and Windows Mobile. It is called {You shape} it and focus on Design, Development and IT Management in a nice claymotion Silverlight UI.

    http://www.microsoft.com/youshapeit/

    MSDN is part of this portal (www.microsoft.com/youshapeit/msdn) and I am a contributor as I wrote the article on IE8 development “IE8: Improve the Browsing Experience” that shows how to build Accelerators and Web Slice, check it out!

  • My IE8 Zune Social Accelerators and Search Provider

     IE8 Zune

    I made 3 Accelerators to interact with Zune Social right into IE8:

    * For some reasons Microsoft has removed my Zune Accelerators. Sorry about that.

    Also a Search Provider to search for Songs, Artists and Albums on Zune Social:

     


     

    Check out my other IE8 Accelerators:

     

    And Search Provider:

    Technorati Tags: ,,
  • Youtube Search Provider for IE8

    Youtube Search Provider for IE8I made a Search Provider for IE8 to search videos on Youtube:

    What are Search Providers ?

    In IE8 you can use search providers like Live Search, Wikipedia, Yahoo, Amazon, and more to deliver direct results and images that provide you with immediate answers. Learn more.


    I also wrote an MSDN article on IE8 development experience which will soon be live.

    Check out my IE8 Accelerators:

    Technorati Tags: ,
  • My IE8 Accelerators to download

    For those of you who are already running IE8 (since IE8 beta 2 is available), I made some accelerators ready to use:

    Search Images with Live Search
    “Use this accelerator to find related images with Live Search based on selected text.”

    Search with Google Canada
    “Use this accelerator to find information with Google Canada.”


    What are Accelerators?

    Use Accelerators in IE8 to search, map, e-mail, translate, or share content from any web page you’re currently viewing with just one click. Learn more.

    A post on my IE8 developing experience (Accelerators and WebSlices) will follow later.

     

    Technorati Tags: