My objective in this article: describe how I (and therefore you) can use JSFiddle to create running, shared samples of Oracle JET code. This is useful for question on the JET Forum or on StackOverflow and also as demo/illustration along a blog post or other publication. JSFiddle is an IDE-like web site that allows us to create mini-applications consisting of CSS, HTML and JavaScript resources and run these client side applications in the browser. We can edit the code and re-run. We can easily embed JSFiddle components in articles and we can share JSFiddle entries simply by sharing the URL.
In order to create Oracle JET fiddles, we need a template that takes care of all the scaffolding – the basic dependencies (CSS and JavaScript) that we always need. Ideally, by using the template, we can focus on the code that is specific to the sample we want to create as a fiddle.
The original JSFiddle that I used as a started point is from John Brock … ehm, Peppertech: https://jsfiddle.net/peppertech/a593LL2r/
As an external resource the fiddle loads requireJS: https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js
All other required JavaScript modules are loaded by requireJS – as instructed in the configuration of the paths property in requirejs.config. The modules include Oracle JET (core, translation, drag and drop), jQuery, Hammer, Knockout and ES6 Promise.
The custom JavaScript for the specific JET snippet we want to demonstrate in the Fiddle goes into the main function that is passed to require at the beginning of the Fiddle – along with the list of modules required by the main function. This function defines the ViewModel and applies data bindings through knockout, linking the ViewModel to an HTML element.
If we have additional custom JavaScript that is in a separate JavaScript files, we can access these as external dependencies that are added to the fiddle. Note that JSFiddle will only access resources from Content Delivery Networks; we can make use of a trick to add our own custom JavaScript resources to the fiddle:
- store the files on GitHub
- create a CDN-style URL to each file, for example using RawGit (a site that serves GitHub project files through MaxCDN)
- add the URL as external resource to the fiddle
Any file added in this fashion is loaded by JSFiddle when the fiddle is executed.
In my case, I want to load a custom module – through require.js . In that case, I do not have to add the file that contains the module definition to the JSFiddle as external resource. I can have require.js load the resource directly from the CDN URL (note: loading the file from the raw GitHub URL does not work: “Refused to execute script from ‘https://raw.githubusercontent.com/lucasjellema/supporting-sources/master/basic-jet-snippet/my-module.js’ because its MIME type (‘text/plain’) is not executable, and strict MIME type checking is enabled.”.
My custom module is on GitHub:
I copy the URL to the clipboard. Then on https://rawgit.com/ I paste the URL:
I then copy the CDN style URL to the clipboard. In JSFiddle I can add this URL path to the code – in function _getCDNPath(paths) . Note: I remove the actual name of the file, so the path itself refers to the directory. In this directory, there could be multiple modules.
Finally the module is required into fiddle through:
Here I refer to custom-modules/my-module which resolves to the module defined in file my-module.js in the [GitHub] directory referred to by the CDN Url added to newPaths.
The full fiddle looks like this – hardly anything specific, just a tiny little bit of data binding to the ViewModel:
This fiddle now becomes my starting point for any future fiddle for Oracle JET 3.2. As is shown below.
Create New Fiddle from Template
To create any Oracle JET fiddle, I can now (and you can do that as well) go to my template fiddle (https://jsfiddle.net/lucasjellema/h7n41tkp/) and click on Fork.
A new fiddle is created as a clone of the template. I should update the meta data of the fiddle (as to not get confused myself) and can then create the example I want. Here I show a very basic popup example:
The resulting fiddle: https://jsfiddle.net/lucasjellema/5abpdgt9/ – created as a clone of the template fiddle, extended with a few lines of code to create the intended effect.
The two fiddles show up on my public JSFiddle Dashboard (https://jsfiddle.net/user/lucasjellema/fiddles/):
Fiddles can be embedded in articles and other publications. Open the embed option in the top menu and copy the embed-code or link:
Then use that code in the source of whatever you want to embed the fiddle into. For example – down here:
More elaborate JSFiddle – Nested Datagrid
Another example of an interesting Oracle JET based JSFiddle, created from the base template is this nested data grid; note: I have not yet replace local image references with URLs to a Content Delivery Network or some other public location.
Note: some fiddles will only run (for me at least) in Google Chrome Browser – not in Firefox.
Resources
Jim Marion’s blog article http://jsjim.blogspot.nl/2016/03/fiddling-around-with-oracle-jet.html
RawGit: https://rawgit.com/
Source in GitHub: https://github.com/lucasjellema/supporting-sources/
The starting point fiddle by PepperTech: https://jsfiddle.net/peppertech/a593LL2r/
The final resulting fiddle with the JET Tooltip example: https://jsfiddle.net/lucasjellema/5abpdgt9/
My public JSFiddle Dashboard (https://jsfiddle.net/user/lucasjellema/fiddles/):
