Template:Oberfläche gestalten
From MapbenderWiki
Contents |
Design gui
(deutsche Version weiter unten!)
EN
A GUI can be configured quiet differently. Examples for GUIs can be seen e.g. on this site http://www.mapbender.org/ in the Gallery.
Insert images, logos etc. (gif):
In the category 'interface management' under the menu item 'Edit GUI-Elements' create new elements by giving a new id and push the button save. Insert in the field Comment a short description for the new element which is easy to recognize. To include a logo or image specify the according HTML-tag img for graphics. Make a reference to the image by filling in the relative or absolute path in the line SRC. Insert the values top, left, width and height to make the position of the image. Use the 'Z-Index' in case of intersection with other graphic objects. Rendering takes place according to this value (0 references the bottom, above that lays 1, above that 2, etc.).
Areas:
With the help of design elements like coloured areas, it is easy to create nice layouts (shadows, frames). Create a new element as an area without much disc space: specify HTML-tag 'div', also a number of pixels for the position (top, left) and the size (width, height). E.g. create a red area with the parameter styles and the entry background-color:#ff0000. Insert a 0 (Null) in the 'Z-Index' and you have a red background. Notice that the other elements of the GUI need now a 'Z-Index' = 1 or higher.
Move several elements at the same time:
Maybe you want to insert a header in the GUI with your own logo and you have to move all elements of the GUI downwards. For this reason a SQL-statement is helpful which will be processed directly into a MySQL frontend (e.g. PhpMyAdmin or MySQL-Front). Because all GUI-elements are stored in the database you are able to move all or some of them by execute the following SQL:
SQL-string:
UPDATE gui_element SET e_top=e_top+80 WHERE fkey_gui_id='Name_of_my_GUI' AND e_top >=350
(This SQL-string moves all elements, which are 350 pixel under the upper edge of the window, some more 80 pixel downwards).
Notice:
Please notice to insert the name of your GUI in the string <fkey_gui_id>, otherwise you move the objects of all GUIs!
DE
Eine Oberfläche (GUI) kann sehr unterschiedlich gestaltet werden. Beispiele für GUIs können z.B. auf der Seite http://www.mapbender.org/ unter dem Menüpunkt Galerie eingesehen werden.
Einfügen von Bildern, Logos o.ä. (gif):
In der Rubrik Oberflächenverwaltung unter dem Menüpunkt Oberflächenelemente editieren können neue Element erzeugt werden, indem eine neue ID eingeben und der Knopf Save gedrückt wird. Tragen Sie in dem Feld Comment eine kurze Beschreibung für das neue Element ein, der leicht wiederzuerkennen ist. Für das Einbinden eines Logos oder Bildes wird der entsprechende HTML-Tag img für Graphiken angegeben. Durch Angabe des relativen oder absoluten Pfades in der Zeile SRC wird das Bild referenziert. Positioniert wird das Bild durch die Werte Top, Left, Width und Height. Bei Überschneidungen mit anderen Graphikobjekten ist der 'Z-Index' anzugeben. Entsprechend diesem Wert erfolgt die Darstellung (0 referenziert die Grundfläche, darüber liegt 1, darüber liegt 2, usw.).
Flächen:
Mit Hilfe von gestalterischen Elementen, wie farbigen Flächen, lassen sich leicht ansprechende Layouts (Schattierungen, Rahmen) erstellen. Wenn bei einem neuen Element als HTML-Tag div sowie Pixelangaben für die Positionierung (Top, Left) und Größe (Width, Height)angegeben werden, kann eine Fläche erzeugt werden ohne viel Speicherplatz zu verbrauchen. Über die Angabe Styles und z.B. den Eintrag background-color:#ff0000 wird eine rote Fläche erzeugt, die durch den Z-Index=0 im Hintergund steht. Natürlich müssen die vordergründigen Elemente mit Z-Index=1 oder höher versehen sein.
Verschieben von mehreren Elementen gleichzeitig:
Falls z.B. eine Kopfzeile mit dem eigenen Logo einfügt werden soll, so ist es sinnvoll alle sichtbaren GUI-Elemente auf einmal nach unten zu verschieben. Hier kann ein SQL-Befehl hilfreich sein, der direkt in ein MySQL Frontend eingetragen wird (z.B. PhpMyAdmin oder MySQL-Front). Da alle GUI-Elemente in der Datenbank gespeichert sind, können mit Hilfe des unten angegeben Befehls alle oder mehrere Elemente gleichzeitig positioniert werden:
SQL-Befehl:
UPDATE gui_element SET e_top=e_top+80 WHERE fkey_gui_id='Name_meiner_GUI' AND e_top >=350
(Dieser SQL-Befehl verschiebt alle Elemente, die 350 Pixel unterhalb der Oberkante des Fensters positioniert sind um weitere 80 Pixel nach unten).
Hinweis:
Achten Sie drauf, dass Sie bei SQL-Befehlen immer das Feld <fkey_gui_id> mit dem Namen der GUI parametrieren, da sonst die Objekte aller GUIs verschoben werden!
