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()')
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
…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> ',
'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> ', '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
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 …