Flux Man

Flux 1.
4
The Escapers 2008
Draft One
Contents
Introduction! 5
What’s all this then?! 6
Site Manager! 6
The Page Designer! 7
The Inspector! 8
Getting Started! 9
Create a website from scratch! 10
Divs! 12
Applying a fill colour to a div! 13
Applying borders to a div! 13
Entering text inside a div! 14
Applying styles tags to text! 14

Understanding CSS! 16
Using inline CSS styles! 16
Using external CSS files! 17

Associating a CSS file to your web page! 17
Creating a new CSS style! 18
Using Style definitions! 20
Multiple Images in CSS! 22

Graphical Effects! 24
Introduction! 24
Getting started! 24
Ruby on Rails™! 28
Introduction! 28
Getting started! 28
Building a basic Ruby on Rails website! 30
Controller! 30
Adding Ruby Code! 32
Ruby “Hello World!”! 34

Toolkits! 36
Flux 1.4 User Manual. The Escapers 2008 3

What are Toolkits?! 36
A really simple example! 36

AJAX! 42
Concepts! 42
A more complicated example! 47

Embedding Movies! 51
Basics! 51
Movie options! 54

Introduction
Flux is a XHTML and CSS design tool for Mac OS X. Flux makes designing XHTML pages easy with a
WYSIWYG, drag and drop interface, and uses simple palettes to change CSS values, to simply style up your
XHTML pages.
XHTML is the W3C specification for designing web pages, it's a fully documented, validated way of creating
web pages which is supported by all modern web browsers. CSS (Cascading Style Sheets) is a specification
for adding style to XHTML (and other) documents, so all page content can be held in XHTML, and all styl-
ing information can be held in the CSS file, making for a simple and more clean site structure.
Flux brings XHTML, CSS and an easy Mac interface together to let novices and professionals create amaz-
ing websites.
What’s all this then?
Site Manager
The Site Manger is Flux, is, unsurprisingly , where the whole site is managed. You can create new files, delete them, rename them
and edit them, all from this window.
A CSS file, these are

edited within the Page
Designer.
A folder of images, these images

can be used in your design, often
using CSS.
A web page, double click to edit.

The Page Designer
The Page Designer is where all CSS and XHTML is edited, you can drag, drop, copy and paste images,text and elements onto
your page.
The CSS files associated

with your page are listed The Details bar, you can
here, and all the styles toggle various aspects of
defined in the files. Flux's page display here,
for example, images, block
tags etc...
This is a 'div' page element, most

pages will have lots of these,
styled in different ways.
The CSS editor allows you

to alter the parameters of
the style selected above.
The page display will
automaticaly display and
changes made here.

The Inspector
A popup menu containing

shortcuts to commonly
used actions.
Attributes and Actions of the

currently selected element are
shown in this list, you add, delete
and edit them all here.
The 'Fill' section of the

Inspector, this section is
currently expanded, but
not enabled.
The 'Inline' switches toggle The 'Size' section of the

wether to override that Inspector, this section is
particular area of the currently collapsed, but it
element, in this case, 'Size' is enabled.

Getting Started
Getting started in Flux is simple, you can create a brand new website from scratch, a website based on one of the many tem-
plates provided by Flux, or use an existing XHTML compliant website you created in another package. You need to start by
launching Flux by double-clicking it's icon in your Applications directory:
Create a website from scratch
First, choose “New” from the “File” menu, and you will be presented with a window like this:
You can now pick a name for the folder in which your website will be created, it can be any name you like, this file name is only
used to save the files on your Mac, so you don't need to worry about website naming conventions. Names like “My first web-
site”, or “John's holiday blog” are fine.
You can also choose a location on your computer to put this folder, your Desktop, Home directory, or anywhere else you like.
You also need to choose if you want a Standard website, or a Ruby on Rails based website, if you're not sure which you need,
use “Standard website”.
When you press “Save”, your website will be created.

Flux will offer to get you started by creating an XHTML file, a CSS file and linking the two automatically. If you're new to Flux,
click “Yes”, and this will quickly make you a file to start editing right away.
So now you have a single XHTML file called “index.html” and a single CSS file called “main.css” in your website, Flux will create a
thumbnail preview for each XHTML file, and as you can see, at the moment, the preview is plain white as the page is empty. You
can now double-click “index.html” to open up the page ready for editing.

