Webpart – hvor blev seperation af logik og markup af ?

by Jess Lassen 30. July 2009 05:37

En af de fedeste ting ved asp.net er usercontrols. Disse byggeklodser gør det nemt at dele sine sider op i mindre logiske bidder og nemt at genbruge logik flere steder i projektet. Usercontrols er endvidere delt op i 2 filer. En præsentations fil og en kode fil. Dette gør det super nemt at arbejde med design mockups og giver mulighed for at opdele arbejdet mellem flere mennesker.

Første gang man laver en webpart (Sharepoint eller bare en standard asp.net webpart) vil man sikkert sidder og klø sig i nakken og undre sig over hvor denne separation blev af. Den anbefalede måde at lave webparts på er at tilføje de kontroller man skal bruge i CreateChildControls metoden og derefter ændre layoutet i Render metoden. Hvis det er en kompleks webpart ender man ofte med en fuldstændig uoverskuelig Render metode. Små designændringer vil tage længere tid at rette, da logik og markup er blandet sammen og webparten skal re-kompileres og deployes igen.

3 måder du kan gøre dette nemmere på.

1. Lav din egen template motor.
Eksponer en egenskab på den webpart hvor du kan taste en template ind. Fastlæg nogle mønstre som parses i Render metoden.


<h1>__[Title]__</h1><table><tr><td>Firstname:</td><td>__[FirstNameTextBox]__</td>


I renderingen laves string replace på disse mønstre (de kan være så komplekse som du selv ønsker det) og derved vil du have en delvis opdeling af logik og markup og du kan nemt lave små design ændringen ved blot at ændre webpartens template egenskab.

2. Udnyt nuværende standarder som XML og XSLT.
Bestem dig for at din logik sender xml til webparten og brug xsl til transformere xml’en til html. Denne metode bruges i en del af Sharepoints egne webparts og hvis man er skrap til xslt er dette en super god løsning der giver ægte deling mellem data og præsentation.


Xml xmlControl = new Xml();
xmlControl.DocumentContent = Database.GetXML();
xmlControl.TransformSource = "/Style Library/XSLTStyleSheet.xslt";
this.Controls.Add(xmlControl);

3. Load en usercontrol ind i webparten.
Den sidste måde at gøre det på vil være den mest naturlige for de fleste. Usercontrols kender man fra almindelig asp.net udvikling, og de gode egenskaber med separation mellem logik og markup er kærkommen. Det eneste der kan være lidt irriterende ved denne løsning er at du selv skal binde egenskaberne mellem webparten og usercontrol'en sammen.


UserControlCode.Search ctrl = this.Page.LoadControl("/_controltemplates/Webtop/Search.ascx") as UserControlCode.Search;
if(ctrl != null)
  this.Controls.Add(ctrl);

Tags: , ,

Skift ikoner i søgeresultatet

by Jess Lassen 21. July 2009 05:42

Pift dine Sharepoint søgeresultater lidt op med ikoner der passer til indholdstypen.

Sådan gør du:

Opret den metadata du vil teste på i xslt’en i Shared Service Provideren.
Husk at lave en ny crawl efter du har oprettet ny managed property.

Tilret kerneresultat webdelen til at vise ikoner på baggrund af indholdstype.
Tilføj den oprettede Managed Property i Valgte kolonner:

Lav en xslt template der skifter ikon på baggrund af indholdstypen.


<xsl:template name="GetContentType">
 <xsl:param name="ContentType"></xsl:param>
 <xsl:param name="OriginalImageUrl"></xsl:param>
    <xsl:choose>
        <xsl:when test="contains($ContentType,'Medarbejder')"><img align='absmiddle' border='0' src='/_layouts/images/user.png' /></xsl:when>
        <xsl:when test="contains($ContentType,'Nyhed')"><img align='absmiddle' border='0' src='/_layouts/images/newspaper.png' /></xsl:when>
        <xsl:otherwise>
            <img align='absmiddle' border='0' src='{$OriginalImageUrl}' />
        </xsl:otherwise>
    </xsl:choose>
</xsl:template>

Ret i resultat-templaten så den bruger den nyoprettede template.


<!-- This template is called for each result -->
<xsl:template match="Result">

Udskift det gamle billede-tag med et kald til den nyoprettede template (GetContentType):
<img align="absmiddle" src="{imageurl}" border="0" alt="{imageurl/@imageurldescription}" />


<xsl:call-template name="GetContentType">
 <xsl:with-param name="ContentType" select="mycontenttype"/>
 <xsl:with-param name="OriginalImageUrl" select="imageurl"/>
</xsl:call-template>

Resultatet bliver et overskueligt og lækkert søgeresultat.

Tags: , ,

Powered by BlogEngine.NET 1.5.0.7
Theme by Mads Kristensen

RecentPosts