2

Transkript

1 1

2 2

3 3

4 4

5 5

6 6

7 Die Themes wurden auf 20 Vorlagen erweitert. Das Look & Feel wurde modernisiert. Die neuen Themes halten sich an XHTML und CSS Standards. Zudem werden mehr Div-Tags anstelle der früheren Tabellen verwendet. 7

8 8

9 9

10 Page Templates legen das Look & Feel einer einzelnen Seite fest und werden durch HTML in den Bereichen Header, Body, Footer definiert. Hierbei werden Substitution Strings verwendet, die während der Laufzeit ersetzt werden. Substitution Strings sind Strings, die im HTML Code einer Seite oder Region gesetzt werden und während der Laufzeit durch den ihnen zugewiesenen Code ersetzt werden. Die Wichtigesten im Page Template sind: #BOX_BODY# #HEAD# #NAVIGATION_BAR# #TITLE# #REGION_POSITION_NN# 10

11 Das Regiontemplate legt das Erscheinungsbild eines Regionattributes fest. Sie sind der Container für Inhalte (z.b. Reports), Bedienelemente (z.b. Buttons) etc. und bauen somit das Grundgerüst einer Seite auf. Wichtig ist, dass Regionen platziert werden alle anderen Templates sind optional 11

12 12

13 Über ein zentral verwaltetes Theme kann das Corparate Design eines Unternehmens für alle unternehmensweiten Anwendungen verwendet werden. 13

14 Wichtig: konsequente zentrale Verwaltung mit Hilfe der Subscribe-Funktion. Alle Kopien behalten die Referenzen des Originaltemplates bei. 14

15 Im folgenden werden die 5 Schritt zum erfolgreichen verwalten eines zentralen Templates aufgezeigt. Im ersten Schritt wird eine Entwicklungsnwendung erstellt in der das Theme komplett mit dem CI Layout des Unternehmens entweder neu erstellt wird (sehr aufwendig und zeitintensiv nicht empfehlenswert) oder ein vorhandenes Theme aus dem Repository an das CI angepasst wird. Die Entwicklungsanwendung bildet lediglich einen Dummy für das Layout ohne große Funktionalität. Wichtig ist das alle Änderungen konsequent nur in dieser Anwendung durchgeführt werden, sonst bringt das Vorhaben eines unternehemensweiten Design keinen Mehrwert. 15

16 In dieser Anwendung werden allgemeine Einstellungen und Änderungen bezüglich des Themes und der Templates vorgenommen. Um diese Einstellungen vor zu nehmen geht man in der Anwendung unter den Shared Components auf Themes und dort auf Edit Theme. 16

17 Hier können die Defaulteinstellungen für die Templates und Regionen eingestellt werden. Es können aber auch in den anderen Bereichen der Name und das Bild geändert werden. 17

18 Im zweiten Schritt wird ein Mastertemplate angelegt, in dem ein Kopie der Entwichlungsanwendung gemacht wird. Anschließend wird das so erzeugte Mastertemplate bis auf die wichtigen Seiten und die zuverwendeten Templates, die in jeder weiteren Anwendung angezeigt und genutzt werden sollen reduziert. Meist bleiben die 3 wesentliche Seiten als Gerüst und die als Default gesetzten Templates übrig. Page 0: Masterpage alle Komponenten auf Page 0 auf jeder Seite wiedergegebe Page 1: Standard-Einstiegsseite Page 101: Authentifizierungsseite Wurde das Mastertemplate auf seine Basis muss hier die Subscribefunktion auf die in Schritt 1 angelegte Entwicklungsanwendung erstellt werden. Hierzu geht man wie folgt vor: 1) Aufruf der Shared Components, aber diesmal nicht auf Themes, sondern auf die dem Theme zugeordneten Templates. (Hier sollten nur die Templates auftauchen die für den Master und alle weiteren Anwendungen relevant sind.) 18

19 2) Anschließend das Template auswählen und im Bereich Subscription über das Eingabefeld das Template auswählen, welches aus der Entwicklungsanwendung referenziert werden soll. Diese Schritte auch für alle anderen relevanten Templates durchführen. 19

