Bygga ut Umbraco Backoffice - del 1

By Markus Johansson
2011-11-03

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.





More blog posts



15 januari 2021

Umbraco and MiniProfiler