what is a
Editing pages
div?
Double-clicking an XHTML file in the Site Manager will load the file into the Page Editor, and now we can A ‘div’ is probably the
start to add content to the page. In XHTML, it is customary to have many different “divs” on a page, divs most commonly used ele-
are containers which can hold any content you like in a page, text, pictures, Javascript code, almost anything ment in modern XHTML.
you like. These containers themselves can be styled to have borders, fill colours, picture backgrounds etc. It’s used as a container for
text, images, forms, and
To start off, we'll create a single div and investigate the options we have for modifying that div. almost anything else.
You can have divs within
Divs other divs, and they can b
To create a div, we simple choose “Div” from the “New Elements” toolbar menu. This will put an unformat- adjusted in almost every
ted, “blank” div onto our page, like this one: way imaginable.
Flux automatically selects the div, and displays a little information

about it. The “ID” of the div can be left blank unless you either want
to refer to this div in Javascript, or you want make styling in your
CSS file which is unique to this div. Class can also be left blank if
you do not want to style this div with CSS.
The div can be freely resized and moved by dragging by the centre
of the div to move it, and the circular “handles” on the sides and
corners to resize it. We can also add some basic styling to the div
using the “Inspector”. The Inspector can add styling to items such as
divs without using CSS files, instead the styling is held within the
XHTML, this is good for quickly creating and experimenting with
styles, if you decide to move the style into the CSS file, Flux can do this for you very easily by choosing the
“Create style with...” option in the contextual menu.

We will now use the Inspector to make some basic changes to our div. First, make sure your div is selected by clicking on it.
Now open the Inspector palette by clicking the “Inspector” button on the toolbar, choosing “Inspector” from the “Window”
menu, or pressing the keyboard shortcut “Command-5”.
The Inspector provides many different options for modifying the div, such as borders, fill, and many different styles. We will start
by giving the div a fill colour.
Applying a fill colour to a div

Firstly, we need to enable the fill on the div, by clicking the “Inline” checkbox to check it. Now we can modify the fill colour by
clicking the colour well and choosing a colour from the standard Mac colour picker. We need to ensure opacity is over 0%, or it
will be invisible.
Applying borders to a div

To apply borders to a div, you need to enable them in the Inspector, this is done by checking the “Inline” checkbox.
You can have different styles of border, solid, dotted, dashed etc. You can also vary the thickness and colour borders. You can also
have a different borders on each of the 4 sides of a div, as can be seen in this rather over the top example:

Entering text inside a div
You can have any amount of text in a div, which can be styled with fonts, colours, underlines, sizes and formatting such as bold
and italic. To enter text into a div, simply double-click anywhere in the div and start typing, the text will be contained by the div,
but if the text is too long, the div will not truncate the text.
Applying styles tags to text

Text in XHTML can be formatted just like in old-style HTML, which tags such as ... for bold, ... for italic etc. In
Flux you don't need to type in those tags yourself if you don't want to, you can do it all inside Flux without typing anything.

In the above example, we have entered some text into a div and applied simple formatting to the text. To apply formatting, we
simple select the text to format, and click the small button that appears , this will display the many different types of formatting
available. If you click one of the formats available, the text you selected will be formatted in that style. This is done by automati-
cally inserting the relevant XHTML tags for formatting into your page, you can see the tags graphically by clicking the “Spans”
button on the Details bar just under the main toolbar. This will display where your formatting tags are:
You can display or hide spans at any time and you can also erase them just like normal text if you decide you don't want them.

Understanding CSS
Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document, in Flux’s case, this docu-
ment is an XHTML file.
CSS can either be referenced externally using a .css file, or used inline to style individual objects, Flux supports both these
methods, but it’s often considered good practice to use an external file, as this allows you to experiment with different designs,
tailor your site to meet the needs of different groups of users (for example, you could have a different CSS file for partially
sighted users, which could use larger fonts and higher contrast colors), and keep your XHTML easy to read.
Using inline CSS styles

By setting up your styles in the Inspector, you are
automatically adding Inline CSS styles to the object. If
you look at the underlying code while changing parame-
ters in the Inspector, you will see how the CSS is added
to the ‘style’ attribute of the selected object.
The ‘style’ attribute tells web browsers to apply the

CSS values to that object, if the object also has been
styled using an external CSS file, the values in the ‘style’
attribute will override them*.
Flux allows you to use inline styles for most attributes,

