single-sign-on und weiter - ibm oneui + mytheme...xpage „programmierung ... ein motiv kann bereits...

Manfred Meise

IBM Certified Advanced Developer - Lotus Notes and Domino R3 – R8.5 IBM Certified Advanced Administrator - Lotus Notes and Domino R3 – R8, R8.5 IBM Certified Advanced Instructor – Lotus Notes and Domino R3- R8, R8.5

IBM oneUI

MyTheme myUI

© mmi consult GmbH 2005 - 2012 2 Entwicklercamp 2012

zu meiner Person: Manfred Meise

Studium Elektrotechnik (Dipl. Ing. (FH))

Arbeit als Softwareingenieur seit mehr als 30 Jahren bei verschiedenen Computerherstellern und Softwarehäusern

Gründer und Geschäftsführer der mmi consult gmbh

Erfahrungen mit Lotus Notes/Domino seit 1992 - Markteinführung in Europa (als Leiter Strategische Projekte bei Lotus Development Deutschland)

IBM Zertifizierungen als Anwendungsentwickler, Systemadministrator, Trainer für die Produktversionen R3 bis R8.5

Tätigkeitsschwerpunkte im Entwicklungsbereich: CRM, Workflow, Objektorientierte Anwendungsarchitekturen, XPages

Tätigkeitsschwerpunkte als Systemadministrator: Domänenzusammenführungen und –trennungen, Betriebshandbücher und Administrationsstandards, Versionswechsel, Infrastruktur-Audits, Client-Rollouts

Erreichbar unter:

[email protected]

http://www.mmi-consult.de

http://www.mmi-consult.de/faq

© mmi consult GmbH 2005 - 2012

Meine Themen heute …

3 Entwicklercamp 2012

XPages: Schnelle Programmierung – wo bleibt das UI?

Einführung in XPages Styling

Strukur des IBM oneUI Layout-Frameworks

Verwendung von Motiven

Anpassung einiger oneUI Elemente nach eigenen Vorstellungen

Resumee und Ausblick

XPages: Schnelle Programmierung – wo bleibt das UI?


XPage „Programmierung“

Controls auf einer Seite zusammenstellen

SSJS (und ggf. CSJS) berechnen Werte und steuern Funktionalität

„Klick-Programming“

Kann weiter verfeinert werden



Ergebnis ist mager

Nicht zu vergleichen, mit anderen Designs XPage basierter Seiten

Beim Blick in Beispieldatenbanken (z.B. Diskussion) ist dort nicht einmal Styling angesetzt

Mein Wunsch: ich will …

mich auf die Funktionalität und Datenstrukturen konzentrieren (und ansprechende Gestaltung möglichst erben)

bestehende Datenbanken mit geringem Aufwand in XPages Design umgestalten, um Browserfähigkeit zu integrieren

XPages Controls (z.B. von OpenNTF oder anderen) einfach in meine Anwendungen integrieren



Object-Styling

Einzelne Objekte haben Stil-Attribute

… doch halt. Soll ich das für die ganze Anwendung konsequent durchziehen?

NEIN: Würde eine Menge Disziplin (besonders im Team), und Dokumentation erfordern. Wehe die Gestaltungswünsche ändern sich auf „halber Strecke“


CSS StyleClasses einsetzen

Da kann man doch auch Styles

(CSS – Classes) einsetzen

Warum kann ich nichts

auswählen? Muss ich stets

aufmerksam tippen, um keine

Fehler zu machen?

Würde ich StyleSheets (lediglich

mit Class-Definitionen) einsetzen,

wäre das schon einfacher

Doch es ändert sich immer noch

nichts



StyleClasses ausdefinieren

Ach ja, man muss die StyleClasses ja auch ausformulieren

Das Ergebnis sieht schon eher nach meinen Vorstellungen aus

Doch darf ich nicht vergessen, diese StyleSheets und StyleClasses auf jeder XPage einzusetzen!



So kann es nicht weitergehen!

Der anfängliche Spaß schneller XPage Gestaltung ist verflogen!

