OPTEN, das einzige Umbraco-zertifizierte Unternehmen der Schweiz

Logikelemente in Umbraco

Nachdem Sie den Blogeintrag Umbraco CMS - Installationsanleitung gelesen haben, sind Sie nun in der Lage Umbraco korrekt zu installieren. Richtig Spass macht eine Webseite jedoch erst mit entsprechenden Logikbausteinen. In diesem Blog erkläre ich Ihnen wie Sie eine Navigation erstellen können, die sich aus denjenigen Seiten erzeugt, die Sie in Umbraco anlegen und verwalten.

In der Welt von Umbraco gibt es verschiedene Möglichkeiten Logik-Elemente zu platzieren. Es gibt die Möglichkeit von Inline-Razor-Code, Partial Views oder Macros. Macros unterscheiden sich von anderen Logikelementen dadurch, dass Parameter übergeben werden können, Macro-spezifisches Caching unterstützt wird und die Macros im Rich-Text-Editor durch den Webseiten-Editor eingefügt werden können. Macros können aus MVC Partial Views, XSLTs, Usercontrols oder Razor scripts bestehen (PS: bis auf die Usercontrols können alle über das webbasierte Umbraco-Interface editiert werden).
In diesem Beispiel setzen wir ein MVC Partial View ein. Die Gründe können Sie unten in diesem Post mit dem Vermerk „Für Hackers“ nachlesen.

Klicken Sie in der Developer Section auf Partial View Macro Files und anschliessend auf „Create“. Geben Sie dem neuen Logikelement einen Namen (in unserem Fall „Navigation“) und wählen Sie als Snippet ebenfalls „Navigation“ aus. Belassen Sie das Häckchen „Create Macro“ angekreuzt um automatisch das entsprechende Macro erzeugen zu lassen.
Anschliessend können Sie auf „Create“ klicken um die Navigationslogik anzulegen.

Partial View Macro anlegen

 

Als Resultat sehen Sie folgenden Code (Ausschnitt):

@{
    @*Get the root of the website *@
    var root = CurrentPage.AncestorOrSelf(1);
}

<ul>
    @foreach (var page in root.Children.Where("Visible"))
    {
        <li class="@(page.IsAncestorOrSelf(CurrentPage) ? "current" : null)">
            <a href="@page.Url">@page.Name</a>
        </li>
    }
</ul>

Dieser Code basiert auf Dynamics. Wir bevorzugen „Strongly Typed“ (vergleichen Sie unsere Bemerkungen weiter unten im Post „Für Hackers“). Deshalb können Sie folgenden Code übernehmen (Interessierte können gerne die Unterschiede vergleichen).

@{
    @*Get the root of the website *@
    var root = Model.Content.AncestorOrSelf(1);
}

<ul>
    @foreach (var page in root.Children.Where("Visible"))
    {
        <li class="@(page.IsAncestorOrSelf(Model.Content) ? "current" : null)">
            <a href="@page.Url">@page.Name</a>
        </li>
    }
</ul>

Wenn Sie die Macros öffnen werden Sie das vorgängig erzeugte Macro sehen.
Weil es verschiedene Möglichkeiten gibt Macros zu erstellen, fügen wir dem Macro-Namen jeweils ein Prefix mit der eingesetzten Technologie hinzu. In diesem Fall würde „Navigation“ zu „[PVMF] Navigation“ (PVMF für Partial View Macro File; Konvention von OPTEN).

Macro verwalten 

 

Nun können Sie das Macro in Ihrer Webseite verwenden.
Dazu wechseln Sie in die Settings Section und wählen das gewünschte Template aus. Anschliessend platzieren Sie den Cursor an derjenigen Stelle an der die Navigation eingefügt werden soll. Nun können Sie im Dropdown das Makro ([PVMF] Navigation) auswählen und das Template speichern.

Macro einfuegen 

 

Fertig!

 

Nachdem Sie Ihre Seite neu geladen haben, werden Sie die neue Navigation sehen. Fügen Sie ruhig einige neue Seiten hinzu oder sortieren Sie diese (Content Section) um die Struktur der Navigation zu verändern.

 

Für Hackers:

In Umbraco gibt es unterschiedliche Razortypen: DynamicNode Razor & „Real“ Razor.
Eine Übersicht zu den Möglichkeiten liefert die folgende Liste:

Developer > Scripting Files == DynamicNode razor
Developer > Partial View Macro Files == "Real" Razor
Settings > Template (Webforms mode) == (aka, MasterPages) DynamicNode razor
Settings > Template (MVC mode) == (aka, Views) "Real" razor
Settings > Partial Views == "Real" razor

(Quelle: http://our.umbraco.org/forum/developers/razor/44664-Confused-over-when-DynamicNodeList-is-returned)

Wir in der OPTEN bevorzugen klar den typisierten Zugriff (Performance) und arbeiten ausschliesslich mit dem MVC-Mode (Flexibilität/Architektur). Den Mode können Sie übrigens im File <<Umbraco-Root>>/Config/umbracoSettings.config mit dem Tag <defaultRenderingEngine>Mvc</defaultRenderingEngine> konfigurieren.

Hier noch ein Auszug aus dem Forumpost zu den unterschiedlichen Razor Engines (ebenfalls aus oben genannter Quelle):

"DynamicNode razor: is dynamic (@Model.BodyText) unless you do a lot of work to force it otherwise. Let it be dynamic and use 'real' razor if you need strongly typed is my advice
http://our.umbraco.org/projects/developer-tools/razor-dynamicnode-cheat-sheet

Real razor: can be either strongly typed (@Model.Content.GetPropertyValue("content") / @Model.Content.GetPropertyValue<HtmlString>("content")) or dynamic (@CurrentPage.Content)
http://our.umbraco.org/projects/developer-tools/umbraco-v6-mvc-razor-cheatsheets"

Folgende Einträge im Issue-Tracker von Umbraco sollten zusätzlich Klarheit schaffen:
http://issues.umbraco.org/issue/U4-1681
http://issues.umbraco.org/issue/U4-1382


Ergänzung: Die API’s von Umbraco bieten unendlich viele Möglichkeiten eigene Erweiterungen in der gewünschten Sprache (C#, VB, usw.) erstellen und verwenden zu können. Ich persönlich mag die Möglichkeit unsere Logik über ein webbasiertes Interface anpassen zu können ohne gezwungen zu sein Visual Studio starten zu müssen. Selbstverständlich lohnt sich immer auch die Überlegung ob die Logik nicht doch besser in ein eigenes Visual-Studio-Projekt ausgelagert wird (Gründe dafür: Wiederverwendung von bestehendem Code, Schnittstellen, PDF-Generierung, usw.). Unter anderem kann die Testbarkeit dadurch erhöht werden.

Weiterführende Informationen zu den API’s finden Sie hier: http://our.umbraco.org/documentation/Reference/


kommentieren


0 Kommentar(e):