but to get the most out of Flux (and CSS), you should
use external files.
Using external CSS files
Using external CSS in Flux is simple, you need two things (well, three if you count a copy of Flux, but that’s a given.)
1. You need a web page, you can create one easily in the the ‘File Manager’
2. You also need a CSS file, this can also be created in the ‘File Manager’
You can find out how to create these files in the ‘Getting Started’ section of this manual.
Depending on how you have created your two files, the CSS may, or may not, already be associated with the XHTML page, if it is
already associated, then you can skip the next section.
Associating a CSS file to your web page

Before you can start using CSS to style your page, you must first associate the CSS file to page, to do this is simple...
1. Open the relevant web page by double-clicking it in the ‘File Manager.
2. Drag the CSS file from the File Manager to the CSS area of the Page Designer.
Once you have dropped the CSS file on this area, all the Style definitions will appear in this list.
Now, save the file, and you have just associated a CSS file with your webpage.
A CSS file can be associated to more than one XHTML document, doing this is a great way of retaining a common look and feel
across pages.
An XHTML file can have more than one CSS file associated to it.
Creating a new CSS style

A CSS file isn’t much use without some style definitions inside it, so let’s make a one!

A new Class style
The first style we will make will be a ‘class’ style, this is probably the most common type of style, as it’s very versatile and can be
applied to most types of elements.
Creating a new style is simple, first, select the CSS file you want to create the definition in, if you’ve just followed the above tu-
torial, you will only have one, so click on that.
Once you have selected the destination file for your new style definition, click
the ‘+’ button to create a new ‘Empty’ style.
You will be asked if you want to base the style on the selected object, for the
purposes of this tutorial, press ‘No’.
Once the new style has been created, the style will be automatically selected
for renaming, and unless you want the style to be called ‘UntitledStyle’, we
click! suggest you give it a name relevant to it’s intended purpose, for example
‘myPriceBadge’.
Since we opted to create and empty style, you will notice that none of the
style’s sections are enabled, so the style will do nothing at the moment.

Using Style definitions
There are 3 different kinds of styles (or ‘selectors’,
as they are sometimes called.)
Class - Class styles are preceded by a ‘.’ in CSS defi-

nitions, and are used to apply styles to arbitrary
elements.
For example, the class style we created called

‘myPriceBadge’ can be used by setting the ‘class’ at-
tribute of any element to ‘myPriceBadge’, that ele-
ment will then adopt the style instructions defined
in the ‘.myPriceBadge’ style.

Class Styles can be used many times throughout a document.
ID - ID styles are preceded by a ‘#’, and to make an element adopt an ID style, the ‘id’ attribute should be set in the element,
rather the ‘class’ attribute.
So what’s the difference between a class and an id style? Don’t they just do the same thing? Well, yes, apart from an ID style
should only be used once in a single document, i.e. for elements that need a unique identity,.
Override - These styles are used to change the styling of all elements of a particular type, for example, in the screen capture be-
low, we have created a ‘div’ style, the only attribute the style has is ‘Color’, so every new ‘Div’ we create will adopt it’s color
from this value (unless it is overridden by another style definition or inline styling).

Override styles should have the same name as the element they
are intended to affect, for example, to affect all uses of ‘h1’ tags,
simply call your style ‘h1’, override styles have no prefix.
Multiple Images in CSS

Although CSS is supported by all major web browsers, they all vary
in their levels of support, for example, Safari (and all WebKit based
browsers) have very good, possibly the best, support for CSS,
Internet Explorer on the other hand, is notoriously poor. FireFox
has, in general, very good support, but is noticeably lacking in some
areas, mainly in it’s support for images.
CSS supports multiple images in elements, for example, you could

have one image tiled horizontally and vertically to fill the element
(i.e. the body element), and another image tiled just horizontally.
The screengrab below illustrates this techinque, the first image (the
grid), creates a simple background for the element, and second im-
age (diagonal stripes) is just just applied to the top of the element.
This is a very effective technique to create innovative and attractive designs, for example, the first image could be an attractive
damask pattern, and the second image could be a simple, semi-transparent gradient. This keeps the size of the images very small,
and is very versatile, as you could change just one of the images to create quite a different effect.
There are two main drawbacks to this approach, the first being Internet Explorers’s poor support for CSS, it does not support
alpha channels in images, thus ruling out our attractive fade graphic.