20 3) Sind alle Referenzen gesetzt ist an den Hacken zusehen, das diese Template subscribed ist. Welche Templates welches Template der Entwicklungsanwendung referenziert ist im im Template unter dem Reiter Subscription ersichtlich. 20

21 Sollen nun Anwendungen mit dem unternehmensweit definierten CI Layout erstellt werden wird einfach eine Kopie des Mastertemplates gemacht. Dies Kopie kann dann den Anforderungen und Funktionen der Anwendung entsprechend angepasst werden, ohne das man sich um das Layout kümmern muss. 21

22 Durch das Kopieren bleiben alle aus dem Mastertemplate referenziertentemplates auch in der kopierten Anwendung subscriebed. Das heißt werden Änderungen in der Entwicklung veröffentlicht wirken sich diese auf den Master und alle Masterkopien aus. 22

23 Wichtig bei der ganzen Vorgehensweise ist, dass Änderungen konsequent in der Entwicklungsanwendung durchgeführt und veröffentlicht werden. Auf den ersten Blick scheint diese Vorgehensweise etwas aufwendig, jedoch ist zu Bedenken dass die Schritte nur einmal zu Beginn eines Projektes durchgeführt werden müssen. Danach ist lediglich darauf zu achten, dass alle Teammitglieder sich an die Vorgehensweise Änderungen nur in der Entwicklungsanwendung durchzuführen und neue Anwendungen durch eine Kopie des Masters erstellen halten. 23

24 24

25 Es gibt verschiedene Möglichkeiten über die vorhandenen Templates verschiedene Funktionen in einer Anwendung zuplatzieren. Im folgenden werden drei verschiedenen Beispiele vorgestellt, die häufig verwendet werden. 25

26 Zum erstellen des ROWHIGHLIGHTINGS geht man wie folgt vor: Unter den Shared Components die Templates aufrufen und dort Beispielsweise das Standard Reporttemplate auswählen. 26

27 Anschließend im ausgewählten Template in den Bereich Column Templates. Dort kann über verschiedene Conditions das Template angepasst werden. Die erste Condition bestimmt das Aussehen der Rows die nicht ausgewählt wurden. Die zweite Condition bestimmt das Aussehen der ausgewählten Row. 27

28 Anschließend wird ein Hidden Item, in dem der Wert der ausgewählten Row gespeichert wird, erstellt und dem Report als Case when -Bedingung mitgegeben 28

29 Danach wird noch ein Colum Link für den Report erstellt, über den der Wert der ausgewählten Row gesetzt wird. 29

30 Das Ergebnis ist ein Report der eine selektierte Row farbig hinterlegt. 30

31 Für einen Button der eine Javascript-Methode aufruft muss ein eigenes Button Template angelegt bzw. ein bestehendes abgeändert werden. 31

32 Ein normaler Button beinhaltet den Substituion String #LINK# in herkömmlichen Template durch den String #BUTTON_ATTRIBUTES# ersetzt wird, damit ein onclick-event auf den Javascript Button möglich wird. 32

33 33

34 Anschließend wird ein Button_Item angelegt, welches auf dem neu erstellten Template basiert und im Button Attribute das onclick-event mit dem festgelegten Request beinhaltet. Der Requestwert wird dem Item im Feld Request-Value übergeben. 34

35 Soll nun beispielsweise mit einem Javascript-Button auf eine Seite verzweigt werden, muss noch ein Branch mit der entsprechenden Seite und dem Request angelegt werden. Der Requestvalue wird hier als Condition an den Branch übergeben. 35

36 PopUp LOV können wie jedes andere Templates über die Shared Componnets angepasst werden. So auch die Anzahl der in einem PopUp LOV angezeigten Werte. 36

37 Hier zu geht man wie schon beim Rowhighlighting in den Shared Components auf Templates und dort auf das Popup LOV Template. Im ausgewählten Template geht man anschließend in den Bereich der Pagination und kann dort das Layout wie auch die Anzahl der anzuzeigenden Werte (Display) anpassen. Zudem können hier weitere Einstellungen bezüglich des PopUps festgelegt werden. Beispielsweise kann das verwendete Icon aber auch der Suchtext für den Button geändert werden aber auch die Höhe und Breite PopUp Fensters kann dort bestimmt werden. 37

38 38

39 39

40 40

41 41