http://dynapi.sourceforge.net/ GNU LESSER GENERAL PUBLIC LICENSE Version 2.1, February 1999
<html> <head> <title>DynAPI Examples - Template Manager</title> <script language="JavaScript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript"> dynapi.library.setPath('./dynapisrc/'); dynapi.library.include('dynapi.api'); dynapi.library.include('TemplateManager'); dynapi.library.include('HTMLCalendar'); dynapi.library.include('HTMLRollover'); dynapi.library.include('HTMLClock'); dynapi.library.include('HTMLMenu'); </script> <script language="Javascript"> // HTML code/templates var template1='<table cellSpacing=0 cellPadding=0 width=340 border=0>n <tr>n <td width=10><img src="./dynapiexamples/images/edge.tplt.gif" border=0 width="10" height="10" /></td>n <td width=320 background="./dynapiexamples/images/edge.tp.gif"><img height=10 src="./dynapiexamples/images/pixel.gif" width=1 border=0 /></td>n <td width=10><img height=10 src="./dynapiexamples/images/edge.tprt.gif" width="10" border="0" /></td>n </tr>n <tr>n <td width=10 background="./dynapiexamples/images/edge.lt.gif"><img height=1 src="./dynapiexamples/images/pixel.gif" width=10 border=0></td>n <td vAlign=top width=320 bgColor=#f5f5f5>n <table cellSpacing=0 cellPadding=4 width="100%" border=0>n <tr>n <td noWrap align=center bgcolor="#FFFFFF" width="100%">n <table border="0" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0">n <tr>n <td width="100%">n <img border=0 src="./dynapiexamples/images/htmlcomponents.gif" width="285" height="42"></td>n </tr>n <tr>n <td width="100%" bgcolor="003366">n {@hmenu}n </td>n </tr>n <tr>n <td width="100%">n <table border="0" cellpadding="4" style="border-collapse: collapse" bordercolor="#111111" id="AutoNumber1" cellspacing="3">n <tr>n <td valign="top">n <table border="0" cellpadding="2" cellspacing="1" style="border-collapse: collapse" bordercolor="#111111" width="103" id="AutoNumber2">n <tr>n <td width="93" align="center">{@hbtn1}</td>n </tr>n <tr>n <td width="93" align="center">{@hbtn2}</td>n </tr>n <tr>n <td width="93" align="center"><br>n {@hclk}</td>n </tr>n </table>n </td>n <td valign="top">{@hcal}</td>n </tr>n </table>n </td>n </tr>n <tr>n <td width="100%" align="right">{@lyr1}</td>n </tr>n <tr>n <td width="100%" align="center" style="border-top: 1px solid #000000" bgcolor="#F5F5F5"><b>n <font face="Arial, Helvetica, sans-serif" size="2" color="#800000">DynAPI</font></b><font color=#333333 n face="Arial, Helvetica, sans-serif" size=2> | {@hlink}</font></td>n </tr>n </table> n </td>n </tr>n </table>n </td>n <td width=10 background="./dynapiexamples/images/edge.rt.gif"><img height=1 src="./dynapiexamples/images/pixel.gif" width=10 border=0></td>n </tr>n <tr>n <td width=10><img height=10 src="./dynapiexamples/images/edge.bmlt.gif" width=10 border=0></td>n <td width=320 background="./dynapiexamples/images/edge.bm.gif"><img height=10 src="./dynapiexamples/images/pixel.gif" width=1 border=0></td>n <td width=10><img height=10 src="./dynapiexamples/images/edge.bmrt.gif" width=10 border=0></td>n </tr>n</table>';
var tp = new Template(template1,150,40,400,360);
var imgPath = "./dynapiexamples/images/";; var btn_home = imgPath+"btn_home_"; var btn_contact = imgPath+"btn_contact_"; var btnE = { onclick:function(e){ alert("Hello from "+e.getSource()._tmplFld) } };
// HTMLMenu var mbar; tp.addChild(new HTMLMenu(),'hmenu'); // Main Menu mbar= tp.hmenu.createMenuBar('main',40,20); mbar.addItem(null,'File','file'); mbar.addItem(null,'Edit','edit'); mbar.addItem(null,'View','view'); mbar.addItem(null,'Tools','tools'); mbar.addItem(null,'Help','help'); //File menu mbar = tp.hmenu.createMenuBar('file',130); mbar.addItem(null,'New'); mbar.addItem(null,'Open',null,'alert("Open files")',null,null,'navy','red'); mbar.addItem(null,'Save'); mbar.addItem(null,'Save As ...'); mbar.addItem(null,'Recent Files','recent'); mbar.addItem(null,'Exit'); //Recent menu mbar = tp.hmenu.createMenuBar('recent',120); mbar.addItem(null,'Dynapi.js'); mbar.addItem(null,'Quickref.html'); mbar.addItem(null,'Changelog.html'); mbar.addItem(null,'Index.html'); //edit menu mbar = tp.hmenu.createMenuBar('edit',120); mbar.addItem(null,'Undo'); mbar.addItem(null,'Cut'); mbar.addItem(null,'Copy'); mbar.addItem(null,'Paste'); //view menu mbar = tp.hmenu.createMenuBar('view',130); mbar.addItem(null,'Go'); mbar.addItem(null,'Stop'); mbar.addItem(null,'Toolbars','tbar'); mbar.addItem(null,'Status Bar'); // tbar mbar = tp.hmenu.createMenuBar('tbar',120); mbar.addItem(null,'Header'); mbar.addItem(null,'Footer'); mbar.addItem(null,'Standard'); mbar.addItem(null,'Drawing'); //tools menu mbar = tp.hmenu.createMenuBar('tools',120); mbar.addItem(null,'Options'); mbar.addItem(null,'Macro'); mbar.addItem(null,'Convert...'); mbar.addItem(null,'Run...');
//HTMLRollovers tp.addChild(new HTMLRollover(null,85,29,btn_home+'off.gif',btn_home+'on.gif'),'hbtn1'); tp.addChild(new HTMLRollover(null,85,29,btn_contact+'off.gif',btn_contact+'on.gif'),'hbtn2'); tp.hbtn1.addEventListener(btnE); tp.hbtn2.addEventListener(btnE);
//HTMLHyperLink tp.addChild(new HTMLHyperLink(null,'Click Here','http://dynapi.sf.net'),'hlink'); tp.hlink.startFlash('blue','black') tp.hlink.addEventListener({ onclick:function(e){ var o=e.getSource(); alert("A link to DynAPI's website") // o.allowEvent(); // By default HyperLink events are canceled (return false) } });
//HTMLClock tp.addChild(new HTMLClock(),'hclk');
// HTML Calender hc = tp.addChild(new HTMLCalendar(),'hcal'); // modify colors hc.borCol = '#000000'; hc.titleBgCol ='maroon'; hc.titleFgCol ='white'; hc.wkDayBgCol ='beige'; hc.selBorCol = '#CCCCCC'; hc.selBgCol = '#DEDEFF'; hc.selTDayBgCol = 'beige'; hc.addEventListener({ onchange:function(e){ var o=e.getSource(); var l=o.parent.lyr1; if(l) { var dt = o.getDate(); dt=(!dt)? '':(dt.getMonth()+1)+'/'+dt.getDate()+'/'+dt.getFullYear(); o.parent.lyr1.setHTML('<font face="arial" size="2">Date is '+dt+'</font>'); } } });
//DynLayer tp.addChild(new DynLayer(null,0,0,200,20),'lyr1');
dynapi.document.addChild(tp);
</script></head>
<body> <script> dynapi.document.insertAllChildren(); </script> </body> </html>
|