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 …