application.html

<HTML>

<HEAD>

<script>var dFrameFilePath = '../../../../../dFrame/'</script>

<script language="Javascript" src="../../../../../dFrame/dFrame/lib/DFrameAPI.js"></script>

<script language="Javascript">

//Style

DFrameAPI.include('dFrame/styles/blue/styleBlue.js')

//globals

var dFrameLeft

DFrameAPI.onLoad = function(){

//Create the first dFrame

baseAll = new DFrame([0, 0, 100, 100], 'application.html', dFrameStyle);

baseAll.addButton('Insert a page', 'insertPageInLeftFrame()');

baseAll.addText([50,50], 'Insert a page,<br>create dFrames by clicking on links.<br>Close and re-open them to test the DFrame collector' )

baseAll.show()

}

function insertPageInLeftFrame() {

//Use the global dFrameLeft variable to keep a handle on the left DFrame

if (!dFrameLeft) {

dFrameLeft = new DFrame([0, 0, 30, 100], 'leftPage.html', dFrameStyle, baseAll);

dFrameLeft.setContentBgColor(false)

dFrameLeft.setTarget('openRightPage()')

dFrameLeft.setMultipleTarget(true)

}

dFrameLeft.setURL('./application/leftPage.html')

}

function openRightPage() {

//Use the DFrameCollector object to reuse closed DFrames

//1 - define a key for this kind of dFrame

var key = 'keyForRightDFrame'

//2 - look for a dFrame with this key in the DFrameCollector

var dFrame = DFrameCollector.find(key)

//3 - if not found: create a new dFrame

if ( !dFrame ) {

alert('create a new DFrame.')

dFrame = new DFrame([40, 10, 70, 40], 'Right Frame', dFrameStyle, baseAll);

//Special style methods so that dFrames are cascaded

dFrame.setContentBgColor(false)

dFrame.setIndentX(60)

dFrame.setIndentY(60)

dFrame.addButton('Close', 'thisDframe.closeFrame()')

//register the dFrame in the DFrameCollector for reuse

DFrameCollector.register(dFrame, key)

} else {

//4 - Use the found dFrame

alert('found a DFrame in DFrameCollector and reuse it.')

}

return dFrame

}

</script>

</HEAD>

</HTML>

leftPage.html

<HTML>

<HEAD>

<script>

function onLoadDFrame(){thisDFrame.setContentBgColor('yellow')}

</script>

</HEAD>

<BODY BGCOLOR=YELLOW>

<br><br>

<a href = "rightPage1.html"> link for right page, blue</a>

<br><br>

<a href = "rightPage2.html"> link for right page, green</a>

</BODY>

rightPage1.html

<HTML>

<HEAD>

<script>

function onLoadDFrame(){thisDFrame.setContentBgColor('blue')}

</script>

</HEAD>

<BODY>

<br>

</BODY>

rightPage2.html

<HTML>

<HEAD>

<script>

function onLoadDFrame(){thisDFrame.setContentBgColor('green')}

</script>

</HEAD>

<BODY>

<br>

</BODY>