Integration der ExtJS Javascript Library in Oracle APEX

Wollt Ihr wissen wie man die ExtJS Javascript Library in Oracle Application Express (APEX) integrieren kann?

Mark Lancaster hat eine ExtJS Beispiel Applikation erstellt welche die Integration demonstriert. Außerdem sieht man ganz gut wie so eine Oracle APEX Applikation aussehen könnte. Seht sie Euch mal an!

« ... Ganzen Artikel lesen ... »

Einen Slider/Schieberegler in Oracle APEX integrieren

Oracle Application Express (APEX) enthält leider kein eingebautes Slider/Schieberegler Control. Aber das ist nicht wirklich ein Problem, da es sehr einfach ist eine der existierenden Javascript Libraries (wie z.B. Tigra Slider Control) zu integrieren. Auf deren Beispiel Seiten 1 und Seite 2 könnt Ihr sehen wie so ein Slider aussehen kann. Man kann aber auch seine eigenen Bilder für den Slider verwenden.

Wie sind aber jetzt die Schritte um so einen Slider zu integrieren?

1. Kopiere slider.js auf Deinen Web Server oder speichere es unter Shared Components\Static Files ab.
2. Kopiere die Bilder welche der Slider verwenden soll auf Deinen Web Server oder auf Shared Components\Images. In meinem Fall verwende ich sldr5h_bg.gif und sldr5h_sl.gif
3. Füge den folgenden Code in Edit Page Attributes\HTML Header ein.

   <script type="text/javascript" src="#APP_IMAGES#slider.js"></script>

   Hinweis: #APP_IMAGES# muss durch den Pfad des Web Servers ersetzt werden, wenn die Datei nicht unter den Shared Components gespeichert wurde. Wenn die Dateien nicht einer Applikation zugeordnet wurden, dann muss stattdessen #WORKSPACE_IMAGES# verwendet werde.
4. Erstellt ein Text Item auf Eurer Seite. Z.B mit dem Namen P1_VALUE
5. Setzt die HTML Form Element Attributes Eigenschaft auf

   onchange="A_SLIDERS[0].f_setValue(this.value);"

6. Setzt die Pre Element Text Eigenschaft auf

   <table><tr><td>

7. Fügt den folgenden Code

   </td><td>
   <script type="text/javascript">
   (function(){
     var A_Slider = {
       'b_vertical' : false,
       'b_watch': true,
       'n_controlWidth': 149,
       'n_controlHeight': 17,
       'n_sliderWidth': 9,
       'n_sliderHeight': 17,
       'n_pathLeft' : 1,
       'n_pathTop' : 0,
       'n_pathLength' : 138,
       's_imgControl': '#APP_IMAGES#sldr5h_bg.gif',
       's_imgSlider': '#APP_IMAGES#sldr5h_sl.gif',
       'n_zIndex': 1
     }
     var A_SliderInit = {
       's_form' : 0,
       's_name': 'P1_VALUE',
       'n_minValue' : 1,
       'n_maxValue' : 18,
       'n_step' : 1
     }
     new slider(A_SliderInit, A_Slider);
   })();
   </script>
   </td></tr></table>

   in die Post Element Text Eigenschaft ein und ersetzt die Rot markierten Teile. Eine Erklärung der verschiedenen Einstellungen des Sliders findet sich in der Dokumentation.

Das warst auch schon wieder! Zeit die Seite auszuführen und den neuen Slider auszuprobieren.

Ich habe auch eine Beispiel Slider/Schieberegler Applikation erstellt, welche Ihr ausprobieren könnt.

« ... Ganzen Artikel lesen ... »

Oracle APEX Shuttle Komponente um Doppelklick erweitern

Wollt Ihr die Bedienbarkeit der Oracle APEX Shuttle Komponente ein wenig verbessern?

Zum Beispiel in dem wir es den Benutzern ermöglichen auf einen Eintrag in einer der zwei Listen des Shuttles einen Doppelklick zu machen, damit der ausgewählten Eintrag in die andere Liste verschoben wird, so wie das ja auch mit den zugehörigen Icons möglich ist. Ich denke der Doppelklick ist ein wenig komfortabler und schneller als wenn man die Icons verwendet.

Und hier kommt der dazu notwendige Code.

1. Erstelle ein Page Item vom Typ "Shuttle"
2. Füge den folgenden Code in die "Post Element Text" Eigenschaft des Page Items ein.

   <script type="text/javascript">
   (function(){
     var vName = "#CURRENT_FORM_ELEMENT#".substr(2);
     $x("#CURRENT_ITEM_NAME#").ondblclick   = new Function("g_Shuttlep_"+vName+".remove();");
     $x("#CURRENT_ITEM_NAME#_2").ondblclick = new Function("g_Shuttlep_"+vName+".move();");
   })();
   </script>

3. Das ist auch schon alles. Eigentlich ganz einfach, oder?

Ich habe bereits begonnen den Carl ein wenig zu beeinflussen, damit diese kleine Verbesserung vielleicht noch in Oracle APEX 3.1 reinkommt. Schauen mir mal ob ich erfolgreich war :-)

« ... Ganzen Artikel lesen ... »

Leicht unterschiedliches Verhalten von $x in Oracle APEX 3.0

Bin gerade auf ein leicht unterschiedliches Verhalten von $x in Oracle APEX 3.0 gestoßen.

Ich nehme mal an, dass viele von Euch immer nur einen ID-String eines Elements (zB: $x("P4_TEST")) beim Aufruf dieser Funktion übergeben um das Objekt dieses Feldes/Divs/...-ID's zu bekommen, aber man kann diese Funktion auch mit einem Objekt aufrufen, in diesem Fall wird einfach das gleiche Objekt wieder zurückgegeben.

Jetzt werdet Ihr Euch fragen wozu braucht man soetwas? Man braucht es, wenn man den JavaScript Code ein wenig allgemeiner schreibt, zum Beispiel folgende Funktion

function getWhatEver(pField)
{
  var vField = $x(pField);
  // do what ever we want with vField
};

Wenn der Aufrufer bereits ein Feld Objekt hat, dann kann er bereits das Objekt übergeben und die Funktion muss nicht nochmal eine Suche mit der ID durchführen.

getWhatEver(vFieldVariable);

Wenn der Aufrufer noch kein Objekt des Feldes hat, dann kann er die Routine einfach mit dem ID-String aufrufen

getWhatEver("P4_TEST");

und die $x Funktion wird automatisch die notwendige Suche durchführen.

Das oben beschriebene Verhalten funktioniert noch immer für Objekte vom Node Typ 1 (Node.ELEMENTNODE), aber mit Oracle APEX 3.0 funktioniert es nicht mehr, wenn zB das window Objekt übergeben wird, in diesem Fall retourniert die $x Funktion false.

Ich hatte eine Funktion mit der man Ereignisse (zB: onkeypress, ...) zu jedem beliebigen Objekt hinzufügen konnte, aber mit APEX 3.0 hat die Funktion auf einmal nicht mehr funktioniert wenn Sie mit dem window Objekt aufgerufen wurde.

Eventuell habt Ihr in Eurem Code ja auch so etwas und spart mit diesem Tipp ein paar Minuten der Fehlersuche.

« ... Ganzen Artikel lesen ... »