The second problem is the fact we are using multiple images, the only mainstream browser at the time of writing that supports
this is Safari, not even FireFox supports it.
In summary, although multiple images can help create very attractive,bandwidth-friendly designs, it’s support is very sparse, so
unless your audience is using the very best, most up-to-date web browsers, The Escapers do not recommend you use this tech-
nique.

Graphical Effects
Introduction
Flux has some built-in image effects that you can use to enhance and change images used on your website, most of these effects
are based on Apple's “Core Image” technology, and consequently will make good use of any acceleration hardware you have in
your Mac.
The “Effects” window is available on the toolbar on the Site Manager window, and this is where you can access all of the graphi-
cal effects available in Flux.
Getting started
To get started with image effects in Flux, you'll need an image in your website, you can put an image into your website by simply
dragging a file from the Finder onto the Site Manager, you can drop the file over a certain folder to put the file into that folder.
Once you have an image in the Site Manager, you can click on the image to select it, and then click on the Effects button to open
up the image into the Effects editor.
Applying effects to an image

Now that the image is loaded into the Effects window, we can started to apply changes to the image. Changes are applied to im-
ages in Flux by applying a series of “Filters”, as we can see from the window below, the image currently has no filters applied to
it.
To apply a filter to the image, we can select one from the popup menu on the left, and press the “+” button to add it. We will
start by applying a simple gloss to the image.

Most effects in Flux can be adjusted using the
controls which appear under the list of applied
filters. Now we can add many more filters to fur-
ther change the image.
In the below window, we have applied many filters
on top of our first Gloss filter, we have applied a
white frame, then a black frame, then some
scrapbook tape on the corners, then finally ro-
tated the image.

Once we are happy with the modified image, we can
press “Command-S” to save the image. For most im-
ages, it is best to save the image in the PNG format, as
this will preserve transparency. For images like photo-
graphs, where no transparency is used, then it is safe
to save the image as a JPEG.
If you want to use the same series of filters again, you
can save the filter set by pressing the ‘Gear’ button on
the left of the window. You can now give the filter set
a name for the filter set, which will allow you to use
the same filters again easily.
Once the image saved, it will appear in the Site Man-

ager just like any other image, and can now be used in
your website.

Ruby on Rails™
Introduction
Flux supports a number of ways of adding code to your website, amongst these is support for Ruby on Rails™. Ruby is an object
oriented programming language, which is similar in use to Python and some other scripting languages. Rails is a web framework
which makes it very easy to use Ruby code in web pages. Unlike Javascript the Ruby code is executed by the web server and not
the web browser. This means that the web browser does not need any plugins or special capability to browse website which
have been written using Ruby on Rails.
Websites based on Ruby on Rails tend to have a different layout to most websites, this layout can be tricky to get right, so Rails
comes with some command line tools to make the layout for you. However, if you don't want to use the command line tools di-
rectly, you can achieve most of the same results by using Flux's features for creating Rails based websites.
Getting started
To get started with creating a Ruby on Rails based website, first select “New” from the “File” menu in Flux.
In the usual “New file” sheet, you can choose from the “Project Type” popup menu to create a Rails based website. Now press
“Save” as usual, and your website will be created.
Flux uses the built-in Ruby on Rails installation on your Mac (Mac OS X 10.5 has Rails built-in, but if you are using Tiger, you will
need to install it separately) to create a new website. You will notice that the structure of the site is somewhat more compli-
cated than a standard website created with Flux.
You will also notice a couple of new buttons on the Site Manager. First,
there is a switch, which can be used to start and stop the built-in Rails
server on your Mac, it is set to off by default, but can be turned on by sim-
ply clicking the switch. When the Rails server is started, the small light by

the switch will turn to green:
Building a basic Ruby on Rails website
Once you have created your website in Flux, we can add web pages and Ruby code to make
it functional. Rails-based websites differ from standard websites because they have Ruby files
in them, as well as the usual XHTML, CSS, and Javascript files. The Ruby files are held in particular folders so that the Rails server
knows where to find them. To get started, we need to start adding Ruby files to our website, starting with a “controller”.
Controller
Controllers in Rails based websites should be considered the “backbone” of the website, that is to say they are in “control” of
your web application. To make a Controller, we can press the “Advanced...” button at the bottom of the Site Manager.

We can then choose a name for the controller, such as “hello”, and press the “Create Controller” button. Flux will then use the
built-in Ruby/Rails tools to create a Controller in your website. You will now find that a new file has been created in the Site
Manager:

