247 lines
12 KiB
HTML
247 lines
12 KiB
HTML
<!-- BeginDsi "dsi/head.html" -->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Embedthis Appweb 4.3.4 Documentation</title>
|
|
<meta name="keywords" content="embedded web server, web server software, embedded HTTP, application web server,
|
|
embedded server, small web server, HTTP server, library web server, library HTTP, HTTP library" />
|
|
<meta name="description" content="Embedthis Sofware provides commercial and open source embedded web servers for
|
|
devices and applications." />
|
|
<meta name="robots" content="index,follow" />
|
|
<link href="../../../doc.css" rel="stylesheet" type="text/css" />
|
|
<link href="../../../print.css" rel="stylesheet" type="text/css" media="print"/>
|
|
<!--[if IE]>
|
|
<link href="../../../iehacks.css" rel="stylesheet" type="text/css" />
|
|
<![endif]-->
|
|
<link href="http://www.google.com/cse/style/look/default.css" type="text/css" rel="stylesheet" />
|
|
</head>
|
|
|
|
<body>
|
|
<div class="top">
|
|
<a class="logo" href="http://appwebserver.org/"> </a>
|
|
<div class="topRight">
|
|
<div class="search">
|
|
<div id="cse-search-form"></div>
|
|
<div class="version">Embedthis Appweb 4.3.4</div>
|
|
</div>
|
|
</div>
|
|
<div class="crumbs">
|
|
<a href="../../../index.html">Home</a>
|
|
<!-- EndDsi -->
|
|
><a href="index.html">ESP Guide</a>> <b>HTML View Controls</b>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<div class="contentRight">
|
|
<h2>Quick Nav</h2>
|
|
<ul class="nav">
|
|
<li><a href="#interface">ViewConnector Interface</a></li>
|
|
<li><a href="#libraries">Ajax Libraries</a></li>
|
|
<li><a href="#dynamic">Dynamic Controls</a></li>
|
|
<li><a href="#viewConnector">ViewConnector Methods</a></li>
|
|
</ul>
|
|
<!-- BeginDsi "dsi/espSeeAlso.html" -->
|
|
<h1>See Also</h1>
|
|
<ul class="nav">
|
|
<li><a href="../../../guide/esp/users/using.html">ESP Overview</a></li>
|
|
<li><a href="../../../guide/esp/users/tour.html">ESP Tour</a></li>
|
|
<li><a href="../../../guide/esp/users/template.html">Templates and Layouts</a></li>
|
|
<li><a href="../../../guide/esp/users/controls.html">HTML Controls</a></li>
|
|
<li><a href="../../../guide/esp/users/config.html">ESP Configuration Directives</a></li>
|
|
<li><a href="../../../guide/esp/users/mvc.html">Model-View-Controller</a></li>
|
|
<li><a href="../../../guide/esp/users/generator.html">Application Generator</a></li>
|
|
<li><a href="../../../guide/esp/users/controllers.html">Controllers and Actions</a></li>
|
|
<li><a href="../../../guide/esp/users/database.html">Database Interface</a></li>
|
|
<li><a href="../../../guide/appweb/users/caching.html">Caching Responses</a></li>
|
|
</ul>
|
|
<!-- EndDsi -->
|
|
</div>
|
|
<div class="contentLeft">
|
|
<h1>HTML Controls</h1>
|
|
<p>Web applications split their processing between the server and the client. Increasingly, more processing
|
|
is being done at the client to give a better user experience. <a href=
|
|
"http://en.wikipedia.org/wiki/Ajax_(programming)">Ajax</a> programming has risen as one of the more popular
|
|
means of achieving responsive client user interfaces and a wide variety of <a href=
|
|
"http://en.wikipedia.org/wiki/Ajax_framework">Ajax Frameworks</a> have been developed.</p>
|
|
<p>Ajax translates as "Asynchronous JavaScript and XML", but what it typically means is doing background
|
|
HTTP requests to get data and update the user interface without doing a complete browser refresh. This
|
|
gives a more immediate and natural feel to a web application. ESP supports Ajax and Ajax frameworks
|
|
via its ViewConnector which provides a pluggable interface for Ajax libraries.</p><a id="interface"></a>
|
|
<h2>ViewConnector Interface</h2>
|
|
<p>The ViewConnector interface defines methods for common user interface controls such as: button and
|
|
checkbox, but it also provides high level controls such as chart and table. Application <a href=
|
|
"views.html">Views</a> can use these methods to render UI components with very little code or effort.</p>
|
|
<p>However the ViewConnector is just an interface. It contains no implementation. The actual implementation
|
|
is provided by the Ajax Framework libraries.</p><img src="../../../images/viewConnector.jpg" alt="" />
|
|
<a id="libraries"></a>
|
|
<h3>Ajax Libraries</h3>
|
|
<p>The purpose of the ViewConnector is to provide a modular way to add Ajax Framework libraries and to give
|
|
you choice which library you use. Individual ESP Views can select different libraries for each view
|
|
control in the web pages.</p>
|
|
<p>Each Ajax Framework offers a different set of capabilities and restrictions. However, these differences
|
|
impact mostly on the client side which is outside the scope of the View Connector Interface. The
|
|
ViewConnector adaptors transform the interface for the server-side of each Ajax library to be compatible
|
|
with the View Connector Interace.</p>
|
|
<p>ESP currently supports the ESP Ajax library and portions of the Google Visualization library.
|
|
Support for other frameworks will be available soon in future releases.</p><a id="dynamic"></a>
|
|
<h3>Dynamic Controls</h3>
|
|
<p>The View Control Interface is designed to support controls that can dynamically retrieve data from
|
|
databases and refresh their contents automatically.</p>
|
|
<p>Here is an example of a table configured to display stock market data in a grid with the current price
|
|
for each stock. The grid will refresh its data every 2 seconds without updating the entire web page.</p>
|
|
<pre>
|
|
<%
|
|
table(Stock.findAll(), {
|
|
refresh: 2,
|
|
click: "edit",
|
|
columns: {
|
|
ticker: { },
|
|
stockName: { },
|
|
price: { render: currency("$$%,d") },
|
|
},
|
|
connector: "google",
|
|
width: "80%",
|
|
}) %>
|
|
</pre><!-- TODO more on charts and tables
|
|
<h2 class="section">Table Control</h2>
|
|
<h2 class="section">Chart Control</h2>
|
|
-->
|
|
<a id="viewConnector"></a>
|
|
<h2>ViewConnector Methods</h2>
|
|
<p>The ViewConnector interface defines the following methods:</p>
|
|
<table summary="">
|
|
<thead>
|
|
<tr>
|
|
<td>Name</td>
|
|
<td>Description</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>aform</td>
|
|
<td>Render an async (ajax) form</td>
|
|
</tr>
|
|
<tr>
|
|
<td>alink</td>
|
|
<td>Render an async (ajax) link</td>
|
|
</tr>
|
|
<tr>
|
|
<td>button</td>
|
|
<td>Render a form button</td>
|
|
</tr>
|
|
<tr>
|
|
<td>buttonLink</td>
|
|
<td>Render a link button</td>
|
|
</tr>
|
|
<tr>
|
|
<td>chart</td>
|
|
<td>Render a graphical chart</td>
|
|
</tr>
|
|
<tr>
|
|
<td>checkbox</td>
|
|
<td>Render an input checkbox</td>
|
|
</tr>
|
|
<tr>
|
|
<td>extlink</td>
|
|
<td>Render an external link</td>
|
|
</tr>
|
|
<tr>
|
|
<td>image</td>
|
|
<td>Render an image</td>
|
|
</tr>
|
|
<tr>
|
|
<td>input</td>
|
|
<td>Smart input control. Delegates depending on the data type.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>label</td>
|
|
<td>Render a text label</td>
|
|
</tr>
|
|
<tr>
|
|
<td>link</td>
|
|
<td>Render an internal link</td>
|
|
</tr>
|
|
<tr>
|
|
<td>list</td>
|
|
<td>Render a selection list (drop-down)</td>
|
|
</tr>
|
|
<tr>
|
|
<td>mail</td>
|
|
<td>Render a mail link</td>
|
|
</tr>
|
|
<tr>
|
|
<td>progress</td>
|
|
<td>Render a progress bar</td>
|
|
</tr>
|
|
<tr>
|
|
<td>radio</td>
|
|
<td>Render an input radio button</td>
|
|
</tr>
|
|
<tr>
|
|
<td>status</td>
|
|
<td>Render a status control area</td>
|
|
</tr>
|
|
<tr>
|
|
<td>script</td>
|
|
<td>Render a script tag</td>
|
|
</tr>
|
|
<tr>
|
|
<td>stylesheet</td>
|
|
<td>Render a stylesheet tag</td>
|
|
</tr>
|
|
<tr>
|
|
<td>table</td>
|
|
<td>Render a table</td>
|
|
</tr>
|
|
<tr>
|
|
<td>tabs</td>
|
|
<td>Render a tab selection control</td>
|
|
</tr>
|
|
<tr>
|
|
<td>text</td>
|
|
<td>Render an input text field</td>
|
|
</tr>
|
|
<tr>
|
|
<td>textarea</td>
|
|
<td>Render an input textarea field</td>
|
|
</tr>
|
|
<tr>
|
|
<td>tree</td>
|
|
<td>Render a tree control</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<!-- BeginDsi "dsi/bottom.html" -->
|
|
<div class="bottom">
|
|
<p class="footnote">
|
|
<a href="../../../product/copyright.html" >© Embedthis Software LLC, 2003-2013.
|
|
All rights reserved. Embedthis, Appweb, ESP, Ejscript and Embedthis GoAhead are trademarks of Embedthis Software LLC.</a>
|
|
</p>
|
|
</div>
|
|
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
|
|
<script type="text/javascript">
|
|
google.load('search', '1', {language : 'en'});
|
|
google.setOnLoadCallback(function() {
|
|
var customSearchControl = new google.search.CustomSearchControl(
|
|
'000262706376373952077:1hs0lhenihk');
|
|
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
|
|
var options = new google.search.DrawOptions();
|
|
options.enableSearchboxOnly("http://appwebserver.org/search.html");
|
|
customSearchControl.draw('cse-search-form', options);
|
|
}, true);
|
|
</script>
|
|
<script type="text/javascript">
|
|
var _gaq = _gaq || [];
|
|
_gaq.push(['_setAccount', 'UA-179169-2']);
|
|
_gaq.push(['_trackPageview']);
|
|
(function() {
|
|
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
|
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
|
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|