Generate APEX plug-ins on the command line

2021-10-13T00:00:00+00:00

Introduction</h2>
Everyone who develops plug-ins for APEX knows the problem: Once a plug-in is finished, future maintenance is usually just a matter of uploading updated JavaScript files to the plug-in and finally downloading the plug-in to make it available to others. This can be a very time consuming process when troubleshooting or implementing a new feature.
So for my latest open source project, I thought about how to shorten the whole process. I already had a file watcher and a build script running anyway, which, when source files are changed, merges the entire project into a single SQL install script. The plug-in was just about updating a JavaScript file (normal and minified). The PL/SQL code for the plug-in is in a package and only referenced - this is also a good approach for performance reasons (Blog post by Daniel Hochleitner on the topic</a>).

Creating a template from the existing plug-in</h2>

So I downloaded the finished plug-in once and stored it as a template in the project directory. Then I looked at how the files are stored in the SQL script of the plug-in:

begin</span></span>
    wwv_flow_api.g_varchar2_table :</span>=</span> wwv_flow_api.empty_varchar2_table;</span></span>
    wwv_flow_api.g_varchar2_table(</span>1</span>) :</span>=</span> '766172206f69633d7b6f633a7b7d2c6f613a7b7d2c6c6e3a7b7d7d3b6f69632e6c6e2e6572726f723d312c6f69632e6c6e2e7761726e696e673d322c6f69632e6c6e2e696e666f3d332c6f69632e6c6e2e64656275673d342c6f69632e6c6e2e74726163'</span>;</span></span>
    wwv_flow_api.g_varchar2_table(</span>2</span>) :</span>=</span> '653d352c6f69632e746f537472696e673d66756e6374696f6e2872297b666f7228766172206f3d22222c653d303b653c722e6c656e6774683b652b2b296f2b3d30213d3d653f2220223a22222c226f626a656374223d3d747970656f6620725b655d3f6f'</span>;</span></span>
    wwv_flow_api.g_varchar2_table(</span>3</span>) :</span>=</span> '2b3d225c6e222b4a534f4e2e737472696e6769667928725b655d2c6e756c6c2c32293a6f2b3d725b655d3b72657475726e206f7d2c6f69632e696e69743d66756e6374696f6e28297b6f69632e6d6573736167653d66756e6374696f6e28722c6f2c652c'</span>;</span></span>
    /* snip */</span></span>
    wwv_flow_api.g_varchar2_table(</span>14</span>) :</span>=</span> '2e6c6e2e6572726f722c722c6e2c692e737461636b292c21317d7d3b'</span>;</span></span>
end</span>;</span></span>
/</span></span>
</span>
begin</span></span>
    wwv_flow_api.create_plugin_file (</span></span>
        p_id           </span>=></span> wwv_flow_api.id(</span>37195131994077352</span>),</span></span>
        p_plugin_id    </span>=></span> wwv_flow_api.id(</span>36295154520053378</span>),</span></span>
        p_file_name    </span>=></span> 'console.min.js'</span>,</span></span>
        p_mime_type    </span>=></span> 'application/javascript'</span>,</span></span>
        p_file_charset </span>=></span> 'utf-8'</span>,</span></span>
        p_file_content </span>=></span> wwv_flow_api.varchar2_to_blob(wwv_flow_api.g_varchar2_table) );</span></span>
end</span>;</span></span>
/</span></span></code></pre>
    Example of a file in the SQL installation script of a plug-in</figcaption>
</figure>
It looks like we have to encode the files somehow - but how? If you take a closer look at the characters, you will notice at some point that only the digits 0 to 9 and the letters a to f are used. So it seems to be a hexadecimal encoding - with 200 characters in each block.</p>
Ok, then in the template we replace the first anonymous PL/SQL block with a placeholder:</p>

    #CONSOLE_JS_FILE_MIN#</span></span>
