Building Web Apps with ASP.NET Jump Start

Jon Galloway, Damian Edwards and Scott Hanselman provides now 8 hours of free ASP.NET training videos.

Read the Scott Hanselman post to check a summary of each episode and full course outline.

pinify–The jQuery Site pinning Plugin

A jQuery Plugin for adding IE9 features (site pinning, site mode, etc.) to your websites. Several new features of Internet Explorer 9 are designed to enhance the browsing experience of consumers by enabling sites that leverage certain features to behave like applications on the desktop when those sites are ‘pinned’ to the taskbar in Windows 7. A user pins a site by dragging the site’s tab (or favicon in the address bar) to the taskbar. For all sites, IE9 will create a default experience (called ‘site mode’) that will use information about the site to create an instance of the browser customized to look specific to that site. Developers can also add specific meta tags and script commands to extend these features to further customize user’s pinned experience of the site.

Your site, from zero-to-pinned in less than 5 minutes:

  1. install-package jquery.ie9ify
  2. $(‘head’).pinify();
  3. Run and Pin!

Mais informações em: http://ie9ify.codeplex.com/

jQuery Menubar e web.sitemap

Após o HTML 5 Microsoft WebCamp Portugal, surgiu-me algum interesse em explorar o plugin Menubar.

Este plugin transforma uma lista num menu bastante agradável, e como tal, gostava de o implementar num projecto em que utilizo o web.sitemap.

Para tal, precisei de recorrer a um XLST para transformar o web.sitemap, que não é mais que um XML, numa lista no formato que o Menubar necessita.

Segue então um exemplo do web.sitemap:

<?xml version="1.0" encoding="utf-8"?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0">
    <siteMapNode url="~/" title="Home" description="Home">
        <siteMapNode url="" title="Menu 1" description="Menu 1" >
            <siteMapNode url="http://www.google.pt" title="Submenu 1" description="Submenu 1" />
        </siteMapNode>
        <siteMapNode url="" title="Menu 2" description="Menu 2">
            <siteMapNode url="http://www.microsoft.com" title="Submenu 2" description="Submenu 2" />
            <siteMapNode url="http://www.apple.com" title="Submenu 3" description="Submenu  3" />
        </siteMapNode>
    </siteMapNode>
</siteMap>

Para transformar o XML numa lista, usei o seguinte XSLT

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:map="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0"
                exclude-result-prefixes="map">
  <xsl:output method="xml" encoding="utf-8" indent="yes"/>

  <xsl:template match="map:siteMapNode">
    <li>
      <a href="{@url}" title="{@description}">
        <xsl:value-of select="@title"/>
      </a>
      <xsl:if test="map:siteMapNode">
        <ul>
          <xsl:call-template name="mapNode"/>
        </ul>
      </xsl:if>
    </li>
  </xsl:template>

  <xsl:template name="mapNode" match="/*/*">
    <xsl:apply-templates/>
  </xsl:template>
</xsl:stylesheet>

Desta forma, irei obter uma lista igual à seguinte:

<?xml version="1.0" encoding="utf-16" ?>
        <li><a href="" title="Menu 1">Menu 1</a>
            <ul>
                <li><a href="http://www.google.pt" title="Submenu 1">Submenu 1</a></li>
            </ul>
        </li>
        <li><a href="" title="Menu 2">Menu 2</a>
            <ul>
                <li><a href="http://www.microsoft.com" title="Submenu 2">Submenu 2</a></li>
                <li><a href="http://www.apple.com" title="Submenu  3">Submenu 3</a></li>
            </ul>
        </li>

Por fim, basta-nos adicionar um controlo XML que irá fazer o render da lista.

<ul id="bar1" class="menubar">
        <asp:Xml runat="server" ID="xmlSiteMapViewer" DocumentSource="~/web.sitemap" TransformSource="~/sitemap.xslt" />
    </ul>

A inserção do controlo entre uma “unordered list” foi propositado, pois só assim é que teremos o menu a funcionar correctamente e teremos um resultado identico ao que está no seguinte site:

http://view.jqueryui.com/master/demos/menubar/default.html