Alle wollen mir klar machen, wie einfach das ist. Doch ich kann das nicht nachvollziehen: Frust!

Wer stellt mir die ganzen StyleSheets und Grafiken für eine ansprechende Gestaltung zur Verfügung? Ich bin Programmierer und kein Designer!

Irgendwie muss ich doch auch ein Design hinbekommen, wir es Beispiele von IBM oder OpenNTF zeigen – da ist ja auch nicht auf jeder Seite Styling Information enthalten.

AHHHH Layout Frameworks!!!!



Was bringt mir ein CSS Framework?

Die Vorteile liegen ganze klar auf der Hand:

Es spart einem viel Zeit und vor allem Nerven, da man sich für die meisten Probleme keine Lösungen und nervige IE-Workarounds mehr suchen muss. Das Framework übernimmt diesen Job. Man muss nur noch wissen damit umzugehen



Motive, was ist das?

Habe das was von Motiven gesehen, doch kann man hier keine auswählen?!

Wie bekommt man dort etwas hinein? Ein Blick in Beispielanwendungen bringt neue Ideen.

Baue ich ´mal ein. Mal sehen was passiert…


Einführung in XPages Styling


CSS Basics

Cascading StyleSheets

Trennen Inhalt von Gestaltung einer Seite

Eigenständige Auszeichnungssprache, um die Darstellung eines Elementes zu bestimmen

Oft verwendet in HTML und XML Seiten

Regelwerk: Beispiel:

14 Neue Funktionen in Domino 8.5 für Domino 6.5 Entwickler


CSS Selektoren

CSS ID‘s

Identifizieren eindeutig ein Element auf der Seite

Selektor in CSS mit # gekennzeichnet



XPages CSS Basics – CSS IDs

ACHTUNG:

Benutzerdefinierte Steuerelemente können mehrfach auf einer XPage verwendet werden

IDs müssen eindeutig berechnet werden, bevor sie an den Browser gesendet werden

Vorher (Definition):

Nachher (Seiteninhalt für den Browser):



CSS Selektoren

CSS Klassen

Können beliebig oft auf einer Seite verwendet werden

Werden verwendet, um alle Elemente eines Typs einheitlich zu gestalten

Im Selektor mit einem „.“ gekennzeichnet



XPages CSS Basics – CSS Klassen

HINWEIS:

Benutzerdefinierte Steuerelemente können mehrfach auf einer XPage verwendet werden

Gleichartige Stilklassen sorgen für eine einheitliche Darstellung

Vorher (Definition):

Nachher (Seiteninhalt für den Browser):


Strukur des IBM oneUI Layout-Frameworks


CSS Frameworks – Warum?

Steigerung der Entwicklungsgeschwindigkeit

Cross-Browser Support

Einschl. einiger Hacks für ältere Browser oder nicht unterstütze Features

Stellt einheitliches „Look and Feel“ in mehreren Anwendungen sicher

Einige (nicht alle) Frameworks verfügen über eine (gute) Dokumentation

Einige Frameworks bieten zusätzliche Tools, um eigene Layouts zu

definieren

Beispiele:


Blueprint CSS 960 Grid System jQuery UI CSS

YUI Grids CSS (Yahoo) Elements CSS Elastic Columns

IBM oneUI YAML CSS Framework Und viele weiter …


Das IBM oneUI Framework

Layout und Presentation Framework

Wird von IBM für alle modernen Webanwendungen eingesetzt

Dokumentation: http://www-12.lotus.com/ldd/doc/oneuidoc/docpublic/index.htm

Vorteile:

Integrierte Layout Funktionen

Standardisiertes Look and Feel für alle Gestaltungselemente

Zahlreiche Beispielanwendungen auf OpenNTF, welche dieses Framework verwenden

Nachteile:

Basiert nicht auf Raster Layout

Umfangreich – erfordert intensive Einarbeitung

Mittlerweile verfügbare Versionen

oneUI Version 1 (enthalten in 8.5.0)

oneUI Version 2 (enthalten in 8.5.2)

