Integrate Speech Recognition into Oracle APEX

Tyler Muth has posted a really cool example on how to integrate Oracle APEX with another service.

Jott is a speech recognition service and allows to integrate third party applications into there service. Tyler used this mechanism to write the output text of the speech recognition into the table of an Oracle APEX application. Read all the details on his Speech to text to Oracle APEX posting.

Great work Tyler!

Too bad that the service is not available in Europe :-(

« ... Read full posting ... »

Integrating ExtJS Javascript Library into Oracle APEX

Do you want to know how you can integrate the ExtJS Javascript Library into Oracle Application Express (APEX)?

Mark Lancaster has set up an ExtJS example application showing the integration and how such an Oracle APEX application could look like. Check it out!

« ... Read full posting ... »

Integrating a Slider Control into Oracle APEX

Oracle Application Express (APEX) doesn't come with a built-in Slider Control widget, but it's quite easy to integrate one of the existing Javascript libraries like the Tigra Slider Control. See there example page 1 and page 2 for how the sliders can look like. But you can also use your own images for the slider.

What are the steps to integrate it?

1. Copy the slider.js onto your web server or upload it into Shared Components\Static Files
2. Upload the images you want to use for the slider onto your web server or into Shared Components\Images. In my case it's sldr5h_bg.gif and sldr5h_sl.gif
3. Add the following code into Edit Page Attributes\HTML Header

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

   Note: Replace #APP_IMAGES# if you didn't upload the files to the Shared components. If you didn't assign the files to the application, use #WORKSPACE_IMAGES# instead.
4. Create a text item on your page. For example named P1_VALUE
5. Set the HTML Form Element Attributes property to

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

6. Set the Pre Element Text property to

   <table><tr><td>

7. Add the following 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>

   into the Post Element Text property and replace the red marked code parts. See the documentation for the different settings.

That's it, you are already done! It's now time to run your page to try it out.

See my example slider application for a working example.

Update on 26-Jan-2008: I have changed the original example to use just one field. That's better, because in the original example which used a second field with the Begin On New Line set to No, it could result in a detached slider if there are other fields which also use Begin On New Line=No. I'm now wrapping a table around both elements (text field and slider) to tight them together.

« ... Read full posting ... »