Now that we have a controller, we can create a
web page so that we can add some content, this
is done by creating an RHTML file in the “views”
folder. To associate the page to the “hello” Con-
troller, it must also be within the “hello” sub-
folder.
To create the page, select the “hello” sub-folder

as highlighted, and click “New Page” on the tool-
bar. As this is a Rails based project, we need to
create an RHTML file, instead of an XHTML file.
Technically, the nature of the files are almost iden-
tical, but the “.rhtml” file extension let's the Rails
server know that it contains Ruby code.
As with ordinary websites, you can call the page

almost anything you like, but as this is our first
page, it's a good idea to call it “index”, as it will be
the first page that users will browse to.
Once the index page is created, you can double-click to open it into the Page Editor like any other web page.
Adding Ruby Code

Like other types of code, Flux allows you to put snippets of Ruby code almost anywhere on the page, and inside divs. Having
code inside divs makes it easy to keep track of code. To add some code, first create a div in the usual way, then select that div
and choose “Ruby Snippet” from the “New Element” toolbar button.

This will insert a Ruby code object
into the div:
You can now double-click the Ruby

code object to display it's contents
in Flux's built-in code editor.

You will notice that Flux has automatically inserted two tags:


Flux does this to keep Ruby code in usable chunks, as the stan-
dard way of writing Ruby on Rails code in XHTML does not pro-
vide any way of know when the Ruby starts and ends. It is this na-
ture of Ruby on Rails which makes it very easy to integrate into
XHTML as you can have tiny snippets of Ruby code in your pages
to control minute details of appearance and content.
Ruby “Hello World!”

You can quickly enter some Ruby code by double-clicking the snippet, and entering the below Ruby code:

<% counter = 0 %>
<% while counter < 10 %>
Hello! 

<% counter += 1 %>
<% end %>

Hit, Apple-S to save, and now press “Preview”. If it’s not already running, Flux will ask you if you want to start your Ruby server,
answer “Yes”.
Now, when you web page is displayed, it’s interpreted by your Ruby server first and displayed, so instead of getting “Hello!”,
you’ll get “Hello!” printed 10 times:

Toolkits
What are Toolkits?
Toolkits are Javascript library packages such as Adobe's Spry, MooFX and jQuery, they allow you to add functionality, effects, and
widgets to your webpages easily.
A really simple example

In this really simple example, we are going to use MooFX (mootools.net) to fade out an
element.
Step 1 – Create a new project as described in the 'Getting Started' chapter, or open an ex-
isting project.
Step 2 – Once you have created the new project, we need to install the MooFX toolkit
into this project, the easiest way to do this is described in the 'Packages' chapter.
Step 3 – Open your web page by double clicking the file in the Site Manager.
Step 4 – Import the required JavaScript files into your page using the 'Page Attributes'
panel, and drag the the javascript files from the site manager to the 'Javascript' list. Instead
of dragging, you can also choose the JavaScript file from the ‘+’ popup menu.

Now you are ready to use MooFX on your page.
First, we need a div to attach an action to, you can do this by ei-
ther creating a div, or a very easy way to make a div with some
content is just to drag an image from your Desktop/Finder onto
the page, then a new div will be created containing the picture.
For most effects, you'll need to give the div and “id” attribute, and
that can be done using the Inspector, by adding an “id” attribute.
We'll give this div the attribute “knut”, as this is the name of the
polar bear in the picture.

We then select the div, and Control-
click on the div (or Right-click, if you
have more than one button on your
mouse), and choose “Attach Action...”

You will then be presented with the “Action” window, and in this,
choose the “Toolkits” tab. You can then choose the MooFX toolkit,
and the functions/parameters to use. MooFX has many different capa-
bilities, but in this simple example, we will make the picture of the po-
lar bear fade away if it is clicked on.
So, in this case, we select the id to be “knut”, and the property to be

“opacity”. We can change many more properties, but “opacity” con-
trols the transparency/opacity of an object, so it's best property to
use for a fading effect. A value of “1” is 100% opaque, i.e. not at all
transparent, whereas a value of “0” is completely transparent. A value
of “0.5” is half transparent.
Now we need to wrap up this code object with a method to actually