oneUI Version 2.1 (enthalten in 8.5.3) 21 Neue Funktionen in Domino 8.5 für Domino 6.5 Entwickler


Das IBM oneUI Framework – Layout Elemente



oneui


Gegenüberstellung der Darstellungen

oneuiv2

Oneuiv2.1


Das IBM oneUI Framework - Layout

Fenster Steuerelemente mit Stilklassendefinitionen legen Strukturen fest


Mit optionalen weiteren Unterstukturen

Reihenfolge

beachten


Empfohlenes Design-Pattern

Die einzelnen Layout-Bereiche in separate benutzerdefinierte

Steuerelemente auslagen

Erhöht Übersichtlichkeit

Erhöht Änderungsfreundlichkeit

Erlaubt es, abgewandelte Designs mit gleichen Kernmodulen zu erstellen



Anleitung: oneUI Layouts anwenden

1. Erstellen Sie die Grundstruktur eines oneUILayouts und weisen

den verwendeten Fenstern die oneUI Stilklassen zu

Tip: Verwenden Sie eine StyleSheet Datei mit

Namensplatzhaltern (um keine Schreibfehler zu begehen)

2. Testen Sie im Browser



Das Ergebnis ist unbefriedigend?

Klar: wir haben CCS Stilklassen referenziert, die Ressourcen jedoch nicht eingebunden (bzw. nur unseren Platzhalter)



Anleitung: Optik herstellen

1. Importieren Sie folgende CSS StyleSheets aus dem Verzeichnis „<NotesData>\domino\html\oneuiv2“:

• base\core.css

• defaultTheme\defaultTheme.css

2. Fügen Sie diese Ressourcen zur XPage hinzu



Sieht ja schon besser aus …

Sowohl im XPage-Editor …

als auch im Browser …



Wir können auch die Farbe wechseln …

…wenn jemand grün schöner findet

muss man halt styleSheets austauschen



Anleitung: Farbmuster wählen

1. Importieren Sie die entsprechenden CSS StyleSheets aus dem

gewünschten Unterverzeichnis der MotivDateien, z.B.:

„<NotesData>\domino\Html\oneuiv2“: greenTheme\greenTheme.css

oder

redTheme\redTheme.css

2. Und fügen diese statt der „defaultTheme.css“ zur XPage

hinzu


Verwendung von Motiven


Was ist ein Motiv (Theme)?

XML Datei mit dem root element “theme”

JSF Gestaltungselement (Ressourcen\ Motive) seit Domino 8.5

Kann serverweit oder anwendungsbezogen definitiert werden

Server enthalten bereits einige Vorgabemotive

Steuert Seitenmodifikationen zur Laufzeit

Resourceneinschluss (JavaScript / CSS)

Manipulation der Attribute von Steuerelementen


XPage - Motive

Abbildung des entsprechenden JSF Elementes

Steuern Aussehen und Verhalten der generierten Web-Page zur Laufzeit

Kann serverweit oder anwendungsbezogen definitiert werden Server enthalten bereits einige vorinstallierte Motive

Anwendungsbezogen

zentrales Gestaltungselement (seit Notes/Domino 8.5)

kann mehrfach vorhanden sein

Ein Motiv kann bereits bestehende Motive erweitern

Erlaubt es Standardressourcen zu laden, ohne diese explizit auf den einzelnen XPages laden zu müssen

Erlaubt es, die Attribute eines jeden Elementes einer XPage zur Laufzeit zu beeinflussen statisch

konditional

XML basiert und einfach zu erlernen Muster wird bei Erstellung eines neuen Motives erstellt

Bearbeitbar mit Texteditor oder Eclipse XML-Edior



IBM OneUI im Filesystem

Theme-Definitionen Theme-Ressources



Vorinstallierte Motive

Auf Server (und Client) gespeichert in: [domino root]/xsp/nsf/themes/

ACHTUNG: nicht im Datenverzeichnis

Hinzufügen eigener serverweiter Motive durch Speicherung im gleichen Verzeichnis

Hierdurch können alle Anwendungen eines dieser Motive verwenden

