Vår senaste kund Samtrans gav oss förtroendet att implementera Umbraco CMS i den design som levererats av Vektorgrafik Stockholm.

 

Samtrans Screen

 

Företaget sysslar med persontransporter för personer med speciella behov och hemsidan är en uppfräschning av deras tidigare hemsida. Läs gärna med om projketet bland våra referenser.

Xslt Books

Böcker som gjort sitt...

 

För några dagar sedan skrev Niels Hartvig, grundaren av Umbraco, ett blogginlägg där han berättade att man nu kommer att släppa stödet för så kallade XSLT-makron i Umbraco.

 

XSLT är en teknik som används för att formatera och och omformatera XML-dokument. Eftersom hela Umbraco-sajten, i dagsläget, sparas som ett XML dokument i webbserverns cache så har XSLT varit en extremt snabb teknik för att lista och filtrera innehåll.

 

I Umbraco 5, som bygger på ASP.NET MVC och är en komplett ombyggnad av grunden till Umbraco, kommer man att släppa stödet för XSLT och istället satsa enbart på Razor-makron. 

Jag tycker att det är bra! Som nybörjare på Umbraco minns jag att det största "hindret" för mig var just XSLT. XSLT är extremt snabbt men på samma sätt som det är snabbt är det krångligt och kräver relativt djup förstålse om XML, XPath osv. När Umbraco 5 nu istället baseras på Razor kommer den som arbetat med ASP.NET MVC att känna igen sig eftersom att Razor är den teknik som används för att programmera vyer i gränsnittet för MVC-sajter.

 

Så det är bara att lägga mina gamla XSLT-böcker på hyllan....

Umbraco User Group

 

Jag vill tipsa om den svenska användargruppen för Umbraco, UUGS (Umbraco User Group Sweden). Den startades för några månader sedan och kommer att hålla möten och seminarium med Umbraco som tema.

 

För att gå med, besök hemsidan uugs.se och glöm inte att joina facebook-gruppen

 

Vi ses och hörs! :D

Jag tänkte gå igenom grunderna i hur man bygger ut Umbracos Backoffice/backend. Eftersom det redan finns ett bra gäng bloggposter om hur man lägger till sin egen "section" så tänkte jag fokusera på lite andra delar just nu.

 

Skapa egen section / application i Umbraco

Det krävs lite småfix i databasen för att skapa sin egen section, det är inte särskilt avancerat och du kan läsa utförligt hur man gör i dessa poster:

 

http://www.robertgray.net.au/2011/5/10/creating-a-custom-content-tree-in-umbraco.aspx

 

http://www.sewen.se/blogg/2010/2/26/skapa-en-custom-section-i-umbraco-(steg-1).aspx

 

Göra egna Webforms till Umbraco backoffice

När du ska skapa dina egna .aspx-filer för redigeringsytan så är det en bra idé att använda Umbracos egna kontroller för backoffice. De finns i umbraco.uicontrols.controls. För att använda dessa på sida måste du lägga till följande rad i början av ditt aspx-dokument.

 

<%@ Register TagPrefix="umb" Namespace="umbraco.uicontrols" 
Assembly="controls" %>

När detta är fixat så kan du enkelt använda Umbracos orginal-kontroller och få din custom section att hålla samma konsekventa utseende som resten av backoffice.

 

Jag tänkte gå igenom några av de mesta grundläggande kontrollerna

 

TabView

Tabview

Om du vill använda tabbar skall du ha en TabView kontroll på sidan. Varje sida behöver bara EN TabView. Du skapar sedan valfritt antal tabs i din code behinde.

 

I din aspx-fil:

<umb:TabView ID="MyTabView" runat="server" Width="552px" Height="392px"/>


För att lägga till tabbar används förljande kod i code behinde:

protected override void OnInit(EventArgs e)
{
   base.OnInit(e);
   
    // Lägg till ny tab på MyTabView
    var myTab = MyTabView.NewTabPage("Details");
    myTab.Controls.Add(myPane);
    // Ett tab till
     var myTab2 = MyTabView.NewTabPage("New tab");
     myTab2.Control.Add(anotherPane);
}



Pane / PropertyPane

Pane -property

Det blå strecket markerar "umb:Pane" och de röda boxarna är PropertyPanels. Detta samarbete mellan Pane och PropertyPane ser man ofta i Umbracos backoffice. Koden ser ut ungefär så här:

<umb:Pane ID="myPane" runat="server" Text="Settings">
  <umb:PropertyPanel ID="PropertyPanel1" runat="server" 
    Text="Database datatype">
	<!-- DropDown goes here -->
  </umb:PropertyPanel>
  <umb:PropertyPanel id="PropertyPanel2" runat="server" 
    Text="Add prevalue">
	<!-- Textbox goes here -->
  </umb:PropertyPanel>
</umb:Pane>

 

MenuImageButton och MenuIcon

Det finns två olika typer av knappar som kan adderas till en TabView. Visuellt syns ingen skillnad, det är knapparnas funktion som skiljer sig.

  • MenuImageButton - Används om du vill att knappen ska fira av ett click-event och en postback.
  • MenuIcon - Används om knappen istället ska anropa en javascript-funktion.

 

MenuImageButton:

btnImage = dataTab.Menu.NewImageButton();
btnImage.ID = id;
btnImage.Click += new ImageClickEventHandler(SaveButton_Click);
btnImage.AlternateText = "Save";
btnImage.ImageUrl = GlobalSettings.Path + "/images/editor/save.gif";

 

MenuIcon:

btnImageIcon = dataTab.Menu.NewIcon();
btnImageIcon.ID = "btnImageIcon";
btnImageIcon.OnClickCommand = "alert('Run javascript')";
btnImageIcon.ImageURL = GlobalSettings.Path + "/images/editor/save.gif";
btnImageIcon.AltText = "Show alert";

 

CodeArea

I Umbracos backoffice används ibland en inbyggd kodeditor. Den kan även du använda i dina egna projekt genom att infoga en CodeArea.

 

Umbraco codearea

 

Så här kan koden se ut:

 

<umb:CodeArea ID="editor" ClientSaveMethod="doSubmit" CodeBase="Python" 
AutoResize="true" OffSetX="47" OffSetY="55" runat="server" />

 

ClientSaveMethod är inte obligatorisk och används för att hantera om användaren trycker "Ctrl+S" i editorn. Egenskapen CodeBase krävs inte heller. När du arbetar med denna CodeArea i code behinde använd egenskapen "Text" för att sätta/hämta innehållet.