ALT-TAB:Better APEX Tabs Scott SpendoliniDirector & Co-Founder1
WELCOME2
— scott.spendolini@enkitec.com— @sspendol— Ex-Oracle Employee of 10 years— Senior Product Manager for Oracle APEXfrom ...
About Enkitec— Oracle Platinum Partner— Established in 2004— Headquartered in Dallas, TX— Locations throughout the US ...
Agenda— Overview— Alternative Tabs— jQuery UI— CSS Dropdown Menu Framework— APEX 4.0 UI Changes— Summary5
APEX 4.0 UI CHANGES6
New APEX 4.0 Themes— Several new themes included in APEX 4.0— Total of 20 Interchangeable Themes7
Themes8— All new themes are DIV-based— Only 5 are IE6 Compatible— Denoted by the * next to theirnames— Most themes hav...
Backward Compatibility— Five Themes still use HTML tables for their layout— Ensures compatibility with older browsers— ...
New Features in APEX 4.0 Templates10— “Embedded” Regions— Can now easily have a Region within another Region— Part of t...
DIV-Based Layout— Most of the new APEX 4.0 Themes use a DIV-based layout model— What is a DIV?— A container for blocks ...
D E M O N S T R A T I O NDIVS12
— Each page is made up of several DIVs— header— tabs— topbar— messages— body— footer— Each DIV has sub-DIVs— And ...
header14
tabs15
topbar16
body17
footer18
Page Header19<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">...
Page Body20<div id="header"><div id="logo"><a href="#HOME_LINK#">#LOGO##REGION_POSITION_06#</a></div>#REGION_POSITION_07#<...
Page Footer21<div id="footer"><div class="content">#REGION_POSITION_05#<div id="customize">#CUSTOMIZE#</div>&nbsp;</div></...
Sprite Maps22— Sprite Maps consolidate severalsmaller images into one large image— Faster to load one larger image vs. s...
D E M O N S T R A T I O NSPRITE MAPS23
TABS24
History of Tabs25
History of Tabs26— The first tab was developed in 1962 by IBM &DARPA— Data was stored on over 2,000 punch cards— Took o...
History of Tabs— Tabs have been a common navigational devicesince the early days of client-server applications— Once HTM...
Amazon.com circa 199928— When Amazon.comlaunched in 1995, itdidn’t look very good— At least not by today’sstandards— It...
— However, its UI quickly evolved over the years— As the site expanded, so did the number of tabs used:Amazon.com circa ...
Amazon.com Today— Today, Amazon.com opts for a navigation list onthe left side in lieu of tabs on its home page30
Amazon.com Today— Once you select a department, you will see asubtle line of sub-navigation tabs31
Google’s Tabs— Simplicity + Consistency > Complexity32
Apple’s Tabs— (Simplicity + Consistency) * Style > Complexity33
Microsoft’s Tabs— Simplicity + Consistency > Complexity34
Microsoft’s Tabs— Simplicity + Consistency > Complexity35+ = 0
APEX & Tabs— Almost every APEX application ever written makes use ofsome form of tabs— Why is this so?— Default option ...
APEX Built-in Tabs37— APEX’s tab mechanism haschanged little over time— Almost the same in APEX 4.0 as it was inHTML DB ...
— To say that APEX’s built-in tabs are frustrating to usewould be a vast understatement...PC LOAD LETTER38
Upside Down39•One-LevelAPEXtabs-themostcommontype-areactuallycreatedupside-down•WhatseemtobetheParentTabsareactuallysometh...
One Level of TabsTwo Levels of TabsUpside DownStandard TabsParent TabsStandard Tabs40Pseudo Parent Tab
APEX Tab Deficiencies— Several things have to line up just right for tabsto work properly:— Correct Page Template must b...
APEX Tab Deficiencies— APEX uses a JavaScript function to submit the page whentabs are clicked—APEX 3.2: doSubmit(TabNam...
D E M O N S T R A T I O NWORKINGWITH APEX TABS43Getting Frustrated
APEX 4.0 Tab Enhancements— Little has changed in the way tabs areimplemented in APEX 4.0— Still just as confusing— Ther...
http://www.enkitec.com45
APEX 4.0 Tabs Management Page46
Tab Summary47
Tab Display48
Other Details49
Other Details50
ALTERNATIVE TABS51
JQUERY UI52
jQuery UI53— Provides a set of UI components that sit on top ofjQuery— Tabs, Calendars, Widgets, Buttons, Effects, etc.—...
jQuery UI Tabs— Robust, configurable jQuery IU component thatcan be styled to match almost any UI theme— Contain hooks i...
jQuery UI Tab Drawbacks— No easy support for sub-tabs— Require jQuery & jQuery UI— Not an issue with APEX 4.0+— Involv...
jQuery Tabs: Get ‘Em While They’re Hot— Blog entry by Dan McGhan on how to integratejQuery UI Tabs & APEX— Concise, easy...
D E M O N S T R A T I O NJQUERY UI TABS57
CSS DROP-DOWNMENU FRAMEWORK58
OVERVIEW59
CSS Drop-down Menu Framework60— Free framework for CSS-based menus— Licensed under GNU GPL; donation requested— http://...
Theme Support— Support for Themes— Easily modifiable via CSS— Included Themes:— General Purpose— Flickr— NVIDIA— Ad...
D E M O N S T R A T I O NCSS DROP-DOWNMENU FRAMEWORK62
63Structure vs. Style— All structure & style are completely separated— Structure: HTML— Style: CSS— This approach has ...
In general, separating thestructure from the style is a gooddesign principle that should beapplied everywhere.64
STRUCTURE65
How It Works66— CSS Drop Down Menus simply use an HTML list tocreate the structure used for the tabs— Simple & Unclutter...
The Result— Thus, this HTML Code:— When combined with a CSS file or files...— Yields this Menu:67
HTML Lists— <ul> and <li> are HTML tags that make upbulleted “lists” when rendered on the page— Each will also require a...
— By embedding additional <ul> tags, we cancreate a hierarchical list with any number oflevels:<ul><li>One</li><ul><li>Tw...
CSS Drop Down Menu Example70
STYLE71
72Style— All style definitions are stored in Cascading StyleSheets or CSS files— Visual attributes of the list elements,...
CSS Zen Garden— Example site which illustrates how the sameHTML file can look dramatically different by onlychanging the ...
http://www.enkitec.com74
http://www.enkitec.com75
CSS Dropdown Menus CSS— CSS Dropdown Menus requires three CSS files:— dropdown.css— Sets high level element attributes,...
INTEGRATION WITH APEX77
Integration with APEX— It’s fairly simple to integrate CSS DropdownMenus with APEX— Done using an APEX list & custom tem...
Steps to Integrate791.Create a List— Add an entry to the list for each tab & sub-tab that youwant to include2.Crete a Lis...
Lists: Best Practices— Group Pages in blocks of 100 or 1000 based onwhich “tab” will be current— Set the Current List En...
D E M O N S T R A T I O NCREATING A LIST& LIST TEMPLATE81
Before List Entry— List Template Before Rows— <link href="/c/css/dropdown/dropdown.css" rel="stylesheet"type="text/css" ...
Template Definition— List Template Current— <li><a href="#LINK#"class="currentTab">#TEXT#</a></li>— List Template Curre...
Template Definition— List Template Non-Current— <li><a href="#LINK#">#TEXT#</a></li>— List Template Non-Current with Su...
Sub List Entry— Sub List Template Current— <li><a href="#LINK#">#TEXT#</a></li>— Sub List Template Current w/Sub ListIt...
Sub List Entry— Sub List Template Noncurrent— <li><a href="#LINK#">#TEXT#</a></li>— Sub List Template Noncurrent w/Sub ...
After List Entry— List Template After Rows— </li></ul>87
SUMMARY88
Summary89— APEX’s tab mechanism is dated and hard to use— Most applications do, however, use it— But it’s easy to retro...
http://www.enkitec.com90
Upcoming SlideShare
Loading in …5
×

Alt tab - better apex tabs

2,415 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,415
On SlideShare
0
From Embeds
0
Number of Embeds
97
Actions
Shares
0
Downloads
41
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Alt tab - better apex tabs

  1. 1. ALT-TAB:Better APEX Tabs Scott SpendoliniDirector & Co-Founder1
  2. 2. WELCOME2
  3. 3. — scott.spendolini@enkitec.com— @sspendol— Ex-Oracle Employee of 10 years— Senior Product Manager for Oracle APEXfrom 2002 through 2005— Founded Sumner Technologiesin October 2005— Co-Founded Sumneva in January 2010— Joined Enkitec in June 2012— Oracle Ace Director— Co-Author, Pro Oracle Application Express— Author, Secure APEX Development BestPractices— “Scott” on OTN ForumsScott Spendolini3
  4. 4. About Enkitec— Oracle Platinum Partner— Established in 2004— Headquartered in Dallas, TX— Locations throughout the US & EMEA— Specialties include— Exadata Implementations— Development Services— PL/SQL / Java / APEX— DBA/Data Warehouse/RAC— Business Intelligence4
  5. 5. Agenda— Overview— Alternative Tabs— jQuery UI— CSS Dropdown Menu Framework— APEX 4.0 UI Changes— Summary5
  6. 6. APEX 4.0 UI CHANGES6
  7. 7. New APEX 4.0 Themes— Several new themes included in APEX 4.0— Total of 20 Interchangeable Themes7
  8. 8. Themes8— All new themes are DIV-based— Only 5 are IE6 Compatible— Denoted by the * next to theirnames— Most themes have been“cleaned up” to bettermeet standards and/or tofix bugs
  9. 9. Backward Compatibility— Five Themes still use HTML tables for their layout— Ensures compatibility with older browsers— Table-friendly themes include:— Theme 13— Theme 15— Theme 16— Theme 18— Theme 209
  10. 10. New Features in APEX 4.0 Templates10— “Embedded” Regions— Can now easily have a Region within another Region— Part of the Region properties
  11. 11. DIV-Based Layout— Most of the new APEX 4.0 Themes use a DIV-based layout model— What is a DIV?— A container for blocks of content— More practical than TABLEs for overall design— Can and do still use TABLEs for row/column reports— Easier to manipulate & manage with JavaScript/jQuery11
  12. 12. D E M O N S T R A T I O NDIVS12
  13. 13. — Each page is made up of several DIVs— header— tabs— topbar— messages— body— footer— Each DIV has sub-DIVs— And those DIVs may also have sub-DIVsStructure of an APEX 4.0 Template13
  14. 14. header14
  15. 15. tabs15
  16. 16. topbar16
  17. 17. body17
  18. 18. footer18
  19. 19. Page Header19<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html lang="&BROWSER_LANGUAGE." xmlns="http://www.w3.org/1999/xhtml"xmlns:htmldb="http://htmldb.oracle.com" xmlns:apex="http://apex.oracle.com"><head><title>#TITLE#</title><link rel="icon" href="#IMAGE_PREFIX#favicon.ico" type="image/x-icon"><link rel="shortcut icon" href="#IMAGE_PREFIX#favicon.ico" type="image/x-icon">#HEAD#<link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_4/css/theme_4_0.css"type="text/css" /><!--[if IE]><link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_4/css/theme_4_0_ie.css" type="text/css" /><![endif]--><!--[if IE 6]><link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_4/css/theme_4_0_ie6.css" type="text/css" /><![endif]--><!--[if IE 7]><link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_4/css/theme_4_0_ie7.css" type="text/css" /><![endif]--></head><body #ONLOAD#><!--[if lte IE 6]><div id="outdated-browser">#OUTDATED_BROWSER#</div><![endif]-->#FORM_OPEN#
  20. 20. Page Body20<div id="header"><div id="logo"><a href="#HOME_LINK#">#LOGO##REGION_POSITION_06#</a></div>#REGION_POSITION_07#<div id="navbar"><div class="app-user">#WELCOME_USER#</div>#NAVIGATION_BAR##REGION_POSITION_08#</div></div><div id="tabs"><div class="frame"><div class="bg"><div class="tab-holder">#TAB_CELLS#</div></div></div></div><div id="topbar">#REGION_POSITION_01##REGION_POSITION_04#</div><div id="messages">#SUCCESS_MESSAGE##NOTIFICATION_MESSAGE##GLOBAL_NOTIFICATION#</div><div id="body"><table class="tbl-body" cellspacing="0" cellpadding="0" border="0" summary=""><tbody><tr><td class="tbl-main" width="100%">#REGION_POSITION_02##BOX_BODY#</td><td class="tbl-sidebar">#REGION_POSITION_03#</td></tr></tbody></table></div>
  21. 21. Page Footer21<div id="footer"><div class="content">#REGION_POSITION_05#<div id="customize">#CUSTOMIZE#</div>&nbsp;</div></div>#FORM_CLOSE#</body></html>
  22. 22. Sprite Maps22— Sprite Maps consolidate severalsmaller images into one large image— Faster to load one larger image vs. severalsmaller images— Only a portion of the image isdisplayed on the page— Controlled by CSS background-positionattributeTabs Sprite Map ImageActual Tabs
  23. 23. D E M O N S T R A T I O NSPRITE MAPS23
  24. 24. TABS24
  25. 25. History of Tabs25
  26. 26. History of Tabs26— The first tab was developed in 1962 by IBM &DARPA— Data was stored on over 2,000 punch cards— Took over 3 hours just to load— Used all 16KB of RAM— End Result:|--------|| Home |
  27. 27. History of Tabs— Tabs have been a common navigational devicesince the early days of client-server applications— Once HTML-based applications became popular, it wasn’tlong before the tab followed— Most web sites today - both large& small - make some use oftabs in one way or another— Google, Amazon, Twitter,Facebook, Yahoo, etc.27
  28. 28. Amazon.com circa 199928— When Amazon.comlaunched in 1995, itdidn’t look very good— At least not by today’sstandards— It also didn’t have anytabs— As did many sites of thattime period
  29. 29. — However, its UI quickly evolved over the years— As the site expanded, so did the number of tabs used:Amazon.com circa 2000’s29
  30. 30. Amazon.com Today— Today, Amazon.com opts for a navigation list onthe left side in lieu of tabs on its home page30
  31. 31. Amazon.com Today— Once you select a department, you will see asubtle line of sub-navigation tabs31
  32. 32. Google’s Tabs— Simplicity + Consistency > Complexity32
  33. 33. Apple’s Tabs— (Simplicity + Consistency) * Style > Complexity33
  34. 34. Microsoft’s Tabs— Simplicity + Consistency > Complexity34
  35. 35. Microsoft’s Tabs— Simplicity + Consistency > Complexity35+ = 0
  36. 36. APEX & Tabs— Almost every APEX application ever written makes use ofsome form of tabs— Why is this so?— Default option when creating an application— Tabs are a de-facto navigation control— “Easier” to use thanother types of navigationcontrols— Why Not?36
  37. 37. APEX Built-in Tabs37— APEX’s tab mechanism haschanged little over time— Almost the same in APEX 4.0 as it was inHTML DB 1.6— APEX provides support for no, oneor two levels of tabs— Overall UI used to make up tabs isin need of a refresh— APEX 4.0 helps, but the underlyinginfrastructure is the same
  38. 38. — To say that APEX’s built-in tabs are frustrating to usewould be a vast understatement...PC LOAD LETTER38
  39. 39. Upside Down39•One-LevelAPEXtabs-themostcommontype-areactuallycreatedupside-down•WhatseemtobetheParentTabsareactuallysomethingcalledtheStandardTabs•WhichisanothernameforDetailTabs•AllStandardTabswillhaveapseudo-tabastheirParentorMastertab•Thus,you’reessentiallycreatingorphanedtabs•Veryconfusingwhenconvertingfromonetotwolevelsoftabs,asyouneedtocreatenewmasterorparenttabs
  40. 40. One Level of TabsTwo Levels of TabsUpside DownStandard TabsParent TabsStandard Tabs40Pseudo Parent Tab
  41. 41. APEX Tab Deficiencies— Several things have to line up just right for tabsto work properly:— Correct Page Template must be selected— Tab must be current for the corresponding Page— Page must be mapped to the corresponding Standard TabSet— Standard Tab must be mapped to the correspondingStandard Tab Set— Standard Tab must map to the corresponding Parent TabSet or Pseudo Parent Tab Set41
  42. 42. APEX Tab Deficiencies— APEX uses a JavaScript function to submit the page whentabs are clicked—APEX 3.2: doSubmit(TabName);—APEX 4.0: apex.submit(TabName);— Deficient for a couple of reasons— JavaScript was required for basic navigation— Issue with some mobile devices— Google would not follow or index the tab’s links— Harder to get a site indexed42
  43. 43. D E M O N S T R A T I O NWORKINGWITH APEX TABS43Getting Frustrated
  44. 44. APEX 4.0 Tab Enhancements— Little has changed in the way tabs areimplemented in APEX 4.0— Still just as confusing— There are a couple new reports and several newregions that attempt to make tabs easier to use— Found under Shared Components > Tabs44
  45. 45. http://www.enkitec.com45
  46. 46. APEX 4.0 Tabs Management Page46
  47. 47. Tab Summary47
  48. 48. Tab Display48
  49. 49. Other Details49
  50. 50. Other Details50
  51. 51. ALTERNATIVE TABS51
  52. 52. JQUERY UI52
  53. 53. jQuery UI53— Provides a set of UI components that sit on top ofjQuery— Tabs, Calendars, Widgets, Buttons, Effects, etc.— APEX 4.0 will have both jQuery & jQuery UIincluded— Can easily be installed to work with APEX 3.x as well
  54. 54. jQuery UI Tabs— Robust, configurable jQuery IU component thatcan be styled to match almost any UI theme— Contain hooks into jQuery to capture all types of events— Support for loading content via Ajax54
  55. 55. jQuery UI Tab Drawbacks— No easy support for sub-tabs— Require jQuery & jQuery UI— Not an issue with APEX 4.0+— Involves working knowledge of jQuery & JavaScript toimplement— Must make modifications to existing templates in order toproperly integrate— In APEX, jQuery UI Tabs are better suited to hide &show regions; not pages55
  56. 56. jQuery Tabs: Get ‘Em While They’re Hot— Blog entry by Dan McGhan on how to integratejQuery UI Tabs & APEX— Concise, easy to follow steps— Takes only minutes to implement— http://www.danielmcghan.us/2009/07/jquery-tabs-get-while-they-hot.html56
  57. 57. D E M O N S T R A T I O NJQUERY UI TABS57
  58. 58. CSS DROP-DOWNMENU FRAMEWORK58
  59. 59. OVERVIEW59
  60. 60. CSS Drop-down Menu Framework60— Free framework for CSS-based menus— Licensed under GNU GPL; donation requested— http://www.lwis.net/free-css-drop-down-menu/— Modular Design with support for themes— Easy to Deploy & Transform— Cross-Browser— Only IE6 requires JavaScript; all modern browsers do not— Extremely Lightweight & Fast!
  61. 61. Theme Support— Support for Themes— Easily modifiable via CSS— Included Themes:— General Purpose— Flickr— NVIDIA— Adobe— MTV— VIMEO61
  62. 62. D E M O N S T R A T I O NCSS DROP-DOWNMENU FRAMEWORK62
  63. 63. 63Structure vs. Style— All structure & style are completely separated— Structure: HTML— Style: CSS— This approach has a number of benefits— Style of a site can quickly & easily be changed— Structure of a site is much simpler & easier to maintain— Site will be more Section 508 Compliant
  64. 64. In general, separating thestructure from the style is a gooddesign principle that should beapplied everywhere.64
  65. 65. STRUCTURE65
  66. 66. How It Works66— CSS Drop Down Menus simply use an HTML list tocreate the structure used for the tabs— Simple & Uncluttered— Cascading Styles are then applied to the list togive them their style or user interface— Developer has complete control over the styles used— And never has to modify the corresponding HTML
  67. 67. The Result— Thus, this HTML Code:— When combined with a CSS file or files...— Yields this Menu:67
  68. 68. HTML Lists— <ul> and <li> are HTML tags that make upbulleted “lists” when rendered on the page— Each will also require a closing tag after its correspondingcontent68<ul><li>One</li><li>Two</li><li>Three</li></ul>• One• Two• Three
  69. 69. — By embedding additional <ul> tags, we cancreate a hierarchical list with any number oflevels:<ul><li>One</li><ul><li>Two</li><li>Three</li></ul></ul>Multiple Level Hierarchies69• One• Two• Three
  70. 70. CSS Drop Down Menu Example70
  71. 71. STYLE71
  72. 72. 72Style— All style definitions are stored in Cascading StyleSheets or CSS files— Visual attributes of the list elements, such as:— Width— Background Color— Font & Font Size— Margins & Padding
  73. 73. CSS Zen Garden— Example site which illustrates how the sameHTML file can look dramatically different by onlychanging the contents of the CSS— Different graphic artists submitted only a CSS file &associated images and the best are on display— Dramatic illustration as to what can be achieved usingonly Cascading Style Sheets— View all of the designs online:— http://csszengarden.com73
  74. 74. http://www.enkitec.com74
  75. 75. http://www.enkitec.com75
  76. 76. CSS Dropdown Menus CSS— CSS Dropdown Menus requires three CSS files:— dropdown.css— Sets high level element attributes, such as <ul> & <li>— default.advanced.css— References default.css— default.css— Almost all formatting changes made here— Each of these can be modified as needed tomatch your graphic design specifications76
  77. 77. INTEGRATION WITH APEX77
  78. 78. Integration with APEX— It’s fairly simple to integrate CSS DropdownMenus with APEX— Done using an APEX list & custom template— List will contain the structure for the tabs— Can be as many levels deep as you like— Template will be 100% HTML and reference thecorresponding CSS files, which contain the style— The List template will take care of creating the hierarchyautomatically78
  79. 79. Steps to Integrate791.Create a List— Add an entry to the list for each tab & sub-tab that youwant to include2.Crete a List Template— Using the CSS Dropdown Menu HTML files as a guide3.Create a List Region on Page Zero— May want to alter the page template and use a customregion position for better alignment/control
  80. 80. Lists: Best Practices— Group Pages in blocks of 100 or 1000 based onwhich “tab” will be current— Set the Current List Entry attributes as follows:— List Entry Current for Pages Type— Exists SQL Query— List Entry Current for Condition—SELECT 1 FROM DUALWHERE :APP_PAGE_ID BETWEEN 600 AND 699— Thus, any page from 600-699 will set this tab tothe current tab80
  81. 81. D E M O N S T R A T I O NCREATING A LIST& LIST TEMPLATE81
  82. 82. Before List Entry— List Template Before Rows— <link href="/c/css/dropdown/dropdown.css" rel="stylesheet"type="text/css" /><link href="/c/css/dropdown/themes/default/default.advanced.css" rel="stylesheet"type="text/css" /><ul id="nav" class="dropdown dropdown-horizontal">82
  83. 83. Template Definition— List Template Current— <li><a href="#LINK#"class="currentTab">#TEXT#</a></li>— List Template Current w/Sub Links— <li><a href="#LINK#"class="currentTab">#TEXT# ▼</a>83
  84. 84. Template Definition— List Template Non-Current— <li><a href="#LINK#">#TEXT#</a></li>— List Template Non-Current with Sub ListItems— <li><a href="#LINK#">#TEXT# ▼</a>— ListSub List Template Before Rows— <ul>84
  85. 85. Sub List Entry— Sub List Template Current— <li><a href="#LINK#">#TEXT#</a></li>— Sub List Template Current w/Sub ListItems— <li><a href="#LINK#">#TEXT# ▶</a>85
  86. 86. Sub List Entry— Sub List Template Noncurrent— <li><a href="#LINK#">#TEXT#</a></li>— Sub List Template Noncurrent w/Sub List Items— <li><a href="#LINK#">#TEXT# ▶</a>— Sub List Template After Rows— </ul></li>86
  87. 87. After List Entry— List Template After Rows— </li></ul>87
  88. 88. SUMMARY88
  89. 89. Summary89— APEX’s tab mechanism is dated and hard to use— Most applications do, however, use it— But it’s easy to retrofit Lists to work as tabs— Implementing new tabs gives your application abit of sizzle that will make it stand out amongother applications— While also allowing older browsers to be able to still viewyour site
  90. 90. http://www.enkitec.com90

×