Roll Your Own - APEX 4.0 and JQuery-UI Application

Question

For those with a apex.oracle.com account and want to see jQeury tabs running via 4.0 in your own Workspace, use following this script to create your own version of Shijesh's (Apex_Noob) application.
Credit also goes out to Alistair Laing for his hard work in investigating why 4.0 is requiring the use of the googleapis jquery.js... libraries.
Application Builder - Create
Application Type - Database
Create Application - From Scratch
Name - jQuery Application
Add Page - keep default and Click Add Page
Click CreateMy application defaulted to Theme 2, you will need to switch the theme to one of the following: If you don't the tabs will not render properly.
8 Orange
10 Sand
13 Classic Blue
14 Simple Green
15 Light Blue
16 Dark Blue
18 Simple Gray
19 Red Gray
Message - Application created successfully.
Click Shared ComponentsUnder User Interface Click - ThemesIf you don't see one of the above Themes, you will need to Create and switch your Theme.
Click - CreateFrom the Repository selected Click - Next and select one of the above Themes
Click - Switch ThemeSelect one of the above Themes and Click - Next
Click -NextClick - Switch ThemeReturn to your newly created Application by Clicking on Application xxxxxxx Breadcrumb
Click - Create PageSelect - Blank PageClick - NextAssign the page a name
Click - NextAccept defaults and Click - NextClick - FinishClick - Edit PageI still work in Component View, to toggle to this View, click on the control adjacent to Page number and Go button. Hover over the ones on the far right and you will see both Component View and Tree View
From Component View
Click on the Page Edit Control
In the Text Area labeled Javascript/Execute when Page Loads - paste in the following code:
$x("tabs").appendChild( $x("tabs-1"));
$x("tabs").appendChild( $x("tabs-2"));
jQuery("#tabs").tabs();In the Text Area labeled HTML Header and Body Attribute/HTML Header - paste in the following code:
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/redmond/jquery-ui.css" type="text/css" />
<script src= "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.js"> </script>Click - Apply ChangesRequired use of the Google jqueryui libraries is being questioned by recent threads created by Alistair Laing since it appears that 4.0 does not currently support jQeury tabs
{thread:id=1083507}
{thread:id=1083540}
Create a Region
Type HTML Text - accept defaults
Provide a Title like "Tabs" and accept defaults
Template - Reports Region
Sequence 10
Click - NextIn the Enter HTML Text Region Source: Text Area - paste in the following code:
<div id="tabs">
<ul>
<li><a href="#tabs-1">Employees</a></li>
<li><a href="#tabs-2">Departments</a></li>
</ul>
</div>Click - Create RegionCreate a second Region
Type Report/Sql Report
Provide a Title like "Employees" and accept defaults
Template Reports Region
Sequence 20
Click - NextIn the Enter SQL Query or PL/SQL function returning a SQL Query: Text Area - paste in the following code:
SELECT empno,
       ename,
       job,
       mgr,
       hiredate,
       sal,
       comm,
       deptno
FROM   empClick - Create RegionEdit the newly created Report Region
Under Attributes/Static ID - paste in the following code:
tabs-1Click - Apply ChangesCreate a third Region
Type Report/Sql Report
Provide a Title like "Departments" and accept defaults
Template Reports Region
Sequence 30
Click - NextIn the Enter SQL Query or PL/SQL function returning a SQL Query: Text Area - paste in the following code:
SELECT deptno,
       dname,
       loc
FROM   deptClick - Create RegionEdit the newly created Report Region
Under Attributes/Static ID - paste in the following code:
tabs-2Click - Apply ChangesRun you page and you should see you tabs.
Jeff

Answer 1

Great post Jeff,
With regard to Jquery UI and tabs I've contacted the Apex dev team and received a reply from them.
All the jQueryUI files are included in the APEX 4.0 distribution, but not all jQueryUI components
are loaded by default to avoid a huge initial download. It's not necessary to load your own version of jQueryUI, just load the missing component.
For the "Tabs" you have to add
<link href="IMAGE_PREFIX#libraries/jquery-ui/1.8/themes/base/jquery.ui.tabs.css" rel="stylesheet" type="text/css" />
<script src="#IMAGE_PREFIX#libraries/jquery-ui/1.8/ui/minified/jquery.ui.tabs.min.js" type="text/javascript"></script>
to your page template or the header attribute of your page where you want to use it.They did not mention which other Jquery UI widgets were not included so people need to check to see if they get any JS errors Like "$('#tabs').tabs() is not a function" this would suggest that tabs is not being loaded. To included it in you page header directly after #HEAD# you need to place the css and js as stated above.
If you need jquery help just post you queries here or the is some other jquery links that maybe of some use
jQuery
http://jquery.com/ - Official jQuery Website
http://api.jquery.com/ - jQuery API Library
http://plugins.jquery.com/ - jQuery Plugins (Not APEX related)|
http://yayquery.com/ - yayQuery - jQuery Podcast
http://jqueryui.com/ - Official jQuery UI Website
http://jqueryui.com/demos/ - jQuery UI Demos
Edited by: Alistair Laing on Jun 9, 2010 4:04 PM
Add more links
Edited by: Alistair Laing on Jun 9, 2010 4:09 PM