Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Umbraco 7 Grundkurs

Das Grid-Control

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Das Grid-Control ermöglicht es, Inhalte in Layouts zu strukturieren, die auf der Client-Seite als responsives Layout dargestellt werden können.

Transkript

Ich habe hier eine ganz frische Umbraco-Installation vor mir. Und zwar habe ich bei dieser Installation keinerlei Konfigurationen gewählt, sondern lediglich auf den grünen Knopf "Install" geklickt. Damit wird mir Umbraco mit ein paar Beispielseiten installiert. Wir sehen, das ist jetzt eines der typischen One-page-Layouts. Hier wird etwas gespielt mit Spalten und Bildern im Hintergrund. Also eine hübsche Site. Jetzt wird es natürlich interessant zu sehen, wie man so etwas im Backend erstellt. Wir gehen jetzt in das Backend und schauen uns an, was es hier gibt. Das ist jetzt meine "Home"-Seite und das Interessante daran ist, dass sich dieses Layout, das wir im Frontend sehen, im Backend so einigermaßen widerspiegelt. Jetzt ist es natürlich noch interessanter, wie der Dokumenttyp für diese "Home"-Seite aussieht. Ich gehe also auf die "Einstellungen", "Document Types" und hole mir hier den Dokumenttyp für "Home" her. Wir sehen jetzt hier zwei Tabs und der erste mit dem Content enthält tatsächlich nur einen Property-Editor. Ein Property, das "Content" heißt. Dieses Property ist vom Typ "Grid FrontPage". Ich klicke hier auch noch einmal auf die "Eigenschaften". Das ist also das "Grid FrontPage". Offensichtlich ist das, was wir hier sehen, in unserem "Content"-Reiter. Das alles ist ein Property-Editor vom Typ "Grid" und das ist eine wunderbare Sache. Es scheint nämlich etwas sehr Leistungsfähiges zu sein. Zunächst einmal möchte ich zeigen, wie die Programmierung überhaupt aussieht, um so ein Grid darzustellen. Ich gehe also hierhin, und suche das Template für die "Home"-Seite. Wir haben "Master"-Template und hier haben wir dieses "Home". Das ist jetzt schon fast unverschämt kurz. Da sieht man nämlich nur den Aufruf einer Methode "GetGridHtml", also Content, das ist der Name von unserem Property, und hier steht noch so ein "fanoe". Fanoe ist übrigens das Theme und es ist der Name einer dänischen Insel. Das steht aber alles in dem Theme dann selber beschrieben, wenn man jetzt hier auf "Learn", "The starter kit" geht. "Fanø is a Danish Isle" und so weiter. Sie können dann sehen, wo Fanoe überhaupt liegt. Gut, kehren wir zurück in die Einstellungen. Ich greife jetzt einmal etwas vor in das Thema "Partial Views" und zeige Ihnen, dass es hier eine Datei gibt, die auch "Fanoe" heißt. Der Name "Fanoe" verweist genau darauf, dass dieses Grid mit diesem Code zu rendern ist. Das ist dann der Code, mit dem dieses Grid dargestellt wird, also das ist auch noch relativ übersichtlich. Man sieht also, dass es hier, wenn wir mal schauen, so etwas wie "renderRow" steht. Dann innerhalb dieser "Row" gibt es wohl etwas wie "areas" und darin so etwas wie "controls". Dann werden diese "controls" hier gerendert. Kehren wir noch einmal ganz kurz zurück zu unserer Inhaltsseite. Wir haben jetzt hier so einen zeilenmäßigen Aufbau. Das scheinen die "Rows" zu sein. Hier eine, die dann aus zwei solchen "areas" besteht und innerhalb dieser "areas" ist etwas darin. Ich klick dort einmal darauf und es erscheint ein Roch-Text-Editor. Ich habe also in so einer "area" einen Rich-Text-Editor eingebaut. Aber ich kann noch mehr hineintun, das zeige ich jetzt einmal. Neben so einem Rich-Text-Editor könnte ich jetzt zum Beispiel ein Bild einfügen. Dann geht mir "Select media" auf, ich kann ein Bild auswählen und schon ist dieses Bild in dem Grid. Dann kann ich jetzt hier einfach aus Symmetriegründen ein zweites Bild nehmen, sodass wir in das Grid zwei Bilder eingefügt haben. Ich speichere das Ganze ab. Dann schauen wir uns das im Explorer an und siehe da, ich habe also mein Grid um zwei Bilder erweitert. Jetzt kehren wir noch einmal zurück in die Einstellungen, dahin, wo ich diese "Fanoe"-Datei gefunden habe. Ich habe ja gezeigt, dass wir "Rows" haben. Hier wird eine einzelne "Row" gerendert. Innerhalb der "Row" gibt es "areas", das sind wohl die Spalten und innerhalb der "areas" haben wir die "controls", Da merkt man auch schon, mit diesem "Html.Partial" wird dann wohl noch eine andere Datei aufgerufen, die wir hier finden. Das heißt also, so ein Rich-Text-Editor wird hier dargestellt und so ein Bild, wenn ich eins einfüge, wird dann hier mit diesem Code dargestellt. Da merkt man, dass dieses Grid sehr mächtig und in einzelne Komponenten zerlegbar ist, die dann alle in einem übersichtlichen Code darstellbar sind. Dann am Ende des Tages, setzt sich das ganze Bild in unserer Content-Section zusammen, indem wir in den "areas" irgendwelche Elemente einfügen können, um den entsprechenden Content zu rendern. Seit es dieses Grid in Umbraco gibt, würde ich niemandem mehr empfehlen, in so einem Rich-Text-Editor Bilder einzufügen. Den Rich-Text-Editor würde ich immer so konfigurieren, dass man keine Bilder einfügen kann. Ganz einfach, weil man die Erscheinungsform der Bilder und Texte in diesem Grid wesentlich besser steuern kann. Der Code, den ich gerade gezeigt habe, vermag es, die hier hinterlegten Inhalte, also Texte und Bilder, mithilfe von Bibliotheken auszugeben, wie zum Beispiel Bootstrap. Hier wird alles zusammengesetzt zu einem einzigen großen Bootstrap-Code. Alles, was Sie dann tun müssen, ist den entpsrechenden Code dazu schreiben., damit das Ganze gut aussieht. Ich würde also jedem empfehlen, der mit Umbraco frisch anfängt, sich mit diesem Grid eingehend zu beschäftigen.

Umbraco 7 Grundkurs

Lernen Sie das mächtige Content Management System zu bedienen und steigen Sie in die Entwicklung dafür ein.

3 Std. 16 min (32 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Hersteller:
Software:
Umbraco Umbraco 7
.NET .NET 4.6
Exklusiv für Abo-Kunden
Erscheinungsdatum:07.09.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!