Denes Kubicek. Oracle ACE APEX Developer of the Year 2008

Size: px

Start display at page:

Download "Denes Kubicek. Oracle ACE APEX Developer of the Year 2008"

Arron Gavin Cameron
6 years ago
Views:

Denes Kubicek Oracle ACE APEX Developer of the Year 2008 Blog & Tools at: http://www.

2 Denes Kubicek Oracle ACE APEX Developer of the Year 2008 Blog & Tools at:

3 Create Web 2.0 Applications using Apex By Denes Kubicek, Apex, Oracle and IT Consulting

4 Today s Topics - 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

and a couple of screenshots c) You are using

5 Scenario 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 file but a styleguide and a couple of screenshots c) You are using an existing standard apex template and modifying it it

6 Tools - Paint (images) 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

7 Layout Planning Page

8 Layout Planning Region

$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.$

9 Using WYSIWYG Editor Page <html lang="&browser_language." xmlns=" xmlns:htmldb=" <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>

10 Using 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>

11 Using 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>

12 Using WYSIWYG Editor Complete Page

13 Referenced in the page header You can reference multiple css files Creating a css File <html lang="&browser_language." xmlns=" xmlns:htmldb=" <head> <link rel="stylesheet" href="d:\apex Training\aw10\theme_V3.css" type="text/css" /> #HEAD# <title>#title#</title> </head> Reference muliple css paths using Substitution Strings for multiple layouts <html lang="&browser_language." xmlns=" xmlns:htmldb=" <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>

14 css File Multiple Paths for Multiple Layouts f?p=&app_id.:1:&session.:set_user:::t_layout:_02

15 css File Multiple Paths for Multiple Layouts

16 css File Multiple Paths for Multiple Layouts

17 css File using a css Editor

18 css File properties 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) and table.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;}

19 css File references Internet

20 You can create a new Theme: - as a copy of an existing theme theme export - from scratch - from the Repository Creating a New Theme

21 Creating a New Theme Use a good text editor to replace the paths in a theme export file

22 Creating a New Theme Use a good text editor to validate the changes

23 Importing and Installing a New Theme Import and install the new created theme

24 Switching to the New Theme The switch process will check if if you have all the theme classes required

${ 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].$

25 Using Javascript and Ajax to enhance your Webpages Using javascript for Checkboxes 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> 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_checkboxe s('p188_select_salesrep'))"> 7. <img src="#workspace_images#fndokay1.gif" width="12" height="12" 8. valign="bottom" title="unselect All"> 9. </a>

gif)" 4. $x('t10aw_logo2').style.backgroundrepeat = "no-repeat" 5. $x('t10aw_logo2').style.backgroundposition = "5" 6.

26 Using Javascript and Ajax to enhance your Webpages Using javascript for images and regions 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"

27 Using Javascript and Ajax to enhance your Webpages How does Ajax work in Apex?

$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.$

28 Using Javascript and Ajax to enhance your Webpages Creating Ajax Cascading Select Lists - Javascript 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>

29 Using Javascript and Ajax to enhance your Webpages Creating Ajax Cascading Select Lists Firebug Report

Using Javascript and Ajax to enhance your Webpages Creating Ajax Cascading Select Lists Application Process 1. BEGIN 2. OWA_UTIL.mime_header ('text/xml', FALSE); 3. HTP.

30 Using Javascript and Ajax to enhance your Webpages Creating Ajax Cascading Select Lists Application Process 1. BEGIN 2. 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="' '">' 10. '- Item-Subklasse wählen -' 11. '</option>' 12. ); 13. FOR c IN (SELECT aw_subklasse_beschreibung d, aw_subklasse_id r 14. FROM aw_items_subklasse_lov 15. WHERE aw_klasse_id = :p300_aw_item_klasse) 16. LOOP 17. HTP.prn ('<option value="' c.r '">' c.d '</option>'); 18. END LOOP; 19. HTP.prn ('</select>'); 20.END;

31 Using Javascript and Ajax to enhance your Webpages Using Ajax for Drop-Down Lists Populating a Report

Using Javascript and Ajax to enhance your Webpages Using Ajax for Drop-Down Lists Tabular Forms 1. SELECT... 2. apex_item.select_list_from_query 3. (35, aw_item_klasse, 4.

32 Using Javascript and Ajax to enhance your Webpages Using Ajax for Drop-Down Lists Tabular Forms 1. SELECT apex_item.select_list_from_query 3. (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_query 14. (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_subklasse 22. FROM table

33 Using Javascript and Ajax to enhance your Webpages Using DHTML Reports without Submitting a page

34 Using Javascript and Ajax to enhance your Webpages Create a simple template without styles for the page 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>

no-template region and put the following in the region footer 1. <script> 2.

35 Using Javascript and Ajax to enhance your Webpages 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 1. <script> 2. redirect('f?p=&app_id.:200:&session.:&p260_region_id.:no::&pg_min_row=1'); 3. </script>

$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.$

36 Using Javascript and Ajax to enhance your Webpages On the source page you will need a piece of javascript in the page header 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> and a no-template region with the source 1. <div id="reportdrop1"><br /></div>

37 Creating Multiple Regions in One Region If If you have a requirement to put multiple regions in one region

38 Creating Multiple Regions in One Region you could use a trick like this one having one template for each region

39 Creating Multiple Regions in One Region templates for regions on the left and in the middle 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>

40 Creating Multiple Regions in One Region and a template for the right side 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>

41 Creating Multiple Regions in One Region the following properties for the page template MULTI COLUMN REGION TABLE ATTRIBUTES and the proper styles applied to the regions. 1. td 2. { 3. padding-top: 0pt; 4. padding-right: 0pt; 5. padding-bottom: 0pt; 6. padding-left: 0pt; 7. }

42 Using Page 0 and Page Header Page 0 may be used to overwrite the current css rules defined in the stylesheet and it it can be rendered conditionally

43 Using Page 0 and Page Header It It could apply certain styles depending on the browser version used 1.  since not all browsers behave the same way.

Using Page 0 and Page Header You can also use the page header if if you need to change the style of a page

{ padding-left:10px;line-height:25px;border-top:2px solid #526c88;border-bottom:1px solid #526c88; 4.

{ margin-left: -10px;padding-top: 4px;padding-right: 0px; 8.

44 Using Page 0 and Page Header You can also use the page header if if you need to change the style of a page element 1. <style> 2..ttsys01NavigationVerticalSection.title5 3. { 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 a 7. { 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:middle 12.} 13.</style>

45 Use Firefox Plugins Live Demonstrations - WebDeveloper Toolbar - Firebug - Font-Finder -IE View - Image Zoom - Screen Grab - Measure It It - Color Picker - Aardvark

46 Q&A

47 Thank You.

Index. alt, 38, 57 class, 86, 88, 101, 107 href, 24, 51, 57 id, 86 88, 98 overview, 37. src, 37, 57. backend, WordPress, 146, 148

Index. alt, 38, 57 class, 86, 88, 101, 107 href, 24, 51, 57 id, 86 88, 98 overview, 37. src, 37, 57. backend, WordPress, 146, 148 Index Numbers & Symbols (angle brackets), in HTML, 47 : (colon), in CSS, 96 {} (curly brackets), in CSS, 75, 96. (dot), in CSS, 89, 102 # (hash mark), in CSS, 87 88, 99 % (percent) font size, in CSS,