können weiter verfeinert werden (serverweit oder anwendungspezifisch)

sollten nicht verändert werden (werden bei Server/Client-Updates überschrieben)


Vorinstallierte Motive

webstandard (default theme)

notes

oneui

oneuiv2

oneuiv2.1

oneuiv2_gold

oneuiv2_green

oneuiv2_metal

oneuiv2_red

oneuiv2.1_blue

oneuiv2.1_gen1

oneuiv2.1_gold

oneuiv2.1_green

oneuiv2.1_onyx

oneuiv2.1_orange

oneuiv2.1_pink

oneuiv2.1_purple

oneuiv2.1_red

oneuiv2.1_silver


Motivauswahl (oneUI V2) der Diskussions-Datenbank

blue gold

red green


Das einfachste Beispiel eines Motives

Dieses Motiv hat keine Funktion, ist jedoch gültig

Motive können andere Motive erweitern:

webstandard

oneui

oneuiv2

oneuiv2.1

notes

…

Damit Motive Wirkungen zeigen, müssen:

Ressourcen zur generierten Seite hinzugefügt werden oder

Attribute für Komponenten gesetzt werden

Max 5 Ebenen


Auswahl / Aktivierung eines Motives

Servervorgabe

Datei xsp.properties

Anwendungsvorgabe

Eigenschaft XPages



Aufbau einer Motiv Datei

Jede Motiv Datei folgt diesem Aufbau

..wobei die beiden Haupt-Elemente

<resource>

<control>

… gar nicht oder auch mehrfach vorkommen können



Das Motiv-Element: <resource>

Kann recht einfach sein:

Referenz einer internen Anwendungs-Ressource

Referenz einer vorinstallierten Server-Ressource



… Das Motiv-Element: <resource>

oder auch ziemlich komplex

Referenz mehrerer CSS Dateien

– intern / extern

Definition von Client-Side Javascript Dateien

Definition von „Rendert“ Eigenschaft für Ressourcen

– Auswahl verschiedener CSS Dateien in Abhängigkeit des Browsers zur Laufzeit

Resource nur verwenden, wenn DoJo Steuerelemente verwendet werden

<resource dojoTheme=”true”>

Browser/Client Erkennung

<resource rendered="#{javascript:context.getUserAgent().isIE(0,6) == true}">

<resource rendered="#{javascript:context.getUserAgent().isFirefox()}">

<resource rendered="#{javascript:context.getUserAgent().isSafari()}">

<resource rendered="#{javascript:context.isRunningContext('Notes')}">

Erkennung Schreibrichtung

<resource rendered="#{javascript:context.isDirectionRTL()}">

<resource rendered="#{javascript:context.isDirectionLTR()}">

Referenz interner/externer Dateien

<href>/.ibmxspres/global/theme/oneui/iehacks.css</href>

<href>http://www.someserver.com/resources/application.css</href>



Pfade auf Server-Ressourcen: HTML Verzeichnis


Alias Physikalisch HTTP

/.ibmxspres/domino <NotesData>domino/html http://<server>/

Motiv-Definition

Browser-HTML


Pfade auf Server-Ressourcen: XPages Global Verzeichnis



/.ibmxspres/global <NotesData>domino/java/xsp http://<server>/domjava/xsp

Motiv-Definition

Browser-HTML


Pfade auf Server-Ressourcen: DoJo Verzeichnis



/.ibmxspres/dojoroot <NotesData>domino/js/dojo-1.5.1 http://<server>/domjs/dojo-1.5.1

Motiv-Definition

Browser-HTML


Beispiel eines abgeleiteten Motives

Schließt weitere Ressoucen ein


… Das Motiv-Element: <control>

Attribute des „Control“ Elementes definieren die Auswirkung

auf gesteuerte Attribute

mode=”concat”

erweitert Eigenschaft (Vorgabe, wenn nicht angegeben)

mode=”override”

ersetzt Eigenschaft durch hier definierte Eigenschaften

Auswahl des zu beeinflussenden Steuerelementes

Das <control> Element selektiert xsp-Elemente nach Default

