ODF 1.0:
Making the Internet Interactive

Many modern products have to be tailored to the client's requirements. How do you learn their needs when the clients are located far away? Well, it would be best to have them draw up their requirements themselves, over the Internet. - Yet, today the Internet provides mainly read-only communication.
What even a small-to-medium enterprise can do to overcome this obstacle, you can read here.

Introduction

The history of industrialization is marked by ever increasing flexibility in product design. (Details [+]) ODF is just the tool you need for such an approach.

. By ODF you can establish a radically new relationship to your clients and partners, for example:
  1. Interactive client relations (Details [+])
  2. Flexible mail order business (Details [+])
  3. Online-relation to your suppliers and sub-contractors (Details [+])
  4. Set up an online design community (Details [+])
  5. Future Web 2.0 applications based upon ODF (Details [+])

Here's what you should know to make best use of this article (Details [+])

If you have problems in setting up  ODF demo , you might want to read the following remarks (Details [+])

Application

Why A Section 'Application'?

In order to set up a useful  online designer  specific to your business, you will want to know what the users can do by it and how to do it. By knowing that, you will know what you should prepare for them within the skeleton of this  online designer framework  (ODF).

What Can The User Do By An ODF-based Application?

The user can draft a design from a number of design elements by  creating ,  moving  and  resizing  selected design elements. (Details: see Application - Basics)

How Can The User Do it?

By creating design elements from the Toolkit, moving/resizing them by mouse or keyboard, and perhaps applying a number of operations on them  given by Toolkit and/or Floating Menu. (Details are described in the next section, Application - Basics)

What Can The User Do With A Design?

A design can be used in any way provided for by Toolkit's sub-menu  File  (see section Application - File)

What's The Effort To Develop A Design?

ODF is pretty much self-explaining. Even without any previous knowledge a user should be able to draw up a basic design.

If you know your way around an ODF-based online designer, you can develop a minor design within a few minutes. Larger designs can easily be pieced together from minor designs.

Nevertheless, grand designs can be developed over many sessions, combined from worldwide contributions - saving intermediate states  or  handing them over to partners next door or halfway around the world - simply by e-mail.

For follow-up designs later, a subset of a design can be taken out and used in another design.

Application - Basics

In the concept of ODF, a design is a combination of a number of  design elements . They can be combined by  creating  them,  moving  them in any expedient way, and some design elements can also be  resized .

Which design elements should be resizable and in which way - this is up to you, the applier. As well, there are some edit operations that can be applied to one or more design elements together. ODF leaves it open to the applier which operations should be made available to the users, and how to implement them. (There are, however, some guidelines to observe: see Coding - Custom Operations)

Finally, the design can be used to store it to disk, to print it out or to handle it by any of the operations offered in the  File  sub-menu.

If you are not one of the very first ODF appliers, ask the one who gave you that idea. Might well be that some sets of design elements are prepared already. With some luck, they might be good for you, too!

Coding - Alias

Alias is the implementation of a graphic symbol. When the user picks a symbol in the  Create  menu, the corresponding  alias  is created in the ODF work area.

Currently there are five types of  alias :

  1. Non-existing alias: symbol in  Create  menu has no attribute  alias="…" 
    Then the symbol is simply copied to the work area.
    This is useful for simple design elements only - those that can be  moved  but not  resized .
  2. Image only (Details [+])
  3. Image Enhancement (Details [+])
  4. Simple HTML-construction (Details [+])
  5. Compound alias (Details [+])

Coding - Custom Operations

In Coding - Overview you will find a  function Action  as a simple representation of  custom operations .

Custom operations are implemented as normal Javascript functions, which are called when the users click an item pertaining to Custom File Operations or Custom Edit Operations

To interact with the ODF environment, all you need are three global variables:

xFloat x-coordinate of the point that was right-clicked (or Ctrl-Alt-clicked)
yFloat y-coordinate of the point that was right-clicked (or Ctrl-Alt-clicked)
oFloat Design element that was right-clicked (or Ctrl-Alt-clicked), if any.
Or 'null' if the background of the work area was clicked.

Coding - Custom Keyboard Shortcuts

In Coding - Overview you will find a  function CustomKey  as a simple implementation of  custom keyboard shortcuts .

It is not recommended to give custom keyboard shortcuts to your custom operations. If you do, you should always make sure that your shortcuts work equally on all of the major browsers. Probably, you will hardly find any shortcut that is not occupied yet in any browsers. So, at least you should provide alternative shortcuts, as was done in ODF by  (Shift+)Ctrl+. 

CustomKey  is implemented as a normal Javascript function, which might by laid out as follows: 


function CustomKey(key,ctrl,alt,shift)
{
    switch(key)
    {
        case … : 

        case … :
            if(ctrl) if(alt) …
                        else …
    }
}

Licensing

You don't have to give away your ODF software. The specialty of Internet applications like those based on ODF is, the applier still can have everything under control, even after releasing the software.

To achieve that, all you have to do is

The license code is any random characters sequence, combined with the expiration date.

(E.g. the license code  W5YwXtNd071231  means, the license "W5YwXtNd" is valid thru December 31, 2007.)

To implement that, you need a file  licenses.js  in your "home"-directory, holding the declaration e.g.

var licenses = new Array('b6AMeQgU070701','XuJ9IwXp070825',…,'W5YwXtNd071231',…);

along with a declaration of function  IsValid()  by which a user's license is checked against the collection  licenses  each time when the ODF-based online designer is started.

The users enter their license by attribute  license="…"  when calling  ODFa.js  in their HTML-file implementing their  online designer  (see Coding - Overview)

To administer licensing, just do as described in details [+]

Appendices

Appendix 1 - Keyboard Shortcuts

For an online application, keyboard shortcuts are of limited use: They require rather frequent use (to keep them in good memory) and many shortcuts are occupied differently in different browsers.
In the following tables, many shortcuts may be given in two alternatives: E.g. for "(Shift+)Ctrl+F" either "Ctrl+F" may be pressed. In some browsers, however (e.g. in IE) this would  by default  trigger the search operation. To avoid that, "Shift+Ctrl+F" should be pressed.
Browsers are abbreviated:
  • IE: Microsoft Internet Explorer (tested for version 6+)
  • FF: Firefox (tested for version 1.5 +)
  • NS: Netscape (tested for version 7+)
  • OP: Opera (tested for version 9+)
  • SA: Safari (tested for version 3+)
Still, for power users (especially with IE or FF browsers) keyboard shortcuts are useful for efficient work.

Currently the following keyboard shortcuts are implemented:

Selecting (Details [+]):

Moving (Details [+]):

Resizing (Details [+]):

File (Details [+]):

Edit (Details [+]):

Other (Details [+]):