</span>
begin</span></span>
    wwv_flow_api.create_plugin_file (</span></span>
        p_id           </span>=></span> wwv_flow_api.id(</span>37195131994077352</span>),</span></span>
        p_plugin_id    </span>=></span> wwv_flow_api.id(</span>36295154520053378</span>),</span></span>
        p_file_name    </span>=></span> 'console.min.js'</span>,</span></span>
        p_mime_type    </span>=></span> 'application/javascript'</span>,</span></span>
        p_file_charset </span>=></span> 'utf-8'</span>,</span></span>
        p_file_content </span>=></span> wwv_flow_api.varchar2_to_blob(wwv_flow_api.g_varchar2_table) );</span></span>
end</span>;</span></span>
/</span></span></code></pre>
    Example of a file in the plug-in template with placeholder</figcaption>
</figure>
Now we need some code to replace the placeholder with the converted source file.</p>
JavaScript helper functions for conversion</h2>
Since I implemented the file watcher and other scripts with Node.js/npm, it was obvious to solve this in JavaScript as well. First the needed modules and a md5 hash function:</p>
const</span> fs</span> =</span> require</span>(</span>'fs'</span>)</span>;</span></span>
const</span> UglifyJS</span> =</span> require</span>(</span>'uglify-js'</span>)</span>;</span></span>
const</span> crypto</span> =</span> require</span>(</span>'crypto'</span>)</span>;</span></span>
const</span> toMd5Hash</span> =</span> function</span> (</span>string</span>) {</span> return</span> crypto</span>.</span>createHash</span>(</span>'md5'</span>)</span>.</span>update</span>(string)</span>.</span>digest</span>(</span>'hex'</span>)</span> };</span></span>
let</span> consoleJsCode</span>,</span> minified</span>,</span> version</span>,</span> md5Hash</span>,</span> conf</span>;</span></span></code></pre>
Then we need a helper function that breaks a string into blocks of 200 characters and returns it as an array:</p>
const</span> toChunks</span> =</span> function</span> (</span>text</span>,</span> size</span>) {</span></span>
    const</span> numChunks</span> =</span> Math</span>.</span>ceil</span>(text</span>.</span>length</span> /</span> size)</span>;</span></span>
    const</span> chunks</span> =</span> new</span> Array</span>(numChunks)</span>;</span></span>
    for</span> (</span>let</span> i</span> =</span> 0</span>,</span> start</span> =</span> 0</span>;</span> i</span> <</span> numChunks</span>;</span> ++</span>i</span>,</span> start</span> +=</span> size)</span> {</span></span>
        chunks[i]</span> =</span> text</span>.</span>substr</span>(start</span>,</span> size)</span>;</span></span>
    }</span></span>
    return</span> chunks</span>;</span></span>
};</span></span></code></pre>
Finally, our actual function, which hexadecimally encodes a string (read file) and puts it into the required SQL script form:</p>
const</span> toApexPluginFile</span> =</span> function</span> (</span>text</span>) {</span></span>
    const</span> hexString</span> =</span> new</span> Buffer</span>.</span>from</span>(text)</span>.</span>toString</span>(</span>'hex'</span>)</span>;</span></span>
    const</span> chunks</span> =</span> toChunks</span>(hexString</span>,</span> 200</span>)</span>;</span></span>
    let</span> apexLoadFile</span> =</span> 'begin</span>\n</span>'</span> +</span></span>
        '  wwv_flow_api.g_varchar2_table := wwv_flow_api.empty_varchar2_table;</span>\n</span>'</span>;</span></span>
    for</span> (</span>let</span> i</span> =</span> 0</span>;</span> i</span> <</span> chunks</span>.</span>length</span>;</span> ++</span>i)</span> {</span></span>
        apexLoadFile</span> +=</span> `  wwv_flow_api.g_varchar2_table(</span>${</span>(</span>i</span> +</span> 1</span>)</span>}</span>) := '</span>${</span>chunks</span>[</span>i</span>]</span>}</span>';</span>\n</span>`</span>;</span></span>
    }</span></span>
    apexLoadFile</span> +=</span> 'end;</span>\n</span>/'</span>;</span></span>
    return</span> apexLoadFile</span>;</span></span>
};</span></span></code></pre>Build script to build the plug-in when changes are made in the source code</h2>
Everything is assembled by the build script - here is the relevant snippet:</p>

    console</span>.</span>log</span>(</span>'- build file install/apex_plugin.sql'</span>)</span>;</span></span>
