Style Guide

Schreibt man Module für Xentral, muss man einige Regeln bezüglich des Layouts beachten, um eine einheitliche Oberfläche zu erzeugen.

Fehlermeldungen

Fehlermeldungen müssen immer über der Live Tabelle, jedoch - falls vorhanden - unter dem Fieldset sein. :entwickler:fehlermeldung.png?nolink&1000

Live Tabellen

Die Spalte Menü muss so klein wie möglich gehalten werden, wie z.B. 1% oder 5%, je nach Anzahl der darin enthaltenen Icons. Der letzte Wert im Array ist die Spaltenbreite des Menüs! Beispiel:
$width = array('10%', '10%', '24%','20%','15%','10%', '10%', '1%');
:entwickler:livetabellemenue.png?nolink&80 Wird mit einer Live Tabelle eine Übersicht dargestellt, muss als Reiter Übersicht verwendet werden. Beispiel:
$this->app->erp->MenuEintrag("index.php?module=modulname&action=list","Übersicht");
:entwickler:uebersichtmodul.png?nolink&300

Fieldsets

Möchte man Fieldsets nebeneinander platzieren, muss man die Bootstrapklasse um die Fieldsets setzen, damit sich die Fieldsets beim Verkleinern des Fensters automatisch anpassen. :entwickler:fieldsetbootstrap.png?nolink

Textfelder

Die Beschriftungen vor Textfeldern sollten immer mit einem Doppelpunkt abschließen. :entwickler:textfelderbeschriftung.png?nolink

Widgets

Eine Beispielsyntax zur Erstellung dieser Widgets finden Sie hier unter dem Punkt YUI: Für jQuery und Javascript Widgets. Zur vereinfachten Auswahl eines Datums sollte ein DatePicker verwendet werden. :entwickler:datepicker.png?nolink&100 Zur vereinfachten Auswahl einer Uhrzeit sollte ein TimePicker verwendet werden. :entwickler:timepicker.png?nolink&100 Textareas können mit Hilfe der Funktion CkEditor um Formatierungsmöglichkeiten erweitert werden. Basic: :entwickler:basic.png?nolink&200 Belege: :entwickler:belege.png?nolink&300 All: :entwickler:all.png?nolink&300

Standarddialoge

Die Standarddialoge werden beim Editieren von Einträgen in einem gesonderten Fenster geöffnet. :entwickler:standarddialog.png?nolink&50

Speichern von Einstellungen

  • Für das Speichern muss immer ein Speichern Button verfügbar sein.
  • Verlässt man den Einstellungsbereich obwohl man Änderungen gemacht hatte und nicht speichert, sollte ein Hinweis erscheinen.
  • Einfache Filterfunktionen mit direktem, optischen Feedback ohne Button wenn möglich
  • Aktionen immer über Buttons

Eigene CSS Dateien

Existiert die Datei ./themes/new/css/custom.css bzw für PopUp ./themes/new/css/custom_popup.css bindet Xentral diese Datei zum Schluss ein. Dadurch kann man auf das Layout selbst zugreifen.
War der Artikel hilfreich?
Vielen Dank für Ihr Feedback!

Made with ❤ at zwetschke.de