Commits

Stephen McKamey  committed 2f50f8c

- updating docs

  • Participants
  • Parent commits a5eb06e

Comments (0)

Files changed (4)

File Examples.wiki

-= DUEL Example Views =
+= DUEL Examples =
 
 === Example View ===
 
 
 	<else if="model.items.length === 1">
 		<p class="item">
-			<b><%= model[0].name %>: </b><i><%= model[0].detail %></i>
+			<b><%= model[0].name %></b> is <i><%= model[0].detail %></i>
 		</p>
 
 	<else>
 		<ul><for each="model.items">
 			<li class="item">
-				<b><%= model.name %>: </b><i><%= model.detail %></i>
+				<b><%= model.name %></b> is <i><%= model.detail %></i>
 			</li>
 		</for></ul>
 	</if>
 
 	<ul>
 		<li class="item">
-			<b>One: </b><i>101</i>
+			<b>One</b> is <i>101</i>
 		</li>
 		<li class="item">
-			<b>Two: </b><i>2.718</i>
+			<b>Two</b> is <i>2.718</i>
 		</li>
 	</ul>
 </div>
-= [[http://duelengine.org|DUEL: The 'V' in MVC]] =
+= [[http://duelengine.org|{{duel.png|DUEL}}]]\\\\//The � V � in MVC...// =
 
-DUEL is a [[http://ajaxpatterns.org/Dual-Side_Templating|dual-side templating]] engine using HTML for layout and pure JavaScript as the binding language. Views may be executed both directly in the browser (client-side template) or on the server (server-side template).
+DUEL is a **[[http://ajaxpatterns.org/Dual-Side_Templating|dual-side templating]] engine** using **HTML for layout** and **100% pure JavaScript as the binding language**. The same views may be executed //both// directly in the browser (client-side template) //and// on the server (server-side template).
 
-=== [[Syntax|Syntax]] ===
+The goal of DUEL is to leverage knowledge in existing technologies to build UI for Ajax web applications. Modern apps require a fluid UI meaning an investment in JavaScript. DUEL takes this one step further by enabling JavaScript to build the entire view. Less context switching means focusing on the real problems rather than fighting the tools.
 
-The syntax for DUEL views is concise and easy to remember.
+=== //In the browser...// ===
 
-=== [[Examples|Examples]] ===
+The view becomes a JavaScript function which accepts the data to bind as an argument. Returned is a result which can be used as either a string or to produce DOM elements directly. DUEL works great with your favorite JavaScript library (e.g. jQuery).
 
-See how easy it is to define and use DUEL views.
+=== //On the server...// ===
 
-=== [[http://duelengine.org/license.txt|License]] ===
+The view is translated into a class which may be natively executed on the server without requiring a JavaScript execution environment. If any code blocks require being executed on the client they will be automatically delegated to the client. Initially, DUEL targets Java as the server language. Goals for the future include expansion into other environments as well.
 
-DUEL is licensed under the [[http://duelengine.org/license.txt|MIT license]]. Copyright (c)2006-2010 Stephen M. McKamey.
+=== //[[Syntax|Syntax]]// ===
+
+The [[Syntax|syntax for DUEL views]] is designed to be familiar, concise and easy to remember.
+
+=== //[[Examples|Examples]]// ===
+
+See [[Examples|examples of how easy it is]] to define and use DUEL views.
+
+=== //[[http://duelengine.org/license.txt|License]]// ===
+
+DUEL is licensed under the [[http://duelengine.org/license.txt|MIT license]]. Copyright �2006-2010 Stephen M. McKamey.
 
 The goal is to deliberately keep the syntax minimal. It should be easy to remember and nothing should need to be looked up during usage.
 
-== Markup ==
+== //Code Blocks// ==
 
-The //complete// set of DUEL markup is:
+DUEL code blocks contain 100% pure JavaScript, so there isn't a new language to learn. Since DUEL uses a familiar syntax for code blocks, syntax highlighting in editors is widely supported out of the box. There are three types of code blocks available:
+
+=== Statement Blocks {{{<% ... %>}}} ===
+
+When code within a statement block is executed, if any value is returned it will be emitted as part of the output.
+
+=== Expression Blocks {{{<%= ... %>}}} ===
+
+When code within an expression block is executed, the result of will be emitted as part of the output, interpretted as plain text. Expression blocks are equivalent to {{{<% return (...); %>}}}.
+
+=== Markup Expression Block {{{<%# ... %>}}} ===
+
+When code within a markup expression block is executed, the result will be emitted as part of the output, interpreted as HTML.\\**NOTE:** these blocks are rarely needed; only when data itself contains markup. Care must be taken to avoid script injection with markup blocks.
+
+== //Data Values// ==
+
+The data values available inside the JavaScript code blocks are:
+
+* {{{model}}}: contains the model data being bound to the view template
+* {{{index}}}: used within loops to indicate the index of the current item being bound
+* {{{count}}}: used within loops to indicate total number of items being bound
+
+== //Markup Commands// ==
+
+DUEL reduces potential for "tag soup" by controlling loops and conditions declaratively through a small set of special markup commands. The //complete// set of DUEL command markup is:
 
 === View declaration {{{<%@ view name="..." %>}}} ===
 
 
 Sits inside a view as a placeholder for replacement content, or within a {{{<call></call>}}} block to define the replacement content. The {{{name}}} attribute is a {{{string}}} expression specifying the name of the part to replace.
 
-== Code Blocks ==
+== //Command Arguments// ==
 
-Code blocks contain 100% pure JavaScript, so there isn't a new language to learn. There are three types of code blocks available:
-
-=== Statement Blocks {{{<% ... %>}}} ===
-
-When code within a statement block is executed, if any value is returned it will be emitted as part of the output.
-
-=== Expression Blocks {{{<%= ... %>}}} ===
-
-When code within an expression block is executed, the result of will be emitted as part of the output, interpretted as plain text. Expression blocks are equivalent to {{{<% return (...); %>}}}.
-
-=== Markup Expression Block {{{<%# ... %>}}} ===
-
-When code within a markup expression block is executed, the result will be emitted as part of the output, interpreted as HTML. NOTE: these blocks are rarely used (only when data itself contains markup).
-
-== Data Values ==
-
-The data values available inside the JavaScript code blocks are:
-
-* {{{model}}} contains the model data being bound to the view template
-* {{{index}}} used within loops to indicate the index of the current item being bound
-* {{{count}}} used within loops to indicate total number of items being bound
-
-== Markup attributes ==
-
-The attributes in each of the markup elements are implicitly code blocks. This means you can add or leave off the code block syntax based on preference:
+A shorthand syntax is available for the attributes of markup commands. The attributes in each of the markup elements are implicitly code blocks. This means you can add or leave off the code block syntax based on preference:
 
 {{{
 #!application/x-jsp

File duel.png

Added
New image