# Le principle of DFrames is very simple:

You create a first DFrame that, most of times, will occupy all the surface of the browser.

On this DFrame you can add a bar.

On this bar you can add buttons or menus.

Then you have 2 possibilities:

§ Assign a URL to the DFrame: The corresponding HTML page will occupy all the available surface remaining free after bars have been added.

§ Add to the DFrame …another DFrame. In this DFrame you will be able to add a bar, on this bar to install buttons and menus then to assign a URL to DFrame or add another DFrame to it …

Application: Creation of an application that shows a table of contents and the corresponding documents (2 in our example).

Managed in a traditional way this application would be made up of 3 pages, the table of contents and the two documents. The table of contents would be shown initially, and replaced by the documents when a link would be selected. Each document should have a button of navigation making it possible to return to the table of contents.

With dFrameAPI the application will be very different:

A first dFrame is created:

baseAll = new DFrame([2, 2, 98, 98])

The DFrame containing the table of contents is then initialized on the left side of the 'baseAll' DFrame:

var index = new DFrame([2, 2, 25, 98], baseAll)

and the URL of the HTML page of the table of contents is set for it:

index.setURL('indexPage.htm')

The DFrame that will contain pages is initialized on the right side of the 'baseAll' DFrame:

var page = new dFrame([27, 2, 98, 98], baseAll)

This DFrame must have a 'Close' button:

var bar = page.addBar()

bar.addButton('Close', 'thisDFrame.closeFrame()')

The procedure of creation of the DFrame showing the pages will be used several times: So the whole code building the DFrame 'page' is included in a function:

function openPage() {

var page = new DFrame([27, 2, 98, 98], dFrameStyle, baseAll)

var bar = page.addBar()

bar.addButton('Close', 'thisDFrame.closeFrame()')

return page

}

At last we specify that DFrames created by this function will be targets of links of the 'index' DFrame:

index.setTarget('openPage()')

# The almost complete code is:

baseAll = new DFrame([2, 2, 98, 98])

var index = new DFrame([2, 2, 25, 98], baseAll)

index.setURL('./introduction/index.html')

index.setTarget('openPage()')

function openPage() {

var page = new DFrame([27, 2, 98, 98], baseAll)

var bar = page.addBar()

bar.addButton('Close', 'thisDFrame.closeFrame()')

return page

}

To obtain an executable code some lines have to be added:

- Indicate to DFrames the graphic parameters they must use. It is simply done by creating a Style object and by defining some attributes to it:

dFrameStyle = new DFrameStyle()

dFrameStyle.setBackgroundColor('green')

The Style will be affected to the DFrames at the time of their instantiations:

baseAll = new DFrame([2, 2, 98, 98])

becomes

baseAll = new DFrame([2, 2, 98, 98], dFrameStyle)

- The code initializing the first DFrame must be included in the function DFrameAPI.onLoad() that will be launched after dFrameAPI has loaded all its resources:

DFrameAPI.onLoad = function() {

var baseAll = new DFrame([0, 0, 100, 100])

…

}

The code, this time complete, is as follows:

<script language="Javascript">

//Global variables

var baseAll

var dFrameStyle

DFrameAPI.onLoad = function() {

dFrameStyle = new DFrameStyle()

dFrameStyle.setBackgroundColor('green')

baseAll = new DFrame([2, 2, 98, 98], dFrameStyle)

var index = new DFrame([2, 2, 25, 98], dFrameStyle, baseAll)

index.setURL('./introduction/index.html')

index.setTarget('openPage()')

}

function openPage() {

var page = new DFrame([27, 2, 98, 98], dFrameStyle, baseAll)

var bar = page.addBar()

bar.addButton('Close', 'thisDFrame.closeFrame()')

return page

}

</script>

We also have to build the index.html page but it does not comprise anything in particular:

<HTML>

<BODY>

<A HREF="page1.html">First page</A>

<BR>

<A HREF="page2.html">Second page</A>

</BODY>

Last step : Test the result:

