BlogEngine.NET och Web Slices

BlogEngine.NET och Web Slices

  • Comments 5

BlogEngine.NET är en populär open source-bloggmotor som bl.a. vi använder för vår SmartIE8-blogg. Jag tänkte det kunde vara kul testa lägga in Web Slice-funktionalitet i vår egen IE8-blogg, vi talar ju trots allt en hel del om Web Slices forträfflighet ;-) 

Web Slices är ett sätt att låta användare lägga till bokmärken som, istället för att peka direkt på en sida, visar en uppdaterad vy av en del av sidan – en ‘slice’ – utan att du behöver surfa till den sidan. Vanligtvis innehåller den del av sidan som du vill visa i en Web Slice sådan information som kontinuerligt uppdateras – typexemplet är en onlineauktion där du kan se när priset har uppdaterats för en specifik produkt.

För att snabbt komma igång med utveckling i BlogEngine så använde jag det fantastiskt smidiga installationsprogrammet Web Platform Installer. Den hämtade hem och packade upp BlogEngine.NET på någon minut – mycket trivsamt!

I det här fallet ville jag inte visa en del av den befintliga sidan, utan jag ville endast visa rubrikerna från de senaste blogginläggen som klickbara länkar. Web Slices stödjer att du har en anpassad vy som du kan peka mot – så till att börja med skapade jag en helt ny ASPX-sida som jag kallade ‘webslicepreview’, som endast visar artikelrubrikerna:

webslicepreview

Du kan se sidan live här.

Det enda knepiga med den sidan var hur jag skulle läsa upp artiklarna. Men det visade sig vara ganska enkelt, Post-klassen i BlogEngine.Core har en trevlig FindAll-metod på sin Posts-kollektion som tar emot ett predikat:

List<BlogEngine.Core.Post> visiblePosts = BlogEngine.Core.Post.Posts.FindAll(delegate(BlogEngine.Core.Post p) { return p.IsVisible; });

Sedan måste jag hinta IE8 om att det finns en Web Slice i sidan att lägga till. Sättet som du gör det på är genom att lägga till ett antal fördefinierade CSS-klassnamn som IE8 reagerar på.

  • hslice – huvudelementet för Web Slicen
  • entry-title – den titel som visas i favorit-menyn
  • entry-content – vad som ska visas när besökaren väljer Web Slicen i favoritfältet
  • endtime - tid och datum då Web Slicen blir inaktuell
  • ttl - antal minuter innan Web Slicen kan uppdateras igen

    Jag lade in dessa i PostList.ascx - den User Control som hanterar listningen av blogg-poster. De IE8-specifika klassnamnen är i fetstil nedan:

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="PostList.ascx.cs" EnableViewState="false"
        Inherits="User_controls_PostList" %>
    <%@ Import Namespace="BlogEngine.Core" %>
     
    <!-- start definition av Web Slice -->
     
    <meta name="slice" scheme="IE" content="off" />
     
    <div class="hslice" id="postSlice">
        <div class="entry-title" style="visibility: hidden">
            Smart IE8-bloggen
        </div>
        <span class="ttl" style="display: none;">60</span> 
        <a rel="entry-content" href="<%=Utils.AbsoluteWebRoot %>webslicepreview.aspx" />
    </div>
     
    <!-- slut definition av Web Slice -->
     
    <div runat="server" id="posts" class="posts" />
     
    <div id="postPaging">
        <a runat="server" id="hlPrev" style="float: left">&lt;&lt;
            <%=Resources.labels.previousPosts %></a> <a runat="server" id="hlNext" style="float: right">
                <%=Resources.labels.nextPosts %>
                &gt;&gt;</a>
    </div>

    Som synes så kan man alltså peka ut en specifik sida mha <a rel="entry-content" href="…”> som alltså pekar mot min webslicepreview.

    Du kanske undrar vad <meta name="slice" scheme="IE" content="off" /> innebär?

    Vanligtvis så visar IE8 att det finns en Web Slice på en sida genom att visa en grön ram runt Web Slicen samt den speciella Web Slice-ikonen:

    ws3

    I det här fallet ville jag inte stöka till bloggens utseende för mycket, så istället slog jag av den funktionen med <meta name="slice" scheme="IE" content="off" /> och la till en länk i menyn istället:

    addslice

    Länken anropar ett enkelt Javascript som lägger till Web Slicen:

  • function addToFavoritesBar() {
        window.external.addToFavoritesBar("http://www.smartie8.se/#postSlice", "Smart IE8-bloggen", "slice");
    }

    Ett annat sätt att lägga till den är via den Web Slice-ikon som dyker upp i menyfältet när du är på en sida som innehåller en Web Slice:

    addslice2

    Om du vill se min Web Slice in action så kan du gå in på www.smartie8.se

    Leave a Comment
    • Please add 8 and 6 and type the answer here:
    • Post
    • PingBack from http://asp-net-hosting.simplynetdev.com/blogenginenet-och-web-slices/

    • Kör du inte C# 3.0? :-)

      List<BlogEngine.Core.Post> visiblePosts = BlogEngine.Core.Post.Posts.FindAll(p => p.IsVisible);

      Eller:

      List<BlogEngine.Core.Post> visiblePosts = BlogEngine.Core.Post.Posts.Where(p => p.IsVisible);

      Stiligare med lambda expressions. ;-)

    • Absolut hade det varit snyggare med lambda expression, men servern kör ASP.NET 2.0 och jag hade bara ftp-access till bloggen så No can do i detta fallet.

    • Hmm.. Om du har fulla rättigheter på burken så kan du alltid ladda upp .NET 3.5 via FTP:n och skapa en sida som startar igång en silent-installation av det.. Dock kanske inte alltför säkert på en produktionsmaskin. :-)

    • :-)

    Page 1 of 1 (5 items)