Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Anchor
setup
setup

Set Up Your Environment

Create a directory structure

For this tutorial, create the following directory layout in your favourite development environment. We use Aptana.

  • A top level directory called webapp
  • Two sub-directories of webapp called flutter-infused and shared
  • A sub-directory of flutter-infused called sample-data
  • Two sub-directories of shared called css and js
  • A sub-directory of css called fss
  • A sub-directory of js called infusion

Click below to enlarge Image Added

Add Fluid Infusion dependencies

  • Download and unzip a custom built copy of Fluid Infusion. This was created using the Custom Build process with FSS, Framework and jQuery UI as build parameters.
  • From the framework directory of your Infusion package, copy the contents of the fss directory into your fss directory.
  • Copy the MyInfusion.js file into your infusion directory
  • The result should look something like the image on the right

Click below to enlarge Image Added

Add Flutter dependencies

Copy the files below into the appropriate directories.

File

Directory

Flutter.css

webapp/shared

SettingsDialog.js

webapp/shared/js

Twitter.js

webapp/shared/js

FriendsView.js

webapp/flutter-infused

FlutterInfused.html

webapp/flutter-infused

Friends

webapp/flutter-infused/sample-data

user_timeline_12368532.json

webapp/flutter-infused/sample-data

user_timeline_14538601.json

webapp/flutter-infused/sample-data

user_timeline_14538636.json

webapp/flutter-infused/sample-data

user_timeline_14951188.json

webapp/flutter-infused/sample-data

user_timeline_17868497.json

webapp/flutter-infused/sample-data

user_timeline_19539154.json

webapp/flutter-infused/sample-data

user_timeline_5915782.json

webapp/flutter-infused/sample-data

user_timeline_752673.json

webapp/flutter-infused/sample-data

The result should look something like the image below (click to enlarge).

Image Added