User Guide

Welcome to IxEdit

The first on-the-fly interaction design tool for the web

IxEdit is a JavaScript-based interaction design tool for the web. With IxEdit, designers can practice DOM-scripting without coding to change, add, move, or transform elements dynamically on your web pages. Especially, IxEdit must be useful to try various interactions rapidly in the prototyping phase.

IxEdit itself is made with JavaScript, and it is an entirely new type of design tool which is to be embedded in the HTML you are editing. Firefox, Safari, Chrome, or IE becomes your interaction development environment. The interactions you create will be applied on-the-fly to the web page, so you can edit them while checking how they behave in real time.

IxEdit generates JavaScript code automatically from the parameters you specified. The generated JavaSCript code is designed to run with jQuery and jQuery UI, the internationally used famous JavaScript libraries, and it presents powerful interactions. You don’t need to care about cross-browser compatibility since jQuery does it for you.

Interactions you are editing are saved to the database in your local environment (Client-side Database Storage). Therefore, the data would not be lost even after you close or reload the browser. In addition, you can be editing interactions off-line. If you choose Firefox or IE as your development environment, you need to install Gears to your browser first to use local database.

  1. Start using IxEdit
  2. Operation in the IxEdit Dialog
  3. Selector Formats
  4. Reaction Commands
  5. Condition Commands
  6. Importing and Exporting
  7. Deploying
  8. Backing up
  9. Configuration Scripts
  10. Advanced Mode

Start using IxEdit

Requirements

IxEdit requires the following environment.

If you choose Firefox or Internet Explorer to use IxEdit, You need to install Google Gears first to your browser.

To make IxEdit function normally, the HTML you work on must be encoded by UTF-8 and written in standard mode.

Compatibility of the code generated by IxEdit

The JavaScript code generated by IxEdit is compatible with those browsers.

Setting Gears up

If you use IxEdit with Safari or Chrome, you don’t need to install Gears.

If you use IxEdit with FireFox or Internet Explorer, Gears must have been installed to your browser.