tell the effect to start. There are different methods for different ef-
fects, in this case, we can choose the “start” method, which takes two
parameters. The first parameter represents the starting value for the
fade, generally, this can be “1” as the object to fade will generally be
100% opaque. The second parameter represents the value to fade to.
To make the div completely disappear, we would set this to “0” if we did not want the div to fade away completely, but be left
slightly visible, we could set it to “0.2” or some other figure between 0 and 1.

Now our code is ready to use. We can now attach the code to an event, you
can choose which event to attach to from the popup menu. Perhaps the most
useful event is “onClick” as this will trigger the action every time the div is
clicked. It is ideal for displaying menus on button clicks etc. on your website.
If you have “Actions” enabled on your Details bar, like this:
You will see an icon appear in the bottom left of the div signifying that there
is an “onClick” action attached.
These ‘Action’ icons have no effect on the functionality of the actions, they
are just a handy indicator to tell you which elements have actions attached.

You can double click the “onClick” icon to edit the Javascript code directly. Also, the
“onClick” attribute will be be displayed in the “Inspector”, as it is a standard XHTML at-
tribute, just like “id” or “class”.

AJAX
Concepts
AJAX stands for “Asynchronous JavaScript and XML”, which means that it permits the transfer of XML, controlled by JavaScript
asynchronously to the rest of the web page. In simple terms, it means you can transfer data between web page and web server
without doing a full page refresh. It means that you could take data from a server and insert it into a Div without affecting any-
thing else on the page, no redraw or page load.
AJAX is increasing in popularity as it not only makes websites feel more like responsive applications, but it also reduces band-
width and load on servers, as to update content on a page can be a very small amount of data, rather than force a complete re-
load.
AJAX security considerations

When creating the AJAX specification, it was thought that it was a security risk to allow a website to use AJAX to communicate
with another server. It is for this reason, that although you can use the AJAX examples supplied with Flux in the “Preview” mode
in Flux, you cannot use the examples in a published site, as your site would not be allowed to communicate with
theescapers.com. This is not within the control of The Escapers, and you can read more about this security policy here:
http://www.mozilla.org/projects/security/components/same-origin.html
Getting started
AJAX services are built in to all modern web browsers, and your web server needs no special considerations to be used to
server AJAX requests. AJAX services differ between some web browsers, so it's a good idea to use a library which masks these
differences and gives you maximum compatibility with as many web browsers as possible.
For this example, we're going to use the “jQuery” toolkit, this is a very powerful and very popular Javascript library which
amongst many great features, has superb AJAX functionality which is very simple to use. Flux comes with built-in support for
jQuery, and you can use the “Toolkits” window to add AJAX functionality to your page in just a few mouse clicks.
To use jQuery, you will need to first install the jQuery Javascript library. This can be done by either downloading it from
http://jquery.com/ or if you prefer, use the “Packages” functionality in Flux to install jQuery for you. You can read about how to
use Packages in the the Packages section of this manual.
Once you have the jQuery Javascript file in your project, either by dragging it from the Finder onto the Site Manager, or by using
Packages, you need to tell Flux that you are going to use it on your page, this makes sure that a reference to the Javascript file
will be in the XHTML file that Flux creates. To do this, you need to drag the jQuery Javascript file from the Site Manager in the
the “Javascript” section of “Page Attributes”, you can access this with the “Page Attributes” button on the document’s toolbar.
When you have Page Attributes open, switch to the Javascript tab, and drag over the jQuery Javascript file.

Now you can press “Done” and
jQuery will now be available to use
on your page.
To quickly use AJAX, first create a div, select it, and choose “Attach Action...” from the contextual menu.

You can now switch to the Toolkits tab, and choose “jQuery” from
the list of available toolkits, and then jQuery.get from the popup
menu below. jQuery.get is the simplest method of performing an
AJAX call. Flux will fill in all the most important fields for you, and
now all you need to do is click “OK”.

This will attach a Javascript call to the “on-
Click” event on the div. When the div is
c l i c ke d , j Q u e r y w i l l “ g e t ” t h e U R L
http://theescapers.com/test_ajax.php on The
Escapers web server. As this is a PHP file, The
Escapers web server executes the PHP script
and returns the result to jQuery. Jquery then
calls the “callback” function we have specified
with the date returned from the PHP script.
All the callback function does at the moment
is display that data in a standard Javascript
“alert()” dialog box.