Theme-IDs

… oder den Steuerelementen als „themeId“ zugewiesene Namen


oneUIv2.0: Default Theme-IDs


ThemeIDs ermitteln

Um allen Objekten eines identischen Typs die gleiche StyleClass zuzuweisen, können wir die notwendigen Definitionen im Theme hinterlegen

Dieses erfordert, das die Theme-ID des Objektes bekannt ist

einige ThemeIDs können intuitiv errraten werden, andere nicht unbedingt

diese kann man programmatisch durch das StyleKitFamily-Attribut der Komponente ermitteln

Hinterlegen in einer Bereichsvariablen

Anzeigen auf einer Testmaske mit berechtetem Feld, das an die Bereichsvariable gebunden ist



Eigenschaften von Standardkomponenten setzen

Seitentitel und Schriftarten setzen



Einheitliche Gestaltung von Seitensteuerelementen


Auszug aus „oneuiv2.1_blue.theme “

Steuerung von Schaltflächen



Erweitertes Styling mit Motiven: Was gilt?!


Server-Motiv

Anwendungs-Motiv

Element-

Formatierung

Seitenbasiertes

CSS

<theme extends="oneuiv2">

...

</theme>


Wie werden Motive oft eingesetzt?

Garantierte Einbindung von Stylesheets und Scriptbibliotheken

Verwendung von Standardframeworks (z.B. Dojo, Blueprint CSS)

Firmenweite Gestaltungsrichtlinien (myCompanyStyles.css)

Anwendungsspezifische Ressourcen (myAppStyles.css)

Erweiterung/Ersetzung von Komponentenattributen erzwingen

style (z.B. font-family: arial; font-size: 9pt;)

styleClass (e.g. xspTableCell)


Beispiel für eine (bedingte) Ressoucenkonfiguration: Schreibrichtung


Beispiel für eine (bedingte) Ressoucenkonfiguration: Browserspezifisch


Beispiel einer Komponentenmodifikation

Zuweisung von styleSheets


Funktioniert für (nahezu) jedes Attribut...

pageTitle

var

rows

partialRefresh

...Werte

Nahezu jedes Attribut (sofern sie nicht read-only sind) kann mit Motiven gesteuert werden


Wie arbeiten Motive?

Motive sind wie “server-side

CSS”

Werden in der JSF Rendering-

Phase angewendet

Ressourcen werden in den

Komponentenbaum integriert

Komponenten werden mit einer

Vorgabe- oder vergebener ID

identifiziert (ThemeID)

Jede Instanz einer XPage

Komponente ist ein Java-Bean

Jedes Attribut hat eine “getter”

Methode

Jedes Attribut hat eine “setter”

Methode


Anleitung: Komponenten steuern

1. Motive können auch Vorgabestile für Komponenten festlegen

2. Wenn z.B. alle Schaltflächen eine neue Gestalt annehmen sollen, können wir:

die verwendete CSS StyleClass setzen

eine eigene StyleClass implementieren

3. Hierzu muss das benutzerdefinierte Steuerelement “actionsBar” bearbeitet werden

4. Selektieren Sie die Schaltfläche “New Topic”

5. Auf den “Style”-Reiter geben Sie “button.cool” als Theme-ID ein

6. Speichern Sie die XPage


Erstellen eigener Motive

Statt bestehende Motive um eigene Definition anzupassen erscheint es sinnvoller eigene Modifikationen in einem eigenen Motiv zu definieren

Dieses Motriv kann einen beliebigen Namen tragen

Und muss z.B. das Motiv “blue” erweitern


Erstellen eigener Motive: bestehende erweitern

Damit das eigene Motiv nicht alle notwendigen Definitionen aufnehmen muss, kann es bestehende erweitern und anpassen


Anleitung: Hinzufügen einer Control-Definition

1. Erstellen Sie ein neues Motiv in Erweiterung des Motives “blue”

mit einem beliebigen Namen

2. Kopieren Sie einen Control-Abschnitt und fügen ihn vor

</theme> ein.

