Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using...
Transcript of Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using...
![Page 1: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/1.jpg)
![Page 2: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/2.jpg)
Denes Kubicek
Oracle ACEAPEX Developer of the Year 2008
Blog & Tools at:
http://www.deneskubicek.blogspot.com/
http://apex.oracle.com/pls/otn/f?p=31517:1
http://www.opal-consulting.de
Denes Kubicek
Oracle ACEAPEX Developer of the Year 2008
Blog & Tools at:
http://www.deneskubicek.blogspot.com/
http://apex.oracle.com/pls/otn/f?p=31517:1
http://www.opal-consulting.de
![Page 3: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/3.jpg)
Create Web 2.0 Applications using Apex
Create Web 2.0 Applications using ApexBy Denes Kubicek, Apex, Oracle and IT Consulting
www.opal-consulting.deBy Denes Kubicek, Apex, Oracle and IT Consulting
www.opal-consulting.de
![Page 4: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/4.jpg)
- possible Scenarios- Tools- Layout planning – Page- Layout planning – Region- using WYSIWYG Editor - Creating a css File- Creating a new Theme - Using Javascript & Ajax - Creating Multiple Regions in One Region- Using Page 0 or Page Header- Use Firefox Plugins – Live Demonstration
- possible Scenarios- Tools- Layout planning – Page- Layout planning – Region- using WYSIWYG Editor - Creating a css File- Creating a new Theme - Using Javascript & Ajax - Creating Multiple Regions in One Region- Using Page 0 or Page Header- Use Firefox Plugins – Live Demonstration
Today’s TopicsToday’s Topics
![Page 5: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/5.jpg)
a) You get source code of an existing page – including images and css
b) all you got is a snapshot of an existing page– no images, no css filebut a styleguide and a couple of screenshots
c) You are using an existing standard apex template and modifying it
a) You get source code of an existing page – including images and css
b) all you got is a snapshot of an existing page– no images, no css filebut a styleguide and a couple of screenshots
c) You are using an existing standard apex template and modifying it
ScenarioScenario
![Page 6: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/6.jpg)
ToolsTools
- Paint (images)
- http://www.gifworks.com/cgi-bin/gifworks.pl?com=transfer_open
- Adobe Photoshop (images, pictures)
- First Page 2006 (html)
- Top Style Pro (.css)
- Aptana IDE (javascript)
- Ultra Edit (text, code)
- Multiple Browser (IE, FF, Opera)
- Browser Plugins for FF
- Paint (images)
- http://www.gifworks.com/cgi-bin/gifworks.pl?com=transfer_open
- Adobe Photoshop (images, pictures)
- First Page 2006 (html)
- Top Style Pro (.css)
- Aptana IDE (javascript)
- Ultra Edit (text, code)
- Multiple Browser (IE, FF, Opera)
- Browser Plugins for FF
![Page 7: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/7.jpg)
Layout Planning – PageLayout Planning – Page
![Page 8: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/8.jpg)
Layout Planning – RegionLayout Planning – Region
![Page 9: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/9.jpg)
Using WYSIWYG Editor – PageUsing WYSIWYG Editor – Page
<html lang="&BROWSER_LANGUAGE." xmlns="http://www.w3.org/1999/xhtml" xmlns:htmldb="http://htmldb.oracle.com"><head><link rel="stylesheet" href="D:\Apex Training\aw10\theme_V3.css" type="text/css" />#HEAD#<title>#TITLE#</title></head><body #ONLOAD#><noscript>&MSG_JSCRIPT.</noscript>#FORM_OPEN#<a name="PAGETOP"></a><table class="taw10_Page" summary="" cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td><table summary="" cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td valign="top"><a id="t10aw_Logo2" href="#">#LOGO#</a></td><td width="100%" valign="top">#REGION_POSITION_08#</td><td class="t10aw_NavBar" valign="top">#NAVIGATION_BAR#</td></tr>
![Page 10: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/10.jpg)
Using WYSIWYG Editor – RegionUsing WYSIWYG Editor – Region
<table class="t10aw_ReportsRegion1" id="#REGION_ID#" border="0" cellpadding="0" cellspacing="0" summary=""><tr><td><img src="D:\Apex Training\aw10\region_left_top.gif" alt=""/></td><td class="t10aw_RegionHeader" colspan="3"></td><td><img src="D:\Apex Training\aw10\region_right_top.gif" alt=""/></td></tr><tr><td class="t10aw_RegionLeft"><img src="D:\Apex Training\aw10\region_left_middle.gif" alt=""/></td><td class="t10aw_RegionTitle">#TITLE#</td><td></td><td class="t10aw_ButtonHolder">#CLOSE# #PREVIOUS##NEXT##DELETE##EDIT##CHANGE##CREATE##CREATE2##EXPAND##COPY##HELP#</td><td class="t10aw_RegionRight"><img src="D:\Apex Training\aw10\region_right_middle.gif" alt=""/></td></tr>
![Page 11: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/11.jpg)
Using WYSIWYG Editor – TabsUsing WYSIWYG Editor – Tabs
<div id="t10aw_PageTabsRight"><table cellpadding="0" cellspacing="0" border="0" summary="" ><tbody><tr><div ><td ><img src="D:\Apex Training\aw10\tab_darkblue_left.gif" alt="" /></td><td class="t10aw_PageTabs3"><a href="#TAB_LINK#">#TAB_LABEL#</a></td><td ><img src="D:\Apex Training\aw10\tab_darkblue_right.gif" alt="" /></td><td ><img src="D:\Apex Training\aw10\tab_blue_left.gif" alt="" /></td><td class="t10aw_PageTabs4">#TAB_LABEL#</a></td><td ><img src="D:\Apex Training\aw10\tab_blue_right.gif" alt="" /></td><td ><img src="D:\Apex Training\aw10\tab_darkblue_left.gif" alt="" /></td><td class="t10aw_PageTabs3"><a href="#TAB_LINK#">#TAB_LABEL#</a></td><td ><img src="D:\Apex Training\aw10\tab_darkblue_right.gif" alt="" /></td></div></tr></tbody></table></div><table id="t10aw_SubtabTop2" width="100%"><tr><td width="10%"><span class="OffC"><a href="#TAB_LINK#">#TAB_LABEL#</a></span><b>|</b></td><td width="10%"><span class="OnC">#TAB_LABEL#</span><b>|</b></td><td><span class="OffC"><a href="#TAB_LINK#">#TAB_LABEL#</a></span><b>|</b></td></tr></table>
![Page 12: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/12.jpg)
Using WYSIWYG Editor – Complete PageUsing WYSIWYG Editor – Complete Page
![Page 13: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/13.jpg)
Referenced in the page header
You can reference multiple css files
Reference muliple css paths using Substitution Strings – for multiple layouts
Referenced in the page header
You can reference multiple css files
Reference muliple css paths using Substitution Strings – for multiple layouts
Creating a css FileCreating a css File
<html lang="&BROWSER_LANGUAGE." xmlns="http://www.w3.org/1999/xhtml" xmlns:htmldb="http://htmldb.oracle.com"><head><link rel="stylesheet" href="D:\Apex Training\aw10\theme_V3.css" type="text/css" />#HEAD#<title>#TITLE#</title></head>
<html lang="&BROWSER_LANGUAGE." xmlns="http://www.w3.org/1999/xhtml" xmlns:htmldb="http://htmldb.oracle.com"><head><link rel="SHORTCUT ICON" href="#IMAGE_PREFIX#themes/theme_tsystems&T_LAYOUT./favicon.ico" ><link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_tsystems&T_LAYOUT./stylesStandard.css" type="text/css" /><link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_tsystems&T_LAYOUT./theme_V3.css" type="text/css" />#HEAD#<title>#TITLE#</title></head><body #ONLOAD#><noscript>&MSG_JSCRIPT.</noscript>#FORM_OPEN#<a name="PAGETOP"></a>
![Page 14: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/14.jpg)
css File – Multiple Paths for Multiple Layoutscss File – Multiple Paths for Multiple Layouts
f?p=&APP_ID.:1:&SESSION.:SET_USER:::T_LAYOUT:_02f?p=&APP_ID.:1:&SESSION.:SET_USER:::T_LAYOUT:_02
![Page 15: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/15.jpg)
css File – Multiple Paths for Multiple Layoutscss File – Multiple Paths for Multiple Layouts
![Page 16: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/16.jpg)
css File – Multiple Paths for Multiple Layoutscss File – Multiple Paths for Multiple Layouts
![Page 17: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/17.jpg)
css File – using a css Editorcss File – using a css Editor
![Page 18: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/18.jpg)
a css file contains of
a) elements (*, a, a:href, body, br, td, tr…)body *{font-size:12px;}th{padding:0;}td{padding:0;}img{border:0;margin:0;}hr{color:#bbb;height:1px;}
b) classes (subclasses) andtable.taw10_Button1 td.taw10_R img{display:block}table.taw10_Button1 td.taw10_L img{display:block}table.taw10_Button1{color:#FFFFF;display:inline;}table.taw10_Button1 td.taw10_C{white-space:nowrap;background-color:#436B9E;}
c) ID’s#t10aw_Logo2{float:left;padding:2px;}
a css file contains of
a) elements (*, a, a:href, body, br, td, tr…)body *{font-size:12px;}th{padding:0;}td{padding:0;}img{border:0;margin:0;}hr{color:#bbb;height:1px;}
b) classes (subclasses) andtable.taw10_Button1 td.taw10_R img{display:block}table.taw10_Button1 td.taw10_L img{display:block}table.taw10_Button1{color:#FFFFF;display:inline;}table.taw10_Button1 td.taw10_C{white-space:nowrap;background-color:#436B9E;}
c) ID’s#t10aw_Logo2{float:left;padding:2px;}
css File – propertiescss File – properties
![Page 19: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/19.jpg)
Internet
http://de.selfhtml.org/css/
http://codepunk.hardwar.org.uk/
http://www.w3schools.com/css/css_reference.asp
http://www.csszengarden.com/
Internet
http://de.selfhtml.org/css/
http://codepunk.hardwar.org.uk/
http://www.w3schools.com/css/css_reference.asp
http://www.csszengarden.com/
css File – referencescss File – references
![Page 20: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/20.jpg)
You can create a new Theme:
- as a copy of an existing theme – theme export
- from scratch
- from the Repository
You can create a new Theme:
- as a copy of an existing theme – theme export
- from scratch
- from the Repository
Creating a New ThemeCreating a New Theme
![Page 21: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/21.jpg)
Use a good text editor to replace the paths in a theme export fileUse a good text editor to replace the paths in a theme export file
Creating a New ThemeCreating a New Theme
![Page 22: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/22.jpg)
Use a good text editor to validate the changesUse a good text editor to validate the changes
Creating a New ThemeCreating a New Theme
![Page 23: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/23.jpg)
Import and install the new created themeImport and install the new created theme
Importing and Installing a New ThemeImporting and Installing a New Theme
![Page 24: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/24.jpg)
The switch process will check if you have all the theme classes requiredThe switch process will check if you have all the theme classes required
Switching to the New ThemeSwitching to the New Theme
![Page 25: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/25.jpg)
Using javascript for CheckboxesUsing javascript for Checkboxes
Using Javascript and Ajax to enhance your WebpagesUsing Javascript and Ajax to enhance your Webpages
1. 1. Region or Page Header
2. <script type="text/javascript">3. function get_Checkboxes(p_itemname)4. { var
ip=document.getElementsByTagName('INPUT');5. var ret=new Array(); var regexp=new
RegExp('^'+p_itemname+'_');6. for (var j=0;j<ip.length;j++)7. { if (ip[j].type=="checkbox" && ip[j].id &&
ip[j].id.match(regexp))8. ret.push(ip[j]); } return ret; }9. </script>
1. 2. Item Label
2. Select Salesrep
3. <a href="#"onClick="html_CheckAll(null,true,get_Checkboxes('P188_SELECT_SALESREP'))">
4. <img src="#WORKSPACE_IMAGES#FNDCANCE.gif"width="12" height="12"
5. valign="bottom" title="Select All"></a>
6. <a href="#"onClick="html_CheckAll(null,false,get_Checkboxes('P188_SELECT_SALESREP'))">
7. <img src="#WORKSPACE_IMAGES#Fndokay1.gif"width="12" height="12"
8. valign="bottom" title="Unselect All">9. </a>
![Page 26: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/26.jpg)
Using javascript for images and regionsUsing javascript for images and regions
Using Javascript and Ajax to enhance your WebpagesUsing Javascript and Ajax to enhance your Webpages
1. $x('t10aw_Logo2').style.width = "300px"2. $x('t10aw_Logo2').style.height = "80px"3. $x('t10aw_Logo2').style.backgroundImage = "url(/i/themes/aw10/opal-logo.gif)"4. $x('t10aw_Logo2').style.backgroundRepeat = "no-repeat"5. $x('t10aw_Logo2').style.backgroundPosition = "5"6. $x('t10aw_Logo2').style.backgroundColor = "white"
![Page 27: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/27.jpg)
How does Ajax work in Apex?How does Ajax work in Apex?
Using Javascript and Ajax to enhance your WebpagesUsing Javascript and Ajax to enhance your Webpages
![Page 28: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/28.jpg)
Creating Ajax Cascading Select Lists - JavascriptCreating Ajax Cascading Select Lists - Javascript
Using Javascript and Ajax to enhance your WebpagesUsing Javascript and Ajax to enhance your Webpages
1. <script language="JavaScript" type="text/javascript">2. function f_set_item_subklasse(pThis, pSelect){3. var l_Return = null;4. var l_Select = $x(pSelect);5. var get = new htmldb_Get(null,$x('pFlowId').value,6. 'APPLICATION_PROCESS=set_item_subklasse',0);7. get.add(pThis,$x(pThis).value);8. gReturn = get.get('XML');9. //alert(gReturn);10. if(gReturn && l_Select){11. var l_Count =
gReturn.getElementsByTagName("option").length;12. l_Select.length = 0;13. for(var i=0;i<l_Count;i++){14. var l_Opt_Xml =
gReturn.getElementsByTagName("option")[i];15. appendToSelect(l_Select,
l_Opt_Xml.getAttribute('value'),16.l_Opt_Xml.firstChild.nodeValue)}}17. get = null; }18. function appendToSelect(pSelect, pValue, pContent) {19. var l_Opt = document.createElement("option");20. l_Opt.value = pValue;21. if(document.all){22. pSelect.options.add(l_Opt);23. l_Opt.innerText = pContent;24. }else{25.
l_Opt.appendChild(document.createTextNode(pContent));26. pSelect.appendChild(l_Opt);27. }}28.</script>
![Page 29: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/29.jpg)
Creating Ajax Cascading Select Lists – Firebug ReportCreating Ajax Cascading Select Lists – Firebug Report
Using Javascript and Ajax to enhance your WebpagesUsing Javascript and Ajax to enhance your Webpages
![Page 30: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/30.jpg)
Creating Ajax Cascading Select Lists – Application ProcessCreating Ajax Cascading Select Lists – Application Process
Using Javascript and Ajax to enhance your WebpagesUsing Javascript and Ajax to enhance your Webpages
1. BEGIN2. OWA_UTIL.mime_header ('text/xml', FALSE);3. HTP.p ('Cache-Control: no-cache');4. HTP.p ('Pragma: no-cache');5. OWA_UTIL.http_header_close;6. HTP.prn ('<select>');7. HTP.prn ( '<option value="'8. || 09. || '">'10. || '- Item-Subklasse wählen -'11. || '</option>'12. );
13. FOR c IN (SELECT aw_subklasse_beschreibung d, aw_subklasse_id r14. FROM aw_items_subklasse_lov15. WHERE aw_klasse_id = :p300_aw_item_klasse)16. LOOP17. HTP.prn ('<option value="' || c.r || '">' || c.d || '</option>');18. END LOOP;
19. HTP.prn ('</select>');20.END;
![Page 31: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/31.jpg)
Using Ajax for Drop-Down Lists – Populating a ReportUsing Ajax for Drop-Down Lists – Populating a Report
Using Javascript and Ajax to enhance your WebpagesUsing Javascript and Ajax to enhance your Webpages
![Page 32: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/32.jpg)
Using Ajax for Drop-Down Lists – Tabular FormsUsing Ajax for Drop-Down Lists – Tabular Forms
Using Javascript and Ajax to enhance your WebpagesUsing Javascript and Ajax to enhance your Webpages
1. SELECT ...2. apex_item.select_list_from_query3. (35, aw_item_klasse,4. 'SELECT aw_klasse_beschreibung d, '5. || 'aw_klasse_id r FROM aw_items_klasse_lov',6. 'style="width:170px" '7. || 'onchange="f_set_casc_sel_list_item(this,'8. || 'f36_‚ || LPAD (ROWNUM, 4, '0')9. || ')"', 'YES', '0',10. '- Item Klasse wählen -',11. 'f35_' || LPAD (ROWNUM, 4, '0'), NULL, 'NO'12. ) aw_item_klasse,13. apex_item.select_list_from_query14. (36, aw_item_subklasse,15. 'SELECT aw_subklasse_beschreibung d, '16. || 'aw_subklasse_id r FROM aw_items_subklasse_lov '17. || 'WHERE aw_klasse_id = '18. || aw_item_klasse,19. 'style="width:170px"',20. 'YES', '0', '- Item Subklasse wählen -',21. 'f36_' || LPAD (ROWNUM, 4, '0'), NULL, 'NO') aw_item_subklasse22. FROM table
![Page 33: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/33.jpg)
Using DHTML Reports without Submitting a pageUsing DHTML Reports without Submitting a page
Using Javascript and Ajax to enhance your WebpagesUsing Javascript and Ajax to enhance your Webpages
![Page 34: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/34.jpg)
Create a simple templatewithout styles for the pageCreate a simple templatewithout styles for the page
Using Javascript and Ajax to enhance your WebpagesUsing Javascript and Ajax to enhance your Webpages
1. <htmldb:SUCCESS_MESSAGE><div id="SUCCESS_MESSAGE">#SUCCESS_MESSAGE#</div></htmldb:SUCCESS_MESSAGE>
2. <htmldb:NOTIFICATION_MESSAGE><div id="NOTIFICATION_MESSAGE">#NOTIFICATION_MESSAGE#</div></htmldb:NOTIFICATION_MESSAGE>
3. <htmldb:GLOBAL_NOTIFICATION><div id="GLOBAL_NOTIFICATION">#GLOBAL_NOTIFICATION#</div></htmldb:GLOBAL_NOTIFICATION>
4. <htmldb:REGION_POSITION_01><div id="REGION_POSITION_01">#REGION_POSITION_01#</div></htmldb:REGION_POSITION_01>
5. <htmldb:REGION_POSITION_02><div id="REGION_POSITION_02">#REGION_POSITION_02#</div></htmldb:REGION_POSITION_02>
6. <htmldb:REGION_POSITION_03><div id="REGION_POSITION_03">#REGION_POSITION_03#</div></htmldb:REGION_POSITION_03>
7. <htmldb:REGION_POSITION_04><div id="REGION_POSITION_04">#REGION_POSITION_04#</div></htmldb:REGION_POSITION_04>
8. <htmldb:REGION_POSITION_05><div id="REGION_POSITION_05">#REGION_POSITION_05#</div></htmldb:REGION_POSITION_05>
9. <htmldb:REGION_POSITION_06><div id="REGION_POSITION_06">#REGION_POSITION_06#</div></htmldb:REGION_POSITION_06>
10.<htmldb:REGION_POSITION_08><div id="REGION_POSITION_08">#REGION_POSITION_08#</div></htmldb:REGION_POSITION_08>
11.<htmldb:BOX_BODY><div id="BOX_BODY">#BOX_BODY#</div></htmldb:BOX_BODY>
![Page 35: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/35.jpg)
Place the DHTML report on a separate page and assign the “Simple Template”to the page
Create a “no-template” region and put the following in the region footer
Place the DHTML report on a separate page and assign the “Simple Template”to the page
Create a “no-template” region and put the following in the region footer
Using Javascript and Ajax to enhance your WebpagesUsing Javascript and Ajax to enhance your Webpages
1. <script>2. redirect('f?p=&APP_ID.:200:&SESSION.:&P260_REGION_ID.:NO::&pg_min_row=1');3. </script>
![Page 36: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/36.jpg)
On the source page you will need a piece of javascript in the page header
and a “no-template” region with the source
On the source page you will need a piece of javascript in the page header
and a “no-template” region with the source
Using Javascript and Ajax to enhance your WebpagesUsing Javascript and Ajax to enhance your Webpages
1. <script language="JavaScript" type="text/javascript">2. function dhtml_GetReport (pThis){3. var l_Val = pThis;4. var get = new htmldb_Get(null,html_GetElement('pFlowId').value,null,260);5. get.add('P260_ID',l_Val)6. gReturn = get.get(null,'<htmldb:BOX_BODY>','</htmldb:BOX_BODY>');7. get = null;8. html_GetElement('ReportDrop1').innerHTML = gReturn;9. return;10.}11.</script>
1. <div id="ReportDrop1"><br /></div>
![Page 37: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/37.jpg)
If you have a requirement to put multiple regions in one region…If you have a requirement to put multiple regions in one region…
Creating Multiple Regions in One RegionCreating Multiple Regions in One Region
![Page 38: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/38.jpg)
…you could use a trick like this one – having one template for each region……you could use a trick like this one – having one template for each region…
Creating Multiple Regions in One RegionCreating Multiple Regions in One Region
![Page 39: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/39.jpg)
…templates for regions on the left and in the middle……templates for regions on the left and in the middle…
Creating Multiple Regions in One RegionCreating Multiple Regions in One Region
1. <table class="t10aw_ReportsRegion3" id="#REGION_ID#" border="0" cellpadding="0"cellspacing="0" summary="">
2. <tr>3. <td><img src="#IMAGE_PREFIX#themes/aw10/region_left_top.gif" alt=""/></td>4. <td class="t10aw_RegionHeader" colspan="3"></td>5. <td></td>6. </tr>7. <tr>8. <td class="t10aw_RegionLeft"><img
src="#IMAGE_PREFIX#themes/aw10/region_left_middle.gif" alt=""/></td>9. <td class="t10aw_RegionTitle">#TITLE#<div style="height:10px"></td><td></td>10.<td class="t10aw_ButtonHolder">#CLOSE# #PREVIOUS##NEXT##DELETE##EDIT#11.#CHANGE##CREATE##CREATE2##EXPAND##COPY##HELP#</td>12.<td class="t10aw_RegionRight"></td>13.</tr>
1. <table class="t10aw_ReportsRegion3" id="#REGION_ID#" border="0" cellpadding="0"cellspacing="0" summary="">
2. <tr>3. <td></td>4. <td class="t10aw_RegionHeader" colspan="3"><img
src="#IMAGE_PREFIX#themes/aw10/region_middle_top.gif" alt=""/></td>5. <td></td>6. </tr>7. <tr>8. <td class=""></td>9. <td class="t10aw_RegionTitle">#TITLE#<div style="height:10px"></td><td></td>10.<td class="t10aw_ButtonHolder">#CLOSE# #PREVIOUS##NEXT##DELETE##EDIT#11.#CHANGE#12.#CREATE##CREATE2##EXPAND##COPY##HELP#</td>13.<td class=""></td>14.</tr>
![Page 40: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/40.jpg)
…and a template for the right side region……and a template for the right side region…
Creating Multiple Regions in One RegionCreating Multiple Regions in One Region
1. <table class="t10aw_ReportsRegion3" id="#REGION_ID#" border="0" cellpadding="0"cellspacing="0" summary="">
2. <tr>3. <td></td>4. <td class="t10aw_RegionHeader" colspan="3"></td>5. <td><img src="#IMAGE_PREFIX#themes/aw10/region_right_top.gif" alt=""/></td>6. </tr>7. <tr>8. <td class="t10aw_RegionLeft"></td>9. <td class="t10aw_RegionTitle">#TITLE#<div style="height:10px"></td><td></td>10.<td class="t10aw_ButtonHolder">#CLOSE# #PREVIOUS##NEXT##DELETE##EDIT#11.#CHANGE#12.#CREATE##CREATE2##EXPAND##COPY##HELP#</td>13.<td class="t10aw_RegionRight"><img
src="#IMAGE_PREFIX#themes/aw10/region_right_middle.gif" alt=""/></td>14.</tr>15.<tr>16.<td class="t10aw_RegionLeft"></td>17.<td class="t10aw_RegionBody" colspan="3"><div style="height:450px">#BODY#</td>18.<td class="t10aw_RegionRight"><img
src="#IMAGE_PREFIX#themes/aw10/region_right_middle.gif" alt=""/></td>19.</tr>20.<tr>21.<td></td>22.<td class="t10aw_RegionFooter" colspan="3"></td>23.<td><img src="#IMAGE_PREFIX#themes/aw10/region_right_bottom.gif" alt=""/></td>24.</tr>25.</table>
![Page 41: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/41.jpg)
…the following properties for the page template MULTI COLUMN REGION TABLE ATTRIBUTES…
…and the proper styles applied to the regions.
…the following properties for the page template MULTI COLUMN REGION TABLE ATTRIBUTES…
…and the proper styles applied to the regions.
Creating Multiple Regions in One RegionCreating Multiple Regions in One Region
1. td2. {3. padding-top: 0pt;4. padding-right: 0pt;5. padding-bottom: 0pt;6. padding-left: 0pt;7. }
![Page 42: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/42.jpg)
Page 0 may be used to overwrite the current css rules defined in the stylesheet
…and it can be rendered conditionally
Page 0 may be used to overwrite the current css rules defined in the stylesheet
…and it can be rendered conditionally
Using Page 0 and Page HeaderUsing Page 0 and Page Header
![Page 43: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/43.jpg)
It could apply certain styles depending on the browser version used
since not all browsers behave the same way.
It could apply certain styles depending on the browser version used
since not all browsers behave the same way.
Using Page 0 and Page HeaderUsing Page 0 and Page Header
1. <!--[if gte IE 6]>2. <style type="text/css">3. #navigationArea{width:99%;}4. </style>5. <![endif]-->
![Page 44: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/44.jpg)
You can also use the page header if you need to change the style ofa page elementYou can also use the page header if you need to change the style ofa page element
Using Page 0 and Page HeaderUsing Page 0 and Page Header
1. <style>2. .ttsys01NavigationVerticalSection .title53. { padding-left:10px;line-height:25px;border-top:2px solid #526c88;border-bottom:1px solid
#526c88;4. color:#333333;font-weight:bold;font-size:12px;5. }
6. .ttsys01NavigationVerticalSection .title5 a7. { margin-left: -10px;padding-top: 4px;padding-right: 0px;8. padding-bottom: 4px;padding-left: 10px;line-height: 18px;9. text-decoration: none;overflow-x: hidden; height:28px;10.overflow-y: hidden;color: #333333;font-weight: bold;font-size: 12px;11.vertical-align:middle12.}13.</style>
![Page 45: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/45.jpg)
Use Firefox Plugins – Live DemonstrationsUse Firefox Plugins – Live Demonstrations
- WebDeveloper Toolbar
- Firebug
- Font-Finder
- IE View
- Image Zoom
- Screen Grab
- Measure It
- Color Picker
- Aardvark
- WebDeveloper Toolbar
- Firebug
- Font-Finder
- IE View
- Image Zoom
- Screen Grab
- Measure It
- Color Picker
- Aardvark
![Page 46: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/46.jpg)
Q&AQ&A
![Page 47: Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img](https://reader031.fdocuments.net/reader031/viewer/2022022420/5a7a305f7f8b9a07508b56a6/html5/thumbnails/47.jpg)
Thank You.Thank You.