1 / 11

Layout-Modelle für Webseiten und Formulare Ein Überblick über Cascading Stylesheets und JGoodies

Layout-Modelle für Webseiten und Formulare Ein Überblick über Cascading Stylesheets und JGoodies. Stephan Winter, 2004, PG WaviSp, AG-Kastens. CSS2. 1 / 10. Cascading Stylesheets (CSS). Einfache Markup-Sprache, um das Aussehen einer HTML/XML-Datei zu beeinflussen

mackensie-short
Download Presentation

Layout-Modelle für Webseiten und Formulare Ein Überblick über Cascading Stylesheets und JGoodies

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Layout-Modelle für Webseiten und Formulare Ein Überblick über Cascading Stylesheets und JGoodies Stephan Winter, 2004, PG WaviSp, AG-Kastens

  2. CSS2 1 / 10 Cascading Stylesheets (CSS) • Einfache Markup-Sprache, um das Aussehen einer HTML/XML-Datei zu beeinflussen • Browser- / Plattform- / Geräteunabhängig, dennoch unterscheidet sich teilweise die graphische Ausgabe • Entwickelt 1996 als CSS Level1, 1998 erweitert zu CSS2, Bugfixing in Version 2.1; Version 3 ist in Arbeit • Enthält Modelle zur Positionierung, die Tabellen überflüssig machen (Box-Model) Stephan Winter, 2004, PG WaviSp, AG-Kastens

  3. 2 / 10 Beispiel für eine HTML-Datei mit CSS Externe Datei style.css <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <TITLE>Dies ist der Titel meiner Seite</TITLE> BODY { font-family: "Verdana", sans-serif; font-size: 10pt; } UL { background: #AABBCC; padding: 1px 1px 1px 1px; } LI { font-size: 10pt; background: white; margin: 1px 1px 1px 1px; padding: 5px 5px 5px 5px; } <LINK rel="stylesheet" href=style.css type="text/css"> Ausgabe im Browser: • <BODY> • <H1>Willkommen auf meiner Seite</H1> • <P> • Schön, dass Du zu mir gefunden hast. • Dafür jetzt hier eine Aufstellung der besten Biere: • <UL> • <LI>Krombacher Pils • <LI>Jever • <LI>Becks • </UL> • <a href="http://www.bier.de">Klick hier</a> • </BODY> • </HTML> Stephan Winter, 2004, PG WaviSp, AG-Kastens

  4. Import einer CSS-Datei (niedrigste Priorität) geringste Priorität CSS-Anweisungsblock(überschreibt Anweisun-gen aus externer CSS-Datei) Vererbung Zugriff auf selbst-def. Formatierung Höchste Priorität Formatierung im TAG überschreibt alle bisherigen Formatierungen 3 / 10 Warum Cascading? Document Tree Beispiel für Vererbung: […] <STYLE type="text/css"> […] @import „style.css"; .big { font-size: 110%; } p.big { font-weight: bold; } LI { font-size: 10pt; background: white; margin: 1px 1px 1px 1px; padding: 5px 5px 5px 5px; } </STYLE> <body><p class="big">This is some <em>text</em></p><p>This is some text</p><ul><li class="big">List item</li><li>List item</li><li style="border : 3px solid blue;">>List <em>item</em></li></ul></body> Stephan Winter, 2004, PG WaviSp, AG-Kastens

  5. 4 / 10 Was kann ich mit CSS alles machen? Was muss ich beachten? • Mit CSS (insb. Version 2) kann man Einfluss nehmen auf: • Hintergrund und Farbe (background, color) • Rahmen (border, border-style) • Abstände (margin, padding) • Schrift (font-family, font-weight) • Listen (list-style) • Druckausgabe (page, widows) • Positionierung (direction, height) • Sprachausgabe (pitch, speak) • Tabellen (border-collapse, table-layout) • Textformation (text-decoration, text-indent) • Benutzeroberflächen (cursor, outline) Fehlertoleranz: Im Falle eines Fehlers wird der CSS-Block bzw. der komplette CSS-TAG ignoriert. Kommentare: Java-typisch (/* … */) Property-Liste: Siehe Ausarbeitung (zu lang) Value-Typen: Integer, Längen (auch relativ), Prozentwerte, URI, Farben, Frequenzen, Strings… Aufbau eines CSS-Blocks: Selector H1 {font-family: Verdana, Arial; } @import “style.css“; Block {…} Value @-rule (Catch-All-Tag) muss immer vor allen Blöcken stehen! Folge: @-rule wird ignoriert. Property @-rule (Import) Stephan Winter, 2004, PG WaviSp, AG-Kastens

  6. 5 / 10 CSS Box-Model Jedes Element im Document Tree erhält eine Box, in der es dargestellt wird. Border (Umrandung) Content (Bild, Text, Link…) Margin (Rand und Abstand zu weiteren Objekten) Padding (Füllung der Kante) Stephan Winter, 2004, PG WaviSp, AG-Kastens

  7. 6 / 10 Positionierung mit CSS Mit CSS ist eine relative, absolute oder eine fließende Ausrichtung möglich. Absolut Relativ Fließend (Float-Box) <STYLE type="text/css"> .inner { position: relative; top: -12px; color: red} </STYLE> <STYLE type="text/css"> .inner { position: absolute; top: 200px; left: 200px; width: 200px; color: red; } </STYLE> <STYLE type="text/css"> .inner { float: right; width: 130px; color: blue } </STYLE> Stephan Winter, 2004, PG WaviSp, AG-Kastens

  8. 7 / 10 JGoodies • Java Framework zur Erstellung von konsistenten, professionellen GUIs • baut auf Swing auf • erzwingt vom Erzeuger „gute GUIs“, da diese leichter zu erzeugen sind • JGoodies GUIs orientieren sich stark an Formularen (strikte, tabellenähnliche Anordnung) Stephan Winter, 2004, PG WaviSp, AG-Kastens

  9. 8 / 10 Die Grundlagen und Ziele von JGoodies • 90/10 Abdeckung bzgl. GUIs • Konsistenz (erhöht Usability und Produktivität, da der Anwender das Design kennt) • Einfachheit in der Entwicklung, um Zeit zu sparen • Einfacher, strukturierter Code 5 Prinzipien des Frameworks: 1.) Gitter / Gittersysteme nutzen zur Positionierung 2.) Angelegenheiten trennen (wieder verwendbare, abstrakte Hilfs-Forms) 3.) Umfangreiche Spezifikationssprache (mit der das Layout beschrieben wird, bevor das Panel gefüllt wird 4.) Abkürzungszeichenketten 5.) Hilfe / Beispiele (sog. Factories) für Entwickler Layout Klasse (Größen, Ausrichtungen festlegen) 3 Code Ebenen: Nicht-visuelle Ebene zum Füllen der Panels Factory Klassen, die spezialisierte vorgefertigte Layouts und Panels bieten Stephan Winter, 2004, PG WaviSp, AG-Kastens

  10. 9 / 10 Das Konzept von JGoodies • Erklärung am Beispiel: Neues Layout definieren 1: FormLayout layout = new FormLayout( 2: “pref, 4dlu, 50dlu, 4dlu, min”, 3: “pref, 2dlu, pref, 2dlu, pref”); 4: 5: layout.setRowGroups(new int[][]{{1, 3, 5}}); 6: 7: JPanel panel = new JPanel(layout); 8: 9: CellConstraints cc = new CellConstraints(); 10: panel.add(new JLabel(“Label1”), cc.xy (1, 1)); 11: panel.add(textField1, cc.xyw(3, 1, 3)); 12: panel.add(new JLabel(“Label2”), cc.xy (1, 3)); 13: panel.add(textField2, cc.xy (3, 3)); 14: panel.add(new JLabel(“Label3”), cc.xy (1, 5)); 15: panel.add(textField3, cc.xy (3, 5)); 16: panel.add(detailsButton, cc.xy (5, 5)); SpaltenZeilen Zeilen 1,3,5 gruppieren (gleiche Höhe) Container-JPanel erzeugen CellConstraints-Object zur Positionsangabe im Grid Elemente hinzufügen Stephan Winter, 2004, PG WaviSp, AG-Kastens

  11. 10 / 10 Das Konzept von JGoodies (2) • Schritte zur Erzeugung eines Forms: • FormLayout erzeugennew FormLayout(“right:pref, 10px, left:pref:grow“, // 3 Spalten “pref, 4px, pref, pref:grow“); // 4 Zeilenpref = preferred Size (Breite, die für das Element am besten passt)right = rechtsbündig ausgerichtetgrow = zur entspr. Seite sich vergrößernd (falls Platz übrig) • Panelbuilder mit erzeugtem Layout aufrufen (es können also versch. Panelbuilder genutzt werden -> höhere Abstraktion / Wiederverwendbarkeit) • Zeilen/Spalten gruppieren (erzeugt gleich Höhe, Breite)layout.setRowGroups(new int [] [] { {1,4}, {2,3}}); // Zeilen 1+4 & 2+3 selbe Höhe • CellConstraints Object erzeugen (dient zur Positionierung nicht einzelner Elemente, sondern Elementgruppen, wie z.B. allen Feldern auf einer Zeile)CellConstraints cs = new CellConstraints();cc.xy(2, 1); // zweite Spalte, erste Reihecc.xy(2, 1, “r, b“) // wie oben, aber rechts unten ausgerichtet • Elemente hinzufügen: builder.addLabel(“Identifier“, cc.xy(1,3)); Stephan Winter, 2004, PG WaviSp, AG-Kastens

More Related