3. Setzen Sie den Namen “button.cool”, wie zuvor in XPages

referenziert

4. Ändern Sie das Attribut für “styleClass” zu “coolButton”

5. Speichern Sie das Motiv

6. Aktivieren dieses Motiv in den Anwendungseigenschaften


Anleitung: Erweitern des “custom.css”

1. Im Stylesheet “custom.css” muss eine Klassendefinition für “coolButton” eingefügt werden

2. Zu Testzwecken probieren wir einmal eine richtig große grüne Schaltfläche aus

3. Oben sehen wir die Klassendefinition und unten das Ergebnis im Browser

Anpassung einiger oneUI Elemente nach eigenen Vorstellungen


Benötigte Werkzeuge und Kenntnisse

Spezialitäten der zu unterstützenden Browser

Verwendung von CSS2 oder CSS3

JSF Motive

IBM oneUI Layout-Struktur (Hierarchie der Panel und CSS Klassen-IDs)

Kenntnis der Theme-IDs von Standardelementen

Entwickler-Werkzeuge im Browser (zB. Firebug, ColorZilla, …)



Motive: Häufig eingesetzte Funktionen

Um bedingte Anweisungen in Motiven einzusetzen, lohnt ein Blick auf Methoden von „com.ibm.xsp.designer.context.XSPUserAgent“



Laufzeitumgebung ermitteln

context.isRunningContext(String)

z.B.: context.isRunningContext(„Domino“)

z.B.: context.isRunningContext(„Notes“)

context.getProperty("mxpd.theme.info")



Properties setzen

<theme extends="webstandard">

<property>

<name>mxpd.theme.info</name>

<value>example</value>

</property>

<resource rendered="#{javascript:context.getUserAgent().isIE()}:\">

<content-type>text/css</content-type>

<href>example.css</href>

</resource>

</theme>


context.getProperty("mxpd.theme.info")


Anleitung: Unabhängigkeit der Seitengestaltung herstellen

1. Erstellung eines eigenen Motivs (in Ableitung eines

vorgegebenen Motivs)

ACHTUNG: max. 5 Ebene Vererbung unterstützt

2. Einbeziehung eigener CSS StyleClasses (durch Separierung in

eigenen StyleSheet Ressourcen und Definition/Berechnung in

Motiven)

3. Entfernen jeglicher (oder nahezu jeglicher) Style-Definitionen

und Theme-ID Definitionen von den bestehenden Seiten



Beispiel 1: Menünavigation umgestalten

Obwohl des “blue” Motiv recht

ansprechend ist, mögen viele

Anwender den grünen

Hintergrund nicht

Mit Hilfe von z.B. Firebug kann

man herausfinden, welches

Stylsheet dafür verantwortlich ist:

.xspPanelNavigationMenuTop


Beispiel 1: Menünavigation umgestalten …

Firefox ermöglicht die einfache Analyse der Seitengestaltung und

temporäre Anpassung von CSS Definitionen



Beispiel 1: Menünavigation umgestalten …

Farbe(n) nach eigenen

Wünschen ändern .xspPanelNavigationMenuTop

background-color: #CEE1FC

.xspPanelNavigationMenuItemSelected a,

.xspPanelNavigationMenuItemSelected a:visited

background-color: red

border-top-color: red

border-bottom-color: red

border-left-color: red

border-right-color: red

Hierbei liefern Tools wie

ColorZilla gute Dienste

… gut: über Geschmack kann

man streiten


Anleitung: Neue Ressourcen dem Motiv hinzufügen

1. Die bisherige Ressourcendefinition kopieren

2. Den Dateinamen des neu erstellten (2. Eintrages) in

“custom.css” ändern

3. Wichtig: Nach der Ursprungsangabe einstellen! Warum ?

Weil wir einige Style-Class Definitionen überschreiben wollen

Das erfolgt nur, wenn diese Reihenfolge eingehalten wird


Anleitung: Erstellen des StyleSheets “Custom.css”

1. Erstellen Sie in Ressources → Stylesheets ein neues

Stylesheet