file: introduction1.html

Run the example

See the source code

# If you are still here …

…we can easily improve our application. The detail of each new syntax is not specified but you should understand the general meaning of them:

- Let us create on the 'baseAll' DFrame a tasks bar as well as a tasks menu:

baseAll.addTaskBar()

baseAll.addTaskMenu('List of pages')

It is not useful that 'baseAll' and 'index' DFrames appear on these lists of tasks:

baseAll.addToTaskBars(false)

baseAll.addToTaskMenus(false)

and

index.addToTaskBars(false)

index.addToTaskMenus(false)

- Let us specify that each link in the 'index' DFrame must open a new page DFrame:

index.setMultipleTarget(true)

- Let us modify dimensions of 'page' DFrame and add to it a definition of indentation:

var page = new DFrame([27, 2, 98, 98], dFrameStyle, baseAll)

becomes

var page = new DFrame([27, 2, 70, 70], 'page', dFrameStyle, baseAll)

page.setIndentX(50)

page.setIndentY(50)

- Finally let us improve dFrameStyle:

var buttonStyle = new ButtonStyle()

buttonStyle.setBgNormal('gray')

buttonStyle.setBgRoll('silver')

buttonStyle.setBgSelected('silver')

var menuStyle = new MenuStyle()

menuStyle.setItemsStyle(buttonStyle)

menuStyle.setBackgroundColor('gray')

var barStyle = new BarStyle()

barStyle.setBackgroundColor('gray')

barStyle.setDefaultButtonStyle(buttonStyle)

barStyle.setDefaultMenuStyle(menuStyle)

var dFrameStyle = new DFrameStyle()

dFrameStyle.setBackgroundColor('green')

dFrameStyle.setDefaultBarStyle(barStyle)

As it is often the case the definition of the styles will be stored in an additional file, styles.js, which will allow an easy re-use of it.

- And then, it is the tradition, add a last button to baseAll:

baseAll.addButton('<br>Hello<br>&nbsp;', 'baseAll.addText("Hello world !", [50, 50, 70, 70], 2)')

. Our new code became bulkier but remains very readable:.

<script language="Javascript">

//Global variables

var baseAll

//Style

DFrameAPI.include('./introduction/styles.js', 'A')

DFrameAPI.onLoad = function() {

baseAll = new DFrame([2, 2, 98, 98], 'baseAll', dFrameStyle)

baseAll.addTaskBar()

baseAll.addTaskMenu('List of pages')

baseAll.addToTaskBars(false)

baseAll.addToTaskMenus(false)

baseAll.addButton('<br>Hello<br>&nbsp;', 'baseAll.addText("Hello world !", [75, 5, 95, 25], 2)')

var index = new DFrame([2, 2, 25, 98], dFrameStyle, baseAll)

index.addToTaskBars(false)

index.addToTaskMenus(false)

index.setURL('./introduction/index.html')

index.setTarget('openPage()')

index.setMultipleTarget(true)

}

function openPage() {

var page = new DFrame([27, 2, 70, 70], 'page', dFrameStyle, baseAll)

page.setTitleAsHTMLTitle()

page.setIndentX(50)

page.setIndentY(50)

var bar = page.addBar()

bar.addButton('Close', 'thisDFrame.closeFrame()')

return page

}

</script>

Last step: Test the result

file: introduction2.html

Run the example

See the source code

See the style definitions

# What has to be remained.

From the user's point of view:

- Multi-windowing: The index and the two pages are shown simultaneously and it is possible to consult all pages without having to reload them.

- Ergonomics: The buttons have status attributes (selected, rollOver etc), …tasks menus and tasks bars are managed automatically.

From the developer's point of view:

- The simplicity of the code: Bars and buttons are automatically dimensioned according to their contents, the positioning of DFrames is easy, instructions are powerful.

- The whole Javascript code is contained in the same page and thus is easy to create and maintain.

However take care: The possibilities of dFrameAPI result in developing sophisticated applications which can become complex to write …