flux manual

Flux 1.4The Escapers 2008

Draft One

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

Contents

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


IntroductionFlux 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 web page, double click to edit.

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.

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

here, and all the styles defined in the files.

The Details bar, you can toggle various aspects of 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 'Size' section of the Inspector, this section is currently collapsed, but it is enabled.

The 'Inline' switches toggle wether to override that particular area of the

element, in this case, 'Size'


Getting StartedGetting 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.


Editing pages

Double-clicking an XHTML file in the Site Manager will load the file into the Page Editor, and now we can start to add content to the page. In XHTML, it is customary to have many different “divs” on a page, divs are containers which can hold any content you like in a page, text, pictures, Javascript code, almost anything you like. These containers themselves can be styled to have borders, fill colours, picture backgrounds etc.

To start off, we'll create a single div and investigate the options we have for modifying that div.

DivsTo create a div, we simple choose “Div” from the “New Elements” toolbar menu. This will put an unformat-ted, “blank” div onto our page, like this one:

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.


what is a div?A ‘div’ is probably the most commonly used ele-ment in modern XHTML.It’s used as a container for text, images, forms, and almost anything else.You can have divs within other divs, and they can be adjusted in almost every way imaginable.

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

http://en.wikipedia.org/wiki/Stylesheet_language

http://en.wikipedia.org/wiki/Stylesheet_language

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

click!click!


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.


http://jquery.com/

http://jquery.com/

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 cked , jQuer y wi l l “get” the URL 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.


http://theescapers.com/test_ajax.php

http://theescapers.com/test_ajax.php

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.


http://www.apple.com/quicktime/tutorials/embed2.html

http://www.apple.com/quicktime/tutorials/embed2.html

Lorem ipsum dolor sit ametConsectetur adipiscing elitEset 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 esseCillum 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 procassidt program. Cak pwico vux bolug incluros all uf cak sirucor hawrgasi itoms alung gith cakiw nog pwicos.

Plloaso mako nuto uf cakso dodtosKoop 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.

w w w . t h e e s c a p e r s . c o m

http://www.theescapers.com

http://www.theescapers.com

flux manual

Documents