consoleJsCode</span> =</span> fs</span>.</span>readFileSync</span>(</span>'sources/apex_plugin_console.js'</span>,</span> 'utf8'</span>)</span>;</span></span>
version</span> =</span> fs</span>.</span>readFileSync</span>(</span>'sources/CONSOLE.pks'</span>,</span> 'utf8'</span>)</span>.</span>match</span>(</span>/</span>c_version</span>\s</span>+</span>constant</span>.</span>*?</span>'(</span>.</span>*?</span>)'</span>/</span>)[</span>1</span>]</span>;</span></span>
md5Hash</span> =</span> toMd5Hash</span>(consoleJsCode)</span>;</span></span>
// reading the last saved version and md5Hash values as a reference for the comparison</span></span>
conf</span> =</span> JSON</span>.</span>parse</span>(fs</span>.</span>readFileSync</span>(</span>'apexplugin.json'</span>,</span> 'utf8'</span>))</span>;</span></span>
if</span> (conf</span>.</span>version</span> !==</span> version</span> ||</span> conf</span>.</span>jsFile</span>.</span>md5Hash</span> !==</span> md5Hash)</span> {</span></span>
    minified</span> =</span> UglifyJS</span>.</span>minify</span>(</span>{</span> "console.js"</span>:</span> consoleJsCode</span> }, {</span> sourceMap</span>:</span> true</span> }</span>)</span>;</span></span>
    if</span> (minified</span>.</span>error)</span> throw</span> minified</span>.</span>error</span>;</span></span>
    conf</span>.</span>version</span> =</span> version</span>;</span></span>
    conf</span>.</span>jsFile</span>.</span>md5Hash</span> =</span> md5Hash</span>;</span></span>
    conf</span>.</span>jsFile</span>.</span>version</span> +=</span> 1</span>;</span></span>
    fs</span>.</span>writeFileSync</span>(</span>'install/apex_plugin.sql'</span>,</span></span>
        '--DO NOT CHANGE THIS FILE - IT IS GENERATED WITH THE BUILD SCRIPT sources/build.js</span>\n\n</span>'</span> +</span></span>
        fs</span>.</span>readFileSync</span>(</span>'sources/apex_plugin_template.sql'</span>,</span> 'utf8'</span>)</span></span>
            .</span>replace</span>(</span>'#CONSOLE_VERSION#'</span>,</span> conf</span>.</span>version)</span></span>
            .</span>replace</span>(</span>'#FILE_VERSION#'</span>,</span> conf</span>.</span>jsFile</span>.</span>version)</span></span>
            .</span>replace</span>(</span>'#CONSOLE_JS_FILE#'</span>,</span> toApexPluginFile</span>(fs</span>.</span>readFileSync</span>(</span>'sources/apex_plugin_console.js'</span>,</span> 'utf8'</span>)))</span></span>
            .</span>replace</span>(</span>'#CONSOLE_JS_FILE_MIN#'</span>,</span> toApexPluginFile</span>(minified</span>.</span>code))</span></span>
            .</span>replace</span>(</span>'#CONSOLE_JS_FILE_MIN_MAP#'</span>,</span> toApexPluginFile</span>(minified</span>.</span>map))</span></span>
    )</span>;</span></span>
    fs</span>.</span>writeFileSync</span>(</span>'apexplugin.json'</span>,</span> JSON</span>.</span>stringify</span>(conf</span>,</span> null</span>,</span> 2</span>))</span>;</span></span>
}</span></span></code></pre>
    Example of a build script (excerpt, here the complete script</a>)</figcaption>
