programming portal-friendly uis using fluid infusion
TRANSCRIPT
![Page 1: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/1.jpg)
Programming Portal-friendly UIsProgramming Portal-friendly UIsUsing Fluid InfusionUsing Fluid Infusion
![Page 2: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/2.jpg)
What is Fluid for?
• Our communities have a problem sharing scopes and technologies
• This is more than either a technical or a social problem
• Fluid is about stepping back, and trying to assure common direction, or at least some compatible approaches, at a deeper level
![Page 3: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/3.jpg)
Fluid goals at the high level
• Build an architecture to support user interfaces that can be shared and adapted.
• Develop tools that support the inclusive design process
• Give users tools to personalize their environment
![Page 4: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/4.jpg)
Fluid goals at the low level
• Promote DOM agnosticism
• Encapsulate better practices– Streamline use of productive techniques
– Hide/minimise the effect of destructive techniques
• Promote the use of transparent models
![Page 5: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/5.jpg)
What Fluid is not
• Fluid is not a widget library (like jQuery UI)– Although we have some widgets
• Fluid is not a foundational library (like jQuery)– Although we have some foundational idioms
• Fluid is not an MVC library (like SproutCore)– Although we have solutions to support model separation
![Page 6: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/6.jpg)
What Fluid is• A harmoniously cooperating library of
components and functions• A way of thinking about models, events
and markup• A set of recommendations for working
practice– language guidelines– accessibility guidelines– CSS guidelines (FSS, the Fluid Skinning System)
• A set of desirable community practices
![Page 7: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/7.jpg)
It's like music
Configuration IntegrationComponent
Framework
![Page 8: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/8.jpg)
The framework gives us...
• A life cycle for components• A way to configure & wire up
components• Separation of presentation from
logic• A way to change markup and
appearance
![Page 9: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/9.jpg)
You can't bottle design
• Context is everything!• Our designs should invite new designs• We can’t get away with shipping one
specific design and assume we’re done• How can we support people in making
the right choices for their particular context?
• The technology needs to help us...
![Page 10: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/10.jpg)
Components
![Page 11: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/11.jpg)
Component families
![Page 12: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/12.jpg)
Value of the framework
• Positions us to write components faster
• Allows us to rework our designs for each new integration
• The framework is a design enabler• Enables new developers to join our
ranks and build their own solutions
![Page 13: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/13.jpg)
Where does Infusion fit?
• We recognize that we're not the only one in the browser: we play nice with other toolkits.
• We don’t want to force adopters down a one-way technology street
![Page 14: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/14.jpg)
Addressing real pain
• Behaviour and presentation logic tended to glob together as a single component
• Too easy to write clever logic that prevented any changes to the markup
• Handling configuration required lots of repetitive code
![Page 15: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/15.jpg)
Goals and featuresChange markup without breaking
codeDOM Binder
Customize component Declarative options
Inject custom behaviour into components
Events, subcomponents
Decouple presentation from model logic
Views
Easily testable Events, views, subcomponents
Make accessibility easier jquery.keyboard-a11y, ui.core
Stable and secure JavaScript objects
that-ism
![Page 16: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/16.jpg)
that-ismthat-ism
![Page 17: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/17.jpg)
• Lack of namespacing and privacy
• Confusing variability of this•Security and stability issues: prototype
•No ability to link against multiple versions
Javascript pitfalls
![Page 18: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/18.jpg)
Namespacing, privacy and versioning
var fluid_0_6 = fluid_0_6 || {};
var fluid = fluid || fluid_0_6;
(function ($, fluid) {
– // Code goes here.
})(jQuery, fluid_0_6);
Fluid.js
• Some of the most crucial issues for a portal deployment
![Page 19: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/19.jpg)
that• Define objects within a function• Provides privacy and a bound
context• Types can't be maliciously altered• Open for extension, not
modification• Douglas Crockford's pattern, not
ours
![Page 20: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/20.jpg)
Putting it all together
fluid_0_6 = fluid_0_6 || {};
(function ($, fluid) {
fluid.uiOptions = function (container, options) {
var that = fluid.initView("fluid.uiOptions", container, options);
that.save = function () {
that.events.onSave.fire(that.model);
fluid.applySkin(that.model);
};
that.refreshView = function () {
pushModelToView(that);
};
setupUIOptions(that);
return that;
};
})(jQuery, fluid_0_6);
UIOptions.js
![Page 21: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/21.jpg)
ComponentsComponents
![Page 22: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/22.jpg)
What's a component?
• Central hub for– Events
– Configuration
– Public API
• A composition of Views and model logic
![Page 23: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/23.jpg)
Component contract
/**
* Instantiates a new Uploader component.
*
* @param {Object} container the DOM element containing the Uploader markup
* @param {Object} options configuration options for the component.
*/
fluid.uploader = function (container, options) { ... }
Uploader.js
![Page 24: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/24.jpg)
Declarative ConfigurationDeclarative Configuration
![Page 25: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/25.jpg)
Tweaking components
• Transparent configuration
• Declarative: ask, don’t instruct
• Mini IoC
![Page 26: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/26.jpg)
What can be configured?
• Modes and optional features
• Selectors
• Styles
• Subcomponents
• Events
• Language bundles
![Page 27: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/27.jpg)
fluid.defaults("fluid.reorderer", {
instructionMessageId: "message-bundle:",
styles: {
defaultStyle: "orderable-default",
selected: "orderable-selected",
dragging: "orderable-dragging",
mouseDrag: "orderable-dragging",
hover: "orderable-hover",
dropMarker: "orderable-drop-marker",
avatar: "orderable-avatar"
},
selectors: {
dropWarning: ".drop-warning",
movables: ".movables",
grabHandle: "",
stylisticOffset: ""
},
avatarCreator: defaultAvatarCreator,
keysets: fluid.reorderer.defaultKeysets,
layoutHandler: "fluid.listLayoutHandler",
events: {
onShowKeyboardDropWarning: null,
onSelect: null,
onBeginMove: "preventable",
onMove: null,
afterMove: null,
onHover: null
},
mergePolicy: {
keysets: "replace",
"selectors.selectables": "selectors.movables",
"selectors.dropTargets": "selectors.movables"
}
});
reorderer.js
![Page 28: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/28.jpg)
DOM BinderDOM Binder
![Page 29: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/29.jpg)
Decoupling code from markup
• The most common component pitfall is hard-baking assumptions about markup
• Use named selectors to separate the component implementation from the markup
• Let users specify alternative selectors
![Page 30: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/30.jpg)
We'll take anything
• The DOM Binder supports:– jQuery selectors
– raw Elements
– Arrays of elements
– jQuery objects
– Functions
![Page 31: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/31.jpg)
Declaring interesting things
selectors: {
fileQueue: ".fluid-uploader-queue",
browseButton: ".fluid-uploader-browse",
uploadButton: ".fluid-uploader-upload",
resumeButton: ".fluid-uploader-resume",
pauseButton: ".fluid-uploader-pause",
totalFileProgressBar: ".fluid-scrollertable-foot",
stateDisplay: "div:first"
}
Uploader.js
![Page 32: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/32.jpg)
locate()
that.events.onFileSuccess.addListener(function (file) {
var row = rowForFile(that, file);
that.locate("removeButton", row).unbind("click");
that.locate("removeButton", row).tabindex(-1);
changeRowState(row, that.options.styles.uploaded);
});
FileQueueView.js
![Page 33: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/33.jpg)
fastLocate()
function firstSelectable(that) { var selectables = that.dom.fastLocate("selectables"); if (selectables.length <= 0) { return null; } return selectables[0]; }
Reorderer.js
![Page 34: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/34.jpg)
refresh()
thatReorderer.refresh = function () {
thatReorderer.dom.refresh("movables");
thatReorderer.dom.refresh("selectables")
thatReorderer.dom.refresh("grabHandle",
thatReorderer.dom.fastLocate("movables"));
thatReorderer.dom.refresh("stylisticOffset",
thatReorderer.dom.fastLocate("movables"));
thatReorderer.dom.refresh("dropTargets");
initItems();
thatReorderer.selectableContext.selectables = thatReorderer.dom.fastLocate("selectables");
thatReorderer.selectableContext.selectablesUpdated(thatReorderer.activeItem);
};
Reorderer.js
![Page 35: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/35.jpg)
ViewsViews
![Page 36: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/36.jpg)
Managing the presentation
• Views are DOM-anchored objects
• They encapsulate the presentational behaviour of a component
• They show a view on model-sourced data
![Page 37: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/37.jpg)
View Contract
• Views:– Are automatically DOM-bound
– Have a container• May be shared with their parent component
– May have options
– May use events
– Should implement refreshView()
![Page 38: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/38.jpg)
Becoming a View
fluid.fileQueueView = function (container, events, parentContainer,
uploadManager, options) {
var that = fluid.initView("fluid.fileQueueView", container, options);
.......
FileQueueView.js
![Page 39: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/39.jpg)
EventsEvents
![Page 40: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/40.jpg)
About the events system
• Pure model-based events
• Designed for sending messages between Javascript objects– Totally free argument signature
• Not encumbered by the DOM or presentational concerns
• Not for the same purpose as jQuery or DOM events
![Page 41: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/41.jpg)
Declaring events
events: { onShowKeyboardDropWarning: null, onSelect: null, onBeginMove: "preventable", onMove: null, afterMove: null, onHover: null }
Reorderer.js
![Page 42: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/42.jpg)
Types of event
• null “hey everyone, something is happening”
• preventable “should I do this?”• unicast “our little secret”
![Page 43: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/43.jpg)
Listening for events
listeners: { afterFinishEdit: function (newValue, oldValue) { // Save the data to the server }, modelChanged: function (newValue, oldValue, that) { // Update state }}
section-info-inner.html
![Page 44: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/44.jpg)
Using events in code
var finishUploading = function (that) { that.events.afterUploadComplete.fire(that.queue.currentBatch.files); that.queue.clearCurrentBatch();};
FileQueueView.js
that.events.afterFileQueued.addListener(function (file) { that.queue.addFile(file); });
Firing an event:
Listening for an event programmatically:
![Page 45: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/45.jpg)
SubcomponentsSubcomponents
![Page 46: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/46.jpg)
Subcomponents
• Provides loose coupling between parts (IoC)
• Look up dependencies by name, and the framework will instantiate them for you
• Users can implement their own version, or swap out alternatives
• Unlike top-level views, not necessarily DOM-anchored– A Subcomponent is not necessarily a View, although it might still be
![Page 47: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/47.jpg)
Instantiating Subcomponents
var setupUploader = function (that) { // Instantiate the upload manager and file queue view, // passing them smaller chunks of the overall options for the uploader. that.uploadManager = fluid.initSubcomponent(that, "uploadManager", [that.events, fluid.COMPONENT_OPTIONS]);
that.fileQueueView = fluid.initSubcomponent(that, "fileQueueView", [that.locate("fileQueue"), that.events, that.container, that.uploadManager, fluid.COMPONENT_OPTIONS]);
Uploader.js
![Page 48: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/48.jpg)
Configuring a subcomponent
var myUploader = fluid.uploader(".fluid-uploader", { uploadManager: { type: "fluid.gearsUploadManager", options: { uploadUrl: "../uploads", fileTypes: ["img/jpg", "img/gif", "img/png"] }});
Uploader2.html
![Page 49: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/49.jpg)
The meaning of Subcomponents
• Note that like event signatures, subcomponent instantation signatures are completely free
• A subcomponent can mean what you want
• A bit more IoC polish coming in 1.0 (declarative fishing from the top-level that)
![Page 50: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/50.jpg)
The RendererThe Renderer
![Page 51: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/51.jpg)
The Fluid Renderer
• The ultimate in markup-agnosticism
• Use markup as its own template– No funky ${} or <% nonsense
• Specify all data-orientation and binding in a separate, pure JSON "component tree"
![Page 52: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/52.jpg)
A Fluid Template
• A perfectly normal block of HTML
<div id="testDataRoot"> <div id="parseTest1"> <table> <tr id="table-header"><th>Count</th><th>Name</th> <th class="column-header">1</th><th>Median ave</th></tr> </table> </div> </div>
![Page 53: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/53.jpg)
A Fluid Component Tree and Driver
• A perfectly normal block of JSON
• A map of standard selectors
var tree = { "header:" : [1, 2, 3, 4, 5] }
var templates = fluid.selfRender($("#table-header"), tree, { cutpoints: [{selector: "th.column-header", id: "header:"}] });
![Page 54: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/54.jpg)
Against standard "baked components"
• Virtually every popular library (YUI, Ext, jQuery UI, etc.) bakes its component HTML into Javascript
• The Fluid renderer liberates it
• Create free component "libraries" rather than simple widgets
![Page 55: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/55.jpg)
Renderer Usage
• The renderer is now being built into the latest family of Fluid components– Fluid Pager, a generalised data table component
– UI Options, collects and captures user presentation preferences
– Component Progress, used in Fluid docs
– Coming soon, support in the Fluid Uploader
• Work on performance and ease of use ongoing past through Fluid 1.0 (March 31)
![Page 56: Programming Portal-friendly UIs Using Fluid Infusion](https://reader036.vdocuments.mx/reader036/viewer/2022062409/56649e155503460f94aff330/html5/thumbnails/56.jpg)
In Summary
• Fluid stuff is ineffably cool• Infusion 0.8 is built into uP 3.1• Tools to make JS development in the
portal easier:– Views– DOM Binder– Renderer– Accessibility– and more
• Share your thoughts and help us make it better