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
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
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.
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.