2. Benenen Sie es “custom.css”, wie in der Resssource Definition

des Motivs zuvor

3. Für alle in Firebug identifizierten Klassen die notwendigen

Änderungen eintrage

4. z.B. für die Navigationshintegrund

.xspPanelNavigationMenuTop

Wir müssen lediglich das/die zu änderde Attribut(e) neu einstellen.

Alle anderen bleiben erhalten


Beispiel 2: Motivauswahl zur Laufzeit

Umschaltung von Motiven zur Laufzeit

Links auf Seite

Kombox

Benutzerpräferenzen und Scoped Variables

Im Kern:

Context.setSessionProperty(„xsp.theme“, „blue“)

Context.redirectToPage („nameOfPage“)


Beispiel: oneUIV2.1 Demo von Mark Leusink


Beispiel 3: Position von Feldbeschriftungen auf Eingabemasken

Merkmal des „Form Table“ Controls

Motivsteuerung in Motiv „mmi“



Darstellungen vorher/nachher


Ohne Motivsteuerung

Mit Motivsteuerung


Anleitung: Eingabetexte vor oder über den Feldern

1. Öffnen Sie die Beispieldatenbank „Demo\oneUIV21.nsf“

2. Erstellen Sie ein neues Motiv „mmi“, welches ein bestehendes

z.B. „gold“ erweitert

3. Fügen Sie eine Control Definition für „ FormLayout.FormTable“

hinzu

4. Setzen Sie das Attribut „labelPosition“ auf entweder „above“

oder left

5. Speichern Sie dieses Motiv

6. Zu Laufzeit wählen Sie das Motiv „mmi“ aus der Motivauswahl

der Startseite

7. Auf dem 2 Tab der tabbed Table erscheint eine Eingabemaske

gemäß der im Motiv hinterlegten Regeln für die Labelposition


Resumee und Ausblick


Streamline team development

Durchgängige Verwendung von Motiven unterschützt optimal den Einsatz einer 3-Schichten Architektur der Anwendung

Erfahrene Entwickler erstellen und pflegen Skriptbibliotheken und Managed Beans

Anwendungsentwickler erstellen/pflegen Motive und definieren in Form von Komponenten die Nutzung von Bibliotheken und APIs

Neulinge setzen Komponenten zusammen “click-programming” und wählen vorgegebene Stile aus


Vereinfachtes Layout durch 8.5.3 UP1

Application Layout Control

Keine Notwendigkeit mehr, separate Layout Steuerelemente zu definieren

Benutzerdefinierte Steuerelemente nehmen unmittelbar

– Navigation

– Anwendungselemente

auf

Mobile Page

SinglePage Gestaltung mit Ankern

Für iPhone und Android geeignet

Dokumentation und Tutorials auf Developerworks



Steigerung der Entwicklungsgeschwindigkeit

Keine zeitaufwändigen Gestaltungen bei Einhaltung der Struktur erforderlich

Einheitliches Design aller Anwendungen

Motive und Stile wachsen mit den Anforderungen

Konzentration auf Logik und nicht auf Gestaltung



Noch Fragen offen geblieben?


http://www.mmi-consult.de http://www.mmi-consult.de/faq

mailto:[email protected]

Quellennachweise



Quellenhinweise

Quellen:

http://www-10.lotus.com/ldd/ddwiki.nsf/dx/Create_a_website_layout

http://www.eview.com/eview/VOLR6.nsf/0/2FB0E91250A0BBAF852577F3006C34C7?openDocument

http://www.xpagesblog.com/XPagesHome.nsf/SearchResults.xsp?search=themes

http://xmage.gbs.com/blog.nsf/d6plinks/TTRY-8FHVLW

http://www.slideshare.net/WorkFlowStudios/1-one-u-iv2-theme

Werkzeuge:

https://addons.mozilla.org/de/firefox/addon/firebug/

https://addons.mozilla.org/de/firefox/addon/colorzilla/


single-sign-on und weiter - ibm oneui + mytheme...xpage „programmierung ... ein motiv kann bereits...

Documents