SoftwareDesign
/
csu3_am335x


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
							<html>
 <head>
  <script src="/lws-common.js"></script>
  <script src="lwsgt.js"></script>
  <style>
	.body { font-size: 12 }
	.gstitle { font-size: 24; text-align:center }
	.group1 { vertical-align:middle;text-align:center;background:#f0f0e0; 
		padding:12px; -webkit-border-radius:10px; 
		-moz-border-radius:10px;border-radius:10px; }
	.group2 { vertical-align:middle; font-size: 18;text-align:center;
		margin:auto; align:center;
		background-color: rgba(255, 255, 255, 0.8); padding:12px;
		display:inline-block; -webkit-border-radius:10px; 
		-moz-border-radius:10px; border-radius:10px; }

	.lwsgt_title { font-size: 24; text-align:center }
	.lwsgt_breadcrumbs { font-size: 18; text-align:left }
	.lwsgt_table { font-size: 14; padding:12px; margin: 12px; align:center }
	.lwsgt_hdr { font-size: 18; text-align:center;
		     background-color: rgba(40, 40, 40, 0.8); color: white }
	.lwsgt_tr { padding: 10px  }
	.lwsgt_td { padding: 3px  }
  </style>
  </head>
  <body>
	<table>
		<tr><td class="gstitle">
		 LWS Generic Table demo
		</td></tr>
		<tr><td class="group2">
		This is a demo of lws generic table, using a protocol plugin
		"protocol-lws-table-dirlisting".  It shows a directory listing,
		but unlike an oldstyle directory listing done on the
		server side with a script, this is static html that connects
		back to the server with a websocket, and gets live JSON from
		that.
		<p>
		Actually the static html is extremely simple, since it uses
		lwsgt, LWS Generic Table, JS include on the client-side that
		handles all the table generation from a template sent in JSON
		over the ws link.   It means there is no custom JS required
		clientside either.  It's just CSS, this text and a call to
		initialize lwsgt with the appropriate ws protocol.
		</td></tr>
		<tr><td><div id="lwsgt1" class="group1"></div></td></tr>
		<tr><td class="group2">
		There's no problem having multiple independent instances per
		page...
		</td></tr>
		<tr><td><div id="lwsgt2" class="group1"></div></td></tr>
	 </table>
	<div id="debug"></div>

  <script nonce="lwscaro">
	var v1 = new lwsgt_initial("Dir listing demo",
				   "protocol-lws-table-dirlisting",
				   "lwsgt1", "lwsgt_dir_click", "v1");
	var v2 = new lwsgt_initial("Dir listing 2",
				   "protocol-lws-table-dirlisting",
				   "lwsgt2", "lwsgt_dir_click", "v2");
	
function lwsgt_dir_click(gt, u, col, row)
{
	if (u[0] == '=') { /* change directory */
		window[gt].lwsgt_ws.send(u.substring(1, u.length));
		return;
	}
	var win = window.open(u, '_blank');
  	win.focus();
}

  </script>
 </body>
</html>