Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img

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

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

- 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

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

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

Layout Planning – PageLayout Planning – Page

Layout Planning – RegionLayout Planning – Region

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>

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>

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>

Using WYSIWYG Editor – Complete PageUsing WYSIWYG Editor – Complete Page

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>

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



css File – using a css Editorcss File – using a css Editor

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

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

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

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


Use a good text editor to validate the changesUse a good text editor to validate the changes


Import and install the new created themeImport and install the new created theme

Importing and Installing a New ThemeImporting and Installing a New Theme

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

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>

Using javascript for images and regionsUsing 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"

How does Ajax work in Apex?How does Ajax work in Apex?


Creating Ajax Cascading Select Lists - JavascriptCreating 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>

Creating Ajax Cascading Select Lists – Firebug ReportCreating Ajax Cascading Select Lists – Firebug Report


Creating Ajax Cascading Select Lists – Application ProcessCreating Ajax Cascading Select Lists – Application Process


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;

Using Ajax for Drop-Down Lists – Populating a ReportUsing Ajax for Drop-Down Lists – Populating a Report


Using Ajax for Drop-Down Lists – Tabular FormsUsing Ajax for Drop-Down Lists – Tabular Forms


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

Using DHTML Reports without Submitting a pageUsing DHTML Reports without Submitting a page


Create a simple templatewithout styles for the pageCreate a simple templatewithout 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>






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>

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


1. <script>2. redirect('f?p=&APP_ID.:200:&SESSION.:&P260_REGION_ID.:NO::&pg_min_row=1');3. </script>

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


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>

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

…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…


…templates for regions on the left and in the middle……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>


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>

…and a template for the right side region……and a template for the right side region…



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>

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


1. td2. {3. padding-top: 0pt;4. padding-right: 0pt;5. padding-bottom: 0pt;6. padding-left: 0pt;7. }

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

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.


1. 

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


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>

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

Q&AQ&A

Thank You.Thank You.

Documents

Denes Kubicek - · PDF fileDenes Kubicek Oracle ACE ... Create Web 2.0 Applications using Apex By Denes Kubicek, ... table.taw10_Button1 td.taw10_R img