Montag, 25. April 2016

Using different jQuery Versions in Oracle Jet

My latest IoT home projekt works with digitial LEDS that are controlled by a NodeJS server on my raspberry pi. By calling my REST API with a html hex parameter I was able to easily manipulate the color of the whole strip. Unfortunately my girlfriend wasn't excited at all because typing in a hex color value is not handy at all. So I was in need of a nice client application to send html color codes to my raspberry pi. 

A perfect use case for a simple Oracle Jet application. There are 1000+ color pickers on the internet, so I thought this will be pretty easy. Expected time to get things going was less than 20 Minutes. So I created a Jet application with the basic template and searched for a suitable color picker. The best color picker I found was the farbtastic color wheel.


After downloading the color picker I put the farbtastic.js file in /libs/farbtastic/ and the farbtastic.css directly into /css.


Then I added the library into the require config in main.js so I can use it in my modules. 


The last step should be using require to load the farbtastic.js and then call the function to add the color wheel to my div block. I added everything to the compContent.module. Here is a snippet of the HTML and the js. Take a look at the require block.

<!-- Copyright (c) 2014, 2016, Oracle and/or its affiliates. The Universal Permissive License (UPL), Version 1.0 --><h1>Complementary</h1>
<div>
  Content in this area will be wrapped below the Navigation and  Main Content Area sections when the viewport is made smaller.  At the smallest viewport size, it will be the last section listed.</div>
<br/>
<div>
  To change the content of this section, you will make edits to the compContent.html file located in the /js/views folder.</div>
<h2 data-bind="text: color"></h2>
<div id="colorpicker">Place for colorpicker</div>

<div data-bind="foreach: { data: colors, afterRender: showPicker}">
</div>



That should be it. Lets see how it looks! 
When we start the application we don't see anything. What's wrong? The Message we receive is:
Message: Cannot read property 'msie' of undefined


Oh damn, Oracle Jet ships with jQuery 2.1.3 and the color picker I used is not compatible to jQuery Versions higher than 1.8. The easiest solution is to use a component that supports a newer jQuery Version. So is there no way to use two different jQuery Versions in one Oracle Jet application? Of course there is, let's see what we need to do.

First we download our different jQuery version and put it into /libs/jquery. Now there should be a jquery-1.8.0.js and a jquery-2.1.3.js in this path. 
Running two different jQuery versions at the same time, requires to use jQuery in the noconflict mode. To do so, we need to create a new js file for each version and load this files in require config. I named the files jquery-2.1.3-noconflict.js and jquery-1.8.0-noconflict.js. Here is a sample for version 1.8

define(["libs/jquery/jquery-1.8.0.min"], function($) {
    //drop the `true` if you want jQuery (but not $) to remain global    return jQuery.noConflict();
});

Do the same for version 2.1.3 and use the new files in require config as shown below

requirejs.config({
  // Path mappings for the logical module names  paths //injector:mainReleasePaths  {
    'knockout''libs/knockout/knockout-3.4.0',
    'jquery''libs/jquery/jquery-2.1.3-noconflict',
    'jquery-1.8''libs/jquery/jquery-1.8.0-noconflict',
    'jqueryui-amd''libs/jquery/jqueryui-amd-1.11.4.min',
    'promise''libs/es6-promise/promise-1.0.0.min',
    'hammerjs''libs/hammer/hammer-2.0.4.min',
    'ojdnd''libs/dnd-polyfill/dnd-polyfill-1.0.0.min',
    'ojs''libs/oj/v2.0.0/debug',
    'ojL10n''libs/oj/v2.0.0/ojL10n',
    'ojtranslations''libs/oj/v2.0.0/resources',
    'signals''libs/js-signals/signals.min',
    'text''libs/require/text',
    'farbtastic''libs/farbtastic/farbtastic',
    'domReady''libs/domReady/domReady',
    'tinyColorPicker''libs/tinyColorPicker/jqColorPicker.min'  }
  //endinjector  ,
  // Shim configurations for modules that do not expose AMD  shim{
    'jquery'{
      exports['jQuery''$']
    },
    'jquery-1.8'{
      exports['$']
    },
    'farbtastic'{
      deps['jquery-1.8']
    }
  },

Take a good look at the definitions of jquery / jquery-1.8 and the shim configuration which is needed because jquery doesn't support AMD.
You can use the following snippet to check which version of jquery is in use.

            var version $().jquery;
            $('#version').text(version);
            console.log('JQ Version'version);

Now we finally have to tell our module to use jQuery 1.8 and not 2.1.3. Therefor we change the require definition in our module to load our special version.

define
(['ojs/ojcore''knockout''jquery-1.8''farbtastic'],
    function(ojko$) {

This was the last step to get the color picker working. In the console output we are able to see which version of jQuery is used in wich block. 



When I start my Jet application I am now able to use the color picker I wanted with the jQuery version it needed.


Its working fine and you can see a demo in my tweet. Have fun!

Kommentare :

  1. This is awesome dude!! can you share some details about this project would like to work on something like this. how you are communicating to LED strip from raspberry Pi.

    AntwortenLöschen
    Antworten
    1. Hi AjAiN,

      just google something like "raspberry pi ws281x leds" to get tutorials.

      Löschen