HTML und CSS in Oracle Application Express. Teil 1

  • Tutorial
In diesem Artikel möchte ich ein wenig darüber sprechen, wie man mit HTML und CSS in Apex arbeitet.
Ich habe bereits mehrmals von Fällen gehört, in denen sie sich geweigert haben, die Spitze zu verwenden, weil "sie hässlich ist". Normalerweise bestand das Problem darin, dass in der Spitze standardmäßig eine Art Auferlegung vorhanden ist und alle Mittel zum Arbeiten damit ziemlich weit entfernt verborgen sind und nicht ins Auge fallen, weshalb es so aussieht, als ob das, was standardmäßig darin festgelegt ist, ist Obergrenze seiner Fähigkeiten. Ich, wie ein echter Apex-Fan, konnte einfach nicht vorbei. "Schön" in der Spitze kann auch gemacht werden, wenn Sie wissen, wie.
Ich werde versuchen, den Artikel für zwei Personengruppen gleichzeitig nützlich zu machen. Das erste sind PL / SQL-Entwickler, die gerade erst anfangen, Apex- und Web-Entwicklung zu lernen, für die es noch einen dunklen Wald gibt. Das zweite sind Webentwickler, die sich schon lange mit dem Layout an der Spitze befinden und vor der Aufgabe stehen: "Hier ist der Scheitelpunkt, Sie müssen es wunderschön machen." Ich möchte Sie sofort warnen, dass ich selbst zur ersten Kategorie von Apex-Entwicklern gehöre.


Gehen wir von einfach zu komplex. Zunächst werde ich erläutern, wie Sie die Standardkomponenten mit einer Datei leicht modifizieren und mit globalen Dingen enden - indem Sie Ihre eigenen Designs erstellen.

Ein kleiner Exkurs für PL / SQL-Entwickler


Sie können CSS, HTML und Tools lernen, um lange mit ihnen zu arbeiten. Ich werde versuchen, ein bestimmtes Minimum zu beschreiben, das für die Anwendung von CSS / HTML und das Verständnis dieses Artikels erforderlich ist:
  • Holen Sie sich Debugging-Tools und entdecken Sie die Funktionen Ihres bevorzugten Browsers. Zum Beispiel hat Firefox ein Firebug-Plugin, andere Browser haben ähnliche Tools.
  • Erlernen Sie die Grundlagen von HTML und CSS. Ich habe mit diesem Tutorial begonnen. Du brauchst ein oder zwei Abende zum nachdenklichen Lesen, zum ersten Mal reicht das Lesen.
  • Es ist ratsam zu wissen, was eine Klasse und ein Selektor in CSS sind und wie Klassen auf Elemente auf der Seite angewendet werden.
  • Es ist auch nützlich, auf Sandbox-Sites zu trainieren, von denen es viele im Internet gibt (google "css sandbox").


Ein kleiner Exkurs für Webentwickler


Es ist ratsam, sich im Voraus vertraut zu machen und sich allgemein vorzustellen:
  • Was sind die Komponenten von Anwendungen und Apex-Seiten?
  • Was ist Gegenstand (Gegenstand oder Element) und Region (Region) und wofür sind sie?
  • Was sind gemeinsam genutzte Komponenten und wo sind sie zu finden?

Wenn Sie eine Seite in Apex bearbeiten, wird die Seite standardmäßig im Seiten-Designer-Modus angezeigt. Mir gefällt der Component View-Modus besser, ich arbeite lieber darin. Sie können darauf wechseln, indem Sie auf die Schaltfläche „Komponentenansicht“ klicken: Die



Eigenschaften der Seite, Bereiche und Elemente befinden sich hier (dies ist der Modus „Komponentenansicht“):



Ändern Sie die Eigenschaften einzelner Elemente


Erstellen Sie eine Region und ein Eingabefeld:



Wechseln Sie anschließend zu den Eigenschaften des Eingabefelds. Es gibt zwei Hauptlesezeichen, die für das Layout verantwortlich sind: „Rasterlayout“ und „Element“. Der erste ist für die Position des Elements im Verhältnis zu anderen Elementen verantwortlich und ist derzeit von eher historischem Interesse.
Historischer Ausflug
Fakt ist, dass in Apex bis einschließlich Version 4.2 das Tabellenlayout verwendet wurde. Wenn Sie also einen Bereich mit mehreren Elementen (Eingabefelder und Schaltflächen) erstellt haben, hat der Scheitelpunkt beim Generieren des HTML-Codes für die Seite ein Tag erstellt und alle Elemente in die Tabelle eingefügt. Für die Nische, in der hauptsächlich Apex verwendet wird (Entwicklung von Web-Interfaces für Datenbanken durch PL / SQL-Entwickler), war dies eine recht komfortable Lösung. Was soll ich sagen - fast perfekt. Alle Elemente wurden in geraden Reihen angeordnet. Durch Ändern der Attribute der Elemente auf der Registerkarte „Rasterlayout“ können Sie einfach die Position der Elemente relativ zueinander festlegen. Und kümmern Sie sich nicht um unnötige Informationen. Ab Version 5 verwendet apex nun das Blocklayout. Einerseits ist dieses Layout mittlerweile Mainstream, und es gibt keine Unterstützer mehr für das Setzen mit Tabellen. Apex ist ein vielseitigeres Werkzeug geworden. Andererseits muss der Apex-Entwickler jetzt CSS lernen, um die Position von Elementen auf der Seite mit der gleichen Leichtigkeit wie in 4.x-Versionen zu steuern. Wenn Sie jedoch nichts berühren und alle Eigenschaften als Standard belassen, ordnet der Scheitelpunkt die Elemente recht anständig an.
Der zweite ist für die Eigenschaften des Elements selbst verantwortlich. Zum Beispiel müssen wir sein Aussehen leicht korrigieren. Geben Sie den folgenden Text in das Feld HTML-Formularelementattribute ein:

style="color: red"

und wir erhalten das Ergebnis:



Schauen wir uns das Innere des Elements an. Hier ist der HTML-Code:


Hier sehen wir das im Feld "HTML Form Element Attributes" eingegebene Stilattribut. Sie können diesem Feld mehrere Attribute mit Werten hinzufügen, die alle in den HTML-Code des Elements fallen.
Das Etikettendesign kann noch einfacher geändert werden. Sie können HTML-Tags in den Eigenschaften eines Elements auf der Registerkarte Beschriftung verwenden. Sie werden korrekt angezeigt. Zum Beispiel dort eingeben

Поле для ввода

Der Beschriftungstext ist kursiv gedruckt:



Gleiches gilt für Regionen. Wenn wir in die Eigenschaften der Region gehen, sehen wir dieselbe Registerkarte "Rasterlayout", für die alles, was oben über die Registerkarte "Rasterlayout" eines einzelnen Elements gesagt wurde, zutrifft. Die zweite wichtige Registerkarte heißt Attribute. Fügen Sie beispielsweise einen solchen Code in das Feld „Regionsattribute“ ein (dieser Code rundet die Ecken mit einem bestimmten Radius ab):

style="border-top-left-radius: 20px; border-bottom-left-radius: 20px;"

Und sehen Sie sich das Ergebnis an:



Verwenden Sie Ihre eigenen Stile auf einer Seite


Nun lasst uns weitermachen. Um nicht jedes Element von Hand zu beherrschen, können Sie Ihren eigenen CSS-Stil erstellen und verwenden. Zum Beispiel haben wir eine Seite mit mehreren Bereichen, die mit einfachem Text gefüllt sind. Standardmäßig sehen sie ungefähr so ​​aus:



(Damit sich die Regionen nicht untereinander befinden, sondern wie im Bild dargestellt, genügt es, die Eigenschaft "Neue Zeile beginnen" - "Nein" in der zweiten und vierten Zeile anzugeben. Die Eigenschaft befindet sich auf der Registerkarte "Rasterlayout" ) Wir
gehen in die Seiteneigenschaften und suchen die Registerkarte "CSS". Geben Sie im Feld "Inline" den folgenden Code ein:

.class1 {
    background-color: #FFFFDD;
}
.class2 {
    border-style: dotted;
    border-width: 3px;
    border-color: red;
}

Gehen wir nun zu den Eigenschaften der Regionen über und finden auf der Registerkarte "Attribute" die Eigenschaft "Regions-CSS-Klassen". Hier können Sie die Namen aller CSS-Klassen schreiben, die dann auf die Region angewendet werden. Wenn Sie mehrere Klassen angeben müssen, geben Sie diese mit einem Leerzeichen an, wie Sie dies im Klassenattribut im HTML-Code der Seite tun. Beim Generieren der Seite wird dem HTML-Code in dem Formular, in dem Sie ihn ausfüllen, eine Zeile aus diesem Feld hinzugefügt.
Wir füllen diese Eigenschaft in unseren Regionen wie folgt aus: Region 2 erhält "class1", Region 3 - "class2", Region 4 - "class1 class2". Wir starten die Seite und erhalten das Ergebnis:



