Creating JSFiddle for Oracle JET snippet – using additional modules

Lucas Jellema
0 0
Read Time:4 Minute, 43 Second

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.

image

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:

image

I copy the URL to the clipboard. Then on https://rawgit.com/ I paste the URL:

image

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.

image

Finally the module is required into fiddle through:

image

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:

image

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.

image

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:

image

 

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/):

image

 

Fiddles can be embedded in articles and other publications. Open the embed option in the top menu and copy the embed-code or link:

image

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/):

About Post Author

Lucas Jellema

Lucas Jellema, active in IT (and with Oracle) since 1994. Oracle ACE Director and Oracle Developer Champion. Solution architect and developer on diverse areas including SQL, JavaScript, Kubernetes & Docker, Machine Learning, Java, SOA and microservices, events in various shapes and forms and many other things. Author of the Oracle Press book Oracle SOA Suite 12c Handbook. Frequent presenter on user groups and community events and conferences such as JavaOne, Oracle Code, CodeOne, NLJUG JFall and Oracle OpenWorld.
Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %
Next Post

Serverless Computing - Function as a Service (FaaS) - with Azure Functions - first small steps with a Node/JavaScript function

If your application does not have internal state – and sometimes it is handling peak loads of requests while at other times it is not doing any work at all, why then should there be one or even more instances of the application (plus container and/or server) continuously and dedicatedly […]
%d bloggers like this: