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

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

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).