</figure>
It should be noted that we will also have to manage the file version itself - APEX will install it as we create it. For that purpose, we check by means of hash-function whether JavaScript source file has changed and only then we regenerate the plug-in (including minification). This way, we avoid unnecessarily regenerating the plug-in every time we change source code in the repository and thus incrementing the file version.In the build script snippet above, the current file version and hash value is stored in a JSON file (apexplugin.json</code>, last line of code) so that we can use this as a reference in the next build.</p>
Here is the relevant place in the plug-in template where the file version is entered by the build script (placeholder #FILE_VERSION#</code>, last parameter):</p>

    prompt </span>-</span> application</span>/</span>shared_components</span>/</span>plugins</span>/</span>dynamic_action</span>/</span>com_ogobrecht_console</span></span>
begin</span></span>
    wwv_flow_api.create_plugin (</span></span>
        p_id                        </span>=></span> wwv_flow_api.id(</span>36295154520053378</span>),</span></span>
        p_plugin_type               </span>=></span> 'DYNAMIC ACTION'</span>,</span></span>
        p_name                      </span>=></span> 'COM.OGOBRECHT.CONSOLE'</span>,</span></span>
        p_display_name              </span>=></span> 'Oracle Instrumentation Console'</span>,</span></span>
        p_supported_ui_types        </span>=></span> 'DESKTOP:JQM_SMARTPHONE'</span>,</span></span>
        p_api_version               </span>=></span> 2</span>,</span></span>
        p_render_function           </span>=></span> 'console.apex_plugin_render'</span>,</span></span>
        p_ajax_function             </span>=></span> 'console.apex_plugin_ajax'</span>,</span></span>
        p_substitute_attributes     </span>=></span> true,</span></span>
        p_subscribe_plugin_settings </span>=></span> true,</span></span>
        p_version_identifier        </span>=></span> '#CONSOLE_VERSION#'</span>,</span></span>
        p_about_url                 </span>=></span> 'https://github.com/ogobrecht/console'</span>,</span></span>
        p_files_version             </span>=></span> #FILE_VERSION# );</span></span>
end</span>;</span></span>
/</span></span></code></pre>
    Plug-in template with placeholders for file and plug-in version (snippet)</figcaption>
</figure>
In addition, the version number of the plug-in itself is also updated here (placeholder #CONSOLE_VERSION#</code>, third last parameter) - but this depends on the respective circumstances of the project. In my case I write the version number of the PL/SQL package CONSOLE also into the plug-in depending on it - so if the version number of the package changes, the plug-in will be rebuilt as well. But here everybody has to see what is needed in the project.</p>
When saving source code changes, the file watcher starts and triggers the build script. This then builds two installation SQL scripts together: That of the logging tool itself (not the focus of this article) and then that for the plug-in. Following this, both scripts are then installed in a dev environment. For this, of course, the default workspace stored in the plug-in and the default application number must be present in the dev environment.</p>
NPM scripts for orchestration</h2>
I now often manage build and install scripts with the node package manager npm. The reason for this is the good integration with Visual Studio Code, the operating system independence and the possibility to orchestrate the scripts a bit - ok, you have to install Node.js, but don’t you always? With one click you can either start the watch task, which does everything automatically with every save of a source file, or you can conveniently call the scripts individually. If someone else looks into the repository, it is also clearer with the npm scripts what works here and how.</p>

    
    npm script integration in VS Code</figcaption>
</figure>
It’s also clear that you don’t write usernames and passwords into the scripts here anymore - that’s already forbidden in principle when the code is checked into version control. On the screenshot you can (hopefully) see that here a wallet with the alias playground</code> is used. For those who only use the instant client and have problems setting up a wallet: How to use mkstore and orapki with Oracle Instant Client</a>.</p>
The scripts are managed in the file package.json</code> on the top level of the project directory. If you want to read more about npm scripts, you can start here:</p>

Introduction to NPM Scripts</a></li>
Why I Left Gulp and Grunt for npm Scripts</a></li>
Why npm Scripts?</a></li>
</ul>
A complete example</h2>
For those who want to see how everything can work together: I took the examples here in the article from my open source project Oracle Instrumentation Console</a>.</p>
Another way</h2>
My focus with this solution was to be able to supply a plug-in locally on the PC with new files. But there is another way: You can upload files or whole directories via script into an installed plug-in of an APEX application and then download the plug-in afterwards. For this purpose there is the Open Souce Project APEX Publish Static Files</a> by Vincent Morneau. This project is also integrated with APEX Nitro</a> which can speed up frontend development in APEX.</p>
Have fun generating plug-ins :-)</p>
Ottmar</p>

jQuery Plugin svg2img

2017-04-03T00:00:00+00:00

SVG based charts and visualizations are often used these days. But what if you want to use your browser inline SVGs, generated with some sort of JavaScript and fancy styled with CSS, offline - maybe in a presentation, send by email or printed out large scaled?

You can create a screenshot, of course. But does this look nice when it comes to scaling? You can try to copy the HTML code of the SVG and wrap it into a correct SVG container, but then you will loose in the most cases the stylings, as normally not all CSS definitions are directly attached to the SVG elements. You can also use a browser extension like this one for Google Chrome</a>, but then you depend on the browser and the extension.

There is now a declarative way with the help of a jQuery plugin, which is 100% client based:

jQuery</span>(</span>'#example-graph'</span>)</span>.</span>svg2img</span>()</span>;</span></span></code></pre>
There is one default option - you can redeclare it:</p>
jQuery</span>.</span>fn</span>.</span>svg2img</span>.</span>defaults</span> =</span> {</span></span>
    debug</span>:</span> false</span> // write debug information to console</span></span>
};</span></span></code></pre>
You can also set the debug option at runtime:</p>
$</span>(</span>'#example-graph'</span>)</span>.</span>svg2img</span>(</span>{</span>debug</span>:</span>true</span>}</span>)</span>;</span></span></code></pre>
The plugin checks if your selector is a SVG element. If this is not the case, it searches under each selector element for all SVGs and exports it. The name(s) of the file(s) are automatically derived from the element ID (or parent element ID) or set to export</code>. The current date and time is appended to the file name, for example example-graph-20170403-154653.svg</code>.</p>
You can download all SVGs from one page by setting the selector to the document, body or svg - as you like it. There is no need for a each()</code> call, svg2img</code> works on the whole selection and is chainable:</p>
$</span>(</span>"svg"</span>)</span>.</span>svg2img</span>()</span>.</span>css</span>(</span>"border"</span>,</span> "1px solid red"</span>)</span>;</span></span></code></pre>
If you want to use anchors to provide export links then it is recommended to prevent the default action like so:</p>
<</span>a</span> href</span>=</span>""</span> onclick</span>=</span>"</span>event</span>.</span>preventDefault</span>()</span>;</span> $</span>(</span>'#example-graph'</span>)</span>.</span>svg2img</span>()</span>;</span>"</span>></span>SVG</span></</span>a</span>></span></span></code></pre>
Otherwise Firefox and IE failing to save. One last thing: Safari has currently (as of this writing) problems with the underlaying savAs()</code> implementation and tries to open the images in a new tab with or without success. See also this issue on GitHub</a>.</p>
UPDATE 2017-04-14: After update to macOS Sierra 10.12.4 Safari 10.1 works also - but is as slow as before - collecting CSS styles runs on my MacBook 2800ms in Safari, 20ms in Google Chrome :-(
I stopped to support other image formats then SVG since the canvas export behind the scenes was not really working in too many browsers and the core feature was and is to convert inline SVGs to standalone SVG images.</p>
The project is hosted on GitHub</a> and MIT licensed.</p>
Happy SVG exporting :-)</p>
Ottmar</p>

APEX Plugin dhtmlxGantt

2017-03-14T00:00:00+00:00

Some weeks ago I was asked, if I can create a plugin for the Gantt chart library from dhtmlx.com</a>. I had a look at the library and I thought that it should be possible.

Because all my plugin developments are free time projects it took a while. Now the first public version is available. It is based on the GPLv2 version of the library, which has a reduced set of functionality. If you need advanced features like milestones, auto scheduling or calculating the critical path you can buy a Pro version of the library. I have no relation to the company behind dhtmlx.com, so please do not complain. As I told before I was asked for this plugin (which will be used in a Pro version there…) and I like the visualization from DHTMLX.

You can find the sources and more informations on GitHub</a> and a online demo on apex.oracle.com</a>.

Maybe the plugin is helpful for someone else…

Happy project planning :-)

Ottmar

DokuWiki Plugin Reveal.js

2017-03-05T00:00:00+00:00

DokuWiki</a> is very good for creating documentation in a team. It is PHP based, needs less resources and is running without a database only on files on nearly every webserver. If your infrastructure is crashed for whatever reason and you have at least access to the files (on the webserver or in a backup) you can read your documentation with a simple text editor, because DokuWiki’s syntax is designed to be readable as possible without any rendering to HTML.

For the APEX connect 2015 I started to use Markdown and Pandoc</a> to create HTML based slides. Pandoc supports different HTML slideshow tools - two of them are also available as plugins in DokuWiki: S5 and Reveal.js</a>. Reveal.js is the more modern library and I used this one together with Pandoc.

For the DOAG conference last year I tried to use Reveals.js as a DokuWiki Plugin - I wanted to have at the same time a normal wiki page and the possibility to render this page as a slideshow. Unfortunately the existing plugin was only a base implementation and many features from Reveal.js were not available. I decided to contribute to the existing plugin. The list of my improvements is long - I had fun and learned a lot. The plugin can be found here on the DokuWiki homepage</a>.

Happy presenting :-)