Fügen Sie Ihre Datei mit Stilen hinzu


Fügen Sie der Seite nun unsere CSS-Klassen als Datei hinzu. Kopieren Sie den Code aus dem vorherigen Beispiel in einen Texteditor und speichern Sie ihn in einer Datei mit dem Namen "my_css.css". Entfernen Sie in den Eigenschaften der Seite diesen Code aus dem Feld "Inline", da er nicht mehr benötigt wird. Geben Sie stattdessen den Pfad zur Datei im Feld "Datei-URLs" auf derselben Registerkarte an:

/i/my_css.css

Hier ist der Ordner "/ i /" ein Pseudo-Ordner mit Bildern. Standardmäßig entspricht es dem Ordner

$ORACLE_HOME/apex/images

(Einzelheiten finden Sie in der Dokumentation zum Einrichten des Webservers.)
Dann müssen Sie nur noch die CSS-Datei in diesen Ordner auf dem Server kopieren.
Wenn Sie keinen Zugriff auf Dateien auf dem Server haben (z. B. Sie haben Apex-Hosting, Sie erstellen eine Testanwendung auf apex.oracle.com oder nur strenge Sicherheitsregeln in Ihrer Organisation), können Sie die Datei auch auf andere Weise hochladen. Wechseln Sie zum Abschnitt "Gemeinsam genutzte Komponenten" und klicken Sie im Abschnitt "Dateien" auf "Statische Anwendungsdateien". Sie sehen eine Liste mit Dateien (wenn Sie dort nichts hochgeladen haben, ist die Liste leer). Klicken Sie auf "Datei hochladen" und laden Sie die neu erstellte Datei "my_css.css" hoch. Nach dem Hochladen der Datei auf den Server wird in der Tabelle eine Zeile mit Ihrer Datei angezeigt. In der Spalte "Referenz" sehen Sie so etwas wie "# APP_IMAGES # my_css.css" - dies ist der Pfad zu der Datei, die in das Feld "Datei-URLs" in den Eigenschaften der Seite kopiert werden soll, auf der Sie sie verwenden möchten. Apex schreibt die Adresse dieser Datei in den Seitencode.

Zugriff auf ein Element über seine ID


Betrachten wir nun den HTML-Code für das Eingabefeld aus dem ersten Beispiel.


Hier ist „P1_INPUT_FIELD“ der Name des Apex-Eingabefelds, das ich beim Erstellen angegeben habe. Apex-Eingabefelder erhalten normalerweise Namen im folgenden Format:

P<номер страницы>_<название элемента>

Diese Namen müssen innerhalb der Seite eindeutig sein. Mit Apex können Sie einfach keine zwei Elemente mit demselben Namen auf der Seite erstellen. Dieselben Namen werden zur Grundlage für HTML-Tag-IDs. Der obige Code enthält Bezeichner (generiert vom namensbasierten Apex) für das Feld selbst, seine Bezeichnung und den Div-Container, in dem sie sich befinden.
Es gibt auch Bezeichner für Regionen und Schaltflächen. Hier ist der HTML-Code für die Region:

Регион

...

Und hier ist der Code für die Schaltfläche (die Schaltfläche wurde mit dem unkomplizierten Namen "BUTTON" und der Aufschrift "Button" erstellt):


Die ID der Regionen und Schaltflächen wird dem Primärschlüssel der Apex-Systemtabellen entnommen, in denen Daten zu Regionen bzw. Schaltflächen gespeichert sind (dies ist nicht so praktisch, da Sie zum Ermitteln der ID zuerst die Anwendung starten und die Seite öffnen müssen, und wenn Sie die Region / Schaltfläche neu erstellen, dann die ID wird anders sein). Auf diese Weise können Sie den Stil jedes Elements der Seite in der CSS-Datei oder in der Inline-CSS ändern, indem Sie anhand der ID darauf verweisen.

Im nächsten Teil werde ich über das Arbeiten mit Berichten und das Erstellen eigener Vorlagen und Themen sprechen.

Fortsetzung folgt...

Jetzt auch beliebt: