tag:blogger.com,1999:blog-57429062798790676052024-03-13T11:50:29.996+01:00Oracle & APEX GeekeryAnd another thing ...Christian Rokitta ♠http://www.blogger.com/profile/07809391154664980631noreply@blogger.comBlogger43125tag:blogger.com,1999:blog-5742906279879067605.post-48663947035425196622019-06-25T18:27:00.002+02:002019-09-17T14:07:48.255+02:00APEX on the Autonomous Database ATP & ADW Cloud Service<h4>
<span lang="EN-US"><span style="color: red;">Yesterday at the KScope19 conference, Oracle announced the immediate availability of APEX, ORDS, and SQL Dev Web on Autonomous Database Cloud!</span></span></h4>
<div class="MsoNormal">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-qN9UnmOmzsQ/XRJMUIy7wuI/AAAAAAAABig/rh72-wMT-X4ZZsJPYsa2lGOafUu21myfQCLcBGAs/s1600/D94N-dxUwAAp0TD.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="1600" height="320" src="https://1.bp.blogspot.com/-qN9UnmOmzsQ/XRJMUIy7wuI/AAAAAAAABig/rh72-wMT-X4ZZsJPYsa2lGOafUu21myfQCLcBGAs/s640/D94N-dxUwAAp0TD.jpg" width="640" /></a></div>
<span lang="EN-US"><br />
</span></div>
<div class="MsoNormal">
<span lang="EN-US">Chaitanya Koratamaddi dedicated an entire session on presenting the possibilities of APEX on the Autonomous Transaction Processing (ATP) and Autonomous Data Warehouse (ADW) Cloud Service Oracle offers.<o:p></o:p></span></div>
<div class="MsoNormal">
<span lang="EN-US"><br />
</span></div>
<h3>
<span lang="EN-US">APEX on Autonomous: What is it?</span></h3>
<div class="MsoNormal">
<span lang="EN-US">You get a dedicated Application Express 19.1 instance managed by Oracle. Installation, Upgrade and Instance Configuration tasks of APEX on ATP/ADW are completely managed by Oracle, including ORDS.<o:p></o:p></span></div>
<div class="MsoNormal">
<span lang="EN-US"><br />
</span></div>
<h3>
<span lang="EN-US">Why choose for APEX on Autonomous?</span></h3>
<div class="MsoNormal">
<span lang="EN-US">The provisioning of new environments is instantly and effortless within minutes. You will get a pre-configured, fully managed and secured environment to both build and deploy APEX applications. You can start developing immediately as soon as your DB service is provisioned. Provisioning is done in three simple steps:<o:p></o:p></span></div>
<div class="MsoListParagraphCxSpFirst" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
</div>
<ol>
<li><span lang="EN-US">Sign in to Oracle Cloud Infrastructure Console<o:p></o:p></span></li>
<li><span lang="EN-US">Create a Compartment<o:p></o:p></span></li>
<li><span lang="EN-US">Create an ATP/ADW instance<o:p></o:p></span></li>
</ol>
<!--[if !supportLists]--><br />
<div class="MsoNormal">
<span lang="EN-US">ATP/ADW can instantly scale compute and storage online as needed based upon your workload.<o:p></o:p></span></div>
<div class="MsoNormal">
<span lang="EN-US">Oracle completely manages the configuration, patching, monitoring and upgrading of all APEX components.<o:p></o:p></span><br />
<span lang="EN-US"><br /></span></div>
<div class="MsoNormal">
<span lang="EN-US">APEX apps developed on-premise can easily be deployed to APEX on ATP/ADW or vice-versa.<o:p></o:p></span></div>
<div class="MsoNormal">
<span lang="EN-US">You have the benefit of elastic resources, automated DB tuning, high availability and security.<o:p></o:p></span></div>
<div class="MsoNormal">
<span lang="EN-US">It’s possible to create multiple APEX Workspaces using a wizard. It’s possible to use database accounts to access APEX instance administration and development environment. You even can make outbound webservice calls, but the Oracle Wallet/Trust Store is managed by Oracle. New/additional Wallet entries have to be requested through Oracle Support. The RESTful Web Services functionality in APEX is supported. APEX apps can be build with any of the supported authentication schema’s.<o:p></o:p></span></div>
<div class="MsoNormal">
<span lang="EN-US">APEX on ATP/ADW includes the email capabilities of APEX and configured through the APEX administration API:<o:p></o:p></span><br />
<span lang="EN-US"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-rUN0rdswKLE/XRJJ1dLC4aI/AAAAAAAABiU/-568xsWHJDwixRJcP6CdFWsXTEri6nKvQCLcBGAs/s1600/email.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1200" data-original-width="1600" height="480" src="https://1.bp.blogspot.com/-rUN0rdswKLE/XRJJ1dLC4aI/AAAAAAAABiU/-568xsWHJDwixRJcP6CdFWsXTEri6nKvQCLcBGAs/s640/email.jpg" width="640" /></a></div>
<span lang="EN-US"><br /></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<h3>
<span lang="EN-US">Some Restrictions</span></h3>
</div>
<span lang="EN-US" style="font-family: "calibri" , sans-serif; line-height: 107%;">Using APEX on ATP/ADW knows some restrictions compared to installed on premise or self-managed on cloud infrastructure. Certain configuration options are predefined by Oracle in APEX administration and cannot be altered. Currently, the APEX Builder interface is only available in English. PDF, Excel and Word printing options are not natively supported. Vanity URL’s, basically mapping your own domain(s), are too currently not supported.</span><br />
<span lang="EN-US" style="font-family: "calibri" , sans-serif; line-height: 107%;"><br /></span>
<br />
<h3>
<span lang="EN-US" style="font-family: "calibri" , sans-serif; line-height: 107%;">Get Started:</span></h3>
<span style="font-family: "calibri" , sans-serif;"><a href="http://oracle.com/autonomousdatabase">oracle.com/autonomousdatabase</a></span><br />
<a href="http://apex.oracle.com/autonomous">apex.oracle.com/autonomous</a><br />
<a href="http://oracle.com/REST">oracle.com/REST</a><br />
<a href="http://oracle.com/SQLDeveloper">oracle.com/SQLDeveloper</a><br />
<span style="font-family: "calibri" , sans-serif;"><br /></span>Christian Rokitta ♠http://www.blogger.com/profile/07809391154664980631noreply@blogger.com0tag:blogger.com,1999:blog-5742906279879067605.post-88665299232180774692019-06-25T18:12:00.000+02:002019-06-25T18:12:24.502+02:00KScope19 - Future of APEX<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-ymyO17KqNcs/XRJHHs9gFnI/AAAAAAAABiI/sYApBJ5aXXwQG5fPgKrfsl0l9sgXWXOiwCLcBGAs/s1600/download.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="138" data-original-width="364" height="241" src="https://1.bp.blogspot.com/-ymyO17KqNcs/XRJHHs9gFnI/AAAAAAAABiI/sYApBJ5aXXwQG5fPgKrfsl0l9sgXWXOiwCLcBGAs/s640/download.jpg" width="640" /></a></div>
<div class="MsoNormal">
<span lang="EN-US" style="mso-ansi-language: EN-US;"><br /></span></div>
<div class="MsoNormal">
<span lang="EN-US" style="mso-ansi-language: EN-US;"><br /></span></div>
<div class="MsoNormal">
<span lang="EN-US" style="mso-ansi-language: EN-US;">I’m
currently attending the annual ODTUG conference, KScope 19, this year organized
in Seattle, Washington.<o:p></o:p></span></div>
<div class="MsoNormal">
<span lang="EN-US" style="mso-ansi-language: EN-US;"><br /></span></div>
<div class="MsoNormal">
<span lang="EN-US" style="mso-ansi-language: EN-US;">Traditionally
the Sunday Symposiums, the first day of this 5 day conference, are provided by
the Oracle Development teams, presenting the latest and upcoming features of
their products. Naturally I went to join the APEX symposium and this is a brief
summary of subjects and features that I consider worth mentioning.<o:p></o:p></span></div>
<div class="MsoNormal">
<span lang="EN-US" style="mso-ansi-language: EN-US;"><br /></span></div>
<h3>
<span lang="EN-US" style="mso-ansi-language: EN-US;">LOV on Steroids</span></h3>
<div class="MsoNormal">
<span lang="EN-US" style="mso-ansi-language: EN-US;">19.2 will
introduce a new and revamped Popup LOV component. The functionality will be
hugely enhanced with features we were only used to get from plug-ins like Select2
(who does not use this?!). With 19.2 we will have all the features:<o:p></o:p></span></div>
<div class="MsoListParagraphCxSpFirst" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
</div>
<ul>
<li><span lang="EN-US" style="mso-ansi-language: EN-US;">Display
Popup as Modal or Inline (Combo-Bob like), the modal flavor is resizable<o:p></o:p></span></li>
<li><span lang="EN-US" style="mso-ansi-language: EN-US;">Display
Multiple Columns<o:p></o:p></span></li>
<li><span lang="EN-US" style="mso-ansi-language: EN-US;">Search,
in multiple columns, fully configurable<o:p></o:p></span></li>
<li><span lang="EN-US" style="mso-ansi-language: EN-US;">Sorting,
presorted and user enabled<o:p></o:p></span></li>
<li><span lang="EN-US" style="mso-ansi-language: EN-US;">Automatic/manual
initial fetch<o:p></o:p></span></li>
<li><span lang="EN-US" style="mso-ansi-language: EN-US;">Select
multiple values (like a tag list)<o:p></o:p></span></li>
<li><span lang="EN-US" style="mso-ansi-language: EN-US;">Add
new values<o:p></o:p></span></li>
<li><span lang="EN-US" style="mso-ansi-language: EN-US;">Search
as you type (configurable)<o:p></o:p></span></li>
<li><span lang="EN-US" style="mso-ansi-language: EN-US;">Configurable
height and width<o:p></o:p></span></li>
<li><span lang="EN-US" style="mso-ansi-language: EN-US;">Additional
output to other form fields/items<o:p></o:p></span></li>
<li><span lang="EN-US" style="mso-ansi-language: EN-US;">keyboard
navigable<o:p></o:p></span></li>
<li><span lang="EN-US" style="mso-ansi-language: EN-US;">different
data source flavors: local table/view/SQL/PLSQL returning SQL, REST Enabled SQL
or Web Source<o:p></o:p></span></li>
</ul>
<!--[if !supportLists]--><br />
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-KoDPyA8wQFU/XRJGTAH8iSI/AAAAAAAABh8/Zil_fy4XwAQMYRFzG64M3LrE1G8Ufas-QCLcBGAs/s1600/LOV1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1200" data-original-width="1600" height="480" src="https://1.bp.blogspot.com/-KoDPyA8wQFU/XRJGTAH8iSI/AAAAAAAABh8/Zil_fy4XwAQMYRFzG64M3LrE1G8Ufas-QCLcBGAs/s640/LOV1.jpg" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-tkDXqWXKips/XRJGTPnjV8I/AAAAAAAABh4/4o_g2Cu77Bsl4hR0r8GtOpYJCG5O0X8AwCLcBGAs/s1600/LOV2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1200" data-original-width="1600" height="480" src="https://1.bp.blogspot.com/-tkDXqWXKips/XRJGTPnjV8I/AAAAAAAABh4/4o_g2Cu77Bsl4hR0r8GtOpYJCG5O0X8AwCLcBGAs/s640/LOV2.jpg" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-0oz9K192j2k/XRJGTF8iECI/AAAAAAAABh0/S_OtDwf-p2gDeTctTt0IPZn62Haj49RsQCLcBGAs/s1600/LOV3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1200" data-original-width="1600" height="480" src="https://1.bp.blogspot.com/-0oz9K192j2k/XRJGTF8iECI/AAAAAAAABh0/S_OtDwf-p2gDeTctTt0IPZn62Haj49RsQCLcBGAs/s640/LOV3.jpg" width="640" /></a></div>
<br />
<h3>
<span lang="EN-US" style="mso-ansi-language: EN-US;">Join the
Dark Mode</span></h3>
<div class="MsoNormal">
<span lang="EN-US" style="mso-ansi-language: EN-US;">A new
feature in 19.1 was the Dark Mode UI for the Builder. In 19.2 a Dark Mode Theme
Style will be included in the upgrade. Combined with the functionality that enables
the end-user to switch theme, you can provide an application that has this
modern functionality that let’s your customers and colleagues work day AND
night!<o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<h3>
<span lang="EN-US" style="mso-ansi-language: EN-US;">More Bulk Edit</span></h3>
<div class="MsoNormal">
<span lang="EN-US" style="mso-ansi-language: EN-US;">In 19.2 it
will be possible to bulk edit more attributes, like the larger text fields that
would open the pop-up editor and Template Options. Being able to modify
multiple Template Options in one go is something that will not only save time,
but is definitely reduce the annoyance of repetitive work if you have to
consistently make changes to similar components.<o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<h3>
<span lang="EN-US" style="mso-ansi-language: EN-US;">No wobbling
Spinner anymore</span></h3>
<div class="MsoNormal">
<span lang="EN-US" style="mso-ansi-language: EN-US;">I noticed
that in 19.2 the processing spinner has been replaced with a spinning circle.
And where the current “old” spinner wobbles a bit out-of-center, the new one is
nicely smooth. Sometimes it’s the small things that make all the difference<o:p></o:p></span></div>
<br />Christian Rokitta ♠http://www.blogger.com/profile/07809391154664980631noreply@blogger.com0tag:blogger.com,1999:blog-5742906279879067605.post-76727264347137287292018-09-05T16:50:00.002+02:002018-09-05T16:54:44.674+02:00APEX 18.1 UT Touch Gestures Fix<div class="MsoNormal">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-smy5UtLde1U/W4_tCuZSLTI/AAAAAAAABZ4/c0XciwEEN5YDy9zqEgL1HZHjRDAY2ahJACLcBGAs/s1600/swipe.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="250" data-original-width="1000" height="160" src="https://2.bp.blogspot.com/-smy5UtLde1U/W4_tCuZSLTI/AAAAAAAABZ4/c0XciwEEN5YDy9zqEgL1HZHjRDAY2ahJACLcBGAs/s640/swipe.jpg" width="640" /></a></div>
<span lang="EN-US"><br /></span>
<span lang="EN-US">If you tried using the build-in Touch Gestures (hamer.js) of APEX 18.1 Universal Theme on your Android device (or Chrome Device Simulation Tool on your desktop), you might have noticed the Swipe and Pan doesn’t work. Here’s how to fix this: add an on-load Dynamic Action and execute this JS snippet:<o:p></o:p></span></div>
<div class="MsoNormal">
<span lang="EN-US"><br />
</span></div>
<div class="MsoNormal">
<span lang="EN-US"><br />
</span></div>
<div class="MsoNormal">
<span lang="EN-US"></span><br />
<pre><span lang="EN-US">delete Hammer.defaults.cssProps.userSelect;
Hammer(document.body, {});<o:p></o:p></span></pre>
</div>
<span lang="EN-US" style="font-family: "calibri" , sans-serif; font-size: 11.0pt; line-height: 107%;"><br /><br />
</span> <span lang="EN-US" style="font-family: "calibri" , sans-serif; font-size: 11.0pt; line-height: 107%;">(many thanks to Shakeeb)</span><br />
<span lang="EN-US" style="font-family: "calibri" , sans-serif; font-size: 11.0pt; line-height: 107%;"><br /></span>
<span lang="EN-US" style="font-family: "calibri" , sans-serif; font-size: 11.0pt; line-height: 107%;"><br /></span>
<span lang="EN-US" style="font-family: "calibri" , sans-serif; font-size: 11.0pt; line-height: 107%;">P.S: </span><span style="font-family: calibri, sans-serif; font-size: 11pt;">You can try/test the Touch Gestures in the <a href="https://apex.oracle.com/pls/apex/f?p=42:424:::NO:::" target="_blank">Universal Theme Reference Application</a></span>Christian Rokitta ♠http://www.blogger.com/profile/07809391154664980631noreply@blogger.com0tag:blogger.com,1999:blog-5742906279879067605.post-31029349949875641952017-12-22T15:10:00.004+01:002017-12-22T15:14:41.764+01:00Describing ORDS RESTful Services using a WADL<div class="OutlineElement Ltr SCXW40032168" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: white; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph SCXW40032168" paraeid="{b1f06aee-4f64-404d-8c2e-2f3d5a845a39}{153}" paraid="738692707" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; padding: 0px; user-select: text; vertical-align: baseline; word-wrap: break-word;">
<span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">Recently I got this question (or better specification) from a customer:</span><span class="EOP SCXW40032168" data-ccp-props="{"201341983":0,"335559739":160,"335559740":259}" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;"> </span></div>
</div>
<div class="OutlineElement Ltr SCXW40032168" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: white; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph SCXW40032168" paraeid="{b1f06aee-4f64-404d-8c2e-2f3d5a845a39}{165}" paraid="40204987" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; padding: 0px; user-select: text; vertical-align: baseline; word-wrap: break-word;">
<span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">"For exchanging </span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">data</span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">,</span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"> we either want a SOAP webservice or a REST service offering a WADL</span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">".</span><span class="EOP SCXW40032168" data-ccp-props="{"201341983":0,"335559739":160,"335559740":259}" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;"> </span><br />
<span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"><br /></span>
<h2>
<span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">WADL?</span><span class="EOP SCXW40032168" data-ccp-props="{"201341983":0,"335559739":160,"335559740":259}" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;"> </span></h2>
</div>
</div>
<div class="OutlineElement Ltr SCXW40032168" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: white; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div>
<span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"><br /></span>
<span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">What's a WADL? I know WSDLs as descriptive endpoints for SOAP webservices, but WADL?! It occurs, that WADL's are intended to do just that, but in a more generic way. </span><a class="Hyperlink SCXW40032168" href="http://https//en.wikipedia.org/wiki/Web_Application_Description_Language" rel="noreferrer" style="background-color: transparent; cursor: text; margin: 0px; padding: 0px;" target="_blank"><span class="TextRun Underlined SCXW40032168" lang="EN-US" style="color: #0563c1; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"><span class="NormalTextRun SCXW40032168" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; margin: 0px; padding: 0px; user-select: text;">WADL</span></span></a><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"> stand for </span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">Web Application Description Language</span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">. </span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">The </span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">World</span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"> Wide Web </span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">Consortium (W3C) currently has no plans to implement </span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">WADL</span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"> as a standard. Oracle's </span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">ORDS is going the </span><a class="Hyperlink SCXW40032168" href="https://swagger.io/docs/specification/data-models/keywords/" rel="noreferrer" style="background-color: transparent; cursor: text; margin: 0px; padding: 0px;" target="_blank"><span class="TextRun Underlined SCXW40032168" lang="EN-US" style="color: #0563c1; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"><span class="NormalTextRun SCXW40032168" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; margin: 0px; padding: 0px; user-select: text;">swagger</span></span></a><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">/</span><a class="Hyperlink SCXW40032168" href="https://github.com/OAI/OpenAPI-Specification/blob/master/versions/3.0.0.md#schema-object" rel="noreferrer" style="background-color: transparent; cursor: text; margin: 0px; padding: 0px;" target="_blank"><span class="TextRun Underlined SCXW40032168" lang="EN-US" style="color: #0563c1; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"><span class="NormalTextRun SCXW40032168" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; margin: 0px; padding: 0px; user-select: text;">openapi</span></span></a><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"> route which is partially implemented in the 17.3 release</span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">.</span><span class="EOP SCXW40032168" data-ccp-props="{"201341983":0,"335559739":160,"335559740":259}" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;"> </span></div>
</div>
<div class="OutlineElement Ltr SCXW40032168" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: white; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph SCXW40032168" paraeid="{b1f06aee-4f64-404d-8c2e-2f3d5a845a39}{228}" paraid="876816884" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; padding: 0px; user-select: text; vertical-align: baseline; word-wrap: break-word;">
<span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">With no existing functionality to provide a WADL for Oracle RESTful services, I had to come up with </span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">my own solution, using the APEX </span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">re</span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">pository</span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"> views to generate a WADL endpoint. I came up with a </span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">small</span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"> procedure for this and add an additional URI Template to my service, called "</span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"><span class="SpellingError SCXW40032168" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/gif; background-position: left bottom; background-repeat: repeat-x; border-bottom: 1px solid transparent; margin: 0px; padding: 0px; user-select: text;">wadl</span></span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">" with a single GET Resource Handler calling this procedure.</span><span class="EOP SCXW40032168" data-ccp-props="{"201341983":0,"335559739":160,"335559740":259}" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;"> </span><br />
<span class="EOP SCXW40032168" data-ccp-props="{"201341983":0,"335559739":160,"335559740":259}" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;"><br />
</span> <span class="EOP SCXW40032168" data-ccp-props="{"201341983":0,"335559739":160,"335559740":259}" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;"><br />
</span> <br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-fgi6EpVhNyM/Wj0PoRdtR3I/AAAAAAAABUY/w294AHGhw8s2Nbl0toTP4aeBDZe5USaewCLcBGAs/s1600/ords-wadl-apex-restful.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="852" data-original-width="1308" height="416" src="https://1.bp.blogspot.com/-fgi6EpVhNyM/Wj0PoRdtR3I/AAAAAAAABUY/w294AHGhw8s2Nbl0toTP4aeBDZe5USaewCLcBGAs/s640/ords-wadl-apex-restful.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">WADL endpoint in APEX RESTful definition</td></tr>
</tbody></table>
<span class="EOP SCXW40032168" data-ccp-props="{"201341983":0,"335559739":160,"335559740":259}" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;"><br />
</span> </div>
</div>
<div class="OutlineElement Ltr SCXW40032168" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: white; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph SCXW40032168" paraeid="{30f65aaf-ce6e-436d-916d-08c3d844e6dc}{3}" paraid="1522442312" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; padding: 0px; user-select: text; vertical-align: baseline; word-wrap: break-word;">
<div class="separator" style="clear: both; text-align: center;">
</div>
<span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">Because the RESTful service I had to provide was fairly simple, my solution is far from complete. In addition, the WADL definition structure examples I found were not really clear on which elements to include or not. </span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">So,</span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"> I </span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">dec</span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">ided</span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"> to provide my solution as a </span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">GitHub</span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"> project, open for anybody who wants to </span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">contribute. In addition, I have used </span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">my</span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"> procedure to provide a WADL on the "</span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">oracle.example.</span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">hr</span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">" example RESTful service in my Oracle Application Express workspace on apex.oracle.com. </span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">After some </span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">modifications (on the example), I was able to </span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">load the definition </span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">into SoapUI.</span><br />
<span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"><br />
</span> <br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://2.bp.blogspot.com/-m94YOfSrdog/Wj0O8eIdltI/AAAAAAAABUQ/B3ccp19FYRwaRgBQuy-H3KAhbl_CSNFJwCLcBGAs/s1600/ords-wadl-soapui1.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="210" data-original-width="531" height="126" src="https://2.bp.blogspot.com/-m94YOfSrdog/Wj0O8eIdltI/AAAAAAAABUQ/B3ccp19FYRwaRgBQuy-H3KAhbl_CSNFJwCLcBGAs/s320/ords-wadl-soapui1.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Import a WADL in SoapUI</td></tr>
</tbody></table>
<span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"><br />
</span> <span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">Give</span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"> it a go. You can reach it here:</span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"> </span><a class="Hyperlink SCXW40032168" href="https://apex.oracle.com/pls/apex/fifapex/hr/wadl/" rel="noreferrer" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; cursor: text; margin: 0px; padding: 0px; text-decoration-line: none; user-select: text;" target="_blank"><span class="TextRun Underlined SCXW40032168" lang="EN-US" style="color: #0563c1; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"><span class="NormalTextRun SCXW40032168" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; margin: 0px; padding: 0px; user-select: text;">https://apex.oracle.com/pls/apex/fifapex/hr/wadl/</span></span></a><span class="TextRun EmptyTextRun SCXW40032168" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;"></span><span class="EOP SCXW40032168" data-ccp-props="{"201341983":0,"335559739":160,"335559740":259}" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;"> </span></div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-BonRLIwRTVk/Wj0NgGCOh8I/AAAAAAAABUE/O7fgzsN9f0Mbr6d6RU8CboJ_vLgSwVjXQCLcBGAs/s1600/ords-wadl-soapui2.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="781" data-original-width="1510" height="329" src="https://1.bp.blogspot.com/-BonRLIwRTVk/Wj0NgGCOh8I/AAAAAAAABUE/O7fgzsN9f0Mbr6d6RU8CboJ_vLgSwVjXQCLcBGAs/s640/ords-wadl-soapui2.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">RESTful Module oracle.example.hr in SoapUI from imported with generated WADL</span></td></tr>
</tbody></table>
<div class="OutlineElement Ltr SCXW40032168" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: white; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<h2 style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; padding: 0px; user-select: text; vertical-align: baseline; word-wrap: break-word;">
</h2>
<div>
<span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"><br /></span>
<h2>
<span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">Naught</span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">y</span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"> APEX RESTful service definitions</span><span class="EOP SCXW40032168" data-ccp-props="{"201341983":0,"335551550":1,"335551620":1,"335559739":160,"335559740":259}" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;"> </span></h2>
</div>
<div>
<span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"><br /></span>
<span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">I tested the generated WADL with SoapUI, and the program does show all the handlers defined</span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"> including all parameters</span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">. </span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">Unfortunatel</span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">y</span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">, </span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">a WADL is somewhat </span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">stricter</span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"> then an APEX RESTful service definition</span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"> </span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">when</span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"> it comes to case-sensitivity. Parameters have to case-match the resource path definition, which wasn't the case in the </span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">oracle.example.</span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">hr</span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"> RESTful example</span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">. The 5.1 example has one definition per resource/URI template. In earlier version, I have seen multiple definitions with the same URI resource path </span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">(</span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">for example</span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"><span class="NormalTextRun SCXW40032168" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; margin: 0px; padding: 0px; user-select: text;"> </span></span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">employees/{id}</span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">), and in the APEX RESTful repository, parameters are always stored as child records of a resource handler (PUT, GET, …), while </span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">parameters</span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"> can either be on resource template level or on handler level. Makes sense, as the {</span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"><span class="SpellingError SCXW40032168" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/gif; background-position: left bottom; background-repeat: repeat-x; border-bottom: 1px solid transparent; margin: 0px; padding: 0px; user-select: text;">param</span></span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">} part of the path belongs to the resource, but you might want to pass some HTTP header parameters with the PUT request for a resource only, while the GET just needs the resource parameter. Not all parameters from the resource paths were defined as parameters in the resource handlers, so I had to add those. I provided a</span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">n export of the "corrected" example RESTful service on the </span><a class="Hyperlink SCXW40032168" href="https://github.com/crokitta/wadl" rel="noreferrer" style="background-color: transparent; cursor: text; margin: 0px; padding: 0px;" target="_blank"><span class="TextRun Underlined SCXW40032168" lang="EN-US" style="color: #0563c1; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"><span class="NormalTextRun SCXW40032168" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; margin: 0px; padding: 0px; user-select: text;">GitHub project of my WADL generator procedure</span></span></a><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">.</span><span class="EOP SCXW40032168" data-ccp-props="{"201341983":0,"335551550":1,"335551620":1,"335559739":160,"335559740":259}" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;"> </span></div>
</div>
<div class="OutlineElement Ltr SCXW40032168" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: white; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div style="background-color: transparent; padding: 0px; vertical-align: baseline; word-wrap: break-word;">
<span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"><br /></span></div>
<h2 style="background-color: transparent; padding: 0px; vertical-align: baseline; word-wrap: break-word;">
<span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">Contrib</span><span class="TextRun SCXW40032168" lang="EN-US" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">ute</span><span class="EOP SCXW40032168" data-ccp-props="{"201341983":0,"335551550":1,"335551620":1,"335559739":160,"335559740":259}" style="background-color: transparent; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;"> </span></h2>
</div>
<div class="OutlineElement Ltr SCXW40032168" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: white; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;">
<div class="Paragraph SCXW40032168" lang="NL-NL" paraeid="{97dbf2e3-8de5-41d4-b277-b27bd0f8a6c9}{85}" paraid="285104945" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; padding: 0px; user-select: text; vertical-align: baseline; word-wrap: break-word;" xml:lang="NL-NL">
<span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"><br /></span>
<span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">Well, I have a </span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">reasonably</span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"> well working WADL generator for Oracle ORDS/APEX RESTful services now. It sure needs improvement for </span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">other</span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"> cases, I bet. </span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">So,</span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"> if you need to provide a WADL for your RESTful service in APEX, get the code from </span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"><span class="ContextualSpellingAndGrammarError SCXW40032168" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/gif; background-position: left bottom; background-repeat: repeat-x; border-bottom: 1px solid transparent; margin: 0px; padding: 0px; user-select: text;">my</span></span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"><span class="NormalTextRun SCXW40032168" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; margin: 0px; padding: 0px; user-select: text;"> </span></span><a class="Hyperlink SCXW40032168" href="https://github.com/crokitta/wadl" rel="noreferrer" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; cursor: text; margin: 0px; padding: 0px; text-decoration-line: none; user-select: text;" target="_blank"><span class="TextRun Underlined SCXW40032168" lang="EN-US" style="color: #0563c1; font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"><span class="NormalTextRun SCXW40032168" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; margin: 0px; padding: 0px; user-select: text;">GitHub project</span></span></a><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">. If you have enhancements, please </span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">contrib</span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US">ute</span><span class="TextRun SCXW40032168" lang="EN-US" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;" xml:lang="EN-US"> to the code.</span><span class="EOP SCXW40032168" data-ccp-props="{"201341983":0,"335551550":1,"335551620":1,"335559739":160,"335559740":259}" style="font-family: "calibri" , "calibri_msfontservice" , sans-serif; font-size: 11pt; line-height: 19px; margin: 0px; padding: 0px;"> </span><br />
<br /></div>
</div>
Christian Rokitta ♠http://www.blogger.com/profile/07809391154664980631noreply@blogger.com0tag:blogger.com,1999:blog-5742906279879067605.post-62490802326606993452017-10-13T17:21:00.002+02:002017-10-13T17:21:50.119+02:00APEX SmartPivot Plug-in: Release 1.1<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-QYCXC3r82ho/WeDXuQbmj0I/AAAAAAAABRI/i-X6KkkALEAhiBi5DItvct3g7vNP-nmUACLcBGAs/s1600/SmartPivotLogoSquare70.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="70" data-original-width="70" src="https://1.bp.blogspot.com/-QYCXC3r82ho/WeDXuQbmj0I/AAAAAAAABRI/i-X6KkkALEAhiBi5DItvct3g7vNP-nmUACLcBGAs/s1600/SmartPivotLogoSquare70.png" /> </a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
The <a href="http://www.apexsmartpivot.com/" target="_blank">APEX SmartPivot</a> Plug-in is an Oracle Application Express Plug-in that enables users users to analyze data much like they are used to in Excel. It allows to present data in a customizable multilevel data grid. Developers can add the plug-in to any APEX application, just like adding an interactive report.</div>
<br />
<span style="font-size: xx-small;">Website: </span><a href="http://www.apexsmartpivot.com/" style="font-size: x-small;">www.apexsmartpivot.com</a><br />
<h2>
<br /></h2>
<h3>
What’s new in Release 1.1</h3>
<a href="https://1.bp.blogspot.com/-JmDqvfhR46M/WeDWMCZ4eLI/AAAAAAAABQ4/SIxXv5Qzo9ovOmrCHtjuRenEINJroPfDwCLcBGAs/s1600/demo-screenshot2.jpg" imageanchor="1" style="clear: right; float: right; font-size: 24px; font-weight: bold; margin-bottom: 1em; margin-left: 1em; text-align: center;"><br />
</a>The new release of the <a href="http://www.apexsmartpivot.com/" target="_blank">APEX SmartPivot</a> Plug-in focuses on integration with the latest APEX<br />
version:<br />
<h2>
<a href="https://1.bp.blogspot.com/-JmDqvfhR46M/WeDWMCZ4eLI/AAAAAAAABQ4/SIxXv5Qzo9ovOmrCHtjuRenEINJroPfDwCLcBGAs/s1600/demo-screenshot2.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em; text-align: center;"><br />
</a><span style="font-size: x-large;">Users/UI Enhancements</span></h2>
<h3>
<a href="https://1.bp.blogspot.com/-JmDqvfhR46M/WeDWMCZ4eLI/AAAAAAAABQ4/SIxXv5Qzo9ovOmrCHtjuRenEINJroPfDwCLcBGAs/s1600/demo-screenshot2.jpg" imageanchor="1" style="clear: right; float: right; font-size: 24px; margin-bottom: 1em; margin-left: 1em; text-align: center;"><img border="0" data-original-height="391" data-original-width="660" src="https://1.bp.blogspot.com/-JmDqvfhR46M/WeDWMCZ4eLI/AAAAAAAABQ4/SIxXv5Qzo9ovOmrCHtjuRenEINJroPfDwCLcBGAs/s320/demo-screenshot2.jpg" /></a>Font APEX</h3>
<div style="text-align: justify;">
The UI now supports <strong>Font APEX</strong> in APEX version 5.1 (Font Awesome in APEX 5.0). Your pivot report will look consistent with the rest of your application.</div>
<div style="text-align: justify;">
Font APEX can also be used in conditional formatting rules.</div>
<br />
<br />
<h3>
Conditional Formatting</h3>
<div style="text-align: justify;">
Users can define, apply, save and share <strong>conditional formatting</strong> rules with a report layout. Conditional formatting is not restricted to setting text and background colors, but offers to translate (ranges of) values into text. For those users familiar with HTML: the text output can contain HTML, so even images or Font APEX can be used for presentation of the data.</div>
<br />
<div align="center">
<a href="https://3.bp.blogspot.com/-KbyfC_1cEnM/WeDVS7dwLDI/AAAAAAAABQg/14IG1UAJaKUOyre07Iv320IGu_yMfD_IACLcBGAs/s1600/cond-formatting-dialog.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="267" data-original-width="603" height="176" src="https://3.bp.blogspot.com/-KbyfC_1cEnM/WeDVS7dwLDI/AAAAAAAABQg/14IG1UAJaKUOyre07Iv320IGu_yMfD_IACLcBGAs/s400/cond-formatting-dialog.jpg" width="400" /></a></div>
<a href="file:///C:/Users/christian/AppData/Local/Temp/WindowsLiveWriter1286139640/supfiles4C5FA0C/cond-formatting[9].jpg"></a><a href="https://1.bp.blogspot.com/-rwU7TDNV938/WeDVSzULdKI/AAAAAAAABQc/rRfL69R07ZQWbsyTm7maehff8orOyeDZwCLcBGAs/s1600/cond-formatting.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="291" data-original-width="1339" height="138" src="https://1.bp.blogspot.com/-rwU7TDNV938/WeDVSzULdKI/AAAAAAAABQc/rRfL69R07ZQWbsyTm7maehff8orOyeDZwCLcBGAs/s640/cond-formatting.jpg" width="640" /></a><br />
<h3>
Excel Export Enhancement</h3>
When exporting to Excel, the data and format will be kept exactly as in the <a href="http://www.apexsmartpivot.com/" target="_blank">APEX SmartPivot</a> grid report.<br />
<a href="file:///C:/Users/christian/AppData/Local/Temp/WindowsLiveWriter1286139640/supfiles4C5FA0C/excel-export[3].jpg"></a><a href="https://1.bp.blogspot.com/-e8XqpO53srI/WeDVTfhTHkI/AAAAAAAABQo/ZD9lY6F0R-cmf4hN0geKhXV4EoHjn5cCACLcBGAs/s1600/excel-export.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="861" data-original-width="1600" height="344" src="https://1.bp.blogspot.com/-e8XqpO53srI/WeDVTfhTHkI/AAAAAAAABQo/ZD9lY6F0R-cmf4hN0geKhXV4EoHjn5cCACLcBGAs/s640/excel-export.jpg" width="640" /></a><br />
<h2>
<span style="font-size: x-large;">Developers Enhancements</span></h2>
The <a href="http://www.apexsmartpivot.com/" target="_blank">APEX SmartPivot</a> plug-in now supports report columns the same style as APEX Classic or Interactive Reports.<br />
<a href="file:///C:/Users/christian/AppData/Local/Temp/WindowsLiveWriter1286139640/supfiles4C5FA0C/report-columns[3].jpg"></a><a href="https://2.bp.blogspot.com/-ejWzoLsjkcQ/WeDVUPanEBI/AAAAAAAABQw/EhSD5MO5UScPzXNltgOyEg0FpJnlWEvfACLcBGAs/s1600/report-columns.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="662" data-original-width="771" height="549" src="https://2.bp.blogspot.com/-ejWzoLsjkcQ/WeDVUPanEBI/AAAAAAAABQw/EhSD5MO5UScPzXNltgOyEg0FpJnlWEvfACLcBGAs/s640/report-columns.jpg" width="640" /></a><br />
<h2>
<span style="font-size: x-large;">What about APEX 4.2 support?</span></h2>
<div style="text-align: justify;">
Release 1.1 requires APEX version 5.0 or higher. For customers using Oracle Application Express 4.2 version 1.0.5 of the <a href="http://www.apexsmartpivot.com/" target="_blank">APEX SmartPivot</a> plugin is still available and supported.</div>
<div style="text-align: justify;">
<br /></div>
For more information, visit the website: <a href="http://www.apexsmartpivot.com/">www.apexsmartpivot.com</a><br />
and online documentation: <a href="http://docs.apexsmartpivot.com/" target="_blank">docs.apexsmartpivot.com</a><br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-R-lrbZN3Zs8/WeDWfWhBluI/AAAAAAAABQ8/Bybm_z0iNU87ekScbkB-6BLdCUX746PDgCLcBGAs/s1600/Banner2017.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="1600" height="360" src="https://4.bp.blogspot.com/-R-lrbZN3Zs8/WeDWfWhBluI/AAAAAAAABQ8/Bybm_z0iNU87ekScbkB-6BLdCUX746PDgCLcBGAs/s640/Banner2017.png" width="640" /></a></div>
<br />Christian Rokitta ♠http://www.blogger.com/profile/07809391154664980631noreply@blogger.com0tag:blogger.com,1999:blog-5742906279879067605.post-33091357873978241162016-06-26T21:14:00.003+02:002016-06-26T22:23:32.574+02:00Kscope16 APEX Symposium (live) Log<h1 style="font-family: "Open Sans", sans-serif; font-size: 36px; font-weight: 100; line-height: 43.2px;">
<span style="background-color: white; font-size: 16px; line-height: 24px; white-space: pre-wrap;">The Kscope16 APEX Sunday Symposium is entirely dedicated to the upcoming 5.1 version, naturally. </span></h1>
<h1 style="font-family: "Open Sans", sans-serif; font-size: 36px; font-weight: 100; line-height: 43.2px;">
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">Most of the information on APEX 5.1 has been presented at conferences earlier this year, but here at Kscope there are 7 sessions from APEX Development team, entirely dedicated to APEX, which makes this the single most important one-event source of APEX news.</span></div>
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">Here a short summary of the, in my opinion, highlights from the presentations of the Oracle APEX development team´s presentations.</span></div>
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;"><br /></span></div>
</h1>
<h2 style="font-family: "Open Sans", sans-serif; font-size: 30px; font-weight: 100; line-height: 36px;">
<span style="background-color: white;">1) Shakeeb showing improvements and new features in Universal Theme 5.1</span></h2>
<h1 style="font-family: "Open Sans", sans-serif; font-size: 36px; font-weight: 100; line-height: 43.2px;">
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- Font APEX icons replacing Font Awesome. That is: you can choose, but the APEX team did a wonderful job on the APEX Font, like adding declarative icon modifiers (an icon with an additional small icon in the lower right corner) in a different color. This is not only easy to use and very beautiful, but very useful too. I like this a lot.</span></div>
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- Themeroller like enhanced inline modifying of template options of Page Items, Regions, …</span></div>
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- UT JavaScript events are available and usable. Great for someone trying to customize UT, as UT makes extensive use of adding/removing classes on certain events, like hover etc…</span></div>
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- An integrated button builder! Are you kidding? Love this.</span></div>
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- easy upgrade from UT 5.0 to 5.1, if you left your applications UT copy subscribed. Custom components will be left untouched.</span></div>
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- The UT sample application has been refurbished to reflect all the new feature. Very nicely done. This is one of my most favorite references, next to APEX API guide.</span></div>
</h1>
<h3 style="font-family: "Open Sans", sans-serif; font-size: 20px; font-weight: 100; line-height: 24px;">
<span style="background-color: white;">Conclusion:</span></h3>
<h1 style="font-family: "Open Sans", sans-serif; font-size: 36px; font-weight: 100; line-height: 43.2px;">
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">The direction the APEX dev team took when developing UT is continued with these improvements, making the APEX developer life more and more easy. There is a lot (very much!) you will get out-of-the-box with UT in APEX.</span></div>
</h1>
<h2 style="font-family: "Open Sans", sans-serif; font-size: 30px; font-weight: 100; line-height: 36px;">
<span style="background-color: white;">2) Marc talking about Page Designer (enhancements):</span></h2>
<h1 style="font-family: "Open Sans", sans-serif; font-size: 36px; font-weight: 100; line-height: 43.2px;">
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- Component view is now integrated with the new Page Builder IDE as a tab and not a separate page anymore. Legacy Old Component View will be deprecated in 5.1, de-supported and removed in 5.2. The new component view component is fully integrated in the Page Builders client-side mechanism.</span></div>
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- except for some improvements in UI of the attribute tab there are not a lot changes, as far as I can notice. I really would have liked to see some of the features that are currently provided by the browser-plugin-name to be integrated in this release, as these have been proven to be very handy and just give you this extra bit of productivity. The Page Builder, after all, is very click-intensive and will let your mouse run a lot of miles/kilometers and every additional shortcut is welcome.</span></div>
</h1>
<h3 style="font-family: "Open Sans", sans-serif; font-size: 20px; font-weight: 100; line-height: 24px;">
<span style="background-color: white;">plans for Page Designer beyond 5.1:</span></h3>
<h1 style="font-family: "Open Sans", sans-serif; font-size: 36px; font-weight: 100; line-height: 43.2px;">
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- components options tab in attributes pane instead of item in tree</span></div>
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- more intuitive editing when creating new components, instead of error in item/region, like having to enter a query.</span></div>
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;"><br /></span></div>
</h1>
<h2 style="font-family: "Open Sans", sans-serif; font-size: 30px; font-weight: 100; line-height: 36px;">
<span style="background-color: white;">3) Marc on APEX 5.1 Chart enhancements:</span></h2>
<h1 style="font-family: "Open Sans", sans-serif; font-size: 36px; font-weight: 100; line-height: 43.2px;">
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- AnyChart 6.2.0, HTML5 & flash charts, XML 100% compatible, HTML5 default, maps & gantt´s flash only, improved performance</span></div>
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- chart plug-ins with D3.js, Flot and JustGage libs in new packaged chart sample applications. Very impressive demos. Use as reference (for additional JS functionality too)</span></div>
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- declarative support for most Oracle JET Chart components, entire library included, so special charts, not decoratively included can be coded manually.</span></div>
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- Jet charts are default option in builder. Responsive! Query in region source enables multiple series to be based on it.</span></div>
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- upgrade path from AnyChart to Oracle JET-Charts, … with tools, not the plug-in examples</span></div>
</h1>
<h3 style="font-family: "Open Sans", sans-serif; font-size: 20px; font-weight: 100; line-height: 24px;">
<span style="background-color: white;">Conclusion:</span></h3>
<h1 style="font-family: "Open Sans", sans-serif; font-size: 36px; font-weight: 100; line-height: 43.2px;">
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">Charts in APEX 5 very powerful and nicely integrated with Page Builder.</span></div>
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;"><br /></span></div>
</h1>
<h2 style="font-family: "Open Sans", sans-serif; font-size: 30px; font-weight: 100; line-height: 36px;">
<span style="background-color: white;">4) Interactive Grid, Patrick</span></h2>
<h1 style="font-family: "Open Sans", sans-serif; font-size: 36px; font-weight: 100; line-height: 43.2px;">
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">one most talked about and awaited feature of APEX of 5.1, the multi-row edit, next level user interaction component in APEX. The Interactive Grid (IG) is so packed with features, I will only log the highlight, which is still a lot:</span></div>
</h1>
<h3 style="font-family: "Open Sans", sans-serif; font-size: 20px; font-weight: 100; line-height: 24px;">
<span style="background-color: white;">layout and reporting features:</span></h3>
<h1 style="font-family: "Open Sans", sans-serif; font-size: 36px; font-weight: 100; line-height: 43.2px;">
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- simply configurable</span></div>
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- but still possible to write advanced customization</span></div>
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- multiple IG in one page (no limits), master-detail possible, master-multi detail, master-detail-detail, group by formatting</span></div>
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- utilize standard item types in grid columns</span></div>
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- using application upgrade wizard to convert/upgrade from standard tab-form and IA reports to IG</span></div>
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- can be used as report or tab-form. IA features/options brought down to a minimum, based on usage experience for IA</span></div>
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- functionality is fully accessible with keyboard</span></div>
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- column resize</span></div>
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- deferred query changes, allowing to modify multiple filters, etc and afterwards re-query the data</span></div>
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- possible to define column groups</span></div>
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- fixed header scrolling and optional endless scrolling (with AJAX lazy loading?)</span></div>
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- attributes to tackle common performance problems decoratively</span></div>
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- responsive, to some degree</span></div>
</h1>
<h3 style="font-family: "Open Sans", sans-serif; font-size: 20px; font-weight: 100; line-height: 24px;">
<span style="background-color: white;">editing features:</span></h3>
<h1 style="font-family: "Open Sans", sans-serif; font-size: 36px; font-weight: 100; line-height: 43.2px;">
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- edit mode enables row menu (delete, duplicate, add, refresh row …) and multi row selector</span></div>
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- changes (edit, delete, updates, adds) are not immediately submitted to server, user has to submit all changes at once.</span></div>
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- tab to navigate next/previous cells and up-/down-keys to navigate vertically</span></div>
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- textarea popup</span></div>
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- final release is planned with row cascading select-list capability. Yeah!!!</span></div>
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- improved inline-validations error handling</span></div>
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">There is a IG sample application. Have a look at it!</span></div>
</h1>
<h3 style="font-family: "Open Sans", sans-serif; font-size: 20px; font-weight: 100; line-height: 24px;">
<span style="background-color: white;">Conclusion:</span></h3>
<h1 style="font-family: "Open Sans", sans-serif; font-size: 36px; font-weight: 100; line-height: 43.2px;">
<div style="font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition-duration: 0.1s, 0.1s; transition-property: margin-top, margin-bottom; transition-timing-function: ease-out, ease-out; white-space: pre-wrap;">
<span style="background-color: white;">This component is a mayor step forward for creating applications with APEX. End users have been asking and waiting for this feature. Developers have spend (far too) much time, trying to build just a fraction of these functionalities, resulting in avoiding tabular forms, and loosing the build-in features. I´m very excited to finally be able to use the IG in my projects. Very well done, APEX team!!!</span></div>
<div>
<span style="background-color: white;"><br /></span></div>
</h1>
<h2 style="font-family: "Open Sans", sans-serif; font-size: 30px; font-weight: 100; line-height: 36px;">
<span style="background-color: white;">5) Other New 5.1 Features</span></h2>
<h1 style="font-family: "Open Sans", sans-serif; font-size: 36px; font-weight: 100; line-height: 43.2px;">
<div style="font-family: "Open Sans", sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- inline error validation improvement: no page refresh</span></div>
<div style="font-family: "Open Sans", sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- client side validation for required items</span></div>
<div style="font-family: "Open Sans", sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- warn on unsaved changes, default enabled (for new pages), disable for items possible</span></div>
<div style="font-family: "Open Sans", sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- client-side data model, will be accessible in future</span></div>
<div style="font-family: "Open Sans", sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- asynchronous Ajax calls for dynamic actions and declarative client side (page item) conditions</span></div>
<div style="font-family: "Open Sans", sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- HTML5 multiple file upload with file type restriction possibility</span></div>
<div style="font-family: "Open Sans", sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- nice Yes/No item as switch (button group) and not select lists anymore</span></div>
<div style="font-family: "Open Sans", sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- build in dynamic actions for calendar component: (date/event selected, view changed); sample application has been updates with new demos</span></div>
<div style="font-family: "Open Sans", sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- calendar keyboard navigation</span></div>
<div style="font-family: "Open Sans", sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- JavaScript API to access FullCalendar library options</span></div>
<div style="font-family: "Open Sans", sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- Interactive Grid Item Type plugin support</span></div>
<div style="font-family: "Open Sans", sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- RequireJS included in APEX</span></div>
<div style="font-family: "Open Sans", sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- Read-only administrator role in builder</span></div>
<div style="font-family: "Open Sans", sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- remote Trace and Debug (handy for admin to check error at user session)</span></div>
<div style="font-family: "Open Sans", sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- Build Options default ¨excluded¨</span></div>
<div style="font-family: "Open Sans", sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">- improved error page</span></div>
</h1>
<h3 style="font-family: "Open Sans", sans-serif; font-size: 20px; font-weight: 100; line-height: 24px;">
<span style="background-color: white;">Conclusion:</span></h3>
<h1 style="font-family: "Open Sans", sans-serif; font-size: 36px; font-weight: 100; line-height: 43.2px;">
<div>
<div style="font-family: "Open Sans", sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 20px; margin-top: 20px; transition: margin-top 0.1s ease-out, margin-bottom 0.1s ease-out; white-space: pre-wrap;">
<span style="background-color: white;">Many of these features will makes the life of an APEX developer so much (MUCH) easier. I myself have implemented some of these features in every recent APEX project. Now these features are available declarative is great and proves that the APEX development team is growing and expanding APEX with the real-life development in mind. Bravo!</span></div>
</div>
</h1>
Christian Rokitta ♠http://www.blogger.com/profile/07809391154664980631noreply@blogger.com1tag:blogger.com,1999:blog-5742906279879067605.post-79907871685076346192015-10-16T10:55:00.001+02:002015-10-16T10:55:08.570+02:00(Unconfirmed) New Features APEX 5.1<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-CCEgHR5z6vs/ViC6fWMESbI/AAAAAAAAA_E/6iRwK-PfVrI/s1600/APEX51.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="480" src="http://4.bp.blogspot.com/-CCEgHR5z6vs/ViC6fWMESbI/AAAAAAAAA_E/6iRwK-PfVrI/s640/APEX51.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">by <a href="https://twitter.com/APEXORADEV" target="_blank">@APEXORADEV</a></td></tr>
</tbody></table><br />
<br />
Following the news feeds on the internet, tagged #orclapex, a series of slides presented at a UKOUG event came along that I think are worth to get summarized in a blog post and shared with the community. It's a list of (unconfirmed) new features we could find in APEX release 5.1.<br />
<br />
The list looks impressive. The APEX Development Team once again would prove, that development of APEX is much driven by developer/community feedback and customer demands.<br />
<br />
<div class="MsoListParagraphCxSpFirst" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;"><!--[if !supportLists]--><span lang="EN-US" style="font-family: Symbol; mso-ansi-language: EN-US; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> <b> </b></span></span><!--[endif]--><span lang="EN-US"><b>Interactive Grid</b><o:p></o:p></span></div><div class="MsoListParagraphCxSpMiddle" style="margin-left: 72.0pt; mso-add-space: auto; mso-list: l0 level2 lfo1; text-indent: -18.0pt;"><!--[if !supportLists]--><span lang="EN-US" style="font-family: "Courier New"; mso-ansi-language: EN-US; mso-fareast-font-family: "Courier New";">o<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span lang="EN-US">Modern, rich & interactive multi-row editing<o:p></o:p></span></div><div class="MsoListParagraphCxSpMiddle" style="margin-left: 72.0pt; mso-add-space: auto; mso-list: l0 level2 lfo1; text-indent: -18.0pt;"><!--[if !supportLists]--><span lang="EN-US" style="font-family: "Courier New"; mso-ansi-language: EN-US; mso-fareast-font-family: "Courier New";">o<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span lang="EN-US">Used for Master > Detail(s), Master > Detail > Detail<o:p></o:p></span></div><div class="MsoListParagraphCxSpMiddle" style="margin-left: 72.0pt; mso-add-space: auto; mso-list: l0 level2 lfo1; text-indent: -18.0pt;"><!--[if !supportLists]--><span lang="EN-US" style="font-family: "Courier New"; mso-ansi-language: EN-US; mso-fareast-font-family: "Courier New";">o<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span lang="EN-US">Great for existing Forms customers, who are used to having rich Master > Detail blocks<o:p></o:p></span></div><div class="MsoListParagraphCxSpMiddle" style="margin-left: 72.0pt; mso-add-space: auto; mso-list: l0 level2 lfo1; text-indent: -18.0pt;"><!--[if !supportLists]--><span lang="EN-US" style="font-family: "Courier New"; mso-ansi-language: EN-US; mso-fareast-font-family: "Courier New";">o<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span lang="EN-US">Interactive Report style end-user customization, but better!<o:p></o:p></span></div><div class="MsoListParagraphCxSpMiddle" style="margin-left: 72.0pt; mso-add-space: auto; mso-list: l0 level2 lfo1; text-indent: -18.0pt;"><!--[if !supportLists]--><span lang="EN-US" style="font-family: "Courier New"; mso-ansi-language: EN-US; mso-fareast-font-family: "Courier New";">o<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span lang="EN-US">Mid-term goal to replace Interactive Reports, Tabular Forms and Websheet Data Grids<o:p></o:p></span></div><div class="MsoListParagraphCxSpMiddle" style="margin-left: 72.0pt; mso-add-space: auto; mso-list: l0 level2 lfo1; text-indent: -18.0pt;"><!--[if !supportLists]--><span lang="EN-US" style="font-family: "Courier New"; mso-ansi-language: EN-US; mso-fareast-font-family: "Courier New";">o<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span lang="EN-US">Fast, Responsive, JSON-based, lightweight AJAX communications<o:p></o:p></span></div><div class="MsoListParagraphCxSpMiddle" style="margin-left: 72.0pt; mso-add-space: auto; mso-list: l0 level2 lfo1; text-indent: -18.0pt;"><!--[if !supportLists]--><span lang="EN-US" style="font-family: "Courier New"; mso-ansi-language: EN-US; mso-fareast-font-family: "Courier New";">o<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span lang="EN-US">Using jQuery UI Widget Factory<o:p></o:p></span></div><div class="MsoListParagraphCxSpMiddle" style="margin-left: 72.0pt; mso-add-space: auto; mso-list: l0 level2 lfo1; text-indent: -18.0pt;"><!--[if !supportLists]--><span lang="EN-US" style="font-family: "Courier New"; mso-ansi-language: EN-US; mso-fareast-font-family: "Courier New";">o<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span lang="EN-US">Infinite scrolling with fixed headers and columns<o:p></o:p></span></div><div class="MsoListParagraphCxSpMiddle" style="margin-left: 72.0pt; mso-add-space: auto; mso-list: l0 level2 lfo1; text-indent: -18.0pt;"><!--[if !supportLists]--><span lang="EN-US" style="font-family: "Courier New"; mso-ansi-language: EN-US; mso-fareast-font-family: "Courier New";">o<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span lang="EN-US">RTL support<o:p></o:p></span></div><div class="MsoListParagraphCxSpMiddle" style="margin-left: 72.0pt; mso-add-space: auto; mso-list: l0 level2 lfo1; text-indent: -18.0pt;"><!--[if !supportLists]--><span lang="EN-US" style="font-family: "Courier New"; mso-ansi-language: EN-US; mso-fareast-font-family: "Courier New";">o<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span lang="EN-US">Accessible, with outstanding keyboard support<o:p></o:p></span></div><div class="MsoListParagraphCxSpMiddle" style="margin-left: 72.0pt; mso-add-space: auto; mso-list: l0 level2 lfo1; text-indent: -18.0pt;"><!--[if !supportLists]--><span lang="EN-US" style="font-family: "Courier New"; mso-ansi-language: EN-US; mso-fareast-font-family: "Courier New";">o<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span lang="EN-US">Expose all existing Item types for use in Grid Columns<o:p></o:p></span></div><div class="MsoListParagraphCxSpMiddle" style="margin-left: 72.0pt; mso-add-space: auto; mso-list: l0 level2 lfo1; text-indent: -18.0pt;"><!--[if !supportLists]--><span lang="EN-US" style="font-family: "Courier New"; mso-ansi-language: EN-US; mso-fareast-font-family: "Courier New";">o<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span lang="EN-US">Plug-in infrastructure enhancements to allow item plug-ins that can be used in this context<o:p></o:p></span></div><div class="MsoListParagraphCxSpMiddle" style="margin-left: 72.0pt; mso-add-space: auto; mso-list: l0 level2 lfo1; text-indent: -18.0pt;"><!--[if !supportLists]--><span lang="EN-US" style="font-family: "Courier New"; mso-ansi-language: EN-US; mso-fareast-font-family: "Courier New";">o<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span lang="EN-US">Declarative support for all APEX server processing; validations, processes, computations<o:p></o:p></span></div><div class="MsoListParagraphCxSpMiddle" style="margin-left: 72.0pt; mso-add-space: auto; mso-list: l0 level2 lfo1; text-indent: -18.0pt;"><!--[if !supportLists]--><span lang="EN-US" style="font-family: "Courier New"; mso-ansi-language: EN-US; mso-fareast-font-family: "Courier New";">o<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span lang="EN-US">Allow use of custom PL/SQL API’s instead of native DML processes, if necessary<o:p></o:p></span></div><div class="MsoListParagraphCxSpMiddle" style="margin-left: 72.0pt; mso-add-space: auto; mso-list: l0 level2 lfo1; text-indent: -18.0pt;"><!--[if !supportLists]--><span lang="EN-US" style="font-family: "Courier New"; mso-ansi-language: EN-US; mso-fareast-font-family: "Courier New";">o<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span lang="EN-US">Declarative support for Cascading LOV’s and Dynamic Actions<o:p></o:p></span></div><div class="MsoListParagraphCxSpMiddle" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;"><!--[if !supportLists]--><span lang="EN-US" style="font-family: Symbol; mso-ansi-language: EN-US; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> <b> </b></span></span><!--[endif]--><span lang="EN-US"><b>New Charts</b><o:p></o:p></span></div><div class="MsoListParagraphCxSpMiddle" style="margin-left: 72.0pt; mso-add-space: auto; mso-list: l0 level2 lfo1; text-indent: -18.0pt;"><!--[if !supportLists]--><span lang="EN-US" style="font-family: "Courier New"; mso-ansi-language: EN-US; mso-fareast-font-family: "Courier New";">o<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span lang="EN-US">New charting engine build by Oracle<o:p></o:p></span></div><div class="MsoListParagraphCxSpMiddle" style="margin-left: 72.0pt; mso-add-space: auto; mso-list: l0 level2 lfo1; text-indent: -18.0pt;"><!--[if !supportLists]--><span lang="EN-US" style="font-family: "Courier New"; mso-ansi-language: EN-US; mso-fareast-font-family: "Courier New";">o<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span lang="EN-US">HTML5 only<o:p></o:p></span></div><div class="MsoListParagraphCxSpMiddle" style="margin-left: 72.0pt; mso-add-space: auto; mso-list: l0 level2 lfo1; text-indent: -18.0pt;"><!--[if !supportLists]--><span lang="EN-US" style="font-family: "Courier New"; mso-ansi-language: EN-US; mso-fareast-font-family: "Courier New";">o<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span lang="EN-US">Responsive and accessible<o:p></o:p></span></div><div class="MsoListParagraphCxSpMiddle" style="margin-left: 72.0pt; mso-add-space: auto; mso-list: l0 level2 lfo1; text-indent: -18.0pt;"><!--[if !supportLists]--><span lang="EN-US" style="font-family: "Courier New"; mso-ansi-language: EN-US; mso-fareast-font-family: "Courier New";">o<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span lang="EN-US">Migration facility for existing charts<o:p></o:p></span></div><div class="MsoListParagraphCxSpMiddle" style="margin-left: 72.0pt; mso-add-space: auto; mso-list: l0 level2 lfo1; text-indent: -18.0pt;"><!--[if !supportLists]--><span lang="EN-US" style="font-family: "Courier New"; mso-ansi-language: EN-US; mso-fareast-font-family: "Courier New";">o<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span lang="EN-US">Same chart types as 5.0 + new types (like Bubble, Funnel, …)<o:p></o:p></span></div><div class="MsoListParagraphCxSpMiddle" style="margin-left: 72.0pt; mso-add-space: auto; mso-list: l0 level2 lfo1; text-indent: -18.0pt;"><!--[if !supportLists]--><span lang="EN-US" style="font-family: "Courier New"; mso-ansi-language: EN-US; mso-fareast-font-family: "Courier New";">o<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span lang="EN-US">Advanced customization available through documented JavaScript API’s<o:p></o:p></span></div><div class="MsoListParagraphCxSpMiddle" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;"><!--[if !supportLists]--><span lang="EN-US" style="font-family: Symbol; mso-ansi-language: EN-US; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> <b> </b></span></span><!--[endif]--><span lang="EN-US"><b>Page Designer Enhancements</b><o:p></o:p></span></div><div class="MsoListParagraphCxSpMiddle" style="margin-left: 72.0pt; mso-add-space: auto; mso-list: l0 level2 lfo1; text-indent: -18.0pt;"><!--[if !supportLists]--><span lang="EN-US" style="font-family: "Courier New"; mso-ansi-language: EN-US; mso-fareast-font-family: "Courier New";">o<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span lang="EN-US">2-column mode<o:p></o:p></span></div><div class="MsoListParagraphCxSpMiddle" style="margin-left: 72.0pt; mso-add-space: auto; mso-list: l0 level2 lfo1; text-indent: -18.0pt;"><!--[if !supportLists]--><span lang="EN-US" style="font-family: "Courier New"; mso-ansi-language: EN-US; mso-fareast-font-family: "Courier New";">o<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span lang="EN-US">Component View integrated into Page Designer<o:p></o:p></span></div><div class="MsoListParagraphCxSpMiddle" style="margin-left: 72.0pt; mso-add-space: auto; mso-list: l0 level2 lfo1; text-indent: -18.0pt;"><!--[if !supportLists]--><span lang="EN-US" style="font-family: "Courier New"; mso-ansi-language: EN-US; mso-fareast-font-family: "Courier New";">o<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span lang="EN-US">Create Component prompt for key information<o:p></o:p></span></div><div class="MsoListParagraphCxSpMiddle" style="margin-left: 72.0pt; mso-add-space: auto; mso-list: l0 level2 lfo1; text-indent: -18.0pt;"><!--[if !supportLists]--><span lang="EN-US" style="font-family: "Courier New"; mso-ansi-language: EN-US; mso-fareast-font-family: "Courier New";">o<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span lang="EN-US">Property Editor multi-tab mode<o:p></o:p></span></div><div class="MsoListParagraphCxSpMiddle" style="margin-left: 72.0pt; mso-add-space: auto; mso-list: l0 level2 lfo1; text-indent: -18.0pt;"><!--[if !supportLists]--><span lang="EN-US" style="font-family: "Courier New"; mso-ansi-language: EN-US; mso-fareast-font-family: "Courier New";">o<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span lang="EN-US">Property Editor search capability<o:p></o:p></span></div><div class="MsoListParagraphCxSpMiddle" style="margin-left: 72.0pt; mso-add-space: auto; mso-list: l0 level2 lfo1; text-indent: -18.0pt;"><!--[if !supportLists]--><span lang="EN-US" style="font-family: "Courier New"; mso-ansi-language: EN-US; mso-fareast-font-family: "Courier New";">o<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span lang="EN-US">Style and contrast enhancements<o:p></o:p></span></div><div class="MsoListParagraphCxSpMiddle" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;"><!--[if !supportLists]--><span lang="EN-US" style="font-family: Symbol; mso-ansi-language: EN-US; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> <b> </b></span></span><!--[endif]--><span lang="EN-US"><b>Greatly simplified Wizards</b><o:p></o:p></span></div><div class="MsoListParagraphCxSpMiddle" style="margin-left: 72.0pt; mso-add-space: auto; mso-list: l0 level2 lfo1; text-indent: -18.0pt;"><!--[if !supportLists]--><span lang="EN-US" style="font-family: "Courier New"; mso-ansi-language: EN-US; mso-fareast-font-family: "Courier New";">o<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span lang="EN-US">Fewer steps, more defaults<o:p></o:p></span></div><div class="MsoListParagraphCxSpMiddle" style="margin-left: 72.0pt; mso-add-space: auto; mso-list: l0 level2 lfo1; text-indent: -18.0pt;"><!--[if !supportLists]--><span lang="EN-US" style="font-family: "Courier New"; mso-ansi-language: EN-US; mso-fareast-font-family: "Courier New";">o<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span lang="EN-US">Attributes no longer exposed in wizards can easily be edited in Page Designer post-creation<o:p></o:p></span></div><div class="MsoListParagraphCxSpLast" style="margin-left: 72.0pt; mso-add-space: auto; mso-list: l0 level2 lfo1; text-indent: -18.0pt;"><!--[if !supportLists]--><span lang="EN-US" style="font-family: "Courier New"; mso-ansi-language: EN-US; mso-fareast-font-family: "Courier New";">o<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span lang="EN-US">Consistency across component types<o:p></o:p></span></div><br />
<div class="MsoNormal"><br />
</div><div class="MsoNormal">If you miss a feature rich, interactive, drag-n-drop enabled, Excel-like data analyzing component in this list, no worries: you still can choose to integrate the APEX SmartPivot plug-in to greatly enhance your application, even when upgrading to APEX 5.1.</div><div class="MsoNormal"></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="http://www.apexsmartpivot.com/" target="_blank"><img alt="APEX SmartPivot Plugin" border="0" height="99" src="http://1.bp.blogspot.com/-hx1vEVznOGE/ViC5ZAZC1BI/AAAAAAAAA-4/hl0rvVVgH-4/s640/SmartPivotLogo.jpg" title="" width="640" /></a></div><div class="MsoNormal"><br />
</div>Christian Rokitta ♠http://www.blogger.com/profile/07809391154664980631noreply@blogger.com3tag:blogger.com,1999:blog-5742906279879067605.post-52926780876643428992014-03-19T10:47:00.001+01:002014-03-19T10:51:41.977+01:00Join me at KScope 14 in Seattle<p><a href="http://lh3.ggpht.com/-f0LjebWyoIc/Uylnu4SK1aI/AAAAAAAAAz8/21yA0z4wiZY/s1600-h/kscope14_seattle%25255B7%25255D.jpg"><img title="kscope14_seattle" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; float: none; padding-top: 0px; padding-left: 0px; margin-left: auto; border-left: 0px; display: block; padding-right: 0px; margin-right: auto" border="0" alt="kscope14_seattle" src="http://lh3.ggpht.com/-L6TB6vIcj0w/UylnvvmfiFI/AAAAAAAAA0E/nm3OvTOTkkA/kscope14_seattle_thumb%25255B5%25255D.jpg?imgmax=800" width="846" height="246"></a></p> <p align="justify">My first <a href="http://www.odtug.com/" target="_blank">ODTUG</a> Kaleidoscope conference was Monterey in 2009. I was very impressed with the speaker lineup and managed to convince my manager to fund trip and conference. The conference was great in every aspect: Lots of good quality sessions, perfect food and lots of people to talk too. What I like most about KScope: it’s all focused on us developers; making us feel comfortable and creating an atmosphere, almost like you are a part of one big family. Speakers, fellow developers, Oracle development teams, everybody comes for the same reason: share knowledge. I was so impressed with the conference format and got to meet so many people, I decided to come back again. Another thing I learned: Being an Oracle developer for many years, I too have knowledge, people are interested in hearing and learning from. When the Call-for-Papers for KScope 10 was opened a few months later, I submitted 2 abstract. Unfortunately these didn’t get accepted and being busy starting up my own business in 2010, I had to miss that year’s conference. KScope 11 (Longbeach, CA), 12 (San Antonio, TX) and 13 (New Orleans, LA) I managed to participate again, this time as a presenter myself. Again, the events were perfectly organized and I went home with my luggage full of inspiration and ideas. <p align="justify">I’m already looking forward to present at KScope 14 in Seattle this year. It feels like a family reunion. I still think: this is one of the best conferences to learn, meet, expand your network and have fun at the same time, worth the money and 12 hour flight. It pays off for me, definitely. <p align="justify">Don’t forget: ODTUG is organizing an <a href="http://competition.odtug.com/apex/f?p=APEXTHEMING:HOME:0" target="_blank">APEX Theming Competition</a> his year. Winners will be announced during the conference. I was asked to take a seat in the committee to judge the submitted themes, alongside with Jorge Rimblas and Shakeeb Rahman. BTW: you don’t have to be in Seattle to qualify for submitting your work. <p align="justify">Visit the <a href="http://www.kscope14.com" target="_blank">KScope</a> site for information about the event. <p> <p><a href="http://www.kscope14.com" target="_blank"><img style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; float: none; padding-top: 0px; padding-left: 0px; margin-left: auto; border-left: 0px; display: block; padding-right: 0px; margin-right: auto" border="0" src="http://kscope14.com/templates/kscope14-home/images/kscope14-logo.jpg"></a> <p> </p> <p><a href="http://lh6.ggpht.com/-2bRfGknAcLo/UylnwCjMohI/AAAAAAAAA0M/vLApdmMGTaQ/s1600-h/kscope14%25255B5%25255D.jpg"><img title="kscope14" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; float: none; padding-top: 0px; padding-left: 0px; margin-left: auto; border-left: 0px; display: block; padding-right: 0px; margin-right: auto" border="0" alt="kscope14" src="http://lh3.ggpht.com/-pEW0JJQDYgo/UylnwlzLEXI/AAAAAAAAA0U/1Wtr1YrQDCY/kscope14_thumb%25255B3%25255D.jpg?imgmax=800" width="846" height="250"></a></p> Christian Rokitta ♠http://www.blogger.com/profile/07809391154664980631noreply@blogger.com0tag:blogger.com,1999:blog-5742906279879067605.post-2229555468393157842014-03-07T13:24:00.001+01:002019-05-28T15:41:30.820+02:00Declarative ReFlow Table Reports in Theme 25<br />
<a href="http://lh5.ggpht.com/-TJjMnQgEUuQ/Uxm423GE_MI/AAAAAAAAAxY/8ba5V05wIwQ/s1600-h/reflow_table_013.jpg"><img alt="reflow_table_01" border="0" src="https://lh6.ggpht.com/-ebHZpT23fn0/Uxm43s2eTeI/AAAAAAAAAxc/8FYEEH_FQT0/reflow_table_01_thumb2.jpg?imgmax=800" height="431" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="reflow_table_01" width="640"></a><br />
<div align="justify">
<br />
A while ago, at KScope 14 in New Orleans, I presented on Responsive Web Design with APEX Theme 25. One of the topics of my presentation was the lack of responsiveness of standard reports in Oracle Application Express. Meanwhile there were several attempts/solutions to make Theme 25 reports more responsive.</div>
<div align="justify">
<br />
One approach is to add custom CSS code for those columns to hide on specific device sizes, using @media queries:</div>
<div align="justify">
<br /></div>
<div align="left">
<a href="http://lh4.ggpht.com/-d_l7OJrrKuM/Uxm43--XP4I/AAAAAAAAAxo/-QPfhKw2a8g/s1600-h/rwdtables_014.png" style="background-color: white;"><img alt="rwdtables_01" border="0" src="https://lh3.ggpht.com/-GLN-g3QzEEI/Uxm44u5jS4I/AAAAAAAAAxw/MAh_B7N-Ysw/rwdtables_01_thumb2.png?imgmax=800" height="194" style="background-image: none; border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="rwdtables_01" width="640"></a></div>
<div align="justify">
Major disadvantage of this approach is, that the user is getting less information on smaller devices. Instead of just hiding the data, it would be much nicer to present the data in a different, appropriate way, like rearranging the data in a fashion it fit on the small screen and/or displaying it optionally (on user demand). One technique to realize this is called “<strong>Reflow Tables</strong>”.</div>
<div align="justify">
<br />
A reflow table works by collapsing the table columns into a stacked presentation that looks like blocks of label/data pairs for each row. One particular nice implementation of this technique is the <a href="http://fooplugins.com/plugins/footable-jquery/" target="_blank">FooTable jQuery</a> plugin.</div>
<div align="justify">
<br /></div>
<div align="justify">
Recently <a href="http://dgielis.blogspot.nl/2014/02/some-help-with-oracle-apex-theming.html" target="_blank">Dimitri Gielis published a solution/demo</a> based on this jQuery plugin. Using his approach, you will have to add a custom report template for each report you want to responsify. The problem with the FooTable plugin is: the definition of which column to “reflow” on a specific resolution has to be placed in the table header, which is not accessible in APEX by means of declarative parameterization (hu????). Plus, the plugin expects the report table to be a direct child element of a DIV element, which does not apply for standard APEX report templates, where the actual data table is enclosed by another table, that is used for positioning pagination elements and buttons. So I see the point in creating a separate report template, as Dimitri did, but you are losing a lot of the standard APEX functionality like this.</div>
<div align="justify">
<br /></div>
<div align="justify">
I tried a different approach: modify the FooTable JavaScript and CSS, so it will work with the standard APEX report template. My main goal was, to be able to declaratively configure any (Theme 25) classic report to be responsive, which means:</div>
<div align="justify">
<br /></div>
<ul>
<li> <div align="justify">
add a possibility to use the <strong><em>Report Attributes > Layout and Pagination > Report Attribute Substitution</em></strong> to indicate/trigger that a table uses the reflow mechanism</div>
</li>
<li> <div align="justify">
possibility to add classes to <strong><em>Report Attributes > Column Attributes > Column Formatting > CSS Class</em></strong> to hide/reflow columns depending on device/screen width (remember: the Theme 25 grid is basically a number of fixed width grid definitions)</div>
</li>
<li> <div align="justify">
provide/initialize the FooTable plugin with the Theme 25 grid steps and define appropriate class names for these</div>
</li>
</ul>
<div align="justify">
Here is the result (<a href="http://apex.oracle.com/pls/apex/f?p=58479:6:0::NO" target="_blank">live demo</a>):</div>
<div align="justify">
<br /></div>
<div align="justify">
<a href="http://lh6.ggpht.com/-UIm1U2b2nYU/Uxm45G70CTI/AAAAAAAAAx0/TI7CbDoclwQ/s1600-h/rwdtables_02%25255B4%25255D.png"><img alt="rwdtables_02" border="0" src="https://lh3.ggpht.com/-oJiaWoslRtI/Uxm45lrncQI/AAAAAAAAAyA/G070R8xzy4U/rwdtables_02_thumb%25255B2%25255D.png?imgmax=800" height="768" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="rwdtables_02" width="688"></a></div>
<h1 align="justify">
</h1>
<h1 align="justify">
How it works</h1>
<div align="justify">
<strong><span style="color: red;">Warning:</span></strong> <span style="color: #c0504d;">this solution does not work with Partial Page Refresh enabled (out-of-the-box). This could be done using an dynamic action to reinitialize the ApexFooTable each time a PPR occurs for the report region, calling the JavaScript function</span> <span style="font-family: "consolas";"><strong>initFoo();</strong></span></div>
<div align="justify">
<strong><br /></strong></div>
<div align="justify">
<strong>Installation:</strong></div>
<ul>
<li> <div align="justify">
Download the zip containing all necessary resources <a href="http://www.rokit.nl/blog/ApexReflowTableReports.zip" target="_blank">here</a></div>
</li>
<li> <div align="justify">
Unzip the content and place the <strong>apexfootable</strong> folder somewhere on your server</div>
</li>
<li> <div align="justify">
add the following URL references to your page, or even better, your page template:</div>
</li>
</ul>
<div align="justify">
<br /></div>
<div align="justify">
<a href="http://lh6.ggpht.com/-mCRl3XJ2uC8/Uxm46D8oaAI/AAAAAAAAAyE/BgIuG0BiMCs/s1600-h/rwdtables_03%25255B4%25255D.png"><img alt="rwdtables_03" border="0" src="https://lh4.ggpht.com/-58_h9tS2Mb4/Uxm46qIoI3I/AAAAAAAAAyM/6YBOrbaLH08/rwdtables_03_thumb%25255B2%25255D.png?imgmax=800" height="427" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="rwdtables_03" width="640"></a></div>
<div align="justify">
<a href="http://lh5.ggpht.com/-g-vsYCRJzOQ/Uxm46yzsHCI/AAAAAAAAAyU/qHKbsGoKBdw/s1600-h/rwdtables_04%25255B4%25255D.png"><img alt="rwdtables_04" border="0" src="https://lh4.ggpht.com/-y9TnLdV4dME/Uxm47ZqRcqI/AAAAAAAAAyc/B3altVDbtj8/rwdtables_04_thumb%25255B2%25255D.png?imgmax=800" height="397" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="rwdtables_04" width="640"></a></div>
<strong><br /></strong>
<strong>Configuration:</strong><br />
<br />
Create your classic report (or take any existing classic report) and configure the reflow functionality by adding “<strong>data-reflow</strong>” to the report’s <strong>Layout and Pagination</strong> property:<br />
<br />
<a href="http://lh6.ggpht.com/-mkRsNp30v5o/Uxm479DdIWI/AAAAAAAAAyo/GidfQ5DyLkE/s1600-h/rwdtables_05%25255B4%25255D.png"><img alt="rwdtables_05" border="0" src="https://lh3.ggpht.com/-avOjkn7NEQQ/Uxm48ugHXkI/AAAAAAAAAys/rtVsr8QrK8A/rwdtables_05_thumb%25255B2%25255D.png?imgmax=800" height="474" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="rwdtables_05" width="640"></a><br />
<br />
Add one of the defined “hide-” classes to every column you want to hide for a certain screen size (see reference table below):<br />
<br />
<a href="http://lh5.ggpht.com/-2FfrEQSjK8I/Uxm480Nc5SI/AAAAAAAAAy4/R6gWmo1oKIA/s1600-h/rwdtables_06%25255B4%25255D.png"><img alt="rwdtables_06" border="0" src="https://lh4.ggpht.com/-hl00ah9_-Fs/Uxm49gBkrkI/AAAAAAAAAy8/Fsaua7dRZvA/rwdtables_06_thumb%25255B2%25255D.png?imgmax=800" height="480" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="rwdtables_06" width="619"></a><br />
<br />
Available ApexFooTable <strong>hide-</strong> classes are (derived from Theme 25 grid @media queries):<br />
<br />
<table border="1" cellpadding="2" cellspacing="0" style="width: 740px;"> <tbody>
<tr> <td valign="top" width="370"><strong>Class Name</strong></td> <td valign="top" width="370"><strong>breakpoints/screensize when column will be hidden</strong></td></tr>
<tr> <td valign="top" width="370">hide-all</td> <td valign="top" width="370">column will always be hidden and information placed in reflow row</td></tr>
<tr> <td valign="top" width="370">hide-desktop-l</td> <td valign="top" width="370">< 1900 px</td></tr>
<tr> <td valign="top" width="370">hide-desktop-m</td> <td valign="top" width="370">< 1660 px</td></tr>
<tr> <td valign="top" width="370">hide-desktop-s</td> <td valign="top" width="370">< 1420 px</td></tr>
<tr> <td valign="top" width="370">hide-desktop-xs</td> <td valign="top" width="370">< 1260 px</td></tr>
<tr> <td valign="top" width="370">hide-tablet, hide tablet-l</td> <td valign="top" width="370">< 1025 px (iPad/tablet Landscape)</td></tr>
<tr> <td valign="top" width="370">hide-tablet-p</td> <td valign="top" width="370">< 960 px (tablet Portrait)</td></tr>
<tr> <td valign="top" width="370">hide-phone, hide-phone-l</td> <td valign="top" width="370">< 768 px (smartphone Landscape)</td></tr>
<tr> <td valign="top" width="370">hide-phone-p</td> <td valign="top" width="370">< 480 px (smartphone Portrait)</td></tr>
</tbody></table>
<br />
That’s it. Give it a try. If you encounter any problems, let me know.<br />
<br />
<br />
<a href="http://www.themes4apex.com/"><img alt="themes4apex" border="0" src="https://lh5.ggpht.com/-ocX73wq_7WA/Uxm4-PQDB5I/AAAAAAAAAzE/_Tp2-LSKkvo/themes4apex%25255B6%25255D.jpg?imgmax=800" height="79" style="background-image: none; border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="themes4apex" width="500"></a>Christian Rokitta ♠http://www.blogger.com/profile/07809391154664980631noreply@blogger.com9tag:blogger.com,1999:blog-5742906279879067605.post-50263669115151462852013-12-02T16:27:00.000+01:002013-12-03T10:39:47.138+01:00Pure CSS3 Org-Tree with APEX List<a href="http://apex.oracle.com/pls/apex/f?p=oracleapexgeekerydemoapp:familytree:0::NO" target="_blank" title="Oracle & APEX Geekery Demo Application"><img alt="employees-tree" border="0" height="388" src="http://lh6.ggpht.com/-2JzGMEpgZgY/UpcqIZhx5pI/AAAAAAAAAv0/l9-KryZAUq0/employees-tree%25255B9%25255D.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="employees-tree" width="750" /></a><br />
I found this little CSS3 snippet gem on <a href="http://thecodeplayer.com/walkthrough/css3-family-tree" target="_blank">TheCodePlayer.com</a>: nested HTML unordered lists styled as a hierarchical tree structure just by applying some (very nifty) CSS selectors. Naturally I had to try this in APEX. With some minor modifications in the CSS and creating a simple List Template, the code works great for visualizing hierarchical data, like for the Employee/Manager relationship used in the <a href="http://apex.oracle.com/pls/apex/f?p=oracleapexgeekerydemoapp:familytree:0::NO" target="_blank">demo</a>.<br />
Here the step-by-step tutorial to implement this solution in Application Express:<br />
<h1>Nested List Template</h1>If you have a look at the original code snippet, you will see a DIV container enclosing a simple nested list:<br />
<span style="background-color: yellow; font-family: Courier New;"></span><span new=""><br />
</span><br />
<pre class="brush: plain;"><span new=""><div class="tree">
<ul>
<li>
<a href="#">Parent</a>
<ul>
<li>
<a href="#">Child</a>
<ul>
<li>
<a href="#">Grand Child</a>
</li>
</ul>
</li>
<li>
…
…
</li>
</ul>
</li>
</ul>
</div></span></pre>Nested lists can easily be implemented with a List Template. I created a new template (name: Org Tree) from scratch with the following definition:<br />
<h2>Before List Entry:</h2><pre><div class="tree">
<ul>
</pre><h2>Template Definition</h2><table border="1" cellpadding="2" cellspacing="0" style="width: 740px;"><tbody>
<tr> <td valign="top" width="370">List Template Current</td> <td valign="top" width="370"><li><a href="#LINK#">#TEXT#</a></li></td></tr>
<tr> <td valign="top" width="370">List Template Noncurrent</td> <td valign="top" width="370"><li><a href="#LINK#">#TEXT#</a></li></td></tr>
</tbody></table><h2>Before Sublist Entry</h2><pre><ul></pre><h2>Sublist Entry</h2><table border="1" cellpadding="2" cellspacing="0" style="width: 742px;"><tbody>
<tr> <td valign="top" width="370">Sublist Template Current</td> <td valign="top" width="370"><pre><li><a href="#LINK#">#TEXT#</a></li></pre></td></tr>
<tr> <td valign="top" width="370">Sublist Template Noncurrent</td> <td valign="top" width="370"><pre><li><a href="#LINK#">#TEXT#</a></li></pre></td></tr>
</tbody></table><h2>After Sublist Entry</h2><pre></ul></pre><h2>After List Entry</h2><pre></ul>
</div>
</pre><h1>The List</h1>That’s it. Now define a hierarchical SQL query (I took the EMP example from the “Create List Wizard”) and create a List Shared Component:<br />
<a href="http://lh5.ggpht.com/--SXJmGLG4pw/UpdteQ1A2YI/AAAAAAAAAwE/VwF-5aPoOUw/s1600-h/list-tree01%25255B4%25255D.jpg"><img alt="list-tree01" border="0" height="466" src="http://lh4.ggpht.com/-qjQzmQyVMqo/UpdtfH08YxI/AAAAAAAAAwI/ANTx5bxNx0I/list-tree01_thumb%25255B2%25255D.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="list-tree01" width="750" /></a><br />
<h1><u>The Page</u></h1>The page is where the list and the <strong>List Template</strong> come together in a region. Use the “Create Region” wizard to add a region to your page using the list en template we just defined:<br />
<a href="http://lh5.ggpht.com/-VLCbeHxyydw/UpdtgBKV3gI/AAAAAAAAAwQ/lwgfZcyJoMc/s1600-h/list-tree03%25255B4%25255D.jpg"><img alt="list-tree03" border="0" height="234" src="http://lh3.ggpht.com/-p6wE-0YYhcU/UpdtgrYlURI/AAAAAAAAAwc/RMJa0bSIfEU/list-tree03_thumb%25255B2%25255D.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="list-tree03" width="750" /></a><br />
<h1>The CSS</h1>I copied the original CSS snippet from <a href="http://thecodeplayer.com/walkthrough/css3-family-tree" target="_blank">TheCodePlayer.com</a> and placed this into the <strong>Inline CSS property</strong> of my page. I had to make a minor modification, because when resizing the page (I’m using Theme 25 here) the tree structure would break. So here is the final CSS code as used in my <a href="http://apex.oracle.com/pls/apex/f?p=oracleapexgeekerydemoapp:familytree:0::NO" target="_blank"></a><a href="https://apex.oracle.com/pls/apex/f?p=oracleapexgeekerydemoapp:1" target="_blank">demo page</a>:<br />
<pre class="brush: css;">.tree {
overflow-x: auto;
}
.tree ul {
padding-top: 20px;
position: relative;
white-space: nowrap;
}
.tree li {
display: inline-block;
white-space: nowrap;
vertical-align: top;
margin: 0 -2px;
text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0;
transition: all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
}
/*We will use ::before and ::after to draw the connectors*/
.tree li::before,.tree li::after {
content: '';
position: absolute;
top: 0;
right: 50%;
border-top: 1px solid #ccc;
width: 50%;
height: 20px;
}
.tree li::after {
right: auto;
left: 50%;
border-left: 1px solid #ccc;
}
/*We need to remove left-right connectors from elements without any siblings*/
.tree li:only-child::after,.tree li:only-child::before {
display: none;
}
/*Remove space from the top of single children*/
.tree li:only-child {
padding-top: 0;
}
/*Remove left connector from first child and
right connector from last child*/
.tree li:first-child::before,.tree li:last-child::after {
border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before {
border-right: 1px solid #ccc;
border-radius: 0 5px 0 0;
}
.tree li:first-child::after {
border-radius: 5px 0 0 0;
}
/*Time to add downward connectors from parents*/
.tree ul ul::before {
content: '';
position: absolute;
top: 0;
left: 50%;
border-left: 1px solid #ccc;
width: 0;
height: 20px;
}
.tree li a {
border: 1px solid #ccc;
padding: 5px 10px;
text-decoration: none;
color: #666;
font-family: arial, verdana, tahoma;
font-size: 11px;
display: inline-block;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover,.tree li a:hover+ul li a {
background: #c8e4f8;
color: #000;
border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after,.tree li a:hover+ul li::before,.tree li a:hover+ul::before {
border-color: #94a0b4;
}
</pre><br />
<br />
<a href="http://themes4apex.com/" target="_blank"><img alt="themes4apex" border="0" height="63" src="http://lh4.ggpht.com/-OTSL3ecOAoE/UaXUnNA-sEI/AAAAAAAAAk8/StSs-5j5pXU/themes4apex%25255B1%25255D.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="themes4apex" width="400" /></a>Christian Rokitta ♠http://www.blogger.com/profile/07809391154664980631noreply@blogger.com7tag:blogger.com,1999:blog-5742906279879067605.post-10927848380050960642013-11-13T10:28:00.003+01:002013-11-19T12:31:59.177+01:00APEX 5 - New Page Builder Screenshots<div align="justify">In a post earlier this year (<a href="http://rokitta.blogspot.nl/2013/04/apex-5-new-features-that-may-or-may-not.html" target="_blank"><strong>APEX 5 - New features that may or may not be included</strong></a>) I included a self-made mock-up of the ideas that David Peake shared at the OGh APEX Day 2013 conference. By coincidence I found these screenshots from, what seems, the actual new Application Express Page Builder Interface.<br><br></div> <p><a href="http://lh4.ggpht.com/-kE0LCoBmnIQ/UoNFaQy3XDI/AAAAAAAAAuk/eel2mo54S-c/s1600-h/APEX_5%25255B23%25255D.png"><img title="APEX 5 Page Builder Screenshot" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; float: none; padding-top: 0px; padding-left: 0px; margin-left: auto; display: block; padding-right: 0px; border-top-width: 0px; margin-right: auto" border="0" alt="APEX 5 Page Builder Screenshot" src="http://lh3.ggpht.com/-NRAwCxb5eJQ/UoNFa4R4jLI/AAAAAAAAAuo/cT7BH76U4b4/APEX_5_thumb%25255B21%25255D.png?imgmax=800" width="760" height="530"></a><br><a href="http://lh6.ggpht.com/-cnlBV9zEdGM/UotMFz3DSGI/AAAAAAAAAvM/wwe7MwkgjqQ/s1600-h/APEX_5_LE%25255B1%25255D.png"><img title="APEX 5 Page Builder - Layout Editor Screenshot" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; float: none; padding-top: 0px; padding-left: 0px; margin-left: auto; border-left: 0px; display: block; padding-right: 0px; margin-right: auto" border="0" alt="APEX 5 Page Builder - Layout Editor Screenshot" src="http://lh5.ggpht.com/-Vm4oLPE_CKY/UoNFbluLL2I/AAAAAAAAAvQ/GlAur4nP418/APEX_5_LE_thumb.png?imgmax=800" width="760" height="398"></a></p> <p>Patrick Wolf showing the Page Builder interface live @ the DOAG Conference (nov. 2013):</p> <p><a href="http://lh4.ggpht.com/-Qt9o5ELxXPo/UotMG6YZwsI/AAAAAAAAAvc/bvIWjmlPoe0/s1600-h/in-action%25255B3%25255D.jpg"><img title="in-action" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; float: none; padding-top: 0px; padding-left: 0px; margin-left: auto; border-left: 0px; display: block; padding-right: 0px; margin-right: auto" border="0" alt="in-action" src="http://lh4.ggpht.com/-h0UGlbdBrDs/UotMHDjAteI/AAAAAAAAAvg/gZzOuyJ1fkc/in-action_thumb%25255B1%25255D.jpg?imgmax=800" width="764" height="574"></a></p> <p><br><br><a href="http://themes4apex.com/" target="_blank"><img title="themes4apex" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; float: none; padding-top: 0px; padding-left: 0px; margin-left: auto; display: block; padding-right: 0px; border-top-width: 0px; margin-right: auto" border="0" alt="themes4apex" src="http://lh4.ggpht.com/-OTSL3ecOAoE/UaXUnNA-sEI/AAAAAAAAAk8/StSs-5j5pXU/themes4apex%25255B1%25255D.jpg?imgmax=800" width="400" height="63"></a></p> Christian Rokitta ♠http://www.blogger.com/profile/07809391154664980631noreply@blogger.com0tag:blogger.com,1999:blog-5742906279879067605.post-70553888492073290792013-10-18T14:53:00.001+02:002015-10-07T21:47:01.832+02:00Theme 25 Responsive Tabs Enhancement: CSS Patch<br />
<a href="http://lh5.ggpht.com/-fDRV_UIlJp4/UmEvRPKn0VI/AAAAAAAAAqA/mG73SCNbg3A/s1600-h/rwdtabs_title%25255B3%25255D.png"><img align="left" alt="rwdtabs_title" src="http://lh3.ggpht.com/-o1l3g79MrdE/UmEvRkhbNjI/AAAAAAAAAqE/1B050bTcamA/rwdtabs_title_thumb%25255B1%25255D.png?imgmax=800" height="240" style="display: inline; float: left; margin: 0px 10px 10px 0px;" title="rwdtabs_title" width="240" /></a>Theme 25 seems to be popular. I see a lot projects starting development with this theme. Not always because there is a need for enabling the application to be accessed on multiple different devices/screen resolutions, but because of the way you have more control of your region placement on the undelaying grid.<br />
Apart from the grid, APEX/Theme 25 offers more responsive functionality, like form element/label adaption and the the responsive Interactive Report toolbar.<br />
But there are components that are implemented less responsive, like the tab’s. Apart from the discussion, whether or not to use tabs, if you are using this (in my eyes convenient) feature, one would expect a user friendly responsive implementation of the tab’s.<br />
<br />
<br />
<br />
<h1>
A Little Bit Responsive</h1>
The way tab’s in Theme 25 currently react on smaller screens is: you have to scroll through the entries that are hidden outside your viewport.<br />
<a href="http://lh5.ggpht.com/-GfT0io6a5oc/UmEvR1VgAaI/AAAAAAAAAqM/tm3L3pfiVFA/s1600-h/rwdtabs_scroll_horz%25255B3%25255D.png"><img alt="rwdtabs_scroll_horz" border="0" src="http://lh5.ggpht.com/-nLkpBi_rNHI/UmEvScTaBII/AAAAAAAAAqU/2hJIRwFEKFE/rwdtabs_scroll_horz_thumb%25255B1%25255D.png?imgmax=800" height="484" style="background-image: none; border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="rwdtabs_scroll_horz" width="552" /></a><br />
<h1>
Tab More Responsive</h1>
I wanted a different, more intuitive, yet still responsive implementation of the Theme 25 tabs, which is easy to implement in any application using the theme, even afterwards. The solution I came up with is, what I call, a CSS patch. Fortunately, Theme 25 is (almost) entirely based on CSS; no images involved for structural elements. By overwriting the theme’s CSS, I can change the visual layout, and in this case behavior of the tabs, when presented on smaller screens, using the same @media rule definitions as the Theme 25 responsive implementation.<br />
This CSS patch transforms the tab’s into a drop down list on small screensizes. If the list/menu is closed, it shows the current tab’s name and an icon. Once tabbed, it opens and offers the whole list of tabs in the original sequence order, marking the current tab with an indicator:<br />
<div align="center">
<a href="http://lh5.ggpht.com/-9sdfdyCTcnU/UmEyeJWHTqI/AAAAAAAAAqk/VYxEsBJW7j4/s1600-h/rwdtabs_closed%25255B3%25255D.png"><img alt="rwdtabs_closed" border="0" src="http://lh3.ggpht.com/-JXutang0V84/UmEyerk3kAI/AAAAAAAAAqo/53dhozTaBxA/rwdtabs_closed_thumb%25255B1%25255D.png?imgmax=800" height="484" style="background-image: none; border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="rwdtabs_closed" width="331" /></a> <a href="http://lh6.ggpht.com/-dEAM2--liig/UmEye54hu_I/AAAAAAAAAqw/A0JjiUlmnGU/s1600-h/rwdtabs_touch%25255B3%25255D.png"><img alt="rwdtabs_touch" border="0" src="http://lh3.ggpht.com/-IpM8CB9-MSg/UmEyfedQDnI/AAAAAAAAAq4/p857PUwBJqk/rwdtabs_touch_thumb%25255B1%25255D.png?imgmax=800" height="484" style="background-image: none; border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="rwdtabs_touch" width="332" /></a></div>
<h1>
How To Use</h1>
<h2>
Step 1 - Download and include the CSS file in your page template</h2>
<ul>
<li>Download the CSS file <a href="http://www.themes4apex.com/blog/apex_theme25_rwd_menu.css" target="_blank">here</a> and copy it to a the location you prefer, either on the file system of your webserver or upload it into the workspace.</li>
<li>Reference the CSS file in your page template in the <strong>Cascading Style Sheet</strong> setting.</li>
</ul>
<a href="http://lh6.ggpht.com/-NkCiWEuBrE8/UmE9c5r5UcI/AAAAAAAAArM/4mH43SMe7vM/s1600-h/rwdtabs_pagetemplate%25255B3%25255D.png"><img alt="rwdtabs_pagetemplate" border="0" src="http://lh5.ggpht.com/-HNf2kRlk-3Y/UmE9dWOmjxI/AAAAAAAAArQ/VeErUQAQ_Zc/rwdtabs_pagetemplate_thumb%25255B1%25255D.png?imgmax=800" height="389" style="background-image: none; border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="rwdtabs_pagetemplate" width="644" /></a><br />
<h2>
Step 2 - A little modification in your page template</h2>
Add (exactly) this DIV around the unnumbered list element in your page template <strong>Header Source</strong>:<br />
<a href="http://lh3.ggpht.com/-bxbmww3Tous/UmE9dhDPz5I/AAAAAAAAArY/gzBrgS3KcQU/s1600-h/rwdtabs_html%25255B3%25255D.png"><img alt="rwdtabs_html" border="0" src="http://lh4.ggpht.com/-5krIXnbxhHA/UmE9d6G35JI/AAAAAAAAArg/mXvxwMMrPhY/rwdtabs_html_thumb%25255B1%25255D.png?imgmax=800" height="401" style="background-image: none; border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="rwdtabs_html" width="644" /></a><br />
<div align="center">
<div class=”rwdnav”>…</div></div>
<h2>
Step 3 - A tiny modification in your standard tab sub template</h2>
Remove the <em>href</em> attribute from the <strong>Current Tab</strong> sub-template in your page templates <strong>Standard Tab Attribute</strong> setting. This is necessary, to prevent that the page is reloading as soon as you touch the responsive menu, which is showing the current tab entry.<br />
<a href="http://lh6.ggpht.com/-iTFhJeQOMoM/UmE9eawfd7I/AAAAAAAAAro/CDnqt0Vr3VM/s1600-h/rwdtabs_href%25255B3%25255D.png"><img alt="rwdtabs_href" border="0" src="http://lh3.ggpht.com/-7zljTciLlVA/UmE9e4l2KHI/AAAAAAAAAr0/IuYIRBiIYQc/rwdtabs_href_thumb%25255B1%25255D.png?imgmax=800" height="432" style="background-image: none; border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="rwdtabs_href" width="644" /></a><br />
<br />
Enjoy!<br />
<br />
<a href="http://www.themes4apex.com/" target="_blank"><img alt="themes4apex400" border="0" src="http://lh4.ggpht.com/-bLicHCP451o/UmE9feNxfkI/AAAAAAAAAr4/nLqQz3gHmik/themes4apex400%25255B5%25255D.jpg?imgmax=800" height="63" style="background-image: none; border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="themes4apex400" width="400" /></a>Christian Rokitta ♠http://www.blogger.com/profile/07809391154664980631noreply@blogger.com8tag:blogger.com,1999:blog-5742906279879067605.post-74614144436652545132013-09-29T23:44:00.002+02:002013-09-30T13:52:07.972+02:00Theme 25 Responsive Grid Column VisualizationI have written a small CSS script that enables you to visualize the 12 column responsive grid in Oracle Application Express’s Theme 25. I used it during my presentation at KScope 13. You can download the CSS file <a href="http://www.themes4apex.com/blog/grid_background.css" target="_blank">here</a>. Install the file on your webserver or upload it into your workspace and reference the file in your page template or page. You could reference the file directly from my server too using<br />
<br />
<span style="font-family: Courier New;"><link rel="stylesheet" href="</span><a href="http://www.themes4apex.com/blog/grid_background.css"><span style="font-family: Courier New;">http://www.themes4apex.com/blog/grid_background.css</span></a>"<span style="font-family: Courier New;"> type="text/css"></span><br />
<span style="font-family: Courier New;"><br />
</span> in your template, or just as URL in the template or page’s CSS URLs property. <br />
<p>(I uploaded an enhanced version of the CSS after the suggestion from Patrick Wolf, to only show the grid columns when the developer clicks the "Show Grid" option in the Developer Toolbar. Thanks, Patrick. I should have thought of this myself.)<br />
</p><br />
<a href="http://lh3.ggpht.com/-GjGqHm6YV9E/Ukidf3RHYKI/AAAAAAAAApA/ps1u-Y0bhTo/s1600-h/grid-background%25255B46%25255D.jpg"><img alt="grid-background" border="0" height="813" src="http://lh4.ggpht.com/-LQzC1SNfVXk/UkidgZkuvrI/AAAAAAAAApE/1X9RTaxXCUE/grid-background_thumb%25255B44%25255D.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="grid-background" width="725" /></a><br />
<p></p><p><a href="http://themes4apex.com/" target="_blank"><img alt="themes4apex" border="0" height="63" src="http://lh5.ggpht.com/-IrVSJHcU-ow/UaXWTVsiyKI/AAAAAAAAAkw/Db9AxijZDl8/themes4apex%25255B6%25255D.jpg?imgmax=800" style="background-image: none; border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="themes4apex" width="400" /></a></p>Christian Rokitta ♠http://www.blogger.com/profile/07809391154664980631noreply@blogger.com8tag:blogger.com,1999:blog-5742906279879067605.post-38764595940643054792013-05-31T13:31:00.001+02:002013-05-31T13:35:00.302+02:00Oracle Application Express Feature Advisory Board<p> </p> <p>When logging into the <a href="http://apex.oracle.com/vote" target="_blank">Oracle Application Feature Request application</a> you will see the following announcement:</p> <h5>Announcing the creation of the Feature Advisory Board</h5> <p>A selection of APEX community experts have agreed to be members of the Feature Advisory Board. They will assist the APEX Development Team to prioritize feature requests. The board members will be reviewing features based on the total number of votes, so please enter your votes for all of the existing features. <p><a href="http://lh5.ggpht.com/-uL6ispXTAI8/UaiKGejradI/AAAAAAAAAlI/6k0Xyaz3K_4/s1600-h/apex_feature_request%25255B7%25255D.jpg"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px; padding-top: 0px" title="apex_feature_request" border="0" alt="apex_feature_request" src="http://lh3.ggpht.com/-dveIM40S3u8/UaiKG5Xbw9I/AAAAAAAAAlQ/Ob_-I59Eds4/apex_feature_request_thumb%25255B5%25255D.jpg?imgmax=800" width="720" height="557"></a> <p> </p> <p><a href="http://themes4apex.com" target="_blank"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px; padding-top: 0px" title="themes4apex" border="0" alt="themes4apex" src="http://lh5.ggpht.com/-O__sMnFTPZ8/UaiKHstySzI/AAAAAAAAAlY/w57H7prj--I/themes4apex%25255B4%25255D.jpg?imgmax=800" width="504" height="83"></a></p> Christian Rokitta ♠http://www.blogger.com/profile/07809391154664980631noreply@blogger.com0tag:blogger.com,1999:blog-5742906279879067605.post-17132695059412769582013-05-29T12:10:00.001+02:002013-05-29T12:19:58.082+02:00How are you? - Categorizr for APEX part 2: the Plug-in<p>Follow-up on my article: <a href="http://rokitta.blogspot.nl/2012/04/are-you-client-device-categorizr-for.html">"Who are you?" – client device Categorizr for APEX</a></p> <p>About a year ago I wrote an <a href="http://rokitta.blogspot.nl/2012/04/are-you-client-device-categorizr-for.html">article</a> on how to determine by what kind of device your APEX application is accessed: desktop, tablet or smartphone. The solution is based on a package interpreting the HTTP_USER_AGENT environment string.</p> <p>This package (categorizr) in combination with APEX offers a few functions regarding the client device type (isDesktop, isTablet, isMobile, …) that can be used in conditions or anywhere else in your PL/SQL code. Now I wrote a complimentary plug-in to determine some viewport properties: ViewportHeight, ViewportWidth and Orientation and put these values into page items in session state, updating the values (in session state) each time the browser resizes or changes orientation. Additionally, I added a an event to trigger an (advanced) dynamic action: Categorizer Resize Event.</p> <p>In fact, both components, the package and the plug-in, can be installed and used separate. But when installed together, the categorizr package offers a two new functions:</p> <ul> <li>FUNCTION isLandscape RETURN BOOLEAN; <li>FUNCTION isPortrait RETURN BOOLEAN;</li></ul> <p>and three global package variables:</p> <ul> <li>g_viewportWidth <li>g_viewportHeight <li>g_viewportOrientation</li></ul> <p>Installation</p> <p>Just install the plug-in by importing the file categorizr-plugin.sql.</p> <p>Install the package by running the categorizr-package.sql in the database schema associated with your application.</p> <p>Usage</p> <p>This region plug-in is ideally used in page 0/global page but can be used in just one or more designated pages, as long as you do not combine both approaches.</p> <p>Create a new region of type plug-in and choose “Categorizr”. Make sure you use “no template” for this region, or an empty region will be displayed on your page(s).</p> <p><a href="http://lh3.ggpht.com/-eqQhHLerz9g/UaXT9Ae9e4I/AAAAAAAAAjI/sv734owigyw/s1600-h/categorizr110.jpg"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="categorizr1" border="0" alt="categorizr1" src="http://lh6.ggpht.com/-qy0JcROvN_8/UaXT-LuANEI/AAAAAAAAAjQ/zIr1WgpuOSM/categorizr1_thumb6.jpg?imgmax=800" width="751" height="253"></a></p> <p>The plug-in has three attributes to specify the names of the (hidden) page items to create for holding the viewport width, height en orientation. Just keep the default, which prefixes the items with the number of the current page (using the placeholder #PAGE_ID#).</p> <p><a href="http://lh6.ggpht.com/-KN0Ru9DLHeU/UaXT_FA8BYI/AAAAAAAAAjY/CbfJWYMNnoY/s1600-h/categorizr24.jpg"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="categorizr2" border="0" alt="categorizr2" src="http://lh5.ggpht.com/-DeIFMt6rg-Q/UaXUAH-ra_I/AAAAAAAAAjg/N1ETbnMUMlg/categorizr2_thumb2.jpg?imgmax=800" width="754" height="258"></a></p> <p>Once having this region on your page 0, you can access the page items (i.e. P0_VIEWPORTWIDTH, …) in your SQL and PL/SQL or use the JavaScript variables viewportWidth, viewportHeight, viewportOrientation.</p> <p>You can download both, the package and the plug-in here:</p> <table border="0" cellspacing="0" cellpadding="2" width="740"> <tbody> <tr> <td width="370" align="center"><a href="http://rokit.nl/blog/categorizr-package.zip"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="Package-Download" border="0" alt="Package-Download" src="http://lh5.ggpht.com/-laRYok1AaGo/UaXUAyiYCtI/AAAAAAAAAkA/mwTKmppPx_k/Package-Download%25255B4%25255D.png?imgmax=800" width="48" height="48"></a><br><a href="http://rokit.nl/blog/categorizr-package.zip">Package</a></td> <td width="370" align="center"><a href="http://rokit.nl/blog/categorizr-plugin.zip"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="addons" border="0" alt="addons" src="http://lh5.ggpht.com/-6mAmpC1WcUw/UaXUBuntrFI/AAAAAAAAAkE/-ie6rJ2NSww/addons%25255B4%25255D.png?imgmax=800" width="48" height="48"></a><br><a href="http://rokit.nl/blog/categorizr-plugin.zip">Plug-in</a></td></tr></tbody></table> <p> </p> <p><a href="http://themes4apex.com" target="_blank"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px; padding-top: 0px" title="themes4apex" border="0" alt="themes4apex" src="http://lh5.ggpht.com/-IrVSJHcU-ow/UaXWTVsiyKI/AAAAAAAAAkw/Db9AxijZDl8/themes4apex%25255B6%25255D.jpg?imgmax=800" width="400" height="63"></a></p> Christian Rokitta ♠http://www.blogger.com/profile/07809391154664980631noreply@blogger.com0tag:blogger.com,1999:blog-5742906279879067605.post-78839487375759385442013-04-10T11:45:00.001+02:002013-11-13T10:37:50.954+01:00APEX 5 - New features that may or may not be included<br />
<h2>
Development Team Status Report from David Peake during OGh APEX World</h2>
<span style="background-color: yellow;">UPDATE: <a href="http://rokitta.blogspot.nl/2013/11/apex-5-new-page-builder-screenshots.html">Screenshots of the new APEX 5 Page Builder Interface</a></span><br />
<br />
Yesterday (April 9th, 2013) David Peake opened the Dutch <a href="http://ogh.nl/page.aspx?event=184" target="_blank">OGh APEX World conference</a> with a keynote presentation. As expected, he talked about the future release of Oracle Application Express, version 5. Another very interesting part of David’s presentation focused on the architectural aspects of APEX running on the upcoming 12 c release of the database. Here’s my summary. But before you start basing any business critical decisions on this blog post, I have to mention that<a href="http://lh6.ggpht.com/-IPsg--QBaGM/UWU0igRWk7I/AAAAAAAAAf0/MNWkAkU3f1A/s1600-h/oracle_save_habour5.png"><img align="right" alt="oracle_save_habour" border="0" height="208" src="http://lh3.ggpht.com/-JvB9PvOAlv0/UWU0jiBL3lI/AAAAAAAAAf8/Jvyr7alyB4I/oracle_save_habour_thumb3.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; float: right; margin: 10px 0px 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="oracle_save_habour" width="397" /></a><br />
<ul>
<li>everything I’m writing in this article, may or may not be included in future releases of Oracle products </li>
<li>is my personnel view or opinion and that I’m not related in any kind to Oracle Corporation </li>
<li>…</li>
</ul>
<br />
<br />
The APEX development team is currently in the process of investigating functionality and possible solutions to include into APEX 5, and it seems that some of the features David was talking about were more idea’s and general directions. There was no live demo, understandably, just a few screenshots and a very interesting mock-up of the builder interface.<br />
<h3>
APEX on Oracle DB 12c</h3>
APEX version 4.2 will be preinstalled in the 12c root database. All pluggable databases (PDB) of this root instance will be running the same APEX version, but are isolated instances. The first thing after installing a 12c DB, probably, is upgrading the APEX to the latest release, currently 4.2.1 (there will be a 4.2.2, David told us). Upgrading APEX in 12c, when installed in the root database will be very easy, as all PDB’s get upgraded at the same time. For upgrading an 11g APEX installation to 12c, there will be scripts provided to convert the it into a root installation.<br />
If you want to run different version of APEX in different PDB’s on the same 12c root instance: you can. Oracle will provide scripts to remove the root installation of APEX, so you can install independent repositories and versions of APEX in each PDB. It is more administration, but as a developer, I’m glad to get this possibility.<br />
There are some new 12c DB features, that will be supported by APEX 4.2.something:<br />
<ul>
<li>VARCHAR2 32k support. As HTML text fields didn’t care much about field length anyway, this is manly an enhancement on collections. </li>
<li>Identity Columns. This means, you won’t need to specify a sequence or function to populate a PK, because this will happen automagically. </li>
<li>Invisible Columns: will not be displayed by default.No values will be inserted when basing forms on this type of columns. You can manually add code to your page to show the value of an invisible column. </li>
<li>Data Redaction. This is a feature that does not need much of a change in APEX itself, as data is masked in the database, depending on policies. But there will be a change in the SQL workshop to support administration of these policies.</li>
</ul>
<h3>
APEX 5</h3>
We all know the <a href="http://www.oracle.com/technetwork/developer-tools/apex/application-express/apex-sod-087560.html" target="_blank">Oracle Application Express Statement of Direction</a>, so I don’t have to list features already mentioned there. David pointed out, that the development of APEX 5 has to main focuses:<br />
<ul>
<li><strong><span style="color: red;">Improve Developer Productivity</span></strong> </li>
<li><strong><span style="color: red;">Quality</span></strong></li>
</ul>
<span style="color: #333333;">Here what drew my attention during David’s APEX 5 possible feature presentation.</span><br />
<ul>
<li>we will be able to declarative define <strong>Modal Dialogs</strong> in APEX 5. We even can stack multiple modal dialogs. </li>
<li>the APEX dev team is thinking of enhancing the Builder interface and the concept seems to be inspired by interfaces we know from SQL Developer, JDeveloper and other similar IDE’s. <ul>
<li>a tree navigation on the left hand side to access page components </li>
<li>possibility to switch to a component view instead of tree view </li>
<li>a large layout editor (welcome back) in the middle of the page with predefined components to (drag & drop) place into your page layout </li>
<li>a property editor showing the properties for the selected page region/item.</li>
</ul>
</li>
</ul>
<div align="center">
<a href="http://lh6.ggpht.com/-9Rj_oQv6Gco/UWU0kj0O8GI/AAAAAAAAAgE/7MdUUlnL0Sk/s1600-h/apex5_builder_concept%25255B10%25255D.png"><img alt="apex5_builder_concept" border="0" height="211" src="http://lh6.ggpht.com/-pcFgHKFXgVw/UWU0lSwTtjI/AAAAAAAAAgM/BmDcwxQsYP8/apex5_builder_concept_thumb%25255B6%25255D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="apex5_builder_concept" width="323" /></a><br />Revamped APEX 5 Builder Interface; Artist Impression (i.e. mine)</div>
<ul>
<li>a new <strong>tabular form</strong> component based on<strong> jQGrid</strong> with inline editing ability:</li>
</ul>
<div align="center">
<a href="http://lh4.ggpht.com/-koogN0Sv6_8/UWU0mS_RfcI/AAAAAAAAAgU/UgDANVRsnFA/s1600-h/apex5_jqgrid_concept%25255B2%25255D.png"><strong><img alt="apex5_jqgrid_concept" border="0" height="105" src="http://lh6.ggpht.com/-6u_HNpI793c/UWU0nt82XhI/AAAAAAAAAgc/cxgUPBcMxJM/apex5_jqgrid_concept_thumb.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="apex5_jqgrid_concept" width="244" /></strong></a><br />jQGrid screenshot (not from actual APEX screen)</div>
<ul>
<li><strong>PDF Printing</strong>, using APEX Listener 2.0’s FOP support. Integration will be more declarative, and the possibility to specify formatting options through templates, break control and master/detail layouts. </li>
<li>further extension of WebService capabilities, like publishing and SOA integration. Allowing to connect with remote Oracle DB’s through WS, as an (better) alternative to database links. </li>
<li>the rest pretty much was known from the SOD …</li>
</ul>
<h3>
Wrapping it up</h3>
All together, I think version 5 will be a release to look forward to, from a developer perspective. It looks like, some of the current shortcomings, like master-detail-detail and multiple interactive reports on one page, will be tackled by the APEX development team. Especially the revamped builder interface is a very interesting idea, but, when keeping the current Tree View AND Component View, there will be a lot more pages/code to maintain by the dev team.<br />
Oracle currently is working on enhancing version 4.2 (12c DB integration) as well as version 5. With 12c expected for somewhere in 2013, we can easily guess the priorities. APEX version 5 will not be as spectacular as 4.2 with respect to end-user functionality (jQM and RWD), but consolidate the development of the past years and enhance existing functionality (mobile: table support, IA Reports: multiple on one page, Master/Detail/Detail, …)<br />
<br />
<a href="http://themes4apex.com/" target="_blank"><img alt="themes4apex" border="0" height="63" src="http://lh4.ggpht.com/-OTSL3ecOAoE/UaXUnNA-sEI/AAAAAAAAAk8/StSs-5j5pXU/themes4apex%25255B1%25255D.jpg?imgmax=800" style="background-image: none; border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="themes4apex" width="400" /></a>Christian Rokitta ♠http://www.blogger.com/profile/07809391154664980631noreply@blogger.com11tag:blogger.com,1999:blog-5742906279879067605.post-43002168239974759422013-03-27T09:32:00.001+01:002013-03-27T09:32:39.197+01:00Oracle Application Express for Mobile Web Applications - Book available now<p><em><a href="http://www.apress.com/9781430249474" target="_blank">Oracle Application Express for Mobile Web Applications</a></em>, written by <a href="http://roelhartman.blogspot.nl/">Roel Hartman</a>, <a href="http://dpeake.blogspot.nl/">David Peake</a> and <a href="http://www.themes4apex.com/apex/f?p=111:1:0">me</a>, shows you step-by-step how to create your very own web application that will look and act as a native mobile application.</p> <p><a href="http://www.apress.com/9781430249474"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px; padding-top: 0px" title="cover" border="0" alt="cover" src="http://lh5.ggpht.com/-vv5pA6vQLBA/UVKupmsccqI/AAAAAAAAAfk/gXM_uQywHeA/cover%25255B4%25255D.jpg?imgmax=800" width="434" height="557"></a></p> <p><em><a href="http://www.apress.com/9781430249474" target="_blank">Oracle Application Express for Mobile Web Applications</a></em> is an action driven book, taking you by the hand through all required steps in building your very own web application that will run on phones, tablets, and other mobile devices. Because you’ve built every piece of it yourself, you will know exactly how every tiny part is used and how you can tweak it to your own – or your customer's – taste.<br>Oracle Application Express is widely known in the Oracle community as a great tool for creating web applications suitable for desktop browsers. Features have now been added to open up the world of mobile browsing, bringing the simplicity and expressiveness of Application Express to bear in developing applications to run with an almost-native look and feel on platforms such as iOS, Android, and Windows Phone.<br><em>Oracle Application Express for Mobile Web Applications</em> helps you translate your knowledge of Oracle Application Express into developing for mobile devices. The book and its running example provide all the knowledge you need to create professional looking mobile web applications. <ul> <li>Takes you through building a mobile web application from start to finish. <li>Gives insight into the components necessary for a professional looking mobile application. <li>Helps you become an even better and more all-round Oracle Application Express developer.</li></ul> <h5>What you’ll learn</h5> <ul> <li>Build mobile applications to run from iPhones, iPads, Android devices, and Windows-based phones and tablets. <li>Make enterprise reporting and business functions accessible to mobile devices. <li>Customize the look-and-feel of your mobile applications. <li>Respond to gestures such as swiping and pointing, and to changes in device orientation. <li>Enhance mobile applications through the use of plugins. <li>Deploy applications into the Apple and Android stores.</li></ul> <h5>Who this book is for</h5> <p><em><a href="http://www.apress.com/9781430249474" target="_blank">Oracle Application Express for Mobile Web Applications</a></em> is aimed at Oracle Application Express developers wanting to develop and deploy applications for use on mobile devices. The book is also useful to any developer in an Oracle Database environment who is looking for a cheap and cheerful way to extent business functions and reporting to mobile devices. Christian Rokitta ♠http://www.blogger.com/profile/07809391154664980631noreply@blogger.com0tag:blogger.com,1999:blog-5742906279879067605.post-72829017279286261882012-12-04T14:43:00.002+01:002012-12-04T14:43:45.261+01:00APEX Listener favicon bug issueWhen developing an application in Oracle APEX, I usually have opened two browser tabs, one for the builder and one for the application I’m working on. This works fine, even though both tabs are using different sessions.<br />
<br />
The other day I noticed a strange annoying behavior using this approach: Each time I opened the application I was working on in the new tab, my builder session was expired. This behavior wasn’t related to the APEX version: it happened with my 4.2 installation running on a VBox as well as with my local installation running 4.1. I was rather puzzled, as I didn’t change anything on my local installation.<br />
<br />
Here is what caused it (thanks to Christian Neumüller for explaining):<br />
<br />
I ran into the so-called <a href="https://forums.oracle.com/forums/thread.jspa?messageID=10711487" target="_blank">APEX Listener favicon-bug</a>: On my 4.1 installation I was working on a new theme, build entirely from scratch, and on my 4.2 installation, I was playing around with a mobile application. What both applications (or better: themes) had in common: the lack of a favicon reference in the page template. One other thing both environments had in common: an APEX Listener stand-alone installation. Looks like the Listener tries to resolve a favicon location each time, and when not found, redirection the favicon request to the “webservers” root (the favicons default location). With the APEX Listener the “root” gets redirected to yourserver:port/apex, which is causing a reset of the session id.<br />
<br />
Adding a favicon to your page template(s) HEAD section solves the problem.<br />
<br />
Example:
<br />
<pre class="brush: plain;"> <link href="#IMAGE_PREFIX#favicon.ico" rel="icon" type="image/x-icon"></link>
<link href="#IMAGE_PREFIX#favicon.ico" rel="shortcut icon" type="image/x-icon"></link>
</pre>
<br />
Make sure you've got an image file at the specified location. I could reproduce the problem with APEXListener versions 1.1.4 and 2.0.<br />
I was promised, the issue will be addressed in one of the coming versions of the APEX Listener.Christian Rokitta ♠http://www.blogger.com/profile/07809391154664980631noreply@blogger.com0tag:blogger.com,1999:blog-5742906279879067605.post-87441182860592557822012-11-09T14:54:00.001+01:002012-11-09T14:54:34.964+01:00Cloudy Normal Button :hover fix<a href="http://lh3.ggpht.com/-PE9OqWP0ltE/UJ0Jp3m6O9I/AAAAAAAAAcQ/Lp0KehYalQA/s1600-h/mouse_cursor_hover%25255B9%25255D.jpg"><img align="left" alt="mouse_cursor_hover" border="0" height="51" src="http://lh3.ggpht.com/-nlpWk2clhis/UJ0JqsinHyI/AAAAAAAAAcU/DUpLtXQNNhk/mouse_cursor_hover_thumb%25255B7%25255D.jpg?imgmax=800" style="background-image: none; border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: inline; float: left; margin: 0px 30px 0px 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="mouse_cursor_hover" width="45" /></a>Maybe you have noticed it, maybe not, but the hover effect of the Normal Button template in the APEX Cloudy theme does not work in IE. It seems it hasn’t been implemented. So if you want the hover effect in IE, here is the CSS snippet you need to to add to your template:<br />
<br />
<pre class="brush: css;">.ie6 a.uButton:hover span,
.ie6 a.uButtonLarge:hover span,
.ie6 a.uButtonSmall:hover span,
.ie7 a.uButton:hover span,
.ie7 a.uButtonLarge:hover span,
.ie7 a.uButtonSmall:hover span,
.ie8 a.uButton:hover span,
.ie8 a.uButtonLarge:hover span,
.ie8 a.uButtonSmall:hover span,
.ie9 a.uButton:hover span,
.ie9 a.uButtonLarge:hover span,
.ie9 a.uButtonSmall:hover span {
background: url(#IMAGE_PREFIX#themes/theme_24/images/app_theme.png) 0 -400px repeat-x #DEDEDE;
}
</pre>
<br />
This will only affect IE and will load a slightly lighter gray gradient background on the hover state of the normal button. <br />
<br />
Credits go to Shakeeb. Thanks! <br />
<br />Christian Rokitta ♠http://www.blogger.com/profile/07809391154664980631noreply@blogger.com2tag:blogger.com,1999:blog-5742906279879067605.post-77831629538771650742012-11-06T11:27:00.000+01:002012-12-05T11:56:38.172+01:00Book Release: “APEX Best Practices” - A First Impression<div align="justify">
<br /></div>
<div align="justify">
<a href="http://partnerprogramma.bol.com/click/click?p=1&s=1686&t=p&sec=books-en&pid=9200000007576687&f=PDL&subid=BPinline&name=iBestPractice" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;" target="_blank"><img align="left" alt="Oracle APEX Best Practices" border="0" height="217" src="http://lh5.ggpht.com/-n1LTkMf74Ck/UJjiTt16MAI/AAAAAAAAAbs/TkbzDrO_Cc0/Oracle%252520APEX%252520Best%252520Practices%25255B3%25255D.jpg?imgmax=800" style="background-image: none; border: 0px; display: inline; float: left; margin: 0px 40px 20px 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Oracle APEX Best Practices" width="174" /></a>Today (nov. 6th 2012), the book ‘<a href="http://www.packtpub.com/oracle-apex-best-practices/book" target="_blank">APEX Best Practices</a>’ written by Learco Brizzi, Iloon Ellen-Wolff and Alex Nuijten was finally released. I was curious about the book, for several reasons:<br />
<br /></div>
<ul style="margin-left: 40px;">
<li>I promised the book to the winners of my <a href="http://www.fifapex.net/" target="_blank">FifApex</a> competition earlier this year</li>
<li>I know all three authors and heard some stories about the process of making it</li>
<li>As an APEX developer: what ‘Best Practices’ will the book advice</li>
</ul>
<h3>
<br /></h3>
<h3>
<br /></h3>
<h3>
Here is my first impression:</h3>
<div align="justify">
<br />
There is more to APEX then just building pages, and this is where this book comes in handy. <strong>Installation</strong>, <strong>set-up</strong>, <strong>maintenance</strong>, <strong>versioning</strong>, <strong>deployment</strong>, <strong>printing</strong>, are all subjects elaborated in this book. ‘APEX Best Practices’ will help you planning and setting up your environment. Also the book talks about creating pages and reports as well, it’s not the usual step-by-step tutorial. It focuses on the structure of an application and the development process in general.<br />
<br /></div>
<div align="justify">
The book contains an extensive chapter (probably written by Alex) on how to leverage the Oracle database functionality in an APEX application. A must read, in my opinion. After all: the best thing about Oracle Application Express is the Oracle database it’s build on.<br />
<br /></div>
<div align="justify">
One advantage of the delayed release: the authors managed to add a chapter (well, actually an appendix) about <strong>Database Cloud Service, APEX 4.2</strong> and <strong>RESTful Web Services</strong> .<br />
<br /></div>
<div align="justify">
It’s probably not the first book you would grab from the shelf when starting to learn building applications with Oracle Application Express, but you should definitely read the book before starting your first real APEX project.<br />
<br /></div>
<h3>
Book Details</h3>
<b>Language : </b>English<br />
<b>Paperback : </b>298 pages<br />
<b>Release Date : </b>November 2012<br />
<b>ISBN : </b>1849684006<br />
<b>ISBN 13 : </b>9781849684002
<p>
<script type="text/javascript">var bol_pml={"id":"bol_1354698388560","secure":false,"baseUrl":"partnerprogramma.bol.com","urlPrefix":"http://aai.bol.com/aai","productId":"productid=9200000007576687&","site_id":"1686","target":true,"rating":true,"price":false,"link_name":"iBestPractice","link_subid":"BPinline","image_size":true,"image_position":"right","width":"250","cols":"1","background_color":"#FFFFFF","text_color":"#CB0100","link_color":"#0000FF","border_color":"#FFFFFF","letter_type":"verdana","letter_size":"11"};</script><script type="text/javascript" src="http://partnerprogramma.bol.com/partner/static/js/aai/clientProductlink.js" id="bol_1354698388560"></script>
</p>Christian Rokitta ♠http://www.blogger.com/profile/07809391154664980631noreply@blogger.com6tag:blogger.com,1999:blog-5742906279879067605.post-18730159718615848192012-10-12T16:21:00.003+02:002013-05-29T12:20:29.301+02:00Remember Me - APEX Autologin<div align="justify"><em>I promised to publish about this subject to one of the attendees during my presentation at <a href="http://kscope12.com/" target="_blank">KScope 12</a> in San Antonio. I used this functionality in my demo application (<a href="http://www.fifapex.net/" target="_blank">FifApex</a>) and it seems there is interest in how to do this.</em></div> <div align="justify"><em><br></em></div> <div align="justify">Most of the public websites like Facebook, LinkedIn, Twitter, Amazon or OTN do have it: an option to stay logged in, even if you closed the browser, so you do not have to authenticate each time you visit the site again. I’m pretty used to it and would be surprised if a website didn’t offer this convenient feature. <span style="color: red">OK, it’s not entirely secure, but, as I said, very convenient.</span></div> <div align="justify">I’m working on a “consumer” site/application, I’m building it with APEX and I want to offer this “remember me” option too. I knew an APEX based website that does offer this feature (<a href="http://www.plsqlchallenge.com/" target="_blank">www.plsqlchallenge.com</a>) and I had a chat with the developer that implemented it’s login mechanism, <a href="http://uk.linkedin.com/pub/paul-broughton/28/553/79a" target="_blank">Paul Broughton</a> from <a href="http://www.apex-evangelists.com/" target="_blank">Apex Evangelists</a>. So, here my thanks to him for the original inspiration.</div> <div align="justify"> </div> <div align="justify">Oracle Application Express has neither a build in functionality nor is it providing a “standard” Authentication Schema that does provide this mechanism. But, with just a little effort you can implement this Autologin in your application. My example uses a Custom Authentication schema, meaning I have a user table and a package, providing all the necessary functionality. At the bottom of this post, you will find links, where you can download all files you need to install the demo application in your own environment.</div> <h5 align="justify"></h5> <h3>Let’s start</h3><a href="http://lh4.ggpht.com/-5R6TV9Balr0/UHACyWKSw0I/AAAAAAAAAXI/-oBHI7r6qjI/s1600-h/remember_me_twitter11.png"><img style="background-image: none; border-right-width: 0px; margin: 0px 0px 0px 10px; padding-left: 0px; padding-right: 0px; display: inline; float: right; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="remember_me_twitter" border="0" alt="remember_me_twitter" align="right" src="http://lh5.ggpht.com/-iXse-jULhKw/UHACzZCzjSI/AAAAAAAAAXM/UOGdlzeQ6SQ/remember_me_twitter_thumb9.png?imgmax=800" width="244" height="243"></a><br> <div align="justify">First of all, let me define the mechanism: the user gets an option, usually a checkbox, in login screen to stay signed in. Next time the use visits the site, he doesn’t have to provide his credentials and is automagically signed in.</div> <div align="justify">The common technique to achieve this, is using a cookie that holds a token to identify the returning user. So we have to set a cookie when the user signs into the application and check for the cookie and validate the token when the user comes back.</div> <div align="justify">Setting and reading a cookie is easy, using the OWA_COOKIE package, but how to integrate this into a APEX authentication schema?</div> <div align="justify">The following example is build with a standard “empty” application with Custom Authentication. Prior I created a table to hold the user data and a package, containing the authentication logic. <strong><em><span style="color: red">Note: this is a simplified example, so using this in your production application is at your own risk!</span></em></strong> All code is included in the <a href="http://apex.oracle.com/pls/apex/wwv_flow_file_mgr.get_file?p_security_group_id=13804723309278094991&p_fname=f1000_remember_me_template_appl.sql&p_inline=NO">demo application download</a>.</div><br><span style="font-family: courier new, courier, monospace">CREATE TABLE my_custom_users(<br> username VARCHAR2(25 BYTE)<br>, password VARCHAR2(250 BYTE)<br>, token VARCHAR2(25 BYTE)<br>);</span><br><span style="font-family: courier new, courier, monospace"><br></span><span style="font-family: courier new, courier, monospace">INSERT INTO my_custom_users(username, password, token)<br>VALUES ('DEMO', my_cust_auth.encodeit('DEMO', 'demo'), NULL);</span><br><span style="font-family: courier new, courier, monospace">COMMIT;</span><br><br> <h3 align="justify">Step 1: setting the cookie during login<a href="http://lh5.ggpht.com/-QFbcWR515qE/UHAC0IfYD2I/AAAAAAAAAXY/KGS4F5BQlNk/s1600-h/remember_me_012.png"><img style="background-image: none; border-right-width: 0px; margin: 0px 0px 0px 10px; padding-left: 0px; padding-right: 0px; display: inline; float: right; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="remember_me_01" border="0" alt="remember_me_01" align="right" src="http://lh3.ggpht.com/-Ki6Lo3PiCTE/UHAC0wxD_hI/AAAAAAAAAXg/rDIz4sHH8Zw/remember_me_01_thumb.png?imgmax=800" width="244" height="165"></a></h3> <div align="justify">First I’m going to modify the generated Login Page (101), adding the “Remember me” checkbox.</div> <div align="justify">Then I modify the “Set Username Cookie” process that already should exists and stores the APEX username in a cookie (I do not make any changes to this functionality): The code I add, checks, if the “Remember me” has been ticked by the user, the user actually is a valid user from my table and then sets a cookie, called “REMEMBER_ME”. The value of this cookie is generated by a function, producing a random string and storing this as a token with the user data or fetches the token from the user data, if already existing. In my example, I choose to set the expiration date of this cookie one to about a year.</div><a href="http://lh6.ggpht.com/-S8WA-_HWAsk/UHAC15WGenI/AAAAAAAAAXo/KEdJBONxDlQ/s1600-h/remember_me_026.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto; padding-top: 0px" title="remember_me_02" border="0" alt="remember_me_02" src="http://lh5.ggpht.com/-CvRA_BAEhFA/UHAC3pVuDkI/AAAAAAAAAXw/A06RrrACJBI/remember_me_02_thumb4.png?imgmax=800" width="751" height="742"></a><br> <div align="justify">Running the application, logging in with the checkbox ticked, you can exam the cookies of your APEX application by using a tool like the Developer Console of Chrome. Next to some cookies, set by APEX itself, you should find the “REMEMBER_ME” entry holding the token string and expire date of today + 365 days:</div><a href="http://lh3.ggpht.com/-Yqe0v4Q5Bkk/UHAC4zG32FI/AAAAAAAAAX4/PqdvGWtKoBQ/s1600-h/remember_me_03%25255B5%25255D.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto; padding-top: 0px" title="remember_me_03" border="0" alt="remember_me_03" src="http://lh6.ggpht.com/-BS5DCvnr2_g/UHAC5-zOknI/AAAAAAAAAYA/_TfaqicLo_E/remember_me_03_thumb%25255B3%25255D.png?imgmax=800" width="745" height="214"></a><br> <h3>Step 2: using the cookie on return</h3> <div align="justify">Now, when do we need to read the “REMEMBER_ME” cookie again? Every time the visitor returns to your site/application, has not signed in yet (obviously, as we want to do this automagically) and the cookie is set and holds a token that is known in the user table (<span style="color: red">assuming that the user is the same again!</span>). I want to perform the check, regardless of the page visited is a public page or a page that requires authentication. The event that should be triggered, if the conditions are met (cookie set and valid, user is <em>public</em>), is the a automatic login, similar to the original login. To perform the check, I will use “PAGE 0”, but lets first create the autologin functionality to be called:</div> <div align="justify"><a href="http://lh4.ggpht.com/-bNs5IwfWELo/UHgc-H1TjGI/AAAAAAAAAYg/YEXtLhCTjFM/s1600-h/remember_me_043.png"><img style="background-image: none; border-right-width: 0px; margin: 0px 10px 0px 0px; padding-left: 0px; padding-right: 0px; display: inline; float: left; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="remember_me_04" border="0" alt="remember_me_04" align="left" src="http://lh6.ggpht.com/-LNcDo1rGRCs/UHgc-5JSgzI/AAAAAAAAAYo/4p1Mo7IT2Cw/remember_me_04_thumb1.png?imgmax=800" width="291" height="406"></a>To realize the autologin, I create a new page (103 in example application). This page only contains a “On Load - Before Header” process and one page item. The process only fires, when the request name is “AUTOLOGIN” and calls the build in standard APEX login procedure provided for custom authentication. It uses the page item to “P103_TOPAGE” as target page after successful login, which I will set on the triggering process/branch on page 0, to return to the page the user actually requested in the URL. The username is derived from the cookie (the token belonging to one unique user) using the call OWA_COOKIE.get ('REMEMBER_ME'); in a stored procedure.</div> <div align="justify"> </div> <div align="justify"><span style="font-family: courier new, courier, monospace">wwv_flow_custom_auth_std.login(<br> P_UNAME => my_cust_auth.get_user_from_cookie,<br> P_PASSWORD => null,<br> P_SESSION_ID => v('APP_SESSION'),<br> P_FLOW_PAGE => :APP_ID||':'||:P103_TOPAGE<br> );</span></div> <div align="justify"> </div> <div align="justify">As you see, the password parameter is NULL. So I have to add logic to the Authentication Function (my_cust_auth.validate_user) of my custom Authentication Schema, that handles two cases: either a valid combination of username/password is given, or the “REMEMBER_ME” token is set and a corresponding user is found. Again: this is very basic and may not be sufficient for your production application.</div> <div align="justify"> </div> <div align="justify"> </div> <h3></h3> <h3></h3> <h3>Step 3: automagically do it</h3> <div align="justify">I already mentioned that I will use Page 0 to call the auto login. Doing so, the user should be singed into the application, regardless which page he opens first. I simply create a “After Header” Region of type “Dynamic PL/SQL”. The redirect will be done using the APEX build in procedure <strong>sys.owa_util.redirect_url</strong>, passing the relative URL of page 103 with request parameter “AUTOLOGIN”. This region is conditional, checking for: user is public, cookie is set and belongs to “a” user.</div><a href="http://lh6.ggpht.com/-3XJU_uH6nu8/UHgc_1ZG_0I/AAAAAAAAAYw/Mzmz_B5Z2BM/s1600-h/remember_me_05a4.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="remember_me_05a" border="0" alt="remember_me_05a" src="http://lh4.ggpht.com/-4PSSO9Mph7o/UHgdBCc3-cI/AAAAAAAAAY4/_0Vc-U7ZLok/remember_me_05a_thumb1.png?imgmax=800" width="744" height="291"></a><br><a href="http://lh5.ggpht.com/-8dZLJL9Y0Co/UHgdCTuno8I/AAAAAAAAAZA/zXrE1LJm6kM/s1600-h/remember_me_05b3.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="remember_me_05b" border="0" alt="remember_me_05b" src="http://lh5.ggpht.com/-9UV7BfeQCz8/UHgdDoqiQXI/AAAAAAAAAZI/_7eQLkPPaBI/remember_me_05b_thumb1.png?imgmax=800" width="744" height="291"></a><br><a href="http://lh4.ggpht.com/-n2XrZ70L3yY/UHgdEjcdXSI/AAAAAAAAAZQ/S7faq1mj4OA/s1600-h/remember_me_05c7.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="remember_me_05c" border="0" alt="remember_me_05c" src="http://lh5.ggpht.com/-ZRVkq1pKYb8/UHgdFyTJ9gI/AAAAAAAAAZY/BqfAH0HojZw/remember_me_05c_thumb3.png?imgmax=800" width="744" height="340"></a><br> <div align="justify">I added an extra condition checking for the current page ID to be less or equal to 101, to prevent page 103 from recursively calling itself. Page 102 will be this demo application’s special logout page (see next section). All “normal” pages in this application are assumed to have ID’s in the rage of 1 to 100. You definitely should modify this condition to meet your actual applications page ID ranges.<a href="http://lh5.ggpht.com/-kMC28TrUCS8/UHgkFspOVzI/AAAAAAAAAa0/GJXXtVsojEY/s1600-h/remember_me_08%25255B3%25255D.png"><img style="background-image: none; border-right-width: 0px; margin: 0px 30px 0px 20px; padding-left: 0px; padding-right: 0px; display: inline; float: right; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="remember_me_08" border="0" alt="remember_me_08" align="right" src="http://lh5.ggpht.com/-OCz-npVdq48/UHgkGsBexfI/AAAAAAAAAa8/-lldlhGUK7g/remember_me_08_thumb%25255B1%25255D.png?imgmax=800" width="128" height="131"></a></div> <blockquote> <div align="left"><em>Note to myself: I first tried to use a “Before-Header” Branch in Page 0 to implement this redirect. But: Branches in Page 0 do not ever get executed. It’s not the first time I hit this pitfall. After all: the APEX 4.1 Application Builder Treeview of Page 0 suggests Branches are possible.</em></div></blockquote> <h3></h3> <h3>Step 4: forget me</h3> <div align="justify"><a style="margin-bottom: 1em; float: right; margin-left: 1em; clear: right" href="http://lh4.ggpht.com/-AME5sqkWWSM/UHgdGx34GMI/AAAAAAAAAZc/rJ9KWtBVnmE/s1600-h/remember_me_072.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: right; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="remember_me_07" border="0" alt="remember_me_07" align="right" src="http://lh5.ggpht.com/-IwCgwroj_nU/UHgdH01lE7I/AAAAAAAAAZo/biJjDKBW_iQ/remember_me_07_thumb.png?imgmax=800" width="189" height="126"></a>We need to offer the user a way to logout and remove the cookie. I create a new page, 102, containing one “On Load - Before Header” process and a branch.</div>The process removes (expires and replaces value with empty string) the cookie and performs the actual logout using WW_FLOW_CUSTOM_AUTH_STD.LOGOUT. The branch will take the user to the (public) Home page (1).<br>I then specify to use page 102 as the Logout URL of my Authentication Schema.<br><a href="http://lh5.ggpht.com/-PQdTE4rs734/UHgdI6pV5NI/AAAAAAAAAZw/Kkc4PbpDAWo/s1600-h/remember_me_06a3.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto; padding-top: 0px" title="remember_me_06a" border="0" alt="remember_me_06a" src="http://lh6.ggpht.com/-D91rst44Au4/UHgdJlHrmjI/AAAAAAAAAZ4/PKQzvByHKmc/remember_me_06a_thumb1.png?imgmax=800" width="744" height="426"></a><br><a href="http://lh3.ggpht.com/-kTrkRjSZTpQ/UHgdK2fz6aI/AAAAAAAAAZ8/xCXKZWEkFnQ/s1600-h/remember_me_06b3.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto; padding-top: 0px" title="remember_me_06b" border="0" alt="remember_me_06b" src="http://lh5.ggpht.com/-USYoSIKbZ_o/UHgdL-4RHPI/AAAAAAAAAaI/7yKfWpTFtGk/remember_me_06b_thumb1.png?imgmax=800" width="744" height="238"></a><br> <div align="justify">The request name “LOGOUT” is provided by APEX itself, so you might check for it in a condition, rather then defining the process as unconditioned, just to prevent accidental logout.</div> <div align="justify">So, that’s it. Just a few simple modifications to your custom authentication. What do you think? Does anybody have a more elegant solution (I’m sure there are)? I would appreciate it, if you would post your ideas as comments to this article. If you haven’t got a solution yet, but want to use mine: go ahead! Down here the links of the demo application on apex.oracle.com and the full download of it for you as a template.</div> <h3></h3> <h3> </h3> <h3>Demo and Download</h3> <table style="width: 740px" border="0" cellspacing="0" cellpadding="2"> <tbody> <tr> <td valign="top" width="370"> <div align="center"><a href="http://apex.oracle.com/pls/apex/f?p=63242" target="_blank"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="menu-run-128" border="0" alt="menu-run-128" src="http://lh4.ggpht.com/-F0hSkiNaXPc/UHgdMrSVoMI/AAAAAAAAAaM/1fWVoFBHFLw/menu-run-128%25255B1%25255D.png?imgmax=800" width="128" height="128"></a></div></td> <td valign="top" width="370"> <div align="center"><a href="http://apex.oracle.com/pls/apex/wwv_flow_file_mgr.get_file?p_security_group_id=13804723309278094991&p_fname=f1000_remember_me_template_appl.sql&p_inline=NO"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="menu-expimp-128" border="0" alt="menu-expimp-128" src="http://lh3.ggpht.com/-AKLgCbA-3y0/UHgdNhLoWDI/AAAAAAAAAaY/w2NMOcK6H7Q/menu-expimp-128%25255B1%25255D.png?imgmax=800" width="128" height="128"></a></div></td></tr> <tr> <td valign="top" width="370"> <div align="center"><a href="http://apex.oracle.com/pls/apex/f?p=63242" target="_blank">Try the demo at apex.oracle.com!</a><br>(login with demo/demo)</div></td> <td valign="top" width="370"> <div align="center"><a href="http://apex.oracle.com/pls/apex/wwv_flow_file_mgr.get_file?p_security_group_id=13804723309278094991&p_fname=f1000_remember_me_template_appl.sql&p_inline=NO">Download the DemoApp!</a><br>(just import and install incl. supporting object scripts;<br>min. version: 4.1;<br>default login: demo/demo)</div></td></tr></tbody></table> <h3></h3> <h3> </h3> <h3>Possible Enhancements:</h3>The whole mechanism is a rather simple and naïve approach. I just wanted to explain the basic principle of it. There are lots of enhancements and improvements one could think of, and actually, while writing this post I thought of some myself:<br> <ul> <li>using pre/post function call of Authentication Schema instead of page processes <li>integrate autologin logic from page 103 to page 101 <li>cookie name application variable or dynamically generated <li>investigating the possibility of an autologin authentication plugin </li></ul> <p> </p> <p><a href="http://themes4apex.com" target="_blank"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px; padding-top: 0px" title="themes4apex" border="0" alt="themes4apex" src="http://lh5.ggpht.com/-mFJZfcx1lWI/UaXVLGpfjVI/AAAAAAAAAk4/h4upQHLKWYE/themes4apex%25255B1%25255D.jpg?imgmax=800" width="400" height="63"></a></p> Christian Rokitta ♠http://www.blogger.com/profile/07809391154664980631noreply@blogger.com15tag:blogger.com,1999:blog-5742906279879067605.post-21368973136506142762012-09-28T22:15:00.001+02:002013-06-07T06:44:56.347+02:00Dynamic Date Range in APEX Datepicker - no Plugin required<div align="justify"><a href="http://lh6.ggpht.com/-mZtoEW9jmnM/UGYFRdk2y4I/AAAAAAAAATA/n3NzpXyRcyU/s1600-h/datepicker013.jpg"><img align="right" alt="datepicker01" border="0" height="180" src="http://lh3.ggpht.com/-rFnx3NVf_FM/UGYFSRUHZVI/AAAAAAAAATI/kzyL-yfFn1g/datepicker01_thumb1.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; float: right; margin: 0px 0px 0px 30px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="datepicker01" width="180" /></a></div><div align="justify">The build in jQuery UI Datepicker of Application Express is a very versatile component and it is very easy to configure the basic settings with the Page Item properties. One of the properties you can set, is the range of selectable dates by entering a Minimum and Maximum Date value. The “syntax” of these values is based on the <a href="http://docs.jquery.com/UI/Datepicker/formatDate" target="_blank">jQuery UI Datepicker components date format</a> capabilities, so this might be looking a bit awkward to us Oracle folks at first sight. Next to giving a static value or one of these Datepicker calculations you can reference an APEX Page Item to set the range values, which is a nice thing as we are able to calculate a range dynamically, based on some database value/calculations. The bummer is: the calculation only gets executed during the rendering phase of the page and changing the referencing Page Item’s value won’t change the Datepicker range.</div><div align="justify">What you really want (yes, you do), is to be able to reference Page Items to control the Minimum and Maximum Date dynamically “real-time”. Think of all the examples where you have to enter a Start Date and an End Date, where the End Date, obviously, has to be larger then the Start Date. In my case, I had different “events” to choose from and, once having chosen, pick a day within the events date range. You could just solve this by validating the users input and notifying him <strong>after</strong> he entered the date value. I prefer to restrict the user input to valid values. </div><h5></h5><h3>The Basics: jQuery Datepicker in APEX</h3><a href="http://lh5.ggpht.com/-mSyMWrxNSHc/UGYFSwq_JMI/AAAAAAAAATM/kDdJHGLWfmE/s1600-h/datepicker016.png"><span style="font-size: xx-small;"><img align="right" alt="datepicker01" border="0" height="409" src="http://lh4.ggpht.com/-QRAD8BpEf9U/UGYFULAV2pI/AAAAAAAAATY/gDeh_FuyeIs/datepicker01_thumb4.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; float: right; margin: 0px 0px 0px 20px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="datepicker01" width="381" /></span></a><br />
<div align="justify">I created this little <a href="https://apex.oracle.com/pls/apex/f?p=oracleapexgeekerydemoapp:1" target="_blank">demo page</a>, containing 3 standard APEX date items. Searching for “datepicker” in the page’s source code (using the Chrome Developer Tool), I found 3 corresponding jQuery calls, one for each item, to initialize the datepicker objects. Nice thing is, the Datepicker objects are named after the original APEX page items. As those objects are created during initial rendering of the page, we should be able to access them with jQuery by using the console. If we are able to access these Datepicker objects, we also should be able to alter the options, using the methods defined for the jQuery UI Datepicker object.</div><blockquote><div align="justify"><a href="http://jqueryui.com/demos/datepicker/" target="_blank">jQuery UI Datepicker Demos and Reference</a></div></blockquote><h3>Let’s Get</h3><div align="justify">OK, lets have a look at the objects using the Chrome Console: I want to get the value of the page item and see some of the Datepicker option settings.</div><div align="justify">Querying the page items value is pretty straight forward using jQuery selectors with the elements ID’s:</div><ul><li> <div align="left"><span style="font-family: Courier New;"><strong>$("#P1_MAX_DATE").val()</strong></span>to get the value of the second date item</div></li>
<li> <div align="left"><span style="font-family: Courier New;"><strong>$("#P1_DATE").datepicker( "option", "minDate")</strong></span>to read the minDate option of the third date item </div></li>
</ul><div align="center"><a href="http://lh3.ggpht.com/-3oH0n7LadJw/UGYFU5Z5prI/AAAAAAAAATc/rhUstmm697c/s1600-h/datepicker023.png"><img alt="datepicker02" border="0" height="198" src="http://lh6.ggpht.com/-THeg5gsiuxI/UGYFVTB65HI/AAAAAAAAATo/Bn5vUnMYOgE/datepicker02_thumb1.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="datepicker02" width="484" /></a><a href="http://lh6.ggpht.com/-d9H90eXTSJ8/UGYFWL_XT9I/AAAAAAAAATw/6eWh5KVG-XI/s1600-h/datepicker032.png"><img alt="datepicker03" border="0" height="196" src="http://lh3.ggpht.com/-ugZ1FgMshig/UGYFW9nhJ4I/AAAAAAAAAT4/sfO1QtV31BM/datepicker03_thumb.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px 0px 0px 20px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="datepicker03" width="244" /></a></div><div align="justify">As you see I already entered a min and max Date when defining the third date item, using “-7d” and “+7d” as values, So, now we know how to read the page item value and the Datepicker options.</div><h3></h3><h3>Set it</h3><div align="justify"><br />
Let’s try to alter some options, and obviously, I’m going to try to set the minDate and maxDate options with</div><div align="justify"><span style="font-family: Courier New;"><strong>$("#P1_DATE").datepicker( "option", "minDate", "04-09-2012")</strong></span></div><div align="justify">and</div><div align="justify"><span style="font-family: Courier New;"><strong>$("#P1_DATE").datepicker( "option", "maxDate", "29-09-2012")</strong></span><br />
<span style="font-family: Courier New;"><strong><br />
</strong></span></div><div align="justify"><a href="http://lh4.ggpht.com/-EQa1OfMEnjo/UGYFXmLzu1I/AAAAAAAAAT8/M5Sn4-C8mvE/s1600-h/datepicker04%25255B4%25255D.png"><img alt="datepicker04" border="0" height="490" src="http://lh4.ggpht.com/-P2_kJT-tr64/UGYFYUawytI/AAAAAAAAAUI/Dbs9AG6rGHA/datepicker04_thumb%25255B2%25255D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="datepicker04" width="769" /></a><br />
Well, it works! This is what the Datepicker looks like after setting the min- and maxDate.</div><h3></h3><h3>Wrap it up</h3><div align="justify"><br />
If now we combine getting the values of the Min./Max. Date page items and setting the the minDate/maxDate options of the “Actual Date” item, put this into a Dynamic Action, lets say: “execute JavaScript on the Change events of the first two date fields”, we should have exactly the intended behavior.<br />
<br />
</div><div align="justify">Start the Dynamic Action Wizard by right-clicking on the P1_MIN_DATE item and choosing “Create Dynamic Action”: </div><div align="justify"><a href="http://lh4.ggpht.com/-A12R10btpic/UGYFZHox6FI/AAAAAAAAAUQ/030A9ZD9_rg/s1600-h/datepicker05%25255B6%25255D.png"><img alt="datepicker05" border="0" height="284" src="http://lh5.ggpht.com/-QQr3zJWULp8/UGYFZ8LfCpI/AAAAAAAAAUY/rFZcbZa5lJk/datepicker05_thumb%25255B4%25255D.png?imgmax=800" style="background-image: none; border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="datepicker05" width="754" /></a></div><div align="justify"><a href="http://lh4.ggpht.com/-rCa4aewV-io/UGYFajqzt8I/AAAAAAAAAUc/RVXZUeEMwB0/s1600-h/datepicker06%25255B4%25255D.png"><img alt="datepicker06" border="0" height="393" src="http://lh4.ggpht.com/-X57NmvNP-S8/UGYFbU4QevI/AAAAAAAAAUo/pbiKNl1Yk10/datepicker06_thumb%25255B2%25255D.png?imgmax=800" style="background-image: none; border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="datepicker06" width="749" /></a></div><div align="justify"><a href="http://lh3.ggpht.com/-HIhDtC1NwQs/UGYFb2ZFVMI/AAAAAAAAAUw/ZWvk5Jt5-mI/s1600-h/datepicker07%25255B5%25255D.png"><img alt="datepicker07" border="0" height="450" src="http://lh5.ggpht.com/-Pe31DWTQi3E/UGYFc18PvII/AAAAAAAAAU0/WCQApnMWKC0/datepicker07_thumb%25255B3%25255D.png?imgmax=800" style="background-image: none; border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="datepicker07" width="743" /></a></div><div align="justify"><a href="http://lh4.ggpht.com/-a2SzbkwgPW8/UGYFdas4BlI/AAAAAAAAAVA/jtyAhcJ-y9c/s1600-h/datepicker08%25255B6%25255D.png"><img alt="datepicker08" border="0" height="313" src="http://lh4.ggpht.com/-vHcxq40NVPU/UGYFeKTpKRI/AAAAAAAAAVE/fSrjgnBa80A/datepicker08_thumb%25255B4%25255D.png?imgmax=800" style="background-image: none; border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="datepicker08" width="742" /></a></div><br />
Do the same for P1_MAX_DATE using the code:<br />
<br />
<span style="font-family: Courier New;"><strong>$("#P1_DATE").datepicker( "option", "maxDate", $("#P1_MAX_DATE").val());</strong></span><br />
<span style="font-family: Courier New;"><strong><br />
</strong></span> Just two statements! See for yourself and visit the <a href="https://apex.oracle.com/pls/apex/f?p=oracleapexgeekerydemoapp:1" target="_blank">demo page</a>. Of course the variations of this approach are countless, but the basic two statements will remain: getting the value and setting the range options.<br />
<br />
Have fun APEX-ing.<br />
<br />
<a href="http://themes4apex.com/" target="_blank"><img alt="themes4apex" border="0" height="63" src="http://lh5.ggpht.com/-IrVSJHcU-ow/UaXWTVsiyKI/AAAAAAAAAkw/Db9AxijZDl8/themes4apex%25255B6%25255D.jpg?imgmax=800" style="background-image: none; border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="themes4apex" width="400" /></a><br />
Christian Rokitta ♠http://www.blogger.com/profile/07809391154664980631noreply@blogger.com9tag:blogger.com,1999:blog-5742906279879067605.post-81984636057887068672012-08-22T17:48:00.001+02:002012-08-23T13:48:02.760+02:00APEX Tabular Form: focus cursor on first element of new row<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:0e59658a-0784-4162-98fe-7bdd884500db" class="wlWriterEditableSmartContent">Tags van Technorati: <a href="http://technorati.com/tags/apex" rel="tag">apex</a>,<a href="http://technorati.com/tags/dynamic+action" rel="tag">dynamic action</a>,<a href="http://technorati.com/tags/tabular+form" rel="tag">tabular form</a>,<a href="http://technorati.com/tags/add+row" rel="tag">add row</a>,<a href="http://technorati.com/tags/focus" rel="tag">focus</a>,<a href="http://technorati.com/tags/cursor" rel="tag">cursor</a></div> <p><a href="http://lh5.ggpht.com/-ax86J8DJo6s/UDYYb5UzZ1I/AAAAAAAAASA/NKXc92XiH9g/s1600-h/focus0%25255B1%25255D.jpg"><img style="background-image: none; border-bottom: 0px; border-left: 0px; margin: 0px 55px 0px 0px; padding-left: 0px; padding-right: 0px; display: inline; float: left; border-top: 0px; border-right: 0px; padding-top: 0px" title="focus0" border="0" alt="focus0" align="left" src="http://lh5.ggpht.com/-3tXuAC2EYsM/UDUGoT1aMCI/AAAAAAAAASI/Oa4jwQjbMGw/focus0_thumb.jpg?imgmax=800" width="215" height="235"></a>I just got the question from a fellow developer, how to focus the cursor to the first input field of a newly added row using the ADD button in a standard APEX Tabular Form. Actually, I would expect APEX to do this automagically. But it doesn’t. To implement this behavior is actually really simple.</p> <p> </p> <p> </p> <p>For this example I create a simple tabular form based on the demo_customers table:</p> <p><a href="http://lh4.ggpht.com/-Yx5vlmmO3S8/UDT-5q6F6FI/AAAAAAAAAOM/y9x4EZ5N2u0/s1600-h/focus1%25255B15%25255D.jpg"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto; padding-top: 0px" title="focus1" border="0" alt="focus1" src="http://lh6.ggpht.com/-kqSn3aKN1TQ/UDT-6db0j7I/AAAAAAAAAOQ/bKNPjBLYAjA/focus1_thumb%25255B13%25255D.jpg?imgmax=800" width="740" height="402"></a></p> <p>This is what the form looks like when you click the “Add Row” button. As you can see, none of the input field has focus at this time. To focus the cursor on the first field of the new row (Cust First Name), I somehow have to change the behavior of the “Add Row” button. Let’s have a look at it’s definition:</p> <p><a href="http://lh3.ggpht.com/-9X6aEDtwO5A/UDT-7A1eaLI/AAAAAAAAAOc/5TAR-8c9Vpg/s1600-h/focus2%25255B4%25255D.jpg"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto; padding-top: 0px" title="focus2" border="0" alt="focus2" src="http://lh5.ggpht.com/-eD_ex-v2jEg/UDT-74hxqZI/AAAAAAAAAOk/2TW2CZjpurI/focus2_thumb%25255B2%25255D.jpg?imgmax=800" width="740" height="426"></a></p> <p>The click-action of the button is actually a JavaScript call: addRow();. Naturally I want to keep this action, but after this, I want to start an additional action that should set the focus to the input field. To be able to have multiple actions performed when the button is clicked, I will change the Action definition to “Defined by Dynamic Action”: </p> <p><a href="http://lh4.ggpht.com/-jtloXjy8T3o/UDT-9FzL-BI/AAAAAAAAAOs/_AKZb5eIA8c/s1600-h/focus3%25255B4%25255D.jpg"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto; padding-top: 0px" title="focus3" border="0" alt="focus3" src="http://lh3.ggpht.com/-pzUMsiXBx0s/UDT--Al6xbI/AAAAAAAAAO0/yaX_HXqnQrU/focus3_thumb%25255B2%25255D.jpg?imgmax=800" width="529" height="239"></a></p> <p>Now I’m going to add a Dynamic Action to the “Add Row” button. First action will be the original JavaScript call to add the row, second action will be setting the focus. This is how the definition will look like after I added the actions:</p> <p><a href="http://lh5.ggpht.com/-9HkHs-LqD5k/UDT--8LZaCI/AAAAAAAAAO4/8Z_0g3aNZjM/s1600-h/focus4%25255B3%25255D.jpg"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto; padding-top: 0px" title="focus4" border="0" alt="focus4" src="http://lh3.ggpht.com/-83G4BZ5LPN4/UDT-_66HpXI/AAAAAAAAAPE/mykgu778Wmk/focus4_thumb%25255B1%25255D.jpg?imgmax=800" width="512" height="410"></a></p> <p>Creating the Dynamic Action and the first True Action I will do with the Create Dynamic Action Wizard for the button:</p> <p><a href="http://lh6.ggpht.com/-J99-hx61x2c/UDT_A1t2j-I/AAAAAAAAAPI/3Z6QYj2yezQ/s1600-h/focus5%25255B6%25255D.jpg"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto; padding-top: 0px" title="focus5" border="0" alt="focus5" src="http://lh5.ggpht.com/-UXfsSFvvopg/UDT_BtPaIsI/AAAAAAAAAPQ/QKrvaR06718/focus5_thumb%25255B2%25255D.jpg?imgmax=800" width="744" height="195"></a></p> <p><a href="http://lh5.ggpht.com/-dv5Ffwy9gm4/UDT_CYnLZ6I/AAAAAAAAAPY/fb43itvmjQA/s1600-h/focus6%25255B8%25255D.jpg"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto; padding-top: 0px" title="focus6" border="0" alt="focus6" src="http://lh4.ggpht.com/-YJAgGTZJ4_o/UDT_CzUMNuI/AAAAAAAAAPk/ibPPfhWVK8E/focus6_thumb%25255B4%25255D.jpg?imgmax=800" width="744" height="149"></a></p> <p><a href="http://lh3.ggpht.com/-4FNpvdAghI8/UDT_DvMEm3I/AAAAAAAAAPs/7l0-Sp10gGo/s1600-h/focus7%25255B8%25255D.jpg"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto; padding-top: 0px" title="focus7" border="0" alt="focus7" src="http://lh4.ggpht.com/-u7zTy66bd1Y/UDT_Em9h6xI/AAAAAAAAAPw/S1FW0jP2vyk/focus7_thumb%25255B4%25255D.jpg?imgmax=800" width="744" height="251"></a></p> <p><a href="http://lh3.ggpht.com/-fCeWIyCZJXU/UDT_FXXpTHI/AAAAAAAAAP8/KFRWo55ba2k/s1600-h/focus8%25255B8%25255D.jpg"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto; padding-top: 0px" title="focus8" border="0" alt="focus8" src="http://lh4.ggpht.com/-H5US-SfkCHI/UDT_GJe3kbI/AAAAAAAAAQA/124oZfx6cQE/focus8_thumb%25255B4%25255D.jpg?imgmax=800" width="744" height="198"></a></p> <p>Now I have implemented the original behavior.</p> <p>Next I want to focus the cursor on the first text-field of the added row, once I click the button. I know there is a build-in Dynamic Action to set the focus on an element. I just need to know which element. Let’s have a look at the HTML code of the generated APEX page, especially the the text-field element we wish to target (I used the Chrome Developer Tool here):</p> <p><a href="http://lh4.ggpht.com/-YpzCNM5Mk3Q/UDT_HI0Dr9I/AAAAAAAAAQM/zR_nL852m_A/s1600-h/focus9%25255B5%25255D.jpg"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="focus9" border="0" alt="focus9" src="http://lh4.ggpht.com/-mzCSsgZRQrA/UDT_H7kQflI/AAAAAAAAAQU/oGjio-084xY/focus9_thumb%25255B3%25255D.jpg?imgmax=800" width="744" height="574"></a></p> <p>As you can see, the name of this element is <strong>f02</strong> and the id <strong>f02_0008</strong>. Because the ID can change depending on the number of rows displayed, I choose to work with the name attribute, which stays the same. The problem is, all “Cust First Name” fields do have the same name. Luckily jQuery offers a way to select the last element in an array of element with the same name and luckily, APEX Dynamic Actions support jQuery selector syntax. So here is, how I define the focus action for my “Add Row” button:</p> <p><a href="http://lh6.ggpht.com/-96-Q8SI8_LE/UDT_I8W2BFI/AAAAAAAAAQY/8GqGp95vu64/s1600-h/focus10%25255B5%25255D.jpg"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto; padding-top: 0px" title="focus10" border="0" alt="focus10" src="http://lh3.ggpht.com/-TqR64BVdh-s/UDT_JhJk_cI/AAAAAAAAAQk/fM-M60ki8HI/focus10_thumb%25255B3%25255D.jpg?imgmax=800" width="370" height="208"></a></p> <p><a href="http://lh6.ggpht.com/-l1f9c0A6DTs/UDT_KlnHH3I/AAAAAAAAAQo/wi3GWQKbboU/s1600-h/focus11%25255B5%25255D.jpg"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto; padding-top: 0px" title="focus11" border="0" alt="focus11" src="http://lh3.ggpht.com/-cLSgpdvNUZw/UDT_LjS4nEI/AAAAAAAAAQ0/aQSbb5MvBQA/focus11_thumb%25255B3%25255D.jpg?imgmax=800" width="744" height="528"></a></p> <p>As you can see, I select all elements having the name attribute equal to <strong>f02</strong> and<strong> :last</strong> allows me to select the last element of these. Here is a screenshot from the result (after clicking the “Add Row” button) with focus on the first text element of the last, newly added row:</p> <p><a href="http://lh4.ggpht.com/-xK8y5AVDTJw/UDT_MZ6WWHI/AAAAAAAAAQ4/jaq70mXav7A/s1600-h/focus12%25255B5%25255D.jpg"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto; padding-top: 0px" title="focus12" border="0" alt="focus12" src="http://lh4.ggpht.com/-fo71hSvnpZs/UDT_M3FYq_I/AAAAAAAAARE/U3HlgA28bfw/focus12_thumb%25255B3%25255D.jpg?imgmax=800" width="740" height="330"></a></p> Christian Rokitta ♠http://www.blogger.com/profile/07809391154664980631noreply@blogger.com4tag:blogger.com,1999:blog-5742906279879067605.post-82124871728220532862012-08-18T01:03:00.001+02:002013-06-07T06:46:09.363+02:00Running Standalone APEX Listener as Windows Service<a href="http://lh5.ggpht.com/-1qHKt0dADD4/UC7NpF92s1I/AAAAAAAAANQ/fTepOXfnNQU/s1600-h/Service4.jpg"><img align="left" alt="Service" border="0" height="169" src="http://lh4.ggpht.com/-hkM5EyCtBkM/UC7Npjl7ZdI/AAAAAAAAANU/VbjufveXmBg/Service_thumb2.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; float: left; margin: 0px 51px 10px 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Service" width="164" /></a><br />
<div align="justify">When working with APEX you certainly want to use the APEX Listener. It’s a great piece of software and Oracle is committed to extend its functionality (Oracle recently release the beta version of the new <a href="http://www.oracle.com/technetwork/developer-tools/apex-listener/downloads/listener-beta-1727062.html" target="_blank">APEX Listener 2.0</a>).</div><div align="justify">When installing the APEX Listener, you basically have two choices:</div><ul><li> <div align="left">run APEX Listener “Standalone” </div></li>
<li> <div align="left">deploy the Listeners WAR file to one of the supported webservers</div></li>
</ul><div align="justify">The problem (at least, my problem): when using the APEX Listener on my laptop/desktop with my local APEX instance, I do not want to set up a whole webserver, just to be able to develop APEX applications. So I,’m choosing the lightweight option: Standalone! But the annoying thing about the standalone installation is, that I have to start the APEX Listener from the command line each time I want it to be available. It just would be so much easier to just have it as a Windows service, stating during system boot.</div><div align="justify">Seems that an APEX developer from Poland, <a href="http://www.blogger.com/profile/14195379541492100770" target="_blank">Andrzej Nowakowski</a>, solved this problem for us and <a href="http://apex.dbe.pl/2011/09/apex-listener-standalone-windows.html" target="_blank">blogged about it</a>, but the reason I probably never read his post is that he wrote the post in Polish. I followed the (Google Chrome) translated instructions, and after a little (just a little) struggle, I have my APEX Listener running as a Windows service.</div><div align="justify">So here is my post, mostly translating Andrzej’s instructions, in English.</div><div align="justify">Usually you would install/start the APEX Listener standalone mode by issuing the following statement, as documented in Oracle’s <a href="http://download.oracle.com/otn/java/appexpress/1.1/docs/AELIG/E21058_01.pdf" target="_blank">Installation Guide</a>: </div><div align="justify"><span style="font-family: Consolas;">java -jar apex.war</span></div><div align="justify">This will create my Listener’s configuration files in the Windows path <strong>C:\Users\christian\AppData\Local\Temp\apex</strong> by default, using <em>${java.io.tmpdir}/<Mount-Point>/apex-config.xml</em>. To avoid using the environment variables, which could be different when starting APEX Listener during system startup as a service, I’m going to let the Listener create its configuration files in a less user-dependent path using the listeners command line parameter <strong>–Dapex.home</strong>:</div><div align="justify"><span style="font-family: Consolas;">java -Dapex.home=C:\oracle\apex_listener.1.1.4.195.00.12\listener_conf -jar apex.war</span></div><div align="justify"><em>C:\oracle\apex_listener.1.1.4.195.00.12</em> is the folder I installed/extracted the Listener software into. For the rest of the installation process, just follow the instructions in the installation guide. Now you should have a command line window open running the APEX Listener. Closing this window will shut down the listener.</div><div align="justify">To get rid of starting the Listener manually, we need to find a way to start the command as service. A little freeware program does the trick: <a href="http://nssm.cc/" target="_blank">NSSM - the Non-Sucking Service Manager</a>. Starting NSSM, you just need to enter the <path>/command, its command line options and a name for the windows service. Make sure nssm.exe is installed somewhere where Windows can find it through the $PATH environment variable.</div><div align="justify">For my APEX Listener, I create a .bat file that I then call as service startup script, <strong>startlistener.bat</strong>, and put it into my Listener’s installation folder.</div><span style="font-family: Consolas;">c:<br />
cd \ <br />
cd C:\oracle\apex_listener.1.1.4.195.00.12<br />
java -Dapex.home=C:\oracle\apex_listener.1.1.4.195.00.12\listener_conf -jar apex.war</span><br />
Now all I have to do is starting a command window (in Administrator mode) and call <br />
C:> nssm install<br />
I enter my .bat file and give my service a name in the dialog window popping up:<br />
<a href="http://lh3.ggpht.com/-lhNTKuoHzhc/UC7Nqa_bsuI/AAAAAAAAANc/mkqbNd5PvEA/s1600-h/nssm%25255B4%25255D.jpg"><img alt="nssm" border="0" height="234" src="http://lh4.ggpht.com/-C7O-W-WYRrw/UC7NrDitvHI/AAAAAAAAANo/3Wt8oL7aWl8/nssm_thumb%25255B2%25255D.jpg?imgmax=800" style="background-image: none; border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="nssm" width="392" /></a><br />
Done:<br />
<a href="http://lh5.ggpht.com/-dxWVjOCa3RY/UC7NsDFmDiI/AAAAAAAAANw/55VQBfNDSUU/s1600-h/taskmanager%25255B5%25255D.jpg"><img alt="taskmanager" border="0" height="529" src="http://lh5.ggpht.com/-ZuyMFcXuKOQ/UC7NszOTwPI/AAAAAAAAAN0/XC3mg62H2fQ/taskmanager_thumb%25255B3%25255D.jpg?imgmax=800" style="background-image: none; border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="taskmanager" width="769" /></a><br />
<br />
<p><a href="http://themes4apex.com/" target="_blank"><img alt="themes4apex" border="0" height="63" src="http://lh5.ggpht.com/-IrVSJHcU-ow/UaXWTVsiyKI/AAAAAAAAAkw/Db9AxijZDl8/themes4apex%25255B6%25255D.jpg?imgmax=800" style="background-image: none; border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="themes4apex" width="400" /></a><br />
</p>Christian Rokitta ♠http://www.blogger.com/profile/07809391154664980631noreply@blogger.com0tag:blogger.com,1999:blog-5742906279879067605.post-439447985293848912012-06-08T16:58:00.001+02:002012-06-08T18:25:33.695+02:00APEX + jQueryMobile + EURO 2012 Championship = Lots’s of Fun<p><a href="http://www.fifapex.net" target="_blank"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; margin-left: 0px; border-left-width: 0px; margin-right: 0px" title="euro-2012-official-logo-transp" border="0" alt="euro-2012-official-logo-transp" align="left" src="http://lh5.ggpht.com/-ZGWgoETeyBk/T9ITGSThkcI/AAAAAAAAAMQ/XSsWSaFMxVk/euro-2012-official-logo-transp%25255B6%25255D.png?imgmax=800" width="240" height="101" /></a> Tonight (CET) the European Football Championship kicks off. As with every EURO or World Championship I’m organizing a predicting game where you (Yes, you too!) can bet on match results <a title="FifApex.net" href="http://www.fifapex.net/apex/f?p=euro2012:home" target="_blank">FifApex</a>. And again, the website is build with Oracle Application Express. New this year: I created a mobile version of FifApex (<a href="http://m.fifapex.net" target="_blank">m.fifapex.net</a>) with APEX and the jQuery Mobile framework. If you want to know how I’ve done this, come visit my presentation at the <a href="http://kscope12.com" target="_blank">ODTUG KScope12 conference in San Antonio, Texas</a>, end of this month. Meanwhile, register for FifApex, enter our predictions, and maybe you will be one of the winners of the <a href="http://www.fifapex.net/apex/f?p=2012:2:2" target="_blank">prizes …</a></p> <p> </p> <p><a href="http://lh4.ggpht.com/-e4NiP41k0yo/T9ITHRSA4rI/AAAAAAAAAMY/McikUt6LAS4/s1600-h/mFifApex%25255B4%25255D.png"><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="mFifApex" border="0" alt="mFifApex" src="http://lh6.ggpht.com/-VIOH84W9kOM/T9ITINp3BHI/AAAAAAAAAMc/ED2pHPWF4Fc/mFifApex_thumb%25255B2%25255D.png?imgmax=800" width="221" height="240" /></a></p> <p> </p> <p>BTW: if you missed the first games: you still can enter the competition AND, from my experience, I can tell you: there is not a lot football/soccer knowledge required for a good ranking ;-).</p> Christian Rokitta ♠http://www.blogger.com/profile/07809391154664980631noreply@blogger.com0