A more complicated example
In this example, we’re going to query theescapers.com again, but this we’ll insert the data returned into a div on the page. This is
probably the most common way of using AJAX, and also the most powerful, it means that if you need to update the content of
your page, you don’t need to completely refresh the page, just the parts which need to change. In turn, this is faster, and saves
using too much of your server bandwidth.
For this example, you will need to install jQuery as described in the first example, unless you choose to use the site created in
the first example, in which case jQuery is already installed and ready to use.

So, first we need to create a div, this is done just like the previous example, but now we need to give the div an “id” attribute,
this is so when we get the data using AJAX, we can call the div by it’s id and your web browser will know which div to insert the
data into.

We give the div an “id” attribute using the Inspector as shown above. Once the id is set, you will notice that is displayed on the
div when it is selected. The id is shown as it is a very important attribute in XHTML, and used very frequently.
Now you can use the “Attach Action...” contextual menu again, but this time, we choose another callback function, which can
populate the contents of a div, and change the callback function to reference “mybox” as shown below:

Now, press OK and then preview your site. If everything has worked OK, you will now find that the div is populated with text
with the page being refreshed. The possibilities for using AJAX in this way are endless, For example, you could send a word to
the server, have it translated into another language and returned to the web site. Also, using this AJAX technique, you can have
the server return HTML or XHTML to display images, movies, and formatted text. The only limit is your imagination.

Embedding Movies
Basics
Embedding a Movie in Flux is as simple as dragging a Movie from the Finder to your page.
When you drop the Movie on the page, you will be asked wether you want to link the file into your project, or copy it.
Linking a file will make a reference to Movie in your project using a symbolic link, this is useful if your movie is very large, or you
simply don't want multiple copies of the movie on your disk, however, your project will no longer be self contained, so take care
if you are moving it to a different machine or backing it up.
Copying a file will make a copy of the Movie in your project, just like the rest of your resources like images or CSS files.

Whether you choose link or copy, the Movie will then appear on
the page.

Flux has automatically created a Div to contain
the Plug-In object, so that's all you need to do,
you can switch to Preview mode and watch your
Movie.

Movie options
There are many different options we can apply to our Movie, to ap-
ply options we can use the 'Plug-in Attributes' palette. Open the pal-
ette from the 'Window' menu, and select the plugin by clicking on
the icon shown below.

The 'Plug-in Attributes' palette allows you to change a number of attributes, including the size
of the Movie, the id and class, and many other settings. These parameters are described in
depth on the Apple Website here.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Eset eiusmod tempor incidunt et labore et dolore magna aliquam. Ut enim ad minim veniam, quis nostrud exerc. Irure dolor in reprehend
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse molestaie cillum. Tia non ob ea soluad incommod quae
egen ium improb fugiend. Officia deserunt mollit anim id est laborum Et harumd dereud facilis est er expedit distinct. Nam liber te con-
scient to factor tum poen legum odioque civiuda et tam. Neque pecun modut est neque nonor et imper ned libidig met, consectetur
adipiscing elit, sed ut labore et dolore magna aliquam is nostrud exercitation ullam mmodo consequet.
Duis aute in voluptate velit esse

Cillum dolore eu fugiat nulla pariatur. At vver eos et accusam dignissum qui blandit est praesent. Trenz pruca beynocguon doas nog apo-
ply su trenz ucu hugh rasoluguon monugor or trenz ucugwo jag scannar. Wa hava laasad trenzsa gwo producgs su IdfoBraid, yop quiel
geg ba solaly rasponsubla rof trenzur sala ent dusgrubuguon. Offoctivo immoriatoly, hawrgasi pwicos asi sirucor. Thas sirutciun applios
tyu thuso itoms ghuso pwicos gosi sirucor in mixent gosi sirucor ic mixent ples cak ontisi sowios uf Zerm hawr rwivos. Unte af phen neige
pheings atoot Prexs eis phat eit sakem eit vory gast te Plok peish ba useing phen roxas. Eslo idaffacgad gef trenz beynocguon quiel ba
trenz Spraadshaag ent trenz dreek wirc procassidtwprogram.
w w . tCak
h epwico
e s cvux
a pbolug
e r sincluros
.com all uf cak sirucor hawrgasi itoms alung gith
cakiw nog pwicos.
Plloaso mako nuto uf cakso dodtos

