APEX and 3rd party JS libraries.

While APEX ships with some built in javascript functionality, and very nice javascript functionality if I say so myself ;). We are definitely not everything to everybody, which is on purpose.

There are so many very good 3rd javascript libraries , and we love our 3rd party javascript libraries , out there (extjs , YUI , DOJO and many more) that we don't want to be making that choice for developers since the proper choice can be different all the way from the image directory level to the workspace , application and even page by page level.

In fact sometimes I feel bad , well not that bad ;), for forcing even our library on developers. In 3.1 our library can be turned on and off on a page by page basis.

But I digress, if you have filesystem access integrating in a 3rd party library is as easy as any other web page you just include in your path.

But if you are in a hosted environment, you need to pick a library or build of a library that is all in one file.

jQuery is a good example of a 1 file library that can be easily integrated into APEX using #WORKSPACE_IMAGES# or #APP_IMAGES# . And I've created a very simple example here to show that it works , http://apex.oracle.com/pls/otn/f?p=11933:151

I'm going to be looking into different ways of including in other libraries that require a directory structure when you don't have file system access, I think XDB might be helpful here, but if someone has already solved this particular problem please comment or blog about it as it will be very helpful to quite a few people.


  1. Dan said...

    I love jQuery! It's your fault too... In fact I've been thinking about creating a site with some tutorials for integrating jQuery with ApEx as there are some tricks.

    Carl Backstrom said...

    Yeah jQuery is my favorite as well, when it comes to building real complex functionality I'd rather build to spec than use a library, though I must admit lately I've seen some very nice stuff with extjs.

    >> integrating jQuery with ApEx as there are some tricks.

    Go for it. Examples like that will be useful to lots of people.
    Mark Lancaster said...
    Hi Carl,

    FYI - I'll be putting up a demo Apex Site integrating extjs early next year.

    Guido said...
    Hi Carl,

    My favorite is prototype.js!
    You said that in 3.1 the APEX library can be turned on and off on a page by page basis. This is very nice, because if you choose another framework, you don't want to include unnecessary scripts.

    However, excluding the APEX javascripts can break some very important functions, for instance:
    doSubmit, first_field, init_htmlPPRReport.

    This means you have to include these functions in your own javascripts!!!

    Carl Backstrom said...
    This means you have to include these functions in your own javascripts!!!

    It sure does.

    This is more a feature for mobile applications to bring down the page weight. And most mobile apps I've seen only use doSubmit.

    But there is a certain subset of people that would just like to use say extjs in their applications and not our js and yes they will have to rewrite or cut and paste any of the js we emit into their own library.

    It's not and can't be a automated process but if that's the direction you want to go it's something you only have to do once.

    Heck you could even write say a prototype + apex plugin for people to share if you wanted ;)

    Patrick Wolf said...

    the only drawback with #WORKSPACE_IMAGES# and #APP_IMAGES# is that it doesn't get cached by the browser. So each page request will transmit the hole file again. A caching option for the "Static Files" in the Shared Components would be nice :-)

    About lazy loading with the #WORKSPACE_IMAGES#. I could think about a mod_rewrite rule which translates the additional file request of the JS library into a valid request for APEX.

    Carl Backstrom said...
    In 3.1 we emit a last modified header now for uploaded files so that should help with browser caching.

    Daniel said...
    Thank you for your post. This is an area where I feel we could need some more examples. I you have a background in PL/SQL, Forms, Reports etc (not a web programmer) it is not that easy to get around to integrate different 3rd party libraries. I'm know trying to integrate a file upload script Fancy Upload. And I am struggeling....

    Anthony Rayner said...

    I like jQuery too. The $(document).ready() is one highlight, which provides access to the DOM as soon as the DOM is ready (not waiting for the entire page to load as with the traditional onload event). This is nice when you are doing conditional rendering and other stuff on page load, in that it reduces the amount of page flicker you get.

    Also, the fairly newly released jQuery UI library is, although not yet as established as others, pretty good and I've found very easy to use. I recently did a test creating some drag and drop functionality and an accordion component, and it really was fairly painless.

    I think this area could be huge for APEX. From the tests I did, the trick is obviously to get the APEX engine to generate HTML that plays nicely with the libraries (through customising templates for example). Thus leveraging the rapid, declarative, database-centric architecture of APEX that we all love, and the richness and increased responsiveness that further improve the user experience offered by these libraries.

    Good times ahead!
    klondike said...
    before there was APEX we developed our own framework very much like APEX (in concept, not detail). For handling both stored scripts and images, or files of any kind for that matter (e.g. report output) we developed a pl/sql based pseudo-hierarchical file system that uses LOBs. There is a web based UI much like standard windows explorer, and a java command line bulk loader/unloader. I could give more details if someone is interested. I'd love to see it become part of the apex base product. Other services we developed in pl/sql are sqlplus interpreter (run sqlplus right in the database), PDF output, and background task system (basically a wrapper around dbms_job).
    jon said...
    nice post!
    langham hotel boston said...
    Have a super day. Really very interesting information.... Thanks for your work.
    pay per head service said...
    Your blog is very interesting and your way of writing is also very good.
    Anonymous said...
    I am having trouble accessing static files in APEX 3.2. I've tried several things, like this:

    src="="#IMAGE_PREFIX#javascript/date_validation.js" type="text/javascript",

    hardcoding "/i/", even pasting the locating in the browser after /apex

    Nothing seems to work. Any help would be appreciated! Thanks!
    web development astoria said...
    Hi, great article. The way you explained it is really awesome and makes every one to read till the end. keep posting..
    wasirdenature said...
    lionelmessi10 said...

Post a Comment