tag:blogger.com,1999:blog-84775412356321475902024-03-13T15:08:05.981+01:00Rutger's APEX blogRutgerhttp://www.blogger.com/profile/02983356065037436936noreply@blogger.comBlogger13125tag:blogger.com,1999:blog-8477541235632147590.post-58134261421221661412010-07-16T11:02:00.003+02:002010-07-16T11:07:52.275+02:00*Updated* Apex jQuery spinbox v1.0 [plugin]After a review of Patrick Wolf, a few changes are incorporated to make this plugin a 1.0 version. As I said before, my first try was really simple (hence the 0.1), and Patrick took the time to review and change/add some of the code of the plugin. The following things have changed:<br /><br /> * Minimum value is required<br /> * New number alignment attribute<br /> * Autocomplete for text field is turned off<br /> * New validation code that:<br /><br /> 1. Checks if the value is numeric<br /> 2. Checks if the value is in range of min/max<br /> 3. Returns validation messages<br /><br /> * Renamed the library files according to apex jQuery namespace<br /> * Added source files in release<br /> * Added server ready files in case of webserver install<br /> * Added a readme file<br /> * Added installation and de-installation steps in the readme file<br /><br />You can still find the demo on <a href="http://apex.oracle.com/pls/apex/f?p=44781:3::::::">this location</a>.<br />The download is stille hosted <a href="http://apex-plugin.com/index.php?option=com_sobi2&sobi2Task=sobi2Details&sobi2Id=38&Itemid=1&Itemid=1">here</a>.<br /><br />And again, thanks to Patrick for the help!<br />Now go on, have fun with this plugin!Rutgerhttp://www.blogger.com/profile/02983356065037436936noreply@blogger.com2tag:blogger.com,1999:blog-8477541235632147590.post-1435011550306678422010-07-14T21:48:00.005+02:002010-07-16T12:33:04.168+02:00Apex jQuery spinbox [plugin]!!===========================================================<br /><span style="font-weight:bold;">New version available check the <a href="http://rutgerderuiter.blogspot.com/2010/07/updated-apex-jquery-spinbox-v10-plugin.html">next post</a>.</span><br />!!===========================================================<br />This is the first plugin I created, using the spinbox plugin for jQuery, and wrapping some PL/SQL around it. It's very comparable to Patrick Wolf's mask <a href="http://www.inside-oracle-apex.com/oracle-apex-4-0-how-to-create-a-plug-in/">example</a>.<br /><br />It's a very simple plugin, only rendering the field with extra up and down buttons at the end of the field, by clicking it adds or subtracts the "stepsize" parameter set in the settings. You can also set minimum and maximum parameters if you want to restrict the numbers (client side only ofcourse). <br /><br />The demo: <a href="http://apex.oracle.com/pls/apex/f?p=44781:3">http://apex.oracle.com/pls/apex/f?p=44781:3</a><br />The download: <a href="http://www.apex-plugin.com/oracle-apex-plugins/item-plugin/spinbox.html">http://www.apex-plugin.com/oracle-apex-plugins/item-plugin/spinbox.html</a><br /><br />Have fun with it.Rutgerhttp://www.blogger.com/profile/02983356065037436936noreply@blogger.com2tag:blogger.com,1999:blog-8477541235632147590.post-61728769692493245262010-07-14T16:48:00.012+02:002010-07-14T18:41:11.561+02:00Plugging in the Apex Item PluginIs it really more than a year since my last post on this blog? Time flies when you're having fun. Talking about fun, you probably noticed the release of Apex 4. This action packed release has a lot to offer. I just recently took the time to do some research on the new features. And yes, most like everyone else in the Apex blogging scene, I really wanted to try some plugins and dynamic actions. <br />Funny observation: The most mentioned feature of Apex 4 <span style="font-style:italic;">before</span> the Early Adopters editions, <span style="font-weight:bold;">websheets</span> are not mentioned as often anymore.<br /><br />Having said that, today I wanted to write about my view on the apex item plugins. I've created one, and I must say it is really nice functionality. It'll create a lot more flexibility by adding almost limitless options. If this is a good thing? More on that later.<br /><br /><span style="font-weight:bold;">Item plugins in apex...gamechanger?</span><br />Many item plugins are actually done many times before. Think of one really original item type or functionality in an item, and it'll probably been done before. So the item plugins feel more like "closing the gap" with other frameworks that allready have rich item types, or plugin functionality (Like ADF and .NET), than a game changer in framework choice.<br /><br /><span style="font-weight:bold;">Closing a gap? ....how fast?</span><br />Another very cool thing to bear in mind, is that Apex almost seamlessly integrates jQuery in it's pages. jQuery has supported plugins for their framework for some time now, and there are lot of plugins lying around.<br />With item plugins in Apex it's almost logical to assume that Apex developers don't want to double their work. So get a jQuery plugin, wrap an Apex plugin around it, and boom, there you go... working jquery plugins as declaritive items in apex. So it's pretty easy to create a lot of item plugins for apex on the short term. I think that in a year or so, almost all mainstream item types found in other frameworks, can be done in Apex. Different apex plugin repositories are allready popping into existence, hoping to be the next App Store for Apex Developers.<br /><br /><span style="font-weight:bold;">Things to think about</span><br />While the general concensus will probably be positive on item plugins, there are still things to think about. One of the key aspects in Apex developement for me, was the fast, uniform way of working. No matter what client, or what project, the tool and it's functionality was the same. For me this is/was one of the key aspects in the debate on Java and Apex, mentioning JAF (Just Another Framework) very often to the Java guy. I'm well aware that the plugins for Apex are nowhere near as complex as a completely different framework in Java, but I'm just saying that spiderman's Uncle Ben had it wrong, he should've said: "With great flexibility, comes great responsibility". Ironically, you now have more potential to lock your environment in flexibility, because it has so many different little plugins.<br /><br /><span style="font-weight:bold;">So... do I like it ?</span><br />Yes! I like the plugin system very much! I think it's great, and I see a big maturement of the framework. This will really help arguing on why Apex is a good choice in many situations. But it's the architects/developers responsibility to restrict some of this newly found flexibility. Define, Create, Copy, Discover or just write a basic set of plugins for your Apex environment. Work with these plugins across the line. Really think about why you would use a plugin, and if so, incorporate it in the environments plugin repository. Don't let it get messy, it'll break you up one day.<br /><br />Later today, I'll post my first (<span style="font-weight:bold;">very</span> simple) Item Plugin.<br /><br />P.S.<br />All of the above is quite inherent with any modular software developement....Rutgerhttp://www.blogger.com/profile/02983356065037436936noreply@blogger.com0tag:blogger.com,1999:blog-8477541235632147590.post-85487460535413178802009-06-18T22:38:00.004+02:002009-06-18T22:57:21.350+02:00The Apex ACP bèta is here!If you want to convert your Anychart 3 charts to Anychart 4.2.1, I have some great news! You can do it now, for free! Check these <a href="http://apexacp.blogspot.com/2009/06/demos.html" target="_blank">demo's</a>.<br /><br />Today I added the download link on the <a href="http://apexacp.blogspot.com" target="_blank">Apex Anychart Conversion Package website</a>. <br />This means the first (bèta) release is public. And you're all invited to download and try the Apex ACP. <br /><br />If you want to install the package, please have a look at my installation guide and video here: <a href="http://apexacp.blogspot.com/2009/06/installation.html" target="_blank">Installation Guide</a><br />I've also added the installation video to this post at the bottom.<br /><br />If you find any bugs, you're more then welcome to share your problems, right here: <a href="http://apex.oracle.com/pls/otn/f?p=30416:2" target="_blank">Report a bug</a><br /><br /><br />Well, I hope everyone will have little problems installing the package. And I hope we don't have to use those Anychart 3 charts anymore.<br /><br />I'm very interested in your opinion, so throw me a line if you want in the comments !<br /><br /><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/HfoSuM9_j_I&hl=en&fs=1&hd=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/HfoSuM9_j_I&hl=en&fs=1&hd=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>Rutgerhttp://www.blogger.com/profile/02983356065037436936noreply@blogger.com8tag:blogger.com,1999:blog-8477541235632147590.post-43033154699055207062009-06-11T00:04:00.007+02:002009-06-11T00:34:27.965+02:00The Apex Anychart Conversion Package (ACP) featurelist<div style="text-align: center;"><span class="Apple-style-span" style="font-size:small;"><br /></span></div><span class="Apple-style-span" style="font-family:arial;"><div><b><span class="Apple-style-span" style="font-size:small;">Status,</span></b></div><span class="Apple-style-span" style="font-size:small;">I've nearly finished the first version of the Apex ACP, the first conversion package for Oracle Apex to upgrade your existing charts to Anychart 4 while still having the power of the Apex builder wizards and chart configurations. And the best thing is, it is absolutely free! </span></span><div><span class="Apple-style-span" style="font-family:arial;"><span class="Apple-style-span" style="font-size:small;">Anychart 4.2.1 is allready supplied in the standard version of Oracle Apex, so you're making the best use out of the available resources. </span></span></div><div><span class="Apple-style-span" style="font-family:arial;"><span class="Apple-style-span" style="font-size:small;"><br /></span></span></div><div><span class="Apple-style-span" style="font-family:arial;"><b><span class="Apple-style-span" style="font-size:small;">Site,</span></b></span></div><div><span class="Apple-style-span" style="font-family:arial;"><span class="Apple-style-span" style="font-size:small;">I've created this site: </span><a href="http://apexacp.blogspot.com/" target="_blank"><span class="Apple-style-span" style="font-size:small;">http://www.apexacp.blogspot.com</span></a></span></div><div><span class="Apple-style-span" style="font-family:arial;"><span class="Apple-style-span" style="font-size:small;">On this site you can view the features and known limitations of the ACP. When the package becomes available (or, when I finally get the time to make an installation script ;) ) it will be available here to. For now, you can view the features and the video demo's I've created.</span></span></div><div><span class="Apple-style-span" style="font-family:arial;"><span class="Apple-style-span" style="font-size:small;"><br /></span></span></div><div><span class="Apple-style-span" style="font-family:arial;"><b><span class="Apple-style-span" style="font-size:small;">Plugin,</span></b></span></div><div><span class="Apple-style-span" style="font-family:arial;"><span class="Apple-style-span" style="font-size:small;">Inspired by Patrick Wolf's Apex Builder Plugin, I've create an Apex ACP Plugin for the greaseMonkey firefox plugin. With this plugin you'll be able to convert your chart with the click of a button.</span></span></div><div><span class="Apple-style-span" style="font-family:arial;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh96wdR1MA0sFqzaeJ26U0Xp_MS2PghsSsdnqyLECNHdWW5ngbCEu2DQ3PtWti3cnAlHA2mLZJApACbQZgSBx3oM_rRJarz9VkimbykbVxRKty8OC3L2ygEekR2Y56keYkFyiK7_raLe_I/s400/Anychartplaatje.PNG" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;height: 35px;" border="0" alt="" id="BLOGGER_PHOTO_ID_5345827089475549522" /></span></div><div style="text-align: left;"><span class="Apple-style-span" style="font-family:arial;"><span class="Apple-style-span" style="font-size:small;"><br /></span></span></div><div style="text-align: left;"><span class="Apple-style-span" style="font-family:arial;"><span class="Apple-style-span" style="font-size:small;">You can also find a new demo on the </span><a href="http://apexacp.blogspot.com/" target="_blank"><span class="Apple-style-span" style="font-size:small;">Apex ACP site </span></a><span class="Apple-style-span" style="font-size:small;"> !</span></span></div><div style="text-align: left;"><span class="Apple-style-span" style="font-family:arial;"><span class="Apple-style-span" style="font-size:small;"><br /></span></span></div><div style="text-align: left;"><span class="Apple-style-span" style="font-family:arial;"><b><span class="Apple-style-span" style="font-size:small;">Features,</span></b></span></div><div style="text-align: left;"><span class="Apple-style-span" style="font-family:arial;"><span class="Apple-style-span" style="font-size:small;">As listed on the Apex ACP site, here is a summary of the Apex ACP features:</span></span></div><div style="text-align: left;"><span class="Apple-style-span" style="font-family:arial;"><br /></span></div><div style="text-align: left;"><span class="Apple-style-span" style="font-family:arial;"><span class="Apple-style-span" style=" color: rgb(51, 51, 51); line-height: 19px; font-family:Verdana;font-size:13px;"><span style="font-weight: bold; font-family:verdana;"><span class="Apple-style-span" style="font-size:medium;">Version 0.6 (first bèta release)</span></span><span class="Apple-style-span" style="font-size:medium;"><br /></span><span><span style="font-family:verdana;"><span class="Apple-style-span" style="font-size:medium;"><br />Features:</span></span></span><br /><br /><div><span class="Apple-style-span" style="font-size:small;">1. Better export functionality (supported by Anychart 4.2.1):<br /></span><span class="Apple-tab-span" style="white-space: pre; "><span class="Apple-style-span" style="font-size:small;"> </span></span><span class="Apple-style-span" style="font-size:small;">- Save chart to PDF<br /></span><span class="Apple-tab-span" style="white-space: pre; "><span class="Apple-style-span" style="font-size:small;"> </span></span><span class="Apple-style-span" style="font-size:small;">- Save chart as image<br /></span><span class="Apple-tab-span" style="white-space: pre; "><span class="Apple-style-span" style="font-size:small;"> </span></span><span class="Apple-style-span" style="font-size:small;">- Print chart directly<br />2. Better look and feel creating a better overview<br />3. More grid lines on the chart<br />4. The use of all standard APEX wizards in the Apex Builder<br />5. Easy conversion plugin changing your chart with the click of a button<br /></span><span class="Apple-tab-span" style="white-space: pre; "><span class="Apple-style-span" style="font-size:small;"> </span></span><span class="Apple-style-span" style="font-size:small;">- This uses greasemonkey<br />6. Convert the following charts from Anychart 3.3 to Anychart 4.2.1 :<br /></span><span class="Apple-tab-span" style="white-space: pre; "><span class="Apple-style-span" style="font-size:small;"> </span></span><span class="Apple-style-span" style="font-size:small;">- Candlestick<br /></span><span class="Apple-tab-span" style="white-space: pre; "><span class="Apple-style-span" style="font-size:small;"> </span></span><span class="Apple-style-span" style="font-size:small;">- Horizontal Range 2D Column<br /></span><span class="Apple-tab-span" style="white-space: pre; "><span class="Apple-style-span" style="font-size:small;"> </span></span><span class="Apple-style-span" style="font-size:small;">- Horizontal Range 3D Column<br /></span><span class="Apple-tab-span" style="white-space: pre; "><span class="Apple-style-span" style="font-size:small;"> </span></span><span class="Apple-style-span" style="font-size:small;">- Horizontal 2D Column<br /></span><span class="Apple-tab-span" style="white-space: pre; "><span class="Apple-style-span" style="font-size:small;"> </span></span><span class="Apple-style-span" style="font-size:small;">- Horizontal 3D Column<br /></span><span class="Apple-tab-span" style="white-space: pre; "><span class="Apple-style-span" style="font-size:small;"> </span></span><span class="Apple-style-span" style="font-size:small;">- Range 2D Column<br /></span><span class="Apple-tab-span" style="white-space: pre; "><span class="Apple-style-span" style="font-size:small;"> </span></span><span class="Apple-style-span" style="font-size:small;">- Range 3D Column<br /></span><span class="Apple-tab-span" style="white-space: pre; "><span class="Apple-style-span" style="font-size:small;"> </span></span><span class="Apple-style-span" style="font-size:small;">- Scatter<br /></span><span class="Apple-tab-span" style="white-space: pre; "><span class="Apple-style-span" style="font-size:small;"> </span></span><span class="Apple-style-span" style="font-size:small;">- Stacked Horizontal 2D Column<br /></span><span class="Apple-tab-span" style="white-space: pre; "><span class="Apple-style-span" style="font-size:small;"> </span></span><span class="Apple-style-span" style="font-size:small;">- Stacked Horizontal 2D Column (Percent)<br /></span><span class="Apple-tab-span" style="white-space: pre; "><span class="Apple-style-span" style="font-size:small;"> </span></span><span class="Apple-style-span" style="font-size:small;">- Stacked Horizontal 3D Column<br /></span><span class="Apple-tab-span" style="white-space: pre; "><span class="Apple-style-span" style="font-size:small;"> </span></span><span class="Apple-style-span" style="font-size:small;">- Stacked Horizontal 3D Column (Percent)<br /></span><span class="Apple-tab-span" style="white-space: pre; "><span class="Apple-style-span" style="font-size:small;"> </span></span><span class="Apple-style-span" style="font-size:small;">- Stacked 2D Column<br /></span><span class="Apple-tab-span" style="white-space: pre; "><span class="Apple-style-span" style="font-size:small;"> </span></span><span class="Apple-style-span" style="font-size:small;">- Stacked 2D Column (Percent)<br /></span><span class="Apple-tab-span" style="white-space: pre; "><span class="Apple-style-span" style="font-size:small;"> </span></span><span class="Apple-style-span" style="font-size:small;">- Stacked 3D Column<br /></span><span class="Apple-tab-span" style="white-space: pre; "><span class="Apple-style-span" style="font-size:small;"> </span></span><span class="Apple-style-span" style="font-size:small;">- Stacked 3D Column (Percent)<br /></span><span class="Apple-tab-span" style="white-space: pre; "><span class="Apple-style-span" style="font-size:small;"> </span></span><span class="Apple-style-span" style="font-size:small;">- 2D Column<br /></span><span class="Apple-tab-span" style="white-space: pre; "><span class="Apple-style-span" style="font-size:small;"> </span></span><span class="Apple-style-span" style="font-size:small;">- 2D Doughnut<br /></span><span class="Apple-tab-span" style="white-space: pre; "><span class="Apple-style-span" style="font-size:small;"> </span></span><span class="Apple-style-span" style="font-size:small;">- 2D Line<br /></span><span class="Apple-tab-span" style="white-space: pre; "><span class="Apple-style-span" style="font-size:small;"> </span></span><span class="Apple-style-span" style="font-size:small;">- 2D Pie<br /></span><span class="Apple-tab-span" style="white-space: pre; "><span class="Apple-style-span" style="font-size:small;"> </span></span><span class="Apple-style-span" style="font-size:small;">- 3D Column</span></div><div><span class="Apple-style-span" style="font-size:small;"><br /></span></div><div><span class="Apple-style-span" style="font-size:small;"><br /></span></div><div><span class="Apple-style-span" style="font-family:georgia;"><span class="Apple-style-span" style="font-size:small;">See the </span><a href="http://apexacp.blogspot.com/" target="_blank"><span class="Apple-style-span" style="font-size:small;">s</span></a><a href="http://apexacp.blogspot.com/" target="_blank"><span class="Apple-style-span" style="font-size:small;">i</span></a><a href="http://apexacp.blogspot.com/" target="_blank"><span class="Apple-style-span" style="font-size:small;">t</span></a><a href="http://apexacp.blogspot.com/" target="_blank"><span class="Apple-style-span" style="font-size:small;">e</span></a><a href="http://apexacp.blogspot.com/" target="_blank"><span class="Apple-style-span" style="font-size:small;"> </span></a><span class="Apple-style-span" style="font-size:small;">for more details.</span></span></div></span></span></div>Rutgerhttp://www.blogger.com/profile/02983356065037436936noreply@blogger.com0tag:blogger.com,1999:blog-8477541235632147590.post-13233170562326937012009-05-29T18:00:00.005+02:002009-05-29T19:08:33.399+02:00Sneak Preview #2 - Apex ACP (Anychart Conversion Package)The Apex ACP converts your "old" Anychart 3.3 flash chart to the fancy "new" Anychart 4.2.1 chart. <br />Here's another sneak peak at the results you can achieve with the Apex ACP. This demo shows the conversion of the sample application chart on page 5. It also shows that you can use (standard) FlashChart queries, just as you're used to do with the other charts. It also shows a different chart based on the type of chart you select. So you can see that the position and 2D/3D settings are created based on the type of chart you select.<br /><br /><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/IovSbdGKVA4&hl=nl&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/IovSbdGKVA4&hl=nl&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object><br /><br />The Apex ACP will probably be available somewhere next week, in a pre-release bèta version. If you're interested in trying the package out, you can email me on <mailto:rutger.deruiter@gmail.com>rutger.deruiter@gmail.com</mailto>.<br />All features and limitations will be listed early next week!Rutgerhttp://www.blogger.com/profile/02983356065037436936noreply@blogger.com0tag:blogger.com,1999:blog-8477541235632147590.post-86834850946003333902009-05-21T02:31:00.006+02:002009-05-21T19:13:08.041+02:00Sneak peak - APEX AnyChart 4 Conversion PackageHi all,<br /><br />I just wanted to show a sneak peak of the results with the Conversion Package. I know the APEX dev team has stated in their <a href="http://www.oracle.com/technology/products/database/application_express/apex_sod.html">statement of direction</a>, that Anychart 4 will be integrated into APEX 4.0, but there are some good reason to do it anyway.<br /><br />1. I want it now ;)<br />2. Customers are really asking for this!<br />3. You never know, maybe it'll be postponed to version 4.1 (statements of direction are just guidelines, right? :) )<br /><br />Just a little heads-up, the video is not as high a quality I'd like. So view in Full Screen and ignore the smudgy looks.<br /><br /><embed src="http://blip.tv/play/AYGDnx+XjGI" type="application/x-shockwave-flash" width="640" height="567" allowscriptaccess="always" allowfullscreen="true"></embed> <br /><br /><br /><span style="font-weight:bold;">Before:</span><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvS3c7P3m61pyD5Qv8jWxi4eEB3AZdEK0EOuaEs-CxI2limkiWbv9DZam4-DENqdVY72q1drsEBvXtaaI0ZmQ1DdW420_d7n2dQRYKb_3EG1u7S9-Z06go6UJAgjGFnztf-QR3hduvMvg/s1600-h/before.png"><img style="cursor:pointer; cursor:hand;width: 400px; height: 255px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvS3c7P3m61pyD5Qv8jWxi4eEB3AZdEK0EOuaEs-CxI2limkiWbv9DZam4-DENqdVY72q1drsEBvXtaaI0ZmQ1DdW420_d7n2dQRYKb_3EG1u7S9-Z06go6UJAgjGFnztf-QR3hduvMvg/s400/before.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5338072636166103810" /></a><br /><br /><span style="font-weight:bold;">After:</span><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj07EPCPUkiLa1MZSH48-MS0-B8NwEArnKlugwM9x8GXU9DwagRali0AX08RHM7Ko03iHHrURpzI1Heazf_PVu77aS25XZrYq4Xw0aTNm9Sao-C81nqr1MrTHYtRhQ6fPSYsF_a8XGFXUE/s1600-h/after.png"><img style="cursor:pointer; cursor:hand;width: 400px; height: 263px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj07EPCPUkiLa1MZSH48-MS0-B8NwEArnKlugwM9x8GXU9DwagRali0AX08RHM7Ko03iHHrURpzI1Heazf_PVu77aS25XZrYq4Xw0aTNm9Sao-C81nqr1MrTHYtRhQ6fPSYsF_a8XGFXUE/s400/after.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5338072804084814194" /></a><br /><br /><br />The planning for now, is to support all of APEX's default Chart functionality. So more on this subject soon!<br /><br />Greetings,<br />RutgerRutgerhttp://www.blogger.com/profile/02983356065037436936noreply@blogger.com7tag:blogger.com,1999:blog-8477541235632147590.post-81876767417162003562008-10-23T09:59:00.007+02:002008-10-23T10:19:40.679+02:00Pro4Pro APEX session 28-10-2008Next Tuesday I'll be hosting a real nice session at the Logica office in Arnhem in the Netherlands. Together with colleague Roel Hartman, we'll be building a web application in a little over an hour. The power of this session is that you'll see everything we're doing to make it work, while also providing background information about the moving part we're handling. <br />After this part there will be time for a real cool part of the session, "Things you'd like to see". In this bit the audience can just ask away, and if it's possible we'll create some elements on the fly.<br />The subjects that will be covered in the session:<br /><br />- Reporting and data entry<br />- Security<br />- Personalizing an application<br />- Things you'd like to see<br />- The fully fledged version, or: "What we've build in just three days"<br /><br />So if you are in the neighborhood you're very welcome to come, as this session is open to anyone. The presentation will be in dutch, and you can apply here: <a href="http://www.logica.nl/pro4pro+-+roel+hartman/400013618">http://www.logica.nl/pro4pro</a><br /><br />The session starts at 18.30, and dinner is served at 17.00. (It's required to apply when you want to attend)<br />The address and route descriptions to the Logica Arnhem office is provided when you apply.<br /><br />Hope to see you there!Rutgerhttp://www.blogger.com/profile/02983356065037436936noreply@blogger.com0tag:blogger.com,1999:blog-8477541235632147590.post-70047632960700422712008-10-06T11:35:00.016+02:002010-07-14T16:47:37.355+02:00Update multiple items from a LOV field with JSONEver wondered how great it would would be, if you could change or fill multiple item fields from a selected LOV.<br />Some people did, and came up with javascript solutions filtering out their own return strings, usually separated by a magic separator character (like ~).<br />In modern web design we'd actually want something where we can just fire away and retrieve some data, and be able to quickly (magically) retrieve separated data. Here's where JSON comes in. If you haven't heard of it, a lot of blog posts have been written about it as of late. <br />But in a "quicky", this is what it is: JavaScript Oject Notation (JSON) makes sure you can wrap and unwrap data in javascript. The power of JSON is that it is light weight. You are just passing strings of text. The format is making sure the right data is given the right name. In the calling javascript bit, you get an array that you can access. This array is created in an object notation. For more info on JSON itself, visit the site <a href="http://www.json.org/">here</a>.<br /><br /><div style="background-color:#FFFE9B;padding:10px;"><br /><span style="font-weight:bold;">=== Footnote ===</span><hr><br />APEX is incorporating JSON in it's inner workings, even creating JSON calls in the APEX API. Carl Backstrom is really getting it together with the JSON calls, making communication between the APEX page and the database even easier. The known API calls are:<br />- APEX_UTIL.JSON_FROM_SQL (Returns a general JSON formatted text)<br />- APEX_UTIL.JSON_FROM_ITEMS (Returns a JSON string for "json_SetItems" command)<br /><br />Both will be demonstrated in this post!<br /></div><br /><br /><span style="font-weight:bold;font-size:10pt;">Getting it to work with a LOV field</span><br /><br /><span style="font-style:italic;"><span style="font-weight:bold;">JSON_FROM_SQL</span></span><br /><br />Getting it working is fairly simple, we need javascript to get some event action going, and an application process to handle the API calls to the APEX_UTIL package. Since we want to do things dynamically, without any page loads, we'll use AJAX calls to trigger the application process code.<br /><br />First off, I created a form on a table (I'll be using the DEPT table in this example). I changed the DNAME field to a Popup LOV, that selects all department names. (This could be a select list as well).<br /><br />The second step is to create a callable javascript function that will make the AJAX call to the application process, parse our JSON text to a JSON object, and set the values to the items. Create something like this:<br /><br /><pre name=code class=JScript><br /><script LANGUAGE = "JavaScript" src="JSON_CODE"></script><br /> <br /><script type="text/javascript"><br /> <br /><br />// This function will be fired from the field, when data is returned from the LOV<br />function lookupDeptno(){<br /> <br /> // First check if there's a value in the DEPTNO field (otherwise do not execute the rest)<br /> if ($v('P1_DNAME')){<br /> <br /> //This is the AJAX call to the Application Process DEPTLOOKUP<br /> ajaxRequest = new htmldb_Get(null,&APP_ID.,'APPLICATION_PROCESS=DEPTLOOKUP',0);<br /> <br /> //Add a param called x01 with the DNAME, we can use this x01 as a temporary Application Item (we will pick this parameter up in the application process)<br /> ajaxRequest.addParam('x01', $v('P1_DNAME'));<br /> <br /> //Now do the actual AJAX call and put the result in ajaxResponse<br /> ajaxResponse = ajaxRequest.get();<br /> <br /> //Check if there is a response<br /> if (ajaxResponse) {<br /><br /> //We need to format the JSON return string and put it in a JSON object<br /> // the formatting is done by a function in the external JSON library<br /> // the jsonobj can be used to retrieve the data returned by the App process<br /> <br /> var jsonobj= ajaxResponse.parseJSON();<br /> <br /> // And finally, we set the DEPTNO and LOC item with the value of the jsonobj.DEPTNO and jsonobj.LOC<br /> // an array was created in the object with the name row, so that is why you have to include row[0] to retrieve the data<br /> $s('P1_DEPTNO', jsonobj.row[0].DEPTNO);<br /> $s('P1_LOC', jsonobj.row[0].LOC);<br /> <br /> }<br /> }<br />}<br /></script><br /></pre><br /><br />Now before you're going like, what is that JSON.js script doing there at the beginning. This is a JSON support script that gives some extra functions to help us making our lives easier (like parseJSON, instead of the eval function *See footnote for more info). You can ofcourse just download the script and upload it to your own web server, but this is easier for demonstration purposes.<br /><br />The script is commented, so if there are any code questions, be sure to respond in this post comments.<br /><br />The third step, is to create the application process that is called from the AJAX call in the javascript. The call looked like this:<br /><pre name="code" class="JScript"><br />ajaxRequest = new htmldb_Get(null,&APP_ID.,'APPLICATION_PROCESS=DEPTLOOKUP',0);<br /></pre><br />So we need to create a Application Process called DEPTLOOKUP, looking like this:<br /><br /><div style="background-color:#990000;padding:10px;color:#FFFFFF;"><br /><b>Edit 13-10-2008 - Important if you are using this!</b><br />Thanks to Patrick Wolf, who noticed the SQL Injection vulnerability in the previous code. Be sure to use bind variables where you can, and if you can't use the DBMS_ASSERT package to filter out malicious characters.<br /></div><br /><br /><pre name="code" class="Xml"><br />DECLARE<br /> <br />-- We set wwv_flow.g_x01 in the javascript part<br />-- you can use this parameter as a temp APP ITEM<br /><br />-- EDIT 13-10-2008: Thanks to Patrick Wolf, for noticing the SQL Injection threat<br />-- Added DBMS_ASSERT.SIMPLE_SQL to check for weird user input<br />-- And the ENQUOTE_LITERAL to prevent hardcoded quotations<br />p_dname varchar2(20) := DBMS_ASSERT.ENQUOTE_LITERAL(DBMS_ASSERT.SIMPLE_SQL_NAME(wwv_flow.g_x01);<br /> <br />BEGIN<br /><br />--Use this to get a JSON string back in the javascript, based on the SQL inserted<br /><br />APEX_UTIL.JSON_FROM_SQL('SELECT deptno, loc FROM dept WHERE dname = '||p_dname);<br /> <br />END;<br /></pre><br /><br />As you can see, the parameter is picked up, and used in the JSON_FROM_SQL command. This command will automagically return a correct JSON string to it's caller. In this case the javascript.<br /><br /><br /><br />The fourth and final step, is to trigger the javascript. For the purpose of the LOV, an "onchange" event does the trick perfectly. If you select another item from the LOV, the onchange event is triggered. So go to the details of the LOV item, and add to the "HTML Form Element Attributes" of the "Element" section:<br /><pre name=code class=JScript><br />onchange="lookupDeptno();"<br /></pre><br /><br />If you did the above, you should get behaviour like this:<br /><a href="http://apex.oracle.com/pls/otn/f?p=33575:1">http://apex.oracle.com/pls/otn/f?p=33575:1</a><br /><div style="background-color:#FFFE9B;padding:10px;"><br /><span style="font-weight:bold;">=== Footnote ===</span><hr> The parseJSON function is the reason to incorporate the JSON.js "libary". The alternative of using the parseJSON function, is to use the javascript "eval" function. This function shares most of it's letters with another word that can describe this function: "evil"!!! Eval executes anything that is passed into it. So it's a potential security risk to use eval.</div><br /><br /><br /><span style="font-style:italic;"><span style="font-weight:bold;">JSON_FROM_ITEM</span></span><br />This approach is similar to the previous one, but with one fundamental difference. With the JSON_FROM_ITEM call you set the items values from the APP process instead of the page javascript. <br /><br />The first step is to have a popup LOV item again, that fires some javascript code. So create a form on a table (I used the DEPT example again).<br /><br />Second is to create the javascript that is triggered, that will make an AJAX call and <span style="font-weight:bold;">refresh</span> the values.<br />Here's the code:<br /><br /><pre name=code class=JScript><br /><script type="text/javascript"><br /><br />function getItemsFromJSON(){<br /><br /> //Create the AJAX call for the DEPTLOOKUP_ITEM app process <br /> ajaxRequest = new htmldb_Get(null,&APP_ID.,'APPLICATION_PROCESS=DEPTLOOKUP_ITEM',0);<br /> //Add a param for P4_DNAME<br /> ajaxRequest.addParam('x01',$v('P4_DNAME')); <br /> <br /> //Do the actual call and set the items on screen based on the JSON text returning<br /> ajaxResponse = ajaxRequest.get(); <br /> json_SetItems(ajaxResponse);<br /> <br />}<br /><br /></script><br /></pre><br /><br />The third step is creating the application process "DEPTLOOKUP_ITEM". This app process will get the table record, set the new values into the session state and create a JSON string that is returned for the "json_SetItems" javascript call. And it looks like this:<br /><br /><pre name=code class=Xml><br />declare<br /> p_dname varchar2(200);<br />begin<br /><br /> p_dname := DBMS_ASSERT.SIMPLE_SQL_NAME(wwv_flow.g_x01);<br /> FOR c_dept IN (select * from dept WHERE DNAME = p_dname) loop<br /> APEX_UTIL.SET_SESSION_STATE('P4_DEPTNO',c_dept.DEPTNO);<br /> apex_util.set_session_state('P4_LOC',c_dept.LOC);<br /> end loop;<br /> apex_util.json_from_items('P4_DEPTNO:P4_LOC');<br /><br />end;<br /></pre><br /><br />Finally, you need to create the onchange event again, in the "HTML Form Element attributes" to:<br /><pre name=code class=JScript><br /> onchange="getItemsFromJSON();"<br /></pre><br /><br />This way you're able to change the values of the items automagically as well.<br />See the results here:<br /><a href="http://apex.oracle.com/pls/otn/f?p=33575:4">http://apex.oracle.com/pls/otn/f?p=33575:4</a><br /><br /><div style="background-color:#FFFE9B;padding:10px;"><br /><span style="font-weight:bold;">=== Footnote ===</span><hr> Be sure to code the "ajaxRequest.get()" and the "json_SetItems" real close to each other, and make sure that there are no errors "in between" these lines of code. If there is an error generated between the "setting of session state" and updating it on the screen, you will get unexpected behavior. The session state has changed, and you have no idea that it did.</div><br /><br /><span style="font-weight:bold;">Conclusion</span><br /><br />Using these JSON techniques really adds up to your page's usability. It can be an extra argument for customers that are considering APEX and are using Oracle Forms. A lot of Oracle Forms use this "LOV to fill multiple items" functionality. Usually with WHEN-VALIDATE-ITEM or POST-CHANGE triggers.<br /><br />Credits must go out to Carl Backstrom, for integrating JSON with APEX, and also the examples he put forward (which are very similar to mine), so you should really take a look at his <a href="http://carlback.blogspot.com/">blog</a>!<br /><br />*PS<br />If this was helpful to you, your very welcome to share this in the post comments ;)Rutgerhttp://www.blogger.com/profile/02983356065037436936noreply@blogger.com7tag:blogger.com,1999:blog-8477541235632147590.post-53872920249983389432008-09-17T15:12:00.005+02:002008-09-25T14:41:42.499+02:00Using anycharts 4 with APEX 3.1If you haven't noticed before, Interactive Reports use Anycharts 4.2.1 ! While the normal flash chart regions are still using Anycharts 3.3!
<br />
<br />The 4.2.1 version has much cooler features, as saving to image or to pdf with the right click menu. It also looks better and more organized. Why are normal flash chart regions still using 3.3? Well, probably because the XML source definition has changed! With APEX release 4.0 I think we can use Anycharts 4 with normal regions (Could be 3.2 but I think they have their hands full with Forms2Apex)
<br />
<br />So what are we to do? While waiting is an option, trying to hack into Anycharts 4 is way much more fun! First some background info!
<br />
<br /><A HREF="#" onclick="document.getElementById('fullpost').style.display='block';">Read More!</A>
<br /><div id="fullpost" style="display:none;">
<br /><span style="font-weight: bold;">Anycharts 3 & APEX architecture
<br /></span>Anycharts3 is using an <span style="font-style: italic;">.swf</span><span style="font-weight: bold;"><span style="font-style: italic;"> </span></span>file for almost every different type of chart (and can be found in the /i/flashcharts directory). For every chart an <span style="font-style: italic;">.xml</span> file has to be provided with the specific layout and data properties. Here's where APEX kicks in, the xml definition is generated by a procedure that is called APEX_UTIL.flash (Who's in charge off naming things over there at the APEX Dev Team?). There are some parameters provided, like the <span style="font-style: italic;">APP_ID</span>, <span style="font-style: italic;">PAGE_ID</span>, <span style="font-style: italic;">SESSION</span> etc. More important is this parameter: <span style="font-style: italic;">FLOW_FLASH_CHART_R#REGION_ID#. </span>And it's more important because it provides the apex_util.flash procedure with the region ID where you defined all your settings in a Charts Region (Like labels an colors). This ID is probably used in the procedure to get these values, and use them to generate a xml definition.
<br />
<br />The resulting xml from apex_util.flash is parsed on a HTTP request! Just like any other page, the chart just shows the xml definition as a <span style="font-style: italic;">text/xml </span>content type in your browser if you put the reference in the URL. This reference (with absolute path) looks like this: http://10.0.0.1:8080/pls/apex/apex_util.flash?p=105:8:985557025495156:FLOW_FLASH_CHART_R5188815604017627_en-us
<br />In anycharts 3 the path is added as a parameter called <span style="font-style: italic;">XMLFile<span style="font-style: italic;"> </span></span>(remember that one) and is passed to the swf flash file.
<br />
<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLQ423y2XQBzzj3A2EMn8nOrm0sAnak2dfAVoasQTDrUQmUXdqxvUM3jabFXHr30Aatg9Dk9NjUszer50BDDlAzBcr0mcJ371J7bkKMr0L4c9-cI5OAVQWD5jp6A2Yjax_tK1bXSH-ezE/s1600-h/anycharts3.PNG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLQ423y2XQBzzj3A2EMn8nOrm0sAnak2dfAVoasQTDrUQmUXdqxvUM3jabFXHr30Aatg9Dk9NjUszer50BDDlAzBcr0mcJ371J7bkKMr0L4c9-cI5OAVQWD5jp6A2Yjax_tK1bXSH-ezE/s400/anycharts3.PNG" alt="" id="BLOGGER_PHOTO_ID_5246906924999699378" border="0" /></a>
<br /><span style="font-weight: bold;">Anycharts 4 & APEX Architecture
<br /></span>In Anycharts 4, all different types of charts are collected in one <span style="font-style: italic;">.swf</span><span style="font-weight: bold;"> </span>file<span style="font-weight: bold;"><span style="font-weight: bold;">.</span></span> This is again, combined with an xml definition file, telling how to layout the chart and what data is in there. The anycharts 4 xml files are different from the anycharts 3 xml files, because it has a different buildup. The anycharts 4 xml file is also generated from APEX! The procedure taking care of this is APEX_UTIL.flash2 (Honestly, who's in charge of naming, common!! ;) ). It is also called from the page object, but this time it is different. It is passed in the "flashvars" parameter as "XMLFile=http://10.0.0.1:8080/pls/apex/apex_util.flash2?p=etc. etc"
<br />And this time, the XML defines what type of chart it is ! Not the flash file! So this adds great flexibility to developers!
<br />
<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9SzkVnP7L_3q3OxJd4U4fXX0jtfbcyglkoh3qdZeGsDu8hM-EHYJGwi3QIx59WDi4ViENJUMkAVkaDzCK22KAeDgK0bdb0etPwn_co5WWLIu-QRa-zixldWzAzTVidcg6a9gGgXcIsD4/s1600-h/anycharts4.PNG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9SzkVnP7L_3q3OxJd4U4fXX0jtfbcyglkoh3qdZeGsDu8hM-EHYJGwi3QIx59WDi4ViENJUMkAVkaDzCK22KAeDgK0bdb0etPwn_co5WWLIu-QRa-zixldWzAzTVidcg6a9gGgXcIsD4/s400/anycharts4.PNG" alt="" id="BLOGGER_PHOTO_ID_5246909760762741442" border="0" /></a>
<br /><span style="font-weight: bold;">Using anycharts 4
<br /></span>There<span style="font-weight: bold;"> </span>are<span style="font-weight: bold;"> </span>several ways to use anycharts 4. Here's what I was able to do:
<br /><ol><li>Create anycharts 4 from anycharts 3 region (but has some drawbacks)</li><li>Reference an anychart 4 chart from an interactive report</li><li>Create your own definition and put it in the images directory</li><li>Create your own definition and reference it trough a procedure (just like APEX_UTIL.flash2)</li></ol><span style="font-weight: bold;">1. Create anycharts 4 from anycharts 3 region
<br /></span>Why not change the APEX_UTIL.flash procedure to APEX_UTIL.flash2? That's also the first thing I was thinking. But you have to make some more adjustments.
<br /><ul><li>Create a chart region with the APEX wizards
<br /></li><li>Just create a normal HTML region</li><li>Check out the code of the chart region at runtime (with Firebug offcourse)
<br /></li><li>Copy the code between the <object></object> OBJECT tags (include the <object> tags)</object></li><li>Cut the swf variables ?XMLFile=etc. to the Flashvars param (and remove the "?")</li><li>Change the APEX_UTIL.flash to APEX_UTIL.flash2</li></ul>This tries to give you the definition of the Anychart 4 xml, interpreted by the anychart 3 settings you did in the charts region. Major drawbacks of this approach is that you cannot define the type of chart. It just gets the first one, wich is "CategorizedVertical". But colors and labels are added to the chart! Also, you have to have the anycharts 3 region in your page for this to work, but you can hide it if you want!
<br />
<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL1rBVtuRPxs46U0P6JwbRKI2DUyutjowWAagR33eYZtrkLySn2-zm1SV_gwKueu3auP6D0mOznVBNAvQoRw-phCga5Fsj0o0zU1baaOpdsM6PwGa6MU1TQBdgh-3JabTxWXvbWgnIMtY/s1600-h/3as4.PNG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL1rBVtuRPxs46U0P6JwbRKI2DUyutjowWAagR33eYZtrkLySn2-zm1SV_gwKueu3auP6D0mOznVBNAvQoRw-phCga5Fsj0o0zU1baaOpdsM6PwGa6MU1TQBdgh-3JabTxWXvbWgnIMtY/s400/3as4.PNG" alt="" id="BLOGGER_PHOTO_ID_5246914618032248402" border="0" /></a>
<br /><span style="font-weight: bold;">2. Reference an anychart 4 chart from an interactive report</span>
<br />If you create a chart in an interactive report, you can reference this in a HTML region. Changes made in the IR are also changed in the chart. If you want a dynamic anycharts 4 chart, this is a great way to do it!
<br /><ul><li>Create an interactive report</li><li>Create a chart in the IR</li><li>Save it as default!</li><li>Copy the code below</li></ul><pre name="code" class="Xml"><object id="c5188815604017627" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" align="" width="600" height="400"><br> <param value="high" name="quality"><br> <param value="sameDomain" name="allowScriptAccess"><br> <param value="all" name="allowNetworking"><br> <param value="noscale" name="scale"><br> <param value="transparent" name="wmode"><br> <param value="waiting=Loading data. Please wait.&loading=Loading data..." name="FlashVars"><br> <embed pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allownetworking="all" allowscriptaccess="sameDomain" scale="noscale" name="c5188815604017627" quality="high" flashvars="XMLFile=http://10.17.198.203:7777/pls/apex/apex_util.flash2?p=&APP_ID.:6:&SESSION.:FLOW_FLASH_CHART2_RPT5186028710671263_en-us" src="/i/flashchart/swf/AnyChart.swf" align="" width="600" height="400"><br></object>
<br /></pre><code style="color: rgb(204, 153, 51); font-weight: bold;">
<br /></code><ul><li>Paste it into a HTML region</li><li>Change the parameters in the XMLFile parameter (page 6 is where the IR was, so change that to the page that your IR is)
<br /></li></ul>The only drawback of this approach is that you don't have direct control over the layout of the chart. (like borders and backgrounds)
<br />
<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh500szsknKVodLyzGoDfi5IERRJqOf50lxlBGj2QsCll1s65tWt-Cr07Rvn3q17H_ALQP9q1Fs1unhS77EvB8RJ9E5KkB-nbhD3zcGvpX8PGcD1SFUsAq_eVBtRTamTgHlgf-9ltgWJIg/s1600-h/IR.PNG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh500szsknKVodLyzGoDfi5IERRJqOf50lxlBGj2QsCll1s65tWt-Cr07Rvn3q17H_ALQP9q1Fs1unhS77EvB8RJ9E5KkB-nbhD3zcGvpX8PGcD1SFUsAq_eVBtRTamTgHlgf-9ltgWJIg/s400/IR.PNG" alt="" id="BLOGGER_PHOTO_ID_5246916361628528850" border="0" /></a><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeJzv69N7kaO-v_qL0f1JpdfNGw8NqKCbBAMg5b38NBe7qu3Ppa4cgW1Ic2x7aYDU37GMAe8mqK2MhNCznPv7nfDzyRK389IhpuD6bitaWnEmHbzJOQcQTrwoUqRFphqpRuh279JFjIO0/s1600-h/xmlfromir.PNG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeJzv69N7kaO-v_qL0f1JpdfNGw8NqKCbBAMg5b38NBe7qu3Ppa4cgW1Ic2x7aYDU37GMAe8mqK2MhNCznPv7nfDzyRK389IhpuD6bitaWnEmHbzJOQcQTrwoUqRFphqpRuh279JFjIO0/s400/xmlfromir.PNG" alt="" id="BLOGGER_PHOTO_ID_5246917809248406610" border="0" /></a>
<br /><span style="font-weight: bold;">3. Create your own definition and put it in the images directory</span>
<br />You can also just skip the APEX generation bit, and create your own XML file. You just have to reference it in the code for the swf file.
<br /><ul><li>Just create an XML file with for example the following code:</li></ul><pre name="code" class="Xml">
<br /><anychart><br> <charts><br> <chart plot_type="CategorizedVertical"><br> <data><br> <series type="Line"><br> <point name="MEI" y="2601"><br> <attributes><br> <attribute name="FValue"><br>2601</attribute><br> </attributes><br> </point><br> <point name="JUNI" y="2739"><br> <attributes><br> <attribute name="FValue"><br>2739</attribute><br> </attributes><br> </point><br> <point name="JULI" y="2790"><br> <attributes><br> <attribute name="FValue"><br>2790</attribute><br> </attributes><br> </point><br> <point name="AUG" y="2908"><br> <attributes><br> <attribute name="FValue"><br>2908</attribute><br> </attributes><br> </point><br> </series><br> <series type="Line"><br> <point name="MEI" y="2925"><br> <attributes><br> <attribute name="FValue"><br>2925</attribute><br> </attributes><br> </point><br> <point name="JUNI" y="2465"><br> <attributes><br> <attribute name="FValue"><br>2465</attribute><br> </attributes><br> </point><br> <point name="JULI" y="2231"><br> <attributes><br> <attribute name="FValue"><br>2231</attribute><br> </attributes><br> </point><br> <point name="AUG" y="2426"><br> <attributes><br> <attribute name="FValue"><br>2426</attribute><br> </attributes><br> </point><br> </series><br> <series type="Line"><br> <point name="MEI" y="2231"><br> <attributes><br> <attribute name="FValue"><br>2231</attribute><br> </attributes><br> </point><br> <point name="JUNI" y="2101"><br> <attributes><br> <attribute name="FValue"><br>2101</attribute><br> </attributes><br> </point><br> <point name="JULI" y="2084"><br> <attributes><br> <attribute name="FValue"><br>2084</attribute><br> </attributes><br> </point><br> <point name="AUG" y="2685"><br> <attributes><br> <attribute name="FValue"><br>2685</attribute><br> </attributes><br> </point><br> </series><br> </data><br> <chart_settings><br> <title enabled="true">Title</title><br> <chart_background><br> <border enabled="True"><br> <fill enabled="True"><br> </fill><br> <axes><br> <y_axis><br> <title><br><br /><br><text><br>Aantal formulieren</text><br><br /><br></title><br> </y_axis><br> <x_axis><br> <labels align="Outside"><br> <title><br><br /><br><text><br>2008</text><br><br /><br></title><br> </labels><br> </x_axis><br> </axes><br> <data_plot_settings><br> <line_series><br> <tooltip_settings enabled="true"><br> <format><br>{%Name}{enabled:False} {%FValue}{enabled:False}</format><br> </tooltip_settings><br> </line_series><br> </data_plot_settings><br> </border><br> </chart_background><br></chart_settings><br></chart><br></charts><br></anychart></pre>
<br />
<br /><ul><li>Next put the file in your /i/ directory</li><li>Just copy the previous OBJECT code
<br /></li><li>Reference your xml file in the XMLFile parameter as /i/yourxml.xml instead of the APEX_UTIL.flash2 string</li></ul><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3IxNYlyBsJ-7N3nh9byc-PsOEBZajZSgpQzM5rTmshPi39ZN7_eMMj7tz-p-PU_sKjFMAurw7-VRVUJhYnZocx-2dcrM2K-t32R9YNCvNoNd3LHn5aK8jKK3xfQveTCylop-8fyCP_sg/s1600-h/ownxml.PNG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3IxNYlyBsJ-7N3nh9byc-PsOEBZajZSgpQzM5rTmshPi39ZN7_eMMj7tz-p-PU_sKjFMAurw7-VRVUJhYnZocx-2dcrM2K-t32R9YNCvNoNd3LHn5aK8jKK3xfQveTCylop-8fyCP_sg/s400/ownxml.PNG" alt="" id="BLOGGER_PHOTO_ID_5246942582923654098" border="0" /></a>
<br />
<br /><span style="font-weight: bold;">4. Create your own definition and reference it trough a procedure
<br /></span>Now for the really interesting one! And this requires some additional settings. But what if you could just work the same way APEX works, with a packaged procedure, referenced in the URL (APEX_UTIL.flash2). But now we want to define our own procedure, which parses AnyChart 4 XML instead of 3, but now we can control it ourself! (Unlike flash2).
<br /><ul><li>Create a package (like "anycharts_xml_generator")</li><li>Create a procedure in this packaged with a parameter <span style="font-weight: bold;">XMLCallData number</span>(like "procedure simple_xml(XMLCallDate IN NUMBER DEFAULT NULL)")</li></ul><span style="font-style: italic;">*XMLCallDate is a parameter that is added at runtime, probably by Anycharts. It is important to add it ! Otherwise you will get an "IO Error" message, and it takes a while to find the problem!</span>
<br /><ul><li>Put in the following body</li></ul><pre name="code" class="Sql">
<br />procedure p_simple_xml(p_param IN number default null, XMLCallDate IN number default null) IS
<br />BEGIN
<br />
<br />owa_util.mime_header('text/xml', FALSE, 'utf-8');
<br />owa_util.http_header_close;
<br />htp.p('');
<br />
<br />htp.p('<anychart>
<br /><charts>
<br /><chart plot_type="CategorizedHorizontal">
<br /><data>
<br /> <series name="Year 2003" type="Bar">
<br /> <point name="Department Stores" y="637166">
<br /> <point name="Discount Stores" y="721630">
<br /> <point name="MensWomens Specialty Stores" y="148662">
<br /> <point name="Juvenile Specialty Stores" y="78662">
<br /> <point name="All other outlets" y="90000">
<br /> </point>
<br /></point>
<br /><chart_settings>
<br /> <title><br /> <text>Sales of ACME Corp.</text><br /> </title>
<br /> <axes>
<br /> <y_axis>
<br /> <title><br /> <text>Sales</text><br /> </title>
<br /> </y_axis>
<br /> <x_axis>
<br /> <labels align="Outside">
<br /> <title><br /> <text>Retail Channel</text><br /> </title>
<br /> </labels>
<br /> </x_axis>
<br /></axes>
<br /></chart_settings>
<br /></point>
<br /></point>
<br /></series>
<br /></data>
<br /></chart>
<br /></charts>
<br /></anychart><br>');<br>END;
<br /></pre>
<br /><ul><li>Next you need to make this procedure callable, so go to the FLOWS030100 schema</li><li>Go to the Function WWV_FLOW_EPG_INCLUDE_MOD_LOCAL</li><li>Add the "ANYCHART_XML_GENERATOR.SIMPLE_XML" to the following piece of code:</li></ul><pre name="code" class="JScript">
<br />if upper(procedure_name) in (
<br /> 'ADD_AS_A_FRIEND', 'ANYCHART_XML_GENERATOR.P_SIMPLE_XML') then
<br /> return TRUE;
<br />else
<br /> return FALSE;
<br />end if;
<br /></pre>
<br />
<br /><ul><li>The above code makes sure that you can call the procedure from the URL</li><li>Next we need to change the reference for the XMLFile in the HTML region.
<br /></li><li>Change the XMLFile parameter to: <pre name="code" class="JScript">http://yourIP:port/pls/apex/anychart_xml_generator.simple_xml?p_param=void</pre></li><i>* Thanks to Mario Jozak, who pointed out to me that there HAS to be a parameter present, because the XMLCallDate is pasted as "&XMLCallDate" to the call. If this was the only parameter you will get an IO Error because the call would look like "p_simple_xml?&XMLCallDate" which is wrong! So thanks again, to Mario.</i><li>Run the page!</li></ul>
<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjannIYqvmlBI1d75nVzDpX2gvEr4yZ4L4RaXWEDp-hvg5-B-X-DZBbymA6em8NkKP5r9iZWpIDFIWEOuaf46Dpv9_lAmReL3bpe9LGMdGNCcO5SKLy9Vn-by5c3U-fXnlNcQEKz6UHqww/s1600-h/genxml.PNG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjannIYqvmlBI1d75nVzDpX2gvEr4yZ4L4RaXWEDp-hvg5-B-X-DZBbymA6em8NkKP5r9iZWpIDFIWEOuaf46Dpv9_lAmReL3bpe9LGMdGNCcO5SKLy9Vn-by5c3U-fXnlNcQEKz6UHqww/s400/genxml.PNG" alt="" id="BLOGGER_PHOTO_ID_5246943055150570386" border="0" /></a>
<br /><span style="font-weight: bold;">Final thoughts
<br /></span>As you can see, Anycharts 4 is a huge improvement over 3.0, not only on the visual side, but also with the functionality and flexibility it gives.
<br />With the 4th way to get AnyCharts 4, it is is possible to create a Anycharts 4 generator, just like APEX_UTIL.flash2. So if some of the charts just aren't good enough for you, you can create them yourself!
<br />
<br />Let me know, if you start using Anycharts 4, as I'm currently checking if I can create a generator!
<br />
<br /><div style="display:none">
<br /> <link href='http://sites.google.com/site/mybloghelpsite/Home/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<br /><script language='javascript' src='http://sites.google.com/site/mybloghelpsite/Home/shCore.txt'/>
<br /><script language='javascript' src='http://sites.google.com/site/mybloghelpsite/Home/shBrushXml.txt'/>
<br /><script language='javascript' src='http://sites.google.com/site/mybloghelpsite/Home/shBrushSql.txt'/>
<br /><script language='javascript' src='http://sites.google.com/site/mybloghelpsite/Home/shBrushJScript.txt'/>
<br /><script language='javascript' src='http://sites.google.com/site/mybloghelpsite/Home/shBrushCss.txt'/>
<br /><script language='javascript'>
<br />dp.SyntaxHighlighter.BloggerMode();
<br />dp.SyntaxHighlighter.HighlightAll('code');
<br /></script>
<br /></div>
<br /></div>Rutgerhttp://www.blogger.com/profile/02983356065037436936noreply@blogger.com4tag:blogger.com,1999:blog-8477541235632147590.post-78630604046533481452008-09-05T10:06:00.002+02:002008-09-05T10:31:41.047+02:00AE Training days UtrechtI attended the Apex Evangelists training days this week in Utrecht. From tuesday till friday I listened to John and Dimitri, who were presenting a variation of topics.<br /><br />First off, let me thank Dimitri and John for the great organization! Unfortunately I couldn't attend the bowling trip, not that I would have made any difference with the bowling itself (I kinda suck at it ;) )<br /><br />The best thing with this training was the extent of topics covered, for starters and more advanced developers. I know from first hand experience it's very hard to create an allround presentation about a topic.<br />It also shows the expertise and flexibility that John and Dimitri have.<br /><br />I especially liked the presentations on the APEX Dictionary, Best practices, the security one and the 3d party integration! I really got some new things I'm gonna look in to or use!<br /><br />Oh...and if some of my future blog posts contain a topic that looks like a topic on the training I'll certainly reference the training :)<br /><br />Finally I can really recommend this training to anyone who wants to know more in depth information on APEX.<br /><br />P.S.<br />From a <span style="font-weight: bold;">very</span> reliable source, I heard John's book will be finished <span style="font-style: italic;">before</span> Open World 2008 ;) Sorry John, but you'll not get the question anymore after that :)Rutgerhttp://www.blogger.com/profile/02983356065037436936noreply@blogger.com2tag:blogger.com,1999:blog-8477541235632147590.post-55904338284635864782008-07-07T10:39:00.003+02:002008-09-23T23:42:07.542+02:00Drag&Drop PlanboardCreating out of the box functionality for web apps with APEX is as fun as it is challenging. Some time ago Roel Hartman and me started working on a transport and logistics application in APEX. (Roel allready blogged about it once <a href="http://roelhartman.blogspot.com/2008/06/drag-drop-feature-in-apex.html" target="_blank">here</a>)<br />One specific part of this application was a planboard which used dragging and dropping with orders in sort of a truck calendar. It was build in Java and had all the swingy features you'd expect.<br />The client wanted to know if this was possible with APEX. Well, sure it is. We'll just use the full pallete available for us with the web browser!<a href="http://apex.oracle.com/pls/otn/f?p=52879:PLANBOARD" target="_blank"> CLICK HERE TO SEE IT.</a><br />Obviously their are many paths to take when considering the design for this sort of functionality, especially when you have APEX at your disposal to create it.<br /><br />Should we use the available calendar?<br />Could we use a tabular form?<br />Do we use standard APEX DML report/forms?<br /><br />Well, this is what we did ;)<br /><br /><span style="font-weight: bold;">The design<br /></span><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuNpaG34k5AwK5fARrGZGVRQPr-u4E56ddGIOfIosMf7V2VST39V1jzZrWf1lyqrpu8CO4HvGJZEQT63m5OwO-SiDC5UFn62X7G44n3dJCf4TnYT7kUkEOeXD7JtRNAiaEWwyunsJNShA/s1600-h/flow.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuNpaG34k5AwK5fARrGZGVRQPr-u4E56ddGIOfIosMf7V2VST39V1jzZrWf1lyqrpu8CO4HvGJZEQT63m5OwO-SiDC5UFn62X7G44n3dJCf4TnYT7kUkEOeXD7JtRNAiaEWwyunsJNShA/s400/flow.JPG" alt="" id="BLOGGER_PHOTO_ID_5220238355457908434" border="0" /></a><br /><span style="font-weight: bold;">1.</span> Collect the data for the planboard view, it will show the truck number (equipment number) and the orders in the days of the week:<br /><p class="MsoListParagraph" style="margin-left: 35.85pt; text-align: left; text-indent: -18pt; font-style: italic;" align="left">Datamodel</p><p class="MsoListParagraph" style="margin-left: 35.85pt; text-align: left; text-indent: -18pt;" align="left"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHU_KHYKUQ5ihzfkORKL8T9FzhptrIMWjUGwrHro6OxGX-NSuQdPU2kML0Y9Xyq_ElDuSG7b27FmSsHtnW5-Ge-UlsohFGYIR_OBpS_Gh8_3yrhR5ZEMaqPWOtppLBHqXiMgPd-a8Lvns/s1600-h/data.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHU_KHYKUQ5ihzfkORKL8T9FzhptrIMWjUGwrHro6OxGX-NSuQdPU2kML0Y9Xyq_ElDuSG7b27FmSsHtnW5-Ge-UlsohFGYIR_OBpS_Gh8_3yrhR5ZEMaqPWOtppLBHqXiMgPd-a8Lvns/s400/data.JPG" alt="" id="BLOGGER_PHOTO_ID_5220239529476803202" border="0" /></a></p><p class="MsoListParagraph" style="margin-left: 35.85pt; text-align: left; text-indent: -18pt;" align="left"><span style="font-style: italic;">Viewquery</span><br /></p><pre name="code" class="JScript">SELECT trucks.truck_id<br />, to_char(to_date(load_date), 'YYYYIW') load_week<br />, max(decode( rtrim(to_char(load_date,'day', 'nls_date_language = DUTCH')), 'maandag' , order_id, null )) mon<br />, max(decode( rtrim(to_char(load_date,'day', 'nls_date_language = DUTCH')), 'dinsdag' , order_id, null )) tue<br />, max(decode( rtrim(to_char(load_date,'day', 'nls_date_language = DUTCH')), 'woensdag' , order_id, null )) wed<br />, max(decode( rtrim(to_char(load_date,'day', 'nls_date_language = DUTCH')), 'donderdag', order_id, null )) thu<br />, max(decode( rtrim(to_char(load_date,'day', 'nls_date_language = DUTCH')), 'vrijdag' , order_id, null )) fri<br />, max(decode( rtrim(to_char(load_date,'day', 'nls_date_language = DUTCH')), 'zaterdag' , order_id, null )) sat<br />, max(decode( rtrim(to_char(load_date,'day', 'nls_date_language = DUTCH')), 'zondag' , order_id, null )) sun<br />FROM trucks,<br /> orders<br />WHERE orders.truck_id (+) = trucks.truck_id<br />GROUP BY trucks.truck_id,<br />to_char(to_date(load_date), 'YYYYIW')<br />ORDER BY trucks.truck_id<br /></pre><img src="file:///C:/DOCUME%7E1/ruiterr/LOCALS%7E1/Temp/moz-screenshot-1.jpg" alt="" /><span style="font-weight: bold;">2.</span> The report region has the planboard view as source. For every column box (value or not) <span style=""> </span>a unique id is created . These id’s make sure that a column box is a container where you can drop items in. The column boxes with a value, should show the item with its value.<br /><br /><span style="font-style: italic;">Report buildup</span><br /><pre class="code"><pre><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXoJSEsYYT4XwSfnPggV4WMpy64hrsiNe3qSIMJDFNdtm4SqyRiHpm4sBgUdnZIDeT28uayVk4rcKBQ87LoVCv5151va8fBYuZywVzMRQyF2XIuf9_UH9INSpXLsCKzJtTEubVeXb8sXU/s1600-h/normal.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXoJSEsYYT4XwSfnPggV4WMpy64hrsiNe3qSIMJDFNdtm4SqyRiHpm4sBgUdnZIDeT28uayVk4rcKBQ87LoVCv5151va8fBYuZywVzMRQyF2XIuf9_UH9INSpXLsCKzJtTEubVeXb8sXU/s320/normal.JPG" alt="" id="BLOGGER_PHOTO_ID_5220240604041046514" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSY16m5DhGHV0iJTGLbghhrcOmW7_dVbiiZpKTvSojinyF_r9PnPjgYl5T3su3diwsxOTr3UEUI_7Fypc1AlxYVaJwfMHxs3g8DjhTmJiONMmaZsY2sBqjv2cEsjp9qUe6_1WgKO33kWo/s1600-h/cont.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSY16m5DhGHV0iJTGLbghhrcOmW7_dVbiiZpKTvSojinyF_r9PnPjgYl5T3su3diwsxOTr3UEUI_7Fypc1AlxYVaJwfMHxs3g8DjhTmJiONMmaZsY2sBqjv2cEsjp9qUe6_1WgKO33kWo/s320/cont.JPG" alt="" id="BLOGGER_PHOTO_ID_5220240607319493762" border="0" /></a><pre><pre><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7vDHceKGZ7PNKXSAWI6GEd6SK3hmm8AD-fsMTBPaESHuGIwasEYQ1BYXhm1Upogl0781p0jDGAJV3hfqwJ-ecIQCZjX9Y7EYTbAEbptiQCwvGxb72wC-npzZfcW_xHxGIpUK-RZX4Qo8/s1600-h/item.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7vDHceKGZ7PNKXSAWI6GEd6SK3hmm8AD-fsMTBPaESHuGIwasEYQ1BYXhm1Upogl0781p0jDGAJV3hfqwJ-ecIQCZjX9Y7EYTbAEbptiQCwvGxb72wC-npzZfcW_xHxGIpUK-RZX4Qo8/s320/item.JPG" alt="" id="BLOGGER_PHOTO_ID_5220240603173121090" border="0" /></a></pre></pre><br /><span style="font-style: italic;">The column formatting for every day column<br /></span></pre></pre><br /><pre class="code"><pre><pre><pre><pre><pre><pre><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJVSAsTfwLvwrZt9oZnKKR5tRf8UsYR8Le3KOZ9FgDWLZrAocD5EjM3S7yZCR_clhcQz2z3Nsp9sFMl2h_puahvsnNvTCfyH10TBLtLuM6eiu3dWnhmKZOO_lIShnBAf533pJ2j2-M684/s1600-h/code.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJVSAsTfwLvwrZt9oZnKKR5tRf8UsYR8Le3KOZ9FgDWLZrAocD5EjM3S7yZCR_clhcQz2z3Nsp9sFMl2h_puahvsnNvTCfyH10TBLtLuM6eiu3dWnhmKZOO_lIShnBAf533pJ2j2-M684/s320/code.jpg" alt="" id="BLOGGER_PHOTO_ID_5220242155183944162" border="0" /></a></pre></pre></pre></pre></pre></pre></pre><span style="font-weight: bold;">3.</span> The report region must also call a javascript function CreateDragContainer, for every container in the region. While doing this, all items inside a container (or just the values selected with the view) become draggable. With the unique id’s, movement can be tracked, and when an order item is dropped in a container, the rest of the handling can start. This is all done by Javascript, where credit must go out for a part of the dragging & dropping to Mark Kahn at <a href="http://www.webreference.com/">webreference</a>.<br />The most important part is that the id's are filtered, and passed to application items, and that an AJAX call is made to an application process. Here's the AJAX call code:<br /><pre name="code" class="JScript"><br />var ajaxRequest = new htmldb_Get(null,&APP_ID.,'APPLICATION_PROCESS=updatePlanbord',null);<br />if (curTarget.id.substr(0,3) == 'new'){<br /> ajaxRequest.add('P_TARGET', curTarget.id.substring(13, curTarget.id.length));<br /> ajaxRequest.add('P_ADDACTION', 'true');<br /> var cDay = curTarget.id.substring(9,12);<br />}else{<br /> ajaxRequest.add('P_TARGET', curTarget.id.substring(9, curTarget.id.length));<br /> ajaxRequest.add('P_ADDACTION', 'false');<br /><br /> var cDay = curTarget.id.substring(5,8);<br />}<br /> var cDayDate<br /> if (cDay == 'mon'){<br /> cDayDate = html_GetElement('P1_MON_DAT').value;<br /> }else if (cDay == 'tue'){<br /> cDayDate = html_GetElement('P1_TUE_DATE').value;<br /> }else if (cDay == 'wed'){<br /><br /> cDayDate = html_GetElement('P1_WED_DATE').value;<br /> }else if (cDay == 'thu'){<br /> cDayDate = html_GetElement('P1_THU_DATE').value;<br /> }else if (cDay == 'fri'){<br /> cDayDate = html_GetElement('P1_FRI_DATE').value;<br /> }else if (cDay == 'sat'){<br /> cDayDate = html_GetElement('P1_SAT_DATE').value;<br /> }else if (cDay == 'sun'){<br /> cDayDate = html_GetElement('P1_SUN_DATE').value;<br /> }<br /><br />ajaxRequest.add('P_PARENT', rootContainer.id.substring(9, rootContainer.id.length));<br />ajaxRequest.add('P_LOADDATE', cDayDate);<br /><br />ajaxRequest.GetAsync(f_AsyncReturn);<br /></pre><br /><br /><span style="font-weight: bold;">4. </span>The application process can do two things, UPDATE an existing order when it is dropped in another truck, or UPDATE an existing order when it had no truck (open action) and was dropped in another truck. Here's the code:<br /><br /><pre name="code" class="JScript"><br />DECLARE<br />type_action varchar2(10);<br /><br />BEGIN<br />type_action := ''||:P_ADDACTION||'';<br /><br />IF type_action= 'false' THEN<br /><br />UPDATE orders SET truck_id = :P_PARENT WHERE order_id = :P_TARGET AND to_date(load_date, 'dd-mm-yyyy') = to_date(''||:P_LOADDATE||'', 'dd-mm-yyyy');<br /><br />ELSIF type_action = 'true' THEN<br /><br />UPDATE orders SET truck_id = :P_PARENT WHERE order_id = :P_TARGET;<br /><br />INSERT INTO orders (ORDER_ID, DESTINATION, LOAD_DATE, TRUCK_ID) VALUES (ODERS_SEQ.nextval, NULL, to_date(''||:P_LOADDATE||'', 'dd-mm-yyyy'), NULL);<br /><br />END IF;<br />COMMIT;<br />EXCEPTION WHEN OTHERS THEN<br />htp.p(SQLERRM);<br />END;</pre><br /><br /><br />After some CSS tricks and custom theming, you get the result you see in the browser. Needless to say, the client was quite impressed with the result, and I think it is another example of the flexibility APEX has to offer being in a web browser!<br /><br />If you'd like to know more on this application and you're at the Oracle Open World this year, vote for this presentation on Oracle Mix by clicking <a href="https://mix.oracle.com/ideas/30082-re-developing-a-logistic-application-in-apex-in-the-real-world">HERE</a>Rutgerhttp://www.blogger.com/profile/02983356065037436936noreply@blogger.com10tag:blogger.com,1999:blog-8477541235632147590.post-21326341168156677882008-06-27T11:13:00.001+02:002008-06-30T09:36:35.713+02:00APEX rocks --> APEX workshop @ Logica ArnhemWell, yesterday I hosted my first APEX workshop from a teaching perspective, and I must say it is a whole different experience then being the attendee. Luckily <a href="http://roelhartman.blogspot.com/">Roel Hartman</a> (we hosted the workshop together) and I had prepared the workshop properly.<br /><br />First off, I gave a presentation about APEX. My focus was especially set on "seeing the point" about what APEX is, does and what it is intended to do. This combined with a healthy summary of features and architectures made the presentation quite long (about 50 min) but it was the minimal version, because I wanted to put so much fun stuff in that APEX has to offer. I just couldn't decide what to scrap!<br />I must say, the presentation went as expected, and the reaction afterwards were very positive, so thanks for the compliments.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjfcMoJ4wTF9hORtfHSRKRYUNlCqI9iKgatd1mEpStup9a4g9PgGR2W4zPrm8c9epyGlwFXY_qroryHuEl5zNcpD3XTL7UszrBZ0LV9VKAtsqaJzh0RPPwLb5Be0s_REpDwPaQTQwj1As/s1600-h/SP_A0210.jpg"><img style="margin: 0pt 0pt 10px 10px; float: right; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjfcMoJ4wTF9hORtfHSRKRYUNlCqI9iKgatd1mEpStup9a4g9PgGR2W4zPrm8c9epyGlwFXY_qroryHuEl5zNcpD3XTL7UszrBZ0LV9VKAtsqaJzh0RPPwLb5Be0s_REpDwPaQTQwj1As/s400/SP_A0210.jpg" alt="" id="BLOGGER_PHOTO_ID_5216491265574814002" border="0" /></a><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRZywRgrFBInaYG2Kh22rtDBZGB40v-z0cd13jIAMT7WUtdYTJzJW1tWpr5MCk6aLD2Ef1QLOzzT_f08eis_eILU_Vf3DV9soeD9FCqV_uEHLyLHVSmDgsoPr_dV7JIGeQYpfXMWIUqXY/s1600-h/SP_A0209.jpg"><img style="margin: 0pt 0pt 10px 10px; float: right; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRZywRgrFBInaYG2Kh22rtDBZGB40v-z0cd13jIAMT7WUtdYTJzJW1tWpr5MCk6aLD2Ef1QLOzzT_f08eis_eILU_Vf3DV9soeD9FCqV_uEHLyLHVSmDgsoPr_dV7JIGeQYpfXMWIUqXY/s400/SP_A0209.jpg" alt="" id="BLOGGER_PHOTO_ID_5216491264283224050" border="0" /></a>Next up, was the workshop. We created a beginners workshop, for people who had never before worked with the magic of APEX. There was little or no experience with HTML_DB or APEX in the room among the attendees, so I was a bit nervous about the complexity of the workshop.<br /><br />Apparently I forgot how easy it was to start working with APEX, because people were flying through the workshop! Luckily, somewhere in the middle they reached some more complex material, which provided the attendees with some more challenges.<br />The feedback we received on the workshop was again, very positive.<br /><br />Finally, after some quick&clean application building, Roel gave his presentation about the ODTUG'08 Kaleidoscope where he attended earlier this month. A lot of cool new features / directions came to light, creating a bit of a buzz followed by a good discussion among the attendees.<br /><br /><span style="font-weight: bold;">Yes it was happening</span>, the healthy addiction of APEX found some more hosts once more!!<br /><br />This workshop created a lot of enthousiasm among the attendees, and I think almost everyone wanted a follow up workshop with more details. This is (again) a clear case of how low the threshold is that APEX has when people are just starting to create some application with it.<br /><br />In case you haven't noticed yet, <span style="font-weight: bold;">APEX rocks!</span>Rutgerhttp://www.blogger.com/profile/02983356065037436936noreply@blogger.com0