prog:apex_jquery_integration
Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende Überarbeitung | ||
prog:apex_jquery_integration [2020/03/12 12:12] – [Quellen] gpipperr | prog:apex_jquery_integration [2020/03/13 12:27] (aktuell) – [Quellen] gpipperr | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
+ | =====Oracle Apex 5 -Mit JQuery die Logik und Optik einer Apex Page anpassen===== | ||
+ | |||
+ | demnächst mehr, noch stark in der Entwurfsphase 8-) | ||
+ | |||
+ | |||
+ | ==== Grundlagen JQuery ==== | ||
+ | |||
+ | JQuery ist eine "DOM manipulation library" | ||
+ | |||
+ | => https:// | ||
+ | |||
+ | |||
+ | ---- | ||
+ | |||
+ | ==== Selector ==== | ||
+ | |||
+ | Grundlagen siehe => http:// | ||
+ | |||
+ | * Zugriff über die ID mit *#* wie **$('# | ||
+ | //über die ID des Elementes | ||
+ | var select=$('# | ||
+ | //über die Klasse | ||
+ | var button=$(' | ||
+ | </ | ||
+ | |||
+ | === Ein Element in der Seite gezielt auswählen === | ||
+ | |||
+ | Alle TD Elemente mit dem Attribute " | ||
+ | |||
+ | <code javascript> | ||
+ | $(' | ||
+ | </ | ||
+ | |||
+ | => siehe https:// | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ====Traversing==== | ||
+ | |||
+ | |||
+ | Im Dom Baum navigieren | ||
+ | |||
+ | See => http:// | ||
+ | |||
+ | |||
+ | === Über eine Anzahl von JQuery Objekten iterieren === | ||
+ | |||
+ | Nur Checkbox auswählen | ||
+ | <code javascript> | ||
+ | $('# | ||
+ | |||
+ | if ($(this).prop(' | ||
+ | | ||
+ | } | ||
+ | |||
+ | } ); | ||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | Nur Select Boxen auswählen die eine ID haben die mit " | ||
+ | <code javascript> | ||
+ | $(' | ||
+ | </ | ||
+ | |||
+ | z.b alle Texte einer Spalte in einer Tabelle auf Rot setzen: | ||
+ | <code javascript> | ||
+ | |||
+ | $(' | ||
+ | |||
+ | | ||
+ | |||
+ | } ); | ||
+ | |||
+ | </ | ||
+ | |||
+ | siehe => https:// | ||
+ | |||
+ | |||
+ | ---- | ||
+ | |||
+ | |||
+ | ==== Einsatz mit Oracle Apex ==== | ||
+ | |||
+ | Die Apex Java Script Methoden mit einbeziehen! | ||
+ | * $x => document get by Id | ||
+ | * $v => get the value of a page item (no hash tag !) | ||
+ | * $s => set the value of a page item | ||
+ | * apex.server | ||
+ | * and more | ||
+ | |||
+ | see => https:// | ||
+ | |||
+ | |||
+ | === Page Elemente enablen/ | ||
+ | |||
+ | Native JQuery verwenden zum enable/ | ||
+ | |||
+ | <code javascript> | ||
+ | |||
+ | $( " | ||
+ | $( " | ||
+ | |||
+ | </ | ||
+ | |||
+ | Darauf achten, das die Elemente auch eine Static ID haben! | ||
+ | |||
+ | JS von Apex: | ||
+ | <code javascript> | ||
+ | // JS Apex | ||
+ | $x_disableItem(' | ||
+ | |||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | == Dynamic Action zum Aufruf verwenden == | ||
+ | |||
+ | Aufgaben: Hat der Anwender in der Select Box P20_VALID_FROM nichts gewählt, sollen die bestimmte Button disabled dargestellt werden. | ||
+ | |||
+ | Dynamic Action mit " | ||
+ | |||
+ | Die Dynamic Action ist von Typ " | ||
+ | |||
+ | Beim Laden der Seite wird die Action einmal ausgeführt, | ||
+ | |||
+ | Code: | ||
+ | <code javascript> | ||
+ | if ( ! $v(' | ||
+ | | ||
+ | | ||
+ | } | ||
+ | else { | ||
+ | $x_disableItem(' | ||
+ | $x_disableItem(' | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | |||
+ | ---- | ||
+ | |||
+ | ===Werte von Elementen bearbeiten === | ||
+ | |||
+ | Native JQuery verwenden | ||
+ | <code javascript> | ||
+ | |||
+ | //get Values | ||
+ | $x(" | ||
+ | |||
+ | //Set Values: | ||
+ | $x(" | ||
+ | |||
+ | </ | ||
+ | |||
+ | JS von Apex: | ||
+ | <code javascript> | ||
+ | |||
+ | v_date = $v(" | ||
+ | |||
+ | // Session Parameter auslesen | ||
+ | $v(' | ||
+ | $v(' | ||
+ | $v(' | ||
+ | |||
+ | |||
+ | // Werte setzen | ||
+ | $s(" | ||
+ | $s(" | ||
+ | |||
+ | // über eine Collection auslesen | ||
+ | |||
+ | collectionArray = $v2(" | ||
+ | |||
+ | for (idx=0; idx< | ||
+ | alert(collectionArray [idx]); | ||
+ | } | ||
+ | |||
+ | </ | ||
+ | |||
+ | === Select Liste vorauswählen === | ||
+ | |||
+ | Z.b. für den Data Loading Dialog | ||
+ | |||
+ | <code javascript> | ||
+ | |||
+ | $('# | ||
+ | $('# | ||
+ | |||
+ | $( "# | ||
+ | $( "# | ||
+ | |||
+ | </ | ||
+ | |||
+ | ---- | ||
+ | |||
+ | |||
+ | === Fokus setzen === | ||
+ | |||
+ | <code javascript> | ||
+ | $('# | ||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | ---- | ||
+ | |||
+ | ===Tool Tip an eine Element hängen === | ||
+ | |||
+ | In der Seite auf Page Ebene " | ||
+ | |||
+ | <code javascript> | ||
+ | $('# | ||
+ | </ | ||
+ | |||
+ | Daran denken dem Element auch eine Static ID zu vergeben! | ||
+ | |||
+ | |||
+ | ---- | ||
+ | === CSS auf einem Element setzen=== | ||
+ | |||
+ | <code javascript> | ||
+ | |||
+ | var infoCSS = { | ||
+ | ' | ||
+ | ,' | ||
+ | ,' | ||
+ | } | ||
+ | |||
+ | $('# | ||
+ | $('# | ||
+ | |||
+ | </ | ||
+ | |||
+ | In Abhängigkeit des Wertes des Elementes | ||
+ | <code javascript> | ||
+ | $('# | ||
+ | if ( $(this).val() == ' | ||
+ | $(this).css(' | ||
+ | } | ||
+ | else { | ||
+ | | ||
+ | } | ||
+ | | ||
+ | } | ||
+ | ); | ||
+ | </ | ||
+ | |||
+ | Vorteil ist hier, das die Eigenschaft auch die anderen definierten Klassen wirklich überschreibt und man nicht lange probieren muss welche CSS Klassen in der Apex Seite zum Schluss zum gewünschten Ergebnis führen. | ||
+ | |||
+ | ---- | ||
+ | |||
+ | |||
+ | ==== Quellen ==== | ||
+ | |||
+ | Tutorial: | ||
+ | * https:// | ||
+ | * https:// | ||
+ | |||
+ | |||
+ | Vorträge: | ||
+ | |||
+ | * https:// | ||
+ | |||
+ | Progressbar | ||
+ | |||
+ | * https:// | ||
+ | |||
+ | Oracle | ||
+ | |||
+ | * https:// | ||
+ | |||
+ | JavaScript | ||
+ | |||
+ | * https:// |
prog/apex_jquery_integration.txt · Zuletzt geändert: 2020/03/13 12:27 von gpipperr