Ottmar

PS: In the meantime I switched complete to Markdown and Jekyll</a>, a static site generator - but this is another story for another post …

Markdown for Oracle APEX

2016-01-01T00:00:00+00:00

Some years ago I implemented a task board in APEX. For commenting I used the stackexchange</a> markdown implementation</a> (old Google code repo</a>), which is a pure JavaScript converter and editor and based on showdown.js</a>.

Some months ago I had to implement an application, which should be able to have multiple editors on one page and the editors should be able to support a read only mode. Furthermore there were hard limits for the amount of text for each editor. Both things which are not so easy to implement with the rich text editor in APEX - no really read only mode and the amount of text is also a problem because of the HTML overhead.

It was time to rethink my old implementation and to build a plugin, which creates for each text area with the class markdown an own editor. All other non input elements with a class markdown should simply rendered to HTML, which is then also the solution for the read only mode of the editors. APEX standard text area items supports a read only mode and the class markdown from the text area is also rendered by the APEX engine for this mode :-)

The nice side effect is, that I don’t had to reinvent the wheel by creating an own item type - I could reuse the standard APEX text area item and things like the character counter working out of the box.

You can find the sources and more informations on GitHub</a> and a demo app on apex.oracle.com</a>.

Happy coding :-)

Ottmar

D3.js Force-Directed Network Chart

2015-02-20T00:00:00+00:00

My first Oracle APEX plugin and open source project :-)

Everything started some months ago when I stumbled over this fascinating force-directed graph</a>. I immediately had the idea to use this technology to visualize data models in APEX. My experience is, that direct after I documented a data model, this documentation is out of date. I wanted to have a live visualization of the data models. After the first implementation it turned out, that the resulting graph is also useful for other purposes and I decided to build up an APEX plugin for easier integration.

If you use the bare JavaScript files you can run it on every HTML page:

<</span>div</span> id</span>=</span>"example"</span>></</span>div</span>></span><!--the graph container--></span></span>
<</span>link</span>  href</span>=</span>"/d3.js/d3-force-3.0.0.css"</span> rel</span>=</span>"stylesheet"</span> type</span>=</span>"text/css"</span>></span></span>
<</span>script</span> src</span>=</span>"/d3.js/ResizeObserver-1.5.0.min.js"</span>></span><</span>/</span>script</span>></span></span>
<</span>script</span> src</span>=</span>"/d3.js/d3-3.5.6.min.js"</span>></span><</span>/</span>script</span>></span></span>
<</span>script</span> src</span>=</span>"/d3.js/d3-force-3.0.0.min.js"</span>></span><</span>/</span>script</span>></span></span>
<</span>script</span>></span></span>
window</span>.</span>onload</span> =</span> function</span>() {</span></span>
  window</span>.</span>example</span> =</span> netGobrechtsD3Force</span>(</span>'example'</span>)</span></span>
    .</span>height</span>(</span>400</span>)</span></span>
    .</span>width</span>(</span>800</span>)</span></span>
    .</span>useDomParentWidth</span>(</span>true</span>)</span> //for responsive layout</span></span>
    //.zoomMode(true)</span></span>
    .</span>lassoMode</span>(</span>true</span>)</span></span>
    .</span>wrapLabels</span>(</span>true</span>)</span></span>
    .</span>showBorder</span>(</span>false</span>)</span></span>
    .</span>debug</span>(</span>true</span>)</span> //to enable the customization wizard</span></span>
    .</span>render</span>()</span>;</span> //sample data is provided when called without data</span></span>
    //also see https://ogobrecht.github.io/d3-force-apex-plugin/tutorial-1-getting-started.html</span></span>
}</span></span>
<</span>/</span>script</span>></span></span></code></pre>
I found myself often fiddling around with the parameters of the physical simulation - change config, reload page, not amused, change config…</p>
Really annoying - even I know the implementation behind. So, the question was: What can I do for an easy configuration. My answer was after a while of thinking and trying out: A customization wizard with a live preview of the changes. The link to enter the wizard is shown when the debug mode is switched on or in APEX when the developer bar is shown - try it out on the getting started page of the API docs</a>.</p>
You can find the sources and more informations on GitHub</a> and a demo app on apex.oracle.com</a>.</p>
Happy networking :-)</p>
Ottmar</p>

