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>