[Catalyst] Best Practices - an application.

Tue Sep 19 06:05:02 CEST 2006

mnichols at mojosoft.org writes:

Last night I stumbled across a dojo widget that allows a dialog popup
to show up called Dialog.  I think I'll post my two relevant files
./root/static/javascript/dmu.js and ./root/servers.tt in their current
form.  This seems to fit the bill pretty well, so I'm going to use
it. This results in a "popup" dialog that will allow me to fill out
the required information to define a system.  I'm cleaning it up and
wiring in real ajax calls, and then I'll post.  I thought this dialog
was really nice and will fit the bill for a lot of interaction on web
pages. 

Thanks,

mojo

dmu.js

//
// dmu javascript functions etc.
//

// Load event to connect an event to the widget below
dojo.require("dojo.io.*");
dojo.require("dojo.event.*");
// Load Dojo's code relating to widget managing functions
dojo.require("dojo.widget.*");
//Load dialog;
dojo.require("dojo.widget.Dialog");
// Load Dojo's code relating to the Button widget
dojo.require("dojo.widget.Button");

function SubmitServerPressed() 
{

   alert("HELLOW WORLD ");
   dojo.io.bind({
     url: 'http://localhost:3000/servers/add_server',
        handler: addServerCallback,
        content: {name: "WHAT" }
     });
}

function AddServerPressed() 
{

   alert("HELLOW WORLD ");
   var server = dojo.widget.byId("ServerName");
   server.show();

}

function addServerCallback(type, data, evt)
{
  if (type == 'error')
    alert('Error when retrieving data from the server!');
  else
    alert(data);
}

function init()
{

 dlg = dojo.widget.byId("ServerName");
 var btn = document.getElementById("hider");
 dlg.setCloseControl(btn); 
 var link = dojo.widget.byId("AddServerButton");
 alert("init ");
 dojo.event.connect(link, "onClick", 'AddServerPressed');
 alert("init ");

}

dojo.addOnLoad(init);

and servers.tt

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <title>[%info.title%]</title>
  <meta name="GENERATOR" content="Quanta Plus">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  [% PROCESS style.tt %]

  <script language="javascript" type="text/javascript">
  // <!--

  // -->
  </script>
</head>
<body>
<script type="text/javascript" src="/static/dojo/dojo.js"></script>
<script type="text/javascript" src="/static/javascript/dmu.js"></script>
<div id="content">
<div id="answers">
<div id="tabs">
</div>
   [% IF c.stash.message %]
    <p> [% c.stash.message %]</p>
   [% END %]

<form name="myform" id="myform" action="[% c.req.uri%]" method="post" >
        <table>
        [% WHILE (systems = c.stash.servers.next) %]
        <tr><td>[%systems.db_server%]</td><td></tr>
        [%END%]
</table>
<div> <button dojoType="Button" widgetId="AddServerButton">New Server</button> </div>
<a href="javascript:dlg.show()">Show</a>

<div dojoType="dialog" id="ServerName" bgColor="white" bgOpacity="0.5" toggle="fade" toggleDuration="250">
	<form onsubmit="return false;">
		<table>
			<tr>
				<td>Name:</td>
				<td><input type="text"></td>
			</tr>
			<tr>
				<td>Location:</td>
				<td><input type="text"></td>
			</tr>
			<tr>
				<td>Description:</td>
				<td><input type="text"></td>
			</tr>
			<tr>
				<td>Location:</td>
				<td><input type="file"></td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<input type="button" id="hider" value="OK"></td>
			</tr>
		</table>
	</form>
</div>

</form>

</div>

</div>

</body>
</html>