Using inputEx with YUI3
This page describe a way to use inputEx with YUI3. It's kind of hack, so pay attention to the instructions on this page. It is made to be a compatibility layer before the inputEx YUI3 native implementation.
Step 1 - Seed files
First, we obviously need to insert YUI3 seed file to the page, and the js/yui3-loader.js file which declares inputEx modules to YUI3.
| 1 | <script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script> |
| 2 | <script type="text/javascript" src="path/to/js/yui3-loader.js"></script> |
| view plain | print | ? |
Step 2 - two-stage loading
The latest version of inputEx doesn't use YUI2 modules. For this reason, we have to :
- Make the YUI2 instance global (so it's not compatible with sandboxing)
- load YUI2 before requiring any inputEx module (inputEx code is not wrapped in function calls, so the YAHOO global object must be present before loading the files)
| 1 | // FIXME: set the path to inputEx |
| 2 | YUI_config.groups.inputex.base = '../path/to/inputex'; |
| 3 | |
| 4 | YUI().use( "yui3-global-yui2", function(Y) { |
| 5 | |
| 6 | // IMPORTANT: Note the two-stage loading ! |
| 7 | |
| 8 | YUI().use( "inputex-form", "inputex-string", function(Y) { |
| 9 | // Y.inputEx ready to use |
| 10 | }); |
| 11 | |
| 12 | }); |
| view plain | print | ? |
That's it ! Note that the module names have changed from the YUI2 loader: it's not inputex-stringfield anymore, but inputex-string instead.
How does it work ?
To achieve this, inputEx's yui3-loader.js declares two additional modules, which :
- make the YUI2 instance global (first stage)
- load inputEx & alias inputEx to Y.inputEx (second stage)
| 1 | YUI.add('yui3-global-yui2', function(Y) { |
| 2 | window.YAHOO = Y.YUI2; |
| 3 | }, '0.7.1', { |
| 4 | requires: ['yui2-yahoo','yui2-dom','yui2-event'] |
| 5 | }); |
| 6 | |
| 7 | YUI.add('inputex-yui3', function(Y) { |
| 8 | Y.inputEx = window.inputEx; |
| 9 | // fix the spacerUrl thx to the inputEx path |
| 10 | Y.inputEx.spacerUrl = YUI_config.groups.inputex.base+"/images/space.gif"; |
| 11 | }, '0.7.1', { |
| 12 | requires: ['yui3-global-yui2'] |
| 13 | }); |
| view plain | print | ? |
Loading from a local yui2in3 directory
If you want to serve the YUI2 library locally, the classic YUI2 distribution won't work. You will need to download yui2in3 and setup the loader as below :
| 1 | YUI({ |
| 2 | groups: { |
| 3 | yui2: { |
| 4 | base: 'local/path/to/2in3/dist/2.8.0/build/', // FIXME: setup the path to 2in3 build |
| 5 | patterns: { |
| 6 | 'yui2-': { |
| 7 | configFn: function(me) { |
| 8 | if(/-skin|reset|fonts|grids|base/.test(me.name)) { |
| 9 | me.type = 'css'; |
| 10 | me.path = me.path.replace(/\.js/, '.css'); |
| 11 | me.path = me.path.replace(/\/yui2-skin/, '/assets/skins/sam/yui2-skin'); |
| 12 | } |
| 13 | } |
| 14 | } |
| 15 | } |
| 16 | } |
| 17 | } |
| 18 | }).use( "yui3-global-yui2", function(Y) { |
| 19 | |
| 20 | YUI().use( "inputex-form", |
| 21 | "inputex-string", |
| 22 | // ... |
| 23 | function(Y) { |
| 24 | |
| 25 | // Y.inputEx ready to use |
| 26 | |
| 27 | }); |
| 28 | }); |
| view plain | print | ? |
Example
| 1 | YUI().use( "yui3-global-yui2", function(Y) { |
| 2 | |
| 3 | // IMPORTANT: Note the two-stage loading ! |
| 4 | YUI().use( "inputex-form", |
| 5 | "inputex-string", |
| 6 | "inputex-email", |
| 7 | "inputex-url", |
| 8 | "inputex-select", |
| 9 | "inputex-datetime", |
| 10 | "inputex-colorpicker", |
| 11 | "inputex-rte", |
| 12 | "inputex-list", |
| 13 | function(Y) { |
| 14 | |
| 15 | new Y.inputEx.Form( { |
| 16 | fields: [ |
| 17 | {type: 'select', label: 'Title', name: 'title', choices: ['Mr','Mrs','Ms'] }, |
| 18 | {label: 'Firstname', name: 'firstname', required: true, value:'Jacques' }, |
| 19 | {label: 'Lastname', name: 'lastname', value:'Dupont' }, |
| 20 | {type:'email', label: 'Email', name: 'email'}, |
| 21 | {type:'url', label: 'Website',name:'website'}, |
| 22 | {type:'datetime', label: 'Date', name: 'date'}, |
| 23 | {type:'colorpicker', label: 'Color', name: 'color'}, |
| 24 | {type:'html', label: 'Text', name: 'any'}, |
| 25 | {type: 'list', label: 'Test', listLabel: 'Websites', elementType: { type: 'select', choices: ['http://www.neyric.com', 'http://www.ajaxian.com', 'http://www.google.com', 'http://www.yahoo.com', 'http://javascript.neyric.com/blog', 'http://javascript.neyric.com/wireit', 'http://neyric.github.com/inputex'] }, value: ['http://www.neyric.com', 'http://www.ajaxian.com', 'http://www.google.com', 'http://www.yahoo.com'], useButtons: true } |
| 26 | ], |
| 27 | buttons: [{type: 'submit', value: 'Change'}], |
| 28 | parentEl: 'container1' |
| 29 | }); |
| 30 | |
| 31 | }); |
| 32 | }); |
| view plain | print | ? |