Användning av mallar i ASP.Net 1.1
Förord
Om en hemsida blir lyckad eller inte beror ofta på dess utseende och innehåll. Vad är viktigt vid skapandet av en lyckad hemsida? Något som säkert många håller med om är vikten av sidors enhetlighet och innehåll. Enhetlighet spelar en stor roll då användaren av en hemsida ska navigerara mellan sidorna, det är enhetligheten som ger användaren en känsla av igenkännande. Hur skulle det se ut om sidor på en hemsida skiljer sig markant i från varandra? Denna artikel går igenom hur återanvändandet av användargränsnitt och underhållning av en hemsida kan förenklas med hjälp av mallar.
Nsquared2 Template kontroll
Nsquared2 template-kontroll är en serverkontroll som gör det möjligt att använda mallar för att skapa ett
konsekvent utseede för alla sidor på en hemsida. Mallarna beskriver sidans layout, så som det grund-
läggande utseendet, sidors gemensamma innehåll och funktionalitet i form av kod. Se figur 1. Den ljusgrå
färgen längst upp och till vänster i fig 1 representerar menyer och navigeringar av något slag.
Content-kontrollen på mallsidan definierar de områden som kan fyllas med innehåll. I dessa ytor placerar
sidorna ut sitt innehåll (representeras i svart färg i figuren). För att alla sidor som använder sig av en mall
ska vara konsekventa, så kan sidor enbart placera ut sitt innehåll i de områden som består av content-
kontroller. Utöver mallhantering så har även template-kontrollen inbyggt språkstöd. Språkstödet set till att
serverkontrollers innehåll automatiskt presenteras i det språk användaren föredrar (Resursfiler måste finnas
för varje språk som hemsidan ska stödja). Template-kontrollen hjälper också till med automatisk positionering
efter "postback". Automatisk positionering fungerar genom att kontrollen automatiskt kommer ihåg sidans
position när en "postback" sker. På så sätt kan den automatisk navigera sidan till samma position som sidan
befann sig på innan en "postback".
Skapa mallar
Att skapa en mall är lika enkelt som att skapa en vanlig användarkontroll (Web User Control) i ASP.Net som
kan skrivs som det vore en vanlig ASP.Net sida. Det behövs ingen ny teknik för lära sig använda mallar mer
än användandet av Nsquared2s Template och content-kontroller.
Här kommer ett exempel på en mall skapad i ASP.Net. Mallen är skapad som en användarkontroll.
Kod 1. (template.ascx)
<%@ Control Language="c#" AutoEventWireup="false" %>
<%@ Register TagPrefix="Nsquared2" Namespace="Nsquared2.Web" Assembly="Nsquared2.Web" %>
NSQUARED2 - Template v 1.0
Koden är väldigt lik en vanlig ASP.Net sida med enkel HTML kod och ASP.Net kontroller. Skillnaden mellan
mallen och en vanlig ASP.Net sida är filens endelse .ascx och istället för <%@Page %> används
<%@ Control %>. Content-kontrollen i mallen identiferiar vart det går att placera ut innehåll (sidorna
som använder mallen har som uppgift att fylla dessa content-kontroller med innehåll). Det finns inga
begränsningar på antalet content-kontroller en mall kan använda sig av. Det viktigaste är att kontrollerna
identiferias med unika id:n. En mall kan innehålla både kod och innehåll. Detta gör det möjligt att skapa
dynamisk mallar.
Användning av mallar
Använding av en mall är relativt enkelt. Skapa först en ASP.Net sida (Web Form). Sidan ska vara helt fri från
HTML kod. Registrera sedan användandet av Nsquared2.Web.Template kontroll med hjälp av <@% Regsiter %>.
Lägg till template-kontrollen på sidan och ange vilken mall som ska användas (detta kan bestämmas tex med
TemplateFile attributet för template-kontrollen). Sidan ska nu se ut som följande kod:
Kod. 2.1 (default.aspx)
<%@ Register TagPrefix="Nsquared2" Namespace="Nsquared2.Web" Assembly="Nsquared2.Web" %>
<%@ Page language="c#" Codebehind="default.aspx.cs" AutoEventWireup="false" Inherits="template.WebForm1" %>
För att kunna fylla mallens content-kontroller med innehåll så måste content-kontroller placeras ut på ASP.Net sidan.
Placera enbart ut de content-kontroller som finns i mallen, se till så content-kontrollerna har samma id som de har
i mallen (för att rätt innehåll ska palceras på rätt plats så är det viktigt att content-kontrollens id är samma som
content-kontrollen i mallen). De content-kontroller som inte ska användas kan utelämnas. Content-kontrollerna
placeras innanför template-kontrollen. Lägg sedan till innehåll i content-kontrollerna, kan vara HTML kod och kontroller.
Exempel på en sida som använder mallen i kod 1.
Kod 2.2 (default.aspx)
<%@ Register TagPrefix="Nsquared2" Namespace="Nsquared2.Web" Assembly="Nsquared2.Web" %>
<%@ Page language="c#" Codebehind="default.aspx.cs" AutoEventWireup="false" Inherits="template.WebForm1" %>
$resource:Information, Information
Denna sida kommer att se ut som Fig 2 i Internet Explorer.
Nestlade mallar
Mallar är inte tvugna att vara en sida. Mallar kan vara nestlade, vilket innebär att en mall kan ärva en annan
malls utseende. Se Fig 3. Till denna artikel medföljer exempelkod på hur nestlade mallar kan implementeras.
Se "default5.aspx" och "default6.aspx" samt mallarna "main.ascx, sub1.ascx och sub2.ascx" i exempelkoden.
Konfiguration av template-kontrollen
Nsquared2 template-kontroll kan konfigureras på flera olika sätt. För global konfigurering så används
templateManager sektionen i web.config. För lokal konfigurering (konfiguration per sida) så används
template-kontrollens attribut på sidan. För att mallar ska kunna användas på hemsidan så måste följande
sektioner läggas till i web.config:
Kod 3. (web.config)
type="Nsquared2.Web.TemplateManagerSectionHandler,Nsquared2.Web"/>
autoPosition="true">
enabled="true"
resourceName="template.resources.strings"/>
....
Här kommer en lista på de inställningar som går att konfigurera i web.config.
defaultTemplate
Med defaultTemplate anges namnet på den mall som ska användas som standard för alla sidor som använder template-
kontrollen. Namnet på mallen måste finnas under elementet <templates>.
autoPosition
Med autoPostition kan automatiskt postitionering aktiveras eller deaktiveras efter "postback". Om inget anges så är false standard.
templates
Under templates specifieras alla de mallar som ska finnas tillgängliga på hemsidan. Detta görs med elementet add där
key attributet anger ett unikt namn för mallen och value innehåller den virtuella sökvägen till mallen. Om en
standardmall inte har angivits under <templateManager> så kommer första mallen som finns under templates bli standardmallen.
localization
Med localization kan språkstödet konfigureras. localization har två attribut, enabled och resourceName.
enabled attributet används för att specifiera om spåkstödet ska vara aktiverat eller deaktiverat. Om inget anges så
är false standard. resourceName är namnet på standard resursfilen som innehåller språksträngar. Läs mer om resursfiler
och hur dem används i ASP.Net på denna adress: h ttp://www.dotnetjunkies.com/quickstart/aspplus/doc/resourcefiles.aspx
Här följer en en lista på de attribut som kan användas för att konfigurera template-kontrollen på sid nivå (lokal nivå).
TemplateFile
TemplateFile kan användas för att specifiera en virtuella sökväg till den mall som ska användas.
TemplateName
TemplateName kan användas för att specifiera namnet på den mall som ska användas på sidan. Mallen måste finnas under
elementet <templates> i web.config.
LocalizationEnabled
LocalizationEnabled kan användas för att aktivera eller deaktivera språkstöd.
ResourceName
ResourceName kan användas för att specifiera namnet på den resursfil som ska användas om språkstödet är aktiverat.
AutoPosition
AutoPosition kan användas för att akitivera eller deaktivera automatisk positionering.
Dessa attribut tar över de inställningar som är gjorde i web.config.
Här är ett exempel på hur attributen kan användas på en sida:
Kod 4.
AutoPosition="false"
LocalizationEnabled="false"
TemplateFile=”~/templates/template.ascx”>
...
Språkstöd
Språkstödet i template-kontrollen fungerar på så sätt att varje kontrolls attribut som presenterar text, tex: Text och ToolTipgår få språkstöd på. För att ange vilket namn som ska hämtas i från resursfilen så används detta mönster "$resource:<word>, <default word>".
Om en Button kontrolls Text egenskap är satt till "$resource:Information, Information" då är "Information" namnet på ordet i
resursfilen. Om en standard text (default word) är angiven, så kommer den texten att visas istället, om "word" inte finns i resursfilen.
Kod 5.
$resource:Information, Information
HeaderText="$resource:AddToCart, Add to Cart"
ButtonType="PushButton"
Text="$resource:Add, Add"
CommandName="AddToCart" />
HeaderText="$resource:Item, Item"
DataField="StringValue"/>
...
För att testa språkstödet tillsammans med exempelkoden som medföljer denna artikel, så måste både svenska och
engelska läggas till under Verktyg/Internet Inställningar/Språk i Internet Explorer Se Fig 4.
Språket som ligger längst upp i listan under språk i Internet Explorer, kommer att vara det standard språk som
exempelkoden kommer att använda sig av. För att testa språkstödet så byt ordning på språken i listan.
Exempelkoden
Till denna artikel medföljer källkod som visar olika exempel på hur template-kontrollen kan användas. Varje fil som
medföljer använder template-kontrollen på olika sätt. Här kommer en kort beskrivning över filerna.
Default.aspx, har språkstöd och automatisk positionering avstängd på sidnivå.
Default2.aspx, denna sida har automatisk positionering aktiv.
Default3.aspx, visar hur en mall på sidnivå kan anges med hjälp av TemplateName.
Default4.aspx, visar minsta möjliga konfigurering på sidnivå. Använder web.configs inställningar.
Default5.aspx, använder en av de två nestlade mallar som medföljer i exempletkoden.
Default6.aspx, använder en av de två nestlade mallar som medföljer i exemplkoden.
Default7.aspx, visar hur en mall kan använda sig av code-behind.
Hämta hem exempelkoden här.
Fårgor kan skickas till Fredrik Normén fnormen@hotmail.com
Figurer
Fig 1.
Fig 2.
Fig 3.
Fig 4.
0 Kommentarer