Koop a cupy uf cak vux noaw yerw phuno. Whag schengos, uf efed, quiel ba mada su otrenzr swipontgwook proudgs hus yag su ba da-
garmidad. Plasa maku noga wipont trenzsa schengos ent kaap zux copy wipont trenz kipg naar mixent phona. Cak pwico siructiun ruos
nust apoply tyu cak UCU sisulutiun munityuw uw cak UCU-TGU jot scannow. Trens roxas eis ti Plokeing quert loppe eis yop prexs. Piy
opher hawers, eit yaggles orn ti sumbloat alohe plok. Su havo loasor cakso tgu pwuructs tyu InfuBwain, ghu gill nug bo suloly sispunsiblo
fuw cakiw salo anr ristwibutiun. Hei muk neme eis loppe. Treas em wankeing ont sime ploked peish rof phen sumbloat syug si phat phey
gavet peish ta paat ein pheeir sumbloats. Aslu unaffoctor gef cak siructiun gill bo cak spiarshoot anet cak GurGanglo gur pwucossing
pwutwam. Ghat dodtos, ig pany, gill bo maro tyu ucakw suftgasi pwuructs hod yot tyubo rotowminor. Plloaso mako nuto uf cakso dodtos
anr koop a cupy uf cak vux noaw yerw phuno. Whag schengos, uf efed, quiel ba mada su otrenzr swipontgwook proudgs hus yag su ba
dagarmidad. Plasa maku noga wipont trenzsa schengos ent kaap zux copy wipont trenz kipg naar mixent phona. Cak pwico siructiun
ruos nust apoply tyu cak UCU sisulutiun munityuw uw cak UCU-TGU jot scannow. Trens roxas eis ti Plokeing quert loppe eis yop prexs.
Piy opher hawers, eit yaggles orn ti sumbloat alohe plok. Su havo loasor cakso tgu pwuructs tyu.

Flux Man

Загружено:

Сведения о документе

Исходное описание:

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Flux Man

Загружено:

Авторское право:

Доступные форматы

Flux 1.

The Page Designer! 7

Create a website from scratch! 10

Applying a fill colour to a div! 13

Applying borders to a div! 13

Entering text inside a div! 14

Applying styles tags to text! 14

Using inline CSS styles! 16

Using external CSS files! 17

Creating a new CSS style! 18

Using Style definitions! 20

Multiple Images in CSS! 22

Building a basic Ruby on Rails website! 30

Adding Ruby Code! 32

Ruby “Hello World!”! 34

Flux 1.4 User Manual. The Escapers 2008 3

A really simple example! 36

A more complicated example! 47

Flux 1.4 User Manual. The Escapers 2008 4

A CSS file, these are

A folder of images, these images

A web page, double click to edit.

The CSS files associated

This is a 'div' page element, most

The CSS editor allows you

Flux 1.4 User Manual. The Escapers 2008 7

A popup menu containing

Attributes and Actions of the

The 'Fill' section of the

The 'Inline' switches toggle The 'Size' section of the

Flux 1.4 User Manual. The Escapers 2008 8

When you press “Save”, your website will be created.

Flux 1.4 User Manual. The Escapers 2008 10

Flux 1.4 User Manual. The Escapers 2008 11

Flux automatically selects the div, and displays a little information

Flux 1.4 User Manual. The Escapers 2008 12

Applying a fill colour to a div

Applying borders to a div

Flux 1.4 User Manual. The Escapers 2008 13

Applying styles tags to text

Flux 1.4 User Manual. The Escapers 2008 14

Flux 1.4 User Manual. The Escapers 2008 15

Using inline CSS styles

The ‘style’ attribute tells web browsers to apply the

Flux allows you to use inline styles for most attributes,

Associating a CSS file to your web page

1. Open the relevant web page by double-clicking it in the ‘File Manager.

Creating a new CSS style

Flux 1.4 User Manual. The Escapers 2008 18

Flux 1.4 User Manual. The Escapers 2008 19

Class - Class styles are preceded by a ‘.’ in CSS defi-

For example, the class style we created called

Flux 1.4 User Manual. The Escapers 2008 20

Flux 1.4 User Manual. The Escapers 2008 21

Multiple Images in CSS

CSS supports multiple images in elements, for example, you could

Flux 1.4 User Manual. The Escapers 2008 22

Flux 1.4 User Manual. The Escapers 2008 23

Applying effects to an image

Flux 1.4 User Manual. The Escapers 2008 25

Flux 1.4 User Manual. The Escapers 2008 26

Once the image saved, it will appear in the Site Man-