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.