A complete example</h2>
For those who want to see how everything can work together: I took the examples here in the article from my open source project Oracle Instrumentation Console</a>.</p>

Ottmar’s Notes - Plug-in

Generate APEX plug-ins on the command line

New Version of D3 Force Network Chart Available

New Major Version of D3 Force Network Chart Available

jQuery Plugin svg2img

APEX Plugin dhtmlxGantt

DokuWiki Plugin Reveal.js

Markdown for Oracle APEX

D3.js Force-Directed Network Chart

Ottmar’s Notes - Plug-in

Generate APEX plug-ins on the command line

JavaScript helper functions for conversion</h2> Since I implemented the file watcher and other scripts with Node.js/npm, it was obvious to solve this in JavaScript as well. First the needed modules and a md5 hash function:</p>

A complete example</h2> For those who want to see how everything can work together: I took the examples here in the article from my open source project Oracle Instrumentation Console</a>.</p>

New Version of D3 Force Network Chart Available

New Major Version of D3 Force Network Chart Available

jQuery Plugin svg2img

APEX Plugin dhtmlxGantt

DokuWiki Plugin Reveal.js

Markdown for Oracle APEX

D3.js Force-Directed Network Chart

A complete example</h2>
For those who want to see how everything can work together: I took the examples here in the article from my open source project Oracle Instrumentation Console</a>.</p>