You can download Gears from the Gears site (http://gears.google.com/) and install easily. See the instruction on the Gears site for more information.

After you install Gears and open HTML which is loading IxEdit, an dialog box will appear to ask if you really want to use Gears. This is a confirmation if you allow the web page to access local database. After you give a permission, IxEdit will be available.

Placing and loading the required files

To make IxEdit run, required JavaScript and CSS files must be loaded to the HTML you work on. The following files are required. They are all included in the downloaded file, and you can download the latest files from http://ixedit.com/download/

Place those JavaScript and CSS files with the images folder which includes image files used with the CSS into appropriate directories. The images folder is in the downloaded files. Then load them into the HTML. It is recommended that the lines to load those files are written in the head element of your HTML.

ixedit.js must be loaded after loading jquery and jquery-ui.

The next image shows an example how to load the required files in the head element of the HTML.

Operation in the IxEdit Dialog

IxEdit Dialog

After IxEdit has booted correctly, the IxEdit Dialog will be opened within the web page. With this dialog, you will be adding and editing interactions. The interactions you create will be applied on-the-fly to the web page, so you can edit them while checking how they behave in real time.

The title bar can be dragged to move IxEdit Dialog in the browser window.

By double-clicking title bar, you can shade the dialog. The dialog will be opened again by double-clicking title bar again.

The bottom-right corner of the dialog can be dragged for resizing.

IxEdit Dialog has the List View and the Edit View. You will be editing interactions by switching those views.

Basic operation flow

The basic flow to create interactions with IxEdit is like follows.

  1. Click “New” button in the list view to open the edit view to make a new interaction.
  2. In the action edit area, specify an event and target element(s) as the trigger of interaction.
  3. In the reaction edit area, specify a command and its parameters. You can make multiple reactions for one action.
  4. If the reaction(s) should be executed under certain condition, specify it in the condition edit area.
  5. Write comment in the comment edit area as you want.
  6. Click “Done” button to save the interaction you created. IxEdit Dialog switches back to the list view.
  7. Repeat the process as many times as needed.
  8. When you are done, choose “Deploy” from the routing menu to get the final JavaScript code.
  9. Embed the generated code in the HTML.

Using the List View

The list view shows the list of interactions you created. Also, you can add, duplicate, delete, export, import, and deploy interaction(s) from the list view.

Adding a new interaction

Click “New” button to add a new interaction. Then the IxEdit Dialog turns into the edit view, and the input controls will be appeared.

Editing an interaction

To edit an interaction you have made again, choose one in the list and click “Edit” button or double-click it. Then the IxEdit Dialog turns into the edit view.

Duplicating and deleting interaction(s)

Click “Duplicate” button to duplicate the selected interaction. Multiple interactions can be duplicated at the same time.

Click “Delete” button to delete the selected interaction. Multiple interactions can be deleted at the same time.

Sorting the list

The list can be sorted by clicking the column header.

Turn on or off interaction(s)

By clicking the checkbox in each row, you can activate and inactivate the interaction. If you want some interactions not to be executed temporarily, inactivate them. You don’t need to delete them and remake them in the future.

While an interaction is off, you cannot edit it. You can duplicate or delete it. To edit it again, turn it on.

Using the Edit View

In the edit view, you can edit one interaction. An interaction is composed of “Action”, “Reaction”, and “Condition.” You can add a comment to an interaction also. Each area of Action, Reaction, Condition, and Comment can be closed/disclosed by clicking the area title.

Specifying Action

Action is the trigger of an interaction. Only one action can be set for one interaction.

Event

Choose an event from the dropdown menu as the type of the action. Each event occurs in the case of follows.

Selector

Select elements(s) which is/are the target(s) of the event sent to. See Selector Formats for more information.

By clicking the “Quick Select” button which is on the right of selector field, you can specify the selector with mouse-clicking.

Other inputs

Specifying Reaction(s)

Reaction is the feedback behavior of the screen which is bound to the action. You can make multiple reactions for one action.

Command

To make a reaction, choose a command from the dropdown menu first. More than 30 commands are built in IxEdit. Choose a command which suits your aim, then specify its parameters. Each command has own set of parameters.

By clicking the command help button which is placed on the right of the command menu, you can see short instruction about each command.

For more information, see Reaction Commands.

Selector

Many commands have a selector field. The element(s) specified in the selector field will be the target(s) of the reaction. See Selector Formats for more information.

By clicking the “Quick Select” button which is on the right of selector field, you can specify the selector with mouse-clicking.

Delay

Many commands have a delay option. Delay is the time-lag between the event and the command execution. When you choose "None," the reaction will be run right after the action occurs.

Adding and Removing Reaction

You can make multiple reactions in one interaction. To add a reaction, click "+" button in the right side of reaction edit area. To remove a reaction, click "-" button, but the last reaction cannot be removed.

Specifying Condition(s)

Condition is the specific situation which is required to execute the reaction. The reaction(s) will be run when the all conditions are satisfied.

Command

To make a condition, choose a command which suits your aim from the dropdown menu first. Then specify its parameters.

See Condition Commands for more information.

Selector

Many commands have a selector field. The element(s) specified in the selector field will be the target(s) of the condition. See Selector Formats for more information.

By clicking the “Quick Select” button which is on the right of selector field, you can specify the selector with mouse-clicking.

Adding and Removing Condition(s)

You can make multiple conditions in one interaction. To add a condition, click "+" button in the right side of condition edit area. To remove a condition, click "-" button.

Commenting

In the bottom of the edit view, there is a comment field. You can write a comment as you want such as some description about the interaction you are making or some keywords to be sorted in the list view. The comment will not affect to the behavior of the interaction.

"Done" and "Done and Reload"

When you finished editing an interaction, click "Done" button. Then the interaction will be saved to the local database, and the IxEdit Dialog turns back into the list view.

Clicking "Done and Reload" button makes IxEdit save the interaction and reload the browser. Use this button when you want to check the interactions from the initial state.

Reverting

When you are editing an interaction which has been once saved, you can discard changes and make it back to the last state, click "Revert" button.

Selector Formats

Many action commands, reaction commands, and condition commands have selector field as a part of their parameters. Selector fields are used to be specifying the target element(s). Selector fields must be filled in by values in specific formats.

The formats of selector value are just like CSS selector formats as follows.

Basics

Filters

Attribute Filters

Special Terms

Note for Advanced Users

In the normal syntax of jQuery, you can use string variables as or within the selectors, but IxEdit don't accept variables for selector values.

Reaction Commands

More than 30 reaction commands are built in IxEdit. This section describes the purposes and parameters of each reaction command.

DOM

Add Class

Add the specified class name to the selected element(s).

Remove Class

Remove the specified class name from the selected element.

Add/Remove Class

Add the specified class name to the selected element if it is not present, or will remove the specified class name from the target element if it is present.

Change Style

Add or change style on the selected element. Specify CSS property and it's value. The way to specify the values is just like how you do for CSS.

Change Value

Change value of value attribute on the selected element. Available elements are button, input, li, and option.

Change Status

Change status of selected element.

Remove Attribute

Remove specified attribute from the selected element.

Insert HTML

Insert specified HTML string by several ways such as overwriting inside of the selected element, inserting to the inside-bottom of the selected element, inserting to the inside-top of the selected element, inserting after the selected element, or inserting before selected element.

Insert Remote HTML

Insert HTML from a remote file to the selected element. This will overwrite the existing content of the selected element. Remote file you request and this page should be in the same domain. HTML from a different domain cannot be loaded unless this page is on your local computer.

Empty Element

Remove all child nodes from the selected element.

Remove Element

Remove the selected element from the DOM.

Effects

Show

Display the selected element if it is hidden. If you apply duration on an inline-element, it will be changed as a block-element.

Hide

Hide the selected element if it is shown. If you apply duration on an inline-element, it will be changed as a block-element.

Show/Hide

Show the selected element if it is hidden and will hide the selected element if it is shown. If you apply duration on an inline-element, it will be changed as a block-element.

Slide Down

Reveal the selected element with sliding-down effect.

Slide Up

Hide the selected element with sliding-up effect.

Slide Down/Up

Reveal the selected element with sliding-down effect if it is hidden and will hide the selected element with sliding-up effect if it is shown.

Fade In

Show the selected element with fading-in effect.

Fade Out

Hide the selected element with fading-out effect.

Fade To

Fade the opacity of the selected element to a specified opacity.

Animate

Animate the selected element. Specify the style properties that will be animated and to what end. Not only sizes (e.g. "width", "margin", or "line-height") but also colors, opacities, and scroll positions can be animated. You can animate multiple properties of one element at the same time.

Generate

Draggable

Make the selected element draggable with the mouse.

When this command is executed, the following class names will be added dynamically to the target element(s). You can modify the styles via those class names.

Droppable

Make the selected element droppable.

When this command is executed, the following class names will be added dynamically to the target element(s). You can modify the styles via those class names.

By choosing "Drop" from the action event menu to specify the reaction which is executed when an element is dropped to the droppabled element.

If you want to specify the dropped element as a selector, specify the target element to be dropped (it should have been droppabled), choose "drop" as the event, and type "drop" in the selector field in reaction edit area.

Resizable

Make selected element resizable (meaning it has draggable resize handles).

When this command is executed, the following class names will be added dynamically to the target element(s). You can modify the styles via those class names.

Reorderable

Make the child block elements of the selected element reorderable by dragging with the mouse.

To use this command, the target element and its descendant elements should have been marked up in the following format. (#reorderable1 is to be the target) 

<block id="reorderable1">
    <block>Content1</block>
    <block>Content2</block>
    <block>Content3</block>
</block>

When this command is executed, the following class names will be added dynamically to the target element(s). You can modify the styles via those class names.

Selectable

Make the child block elements of the selected element selectable by clicking, ctrl+clicking, and dragging with the mouse.

To use this command, the target element and its descendant elements should have been marked up in the following format. (#selectable1 is to be the target) 

<block id="selectable1">
    <block>Content1</block>
    <block>Content2</block>
    <block>Content3</block>
</block>

When this command is executed, the following class names will be added dynamically to the target element(s). You can modify the styles via those class names.

Make Date Picker

Generate a date picker calendar for the selected textbox.

To use this command, the target element and its descendant elements should have been marked up in the following format. (#datepicker1 is to be the target) 

<input type="text" id="datepicker1" />

When this command is executed, the following class names will be added dynamically to the target element(s). You can modify the styles via those class names.

Make Accordion

Generate an accordion container.

To use this command, the target element and its descendant elements should have been marked up in the following format. (#accordion1 is to be the target)

<block id="accordion1">
    <block><a href="#">Header1</a></block>
    <block>Content1</block>
    <block><a href="#">Header2</a></block>
    <block>Content2</block>
    <block><a href="#">Header3</a></block>
    <block>Content3</block>
</block>

When this command is executed, the following class names will be added dynamically to the target element(s). You can modify the styles via those class names.

Make Tabs

Generate tabs container.

To use this command, the target element and its descendant elements should have been marked up in the following format. (#tabs1 is to be the target) 

<block id="tabs1">
    <ul>
        <li><a href="#content1">Tab1</a></li>
        <li><a href="#content2">Tab2</a></li>
        <li><a href="#content3">Tab3</a></li>
    </ul>
    <block id="content1">Content1</block>
    <block id="content2">Content2</block>
    <block id="content3">Content3</block>
</block>

When this command is executed, the following class names will be added dynamically to the target element(s). You can modify the styles via those class names.

Make Dialog

Generate a modal dialog. A wrapper block, a titlebar, and a button pane will be generated around the original block.

To use this command, the target element and its descendant elements should have been marked up in the following format. (#dialog1 is to be the target) 

<div id="dialog1" title="My Dialog1">Content</div>

When this command is executed, the following class names will be added dynamically to the target element(s). You can modify the styles via those class names.

Misc

Alert

Show a regular alertbox generated by JavaScript's "window.alert()" function with the specified message string.

Jump

Make the browser access the specified URL.

Send Event

Send the specified event to the selected element. For example, if you send a "Click" event to the element "#button1", the same thing will happen as you click "#button1".

Condition Commands

IxEdit has several condition commands. This section describes the purposes and parameters of each condition commands.

Has Class

Checks if the target has the specific class or not.

Value

Checks if the target has the specific value or not.

Status

Checks if the target is on the specific status or not.

Importing and Exporting

With IxEdit, you can create interactions on a HTML (page) basis. If you reuse the interactions you made for one page in another, or if you want to share the interactions you made with other IxEdit users, Importing and Exporting will help you.

Export

To export interaction source;

  1. Choose “Export” from the routing menu.
  2. Copy the source displayed in the Export Dialog.

Import

To import interaction source;

  1. Choose “Import” from the routing menu to open the Import Dialog.
  2. By Copy-Pasting: Paste the source you have copied from the Export dialog to the textbox.
  3. By Choosing from existing data: Choose one from the list of existing data which you have made on the same browser.
  4. Click “Import” button, then the interactions will be imported and added to the existing ones.

Deploying

The interactions you made with IxEdit are being applied to the page without changing HTML source while IxEdit is running. This can be done since IxEdit converts the data stored in the local database to JavaScript and bind them to the page responsively in the background.

However, after you finish editing interactions, you may want to show the page to your client or want to publish it to the web without letting it be “editable.”

For those cases, you can use “Deploy” to generate JavaScript code which doesn’t depend on IxEdit and embed it in the HTML to make a final deliverable.

The JavaScript code generated by “Deploy” no longer needs IxEdit, but please not that it still needs jQuery and jQuery UI libraries to be run.

To deploy;

  1. Choose “Deploy” from the routing menu.
  2. Copy the JavaScript code displayed in the Deploy Dialog.
  3. Open the HTML file with a text editor, then paste the code at the bottom of the head element (before the tag). Note: the code to load jQuery, jQuery UI JavaScript files must be placed above the deployed code.
  4. Delete the lines which are to load ixedit.js and ixedit.css. The deployed code no longer need them to be run.
  5. Save the HTML, and reload the browser.

The next image shows an example where to paste the deployed code in your HTML.

If you want to edit interactions again with IxEdit for the page once deployed, delete the deployed code and place the lines to load ixedit.js and ixedit.css again.

Backing Up

IxEdit saves the interaction source to the local database. The local database is a storage which is prepared by the browser. It is not designed to be accessed by you via desktop in general. It means that you should backup the source manually just to be safe.

To backup, copy the source from the Export Dialog, and save it as a text file in an appropriate place. Exported source can be imported to IxEdit again easily.

Configuration Scripts

IxEdit has some configuration scripts. If you are familiar with JavaScript, you can write them directly in the HTML to configure the behavior of IxEdit. Configuration scripts must be written below the line to load ixedit.js.

The next image shows an example how to place the configuration scripts in your HTML.

When deploying, configuration scripts must be deleted.

Specify the Screen ID

IxEdit saves interaction source of each page as a record to the local database. IxEdit uses the page URL as the record ID for saving. Therefore, when you change the file name of the HTML or move the HTML to a different directory, the link between page and database will be broken. To solve this problem, you can give a permanent screen ID by yourself using configuration script. A permanent screen ID is also useful when you share the interactions in multiple pages by giving the same screen ID to those pages. To give a permanent screen ID, write like this.

Pages which have the same screen ID are always linked to one record in the database. You can change the file name or move to another place without breaking the link.

Inactivate All Interactions

While you are editing interactions, sometimes an error occurs and make IxEdit untouchable. For example, If you create an interaction which reloads the page right after the page is loaded, you cannot stop reloading to fix this infinite loop. In such cases, use this script.

This inactivates all the interaction, then you can access IxEdit to delete or modify existing interactions. After you fixed, you should delete this script because this makes all the interaction inactive again next time you reload the page.

Switch to Advanced Mode

Turning IxEdit into the advanced mode, you can be accessing some extra features for advanced users by writing this configuration.

About the extra features of advanced mode, see Advanced Mode.

Advanced Mode

In the advanced mode, those features can be used. See Configuration Scripts how to switch IxEdit to the advanced mode.

Show DB Records

By choosing “Show DB Records” from the routing menu, the all records of database which store the interaction source will be shown. You can delete a specific record if you don’t need it anymore.

Discard DB Table

By choosing “Discard DB Table” from the routing menu, you can delete the database table which is storing all interaction sources you have made with IxEdit. After deleting the table, a new table will be created automatically when you reload the page.

Execute jQuery

"Execute jQuery" will be added as a reaction command. With this command, you can write your own jQuery script to do things that IxEdit cannot do with its regular reaction commands.

Execute Function

"Execute Function" will be added as a reaction command. With this command, you can specify a JavaScript function and its arguments to do things that IxEdit cannot do with its regular reaction commands.

Copyright © 2009 Sociomedia Inc.