Section |
---|
Column |
---|
Info |
---|
This page provides pointers to instructions for upgrading your Fluid Infusion from version 1.1 to version 1.2. |
OverviewThis release includes two upgrades that will require changes the import paths in your HTML files: - New versions of jQuery and jQuery UI.
This will require changes to the import paths used to reference jQuery and jQuery UI files.
- Updates to the latest version of jqUnit.
If you are using Infusion's jqUnit, this will require changes to some import paths.
Details on how to update your import paths are provided later on this page. In addition to these upgrades, the following updates may require changes to your implementations, if you are using them: - Refactoring of the Reorderer DOM utilities
- Updates to Infusion Mobile FSS API
- Added Support for CKEditor 3.x to Rich Text Inline Edit (linked through Fluid CDN) and deprecated support for FCKEditor 2.x
Details on how to update your files for these changes are also provided on this page. |
Column |
---|
Panel |
---|
borderColor | #566b30 |
---|
bgColor | #fff |
---|
titleBGColor | #D3E3C4 |
---|
title | On this Page |
---|
borderStyle | solid |
---|
| |
|
|
Upgrades to jQuery and jQuery UI
General
Infusion's versions of jQuery and jQuery UI have been upgraded to version 1.4.2 and 1.8 respectively. These upgrades have resulted in some file name changes, as well as some new file requirements for different jQuery UI widgets.
If you are using specific Infusion components, the sections further below provide specific guidance on changes for those components. If you are using Infusion's copy of jQuery and jQuery UI for your own general purposes, you may need to make the following changes:
Old | New |
---|
Core | |
---|
lib/jquery/ui/js/ui.core.js
| lib/jquery/ui/js/jquery.ui.core.js
|
Dialog | |
---|
lib/jquery/ui/js/ui.core.js lib/jquery/ui/js/ui.dialog.js
| lib/jquery/ui/js/jquery.ui.core.js lib/jquery/ui/js/jquery.ui.widget.js lib/jquery/ui/js/jquery.ui.position.js lib/jquery/ui/js/jquery.ui.dialog.js
|
Slider | |
---|
lib/jquery/ui/js/ui.core.js lib/jquery/ui/js/ui.slider.js
| lib/jquery/ui/js/jquery.ui.core.js lib/jquery/ui/js/jquery.ui.widget.js lib/jquery/ui/js/jquery.ui.slider.js
|
Accordion | |
---|
lib/jquery/ui/js/ui.core.js lib/jquery/ui/js/ui.accordion.js
| lib/jquery/ui/js/jquery.ui.core.js lib/jquery/ui/js/jquery.ui.widget.js lib/jquery/ui/js/jquery.ui.accordion.js
|
Drag and Drop | |
---|
lib/jquery/ui/js/ui.core.js lib/jquery/ui/js/ui.draggable.js
| lib/jquery/ui/js/jquery.ui.core.js lib/jquery/ui/js/jquery.ui.widget.js lib/jquery/ui/js/jquery.ui.mouse.js lib/jquery/ui/js/jquery.ui.draggable.js
|
More details about the changes to jQuery UI can be found on jQuery's Upgrade Guide.
Component-specific Changes
UI Options
Upgrading From | Upgrading To |
---|
Code Block |
---|
lib/jquery/ui/js/ui.core.js
lib/jquery/ui/js/ui.accordion.js
lib/jquery/ui/js/ui.slider.js
|
| Code Block |
---|
lib/jquery/ui/js/jquery.ui.core.js
lib/jquery/ui/js/jquery.ui.widget.js
lib/jquery/ui/js/jquery.ui.mouse.js
lib/jquery/ui/js/jquery.ui.accordion.js
lib/jquery/ui/js/jquery.ui.slider.js
|
|
Uploader
Upgrading From | Upgrading To |
---|
Code Block |
---|
lib/jquery/ui/js/ui.core.js |
| Code Block |
---|
lib/jquery/ui/js/jquery.ui.core.js |
|
Inline Edit
Upgrading From | Upgrading To |
---|
Code Block |
---|
lib/jquery/ui/js/ui.core.js |
| Code Block |
---|
lib/jquery/ui/js/jquery.ui.core.js
|
|
Progress
Upgrading From | Upgrading To |
---|
Code Block |
---|
lib/jquery/ui/js/ui.core.js |
| Code Block |
---|
lib/jquery/ui/js/jquery.ui.core.js
|
|
Reorderer
Upgrading From | Upgrading To |
---|
Code Block |
---|
lib/jquery/ui/js/ui.core.js
lib/jquery/ui/js/ui.draggable.js
|
| Code Block |
---|
lib/jquery/ui/js/jquery.ui.core.js
lib/jquery/ui/js/jquery.ui.widget.js
lib/jquery/ui/js/jquery.ui.mouse.js
lib/jquery/ui/js/jquery.ui.draggable.js
|
|
Upgrades to jqUnit
If you are using Infusion's copy of jqUnit for unit tests, you will need to make the following changes:
Changes | Upgrading From | Upgrading To |
---|
New qunit dependencies in test templates | Code Block |
---|
lib/qunit/css/testsuite.css
lib/qunit/js/testrunner.js |
| Code Block |
---|
lib/qunit/css/qunit.css
lib/qunit/js/qunit.js |
|
New qunit selector's ids | Code Block |
---|
id="header"
id="banner"
id="userAgent"
id="tests"
|
| Code Block |
---|
id="qunit-header"
id="qunit-banner"
id="qunit-userAgent"
id="qunit-tests" |
|
You can find a tutorial on writing JavaScript unit iests at Writing JavaScript Unit Tests. This tutorial also provides an example of how you can now create asynchronous tests with jqUnit.
Reorderer DOM Utilities
FluidDOMUtilities.js is now split into FluidDOMUtilities.js and ReordererDOMUtilities.js where the latter one consists of those former members of FluidDOMUtilities which are used only by the Reorderer and not by the renderer. Thus the new dependency for the Reorderer on FluidDOMUtilities is now:
Old |
---|
Code Block |
---|
<script type="text/javascript" src="framework/core/js/FluidDOMUtilities.js"></script> |
|
New |
---|
Code Block |
---|
<script type="text/javascript" src="framework/core/js/FluidDOMUtilities.js"></script>
<script type="text/javascript" src="components/reorderer/js/ReordererDOMUtilities.js"></script> |
|
If you are not using the Reorderer, you will only need FluidDOMUtilities.js
.
Updated Mobile FSS API
The Mobile FSS (new in v1.1) is the mobile-friendly version of Fluid Skinning System (FSS). It takes advantage of core FSS philosophies like modular class names and files, it recycles many FSS class names to help take your existing content and make it mobile-friendly, and it's easy to use - just like regular FSS.
You can find more information at Mobile FSS Cheat Sheet.
Updated editor for Rich Text Inline Edit
The Rich Text Inline Edit component applies a rich-text editor to an input field. Previously, Infusion included a copy of the FCKEditor for this. This editor has been deprecated and replaced by CKEditor 3.x, linked through Fluid CDN.
Old Dependency | New Dependency |
---|
Code Block |
---|
tests/manual-tests/lib/fckeditor/fckeditor.js |
| Code Block |
---|
http://ckeditor-fluid.appspot.com/ckeditor.js |
|
Also, you can now initialize CKEditor similarly to TinyMCE and FCKEditor as follows:
Code Block |
---|
fluid.inlineEdit.CKEditor(container, options); |