Child pages
  • Flutter without Fluid

Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Skip to end of metadata
Go to start of metadata

The World Without the Fluid Framework

Overview

The purpose of this section is to provide an example of how Flutter would be built, without the use of the Fluid Framework.

Setup

Working from the directory structure created above, we will add a couple more directories and files.

1) In the "webapp" directory, add a new sub-directory called "flutter-plain-jquery"

2) Inside the "flutter-plain-jquery" directory we'll add another sub-directory called "sample-data"

3) In the "shared/js" directory, add a new sub-directory called "jquery"

Your Directory should now look something like this...

4) Next we'll add the files necessary to make Flutter work. Please copy the files below into the appropriate directories

File

Directory

jquery.keyboard.a11y.js

webapp/shared/css

jquery

webapp/shared/js/jquery

ui.core.js

webapp/shared/js/jquery

ui.dialog.js

webapp/shared/js/jquery

ui.draggable.js

webapp/shared/js/jquery

Flutter.html

webapp/flutter-plain-jquery

Flutter.js

webapp/flutter-plain-jquery

Friends

webapp/flutter-infused/sample-data

user_timeline_12368532.json

webapp/flutter-plain-jquery/sample-data

user_timeline_14538601.json

webapp/flutter-plain-jquery/sample-data

user_timeline_14538636.json

webapp/flutter-plain-jquery/sample-data

user_timeline_14951188.json

webapp/flutter-plain-jquery/sample-data

user_timeline_17868497.json

webapp/flutter-plain-jquery/sample-data

user_timeline_19539154.json

webapp/flutter-plain-jquery/sample-data

user_timeline_5915782.json

webapp/flutter-plain-jquery/sample-data

user_timeline_752673.json

webapp/flutter-plain-jquery/sample-data

Your Directory should now look something like this...

Comparison

Flutter-Plain-jQuery

Flutter-Infused

Relies on hard coded selectors to find elements in the DOM

The Fluid Framework allows selectors to be specified by the integrator. The component does come with defaults for the selectors, which the integrator is free to use or override.

Flutter.js is a set of behaviour governing the various aspects of Flutter-Plain-jQuery

The Fluid Framework's event system allows the Flutter-Infused to be partitioned into components/subcomponents, by providing a means of communication between them. The event system is constructed in such a way that individual components/subcomponents do not need to be aware of the existence of one another, but can just listen for events they are interested in. These events are also available to the integrator to listen to, thereby allowing Flutter to be extended

There aren't really options. You are able to pass in information about URL's

The options merging from the Fluid Framework provides a simple way to make your component customizable. Changing default options are as simple as specifying which options and values to override in an options object, passed to the Creator function

  • No labels