Web/Markup-Behind

From J Wiki
< Web
Jump to navigation Jump to search

Markup-Behind model is a mechanism for separating the programming logic and presentation in a web application.

Web request is processed by a combination of two types of pieces: the code piece which provides programmatic, navigational and business logic; and the markup piece which provides presentation output.

As opposed to Code-Behind model, where the target of navigation is the markup piece, in Markup-Behind the target is the code piece.

There are three distinctive properties of Code-Behind:

  • post-rendering where markup always rendered after code has processed the request
  • state reuse where properties obtained in code are available in markup substitution, as opposed to transfer which creates a separate context
  • markup preservation where markup is closely resembles static HTML, directly editable by design applications

Markup-Behind model allows for more possibilities in processing server requests, such as

  • alternative markups depending on state (secure logged in view vs public view)
  • separate screens based on processing results (separate error page)
  • encapsulate navigation logic
  • better code re-use by combining processing for several views in one code piece

Because the code piece has all the programmatic versatality, it is possible to load different additional code components depending on events, processing and state, in addition to rendering different markups.

Because the code piece is the target of navigation and also a web handler, its granularity can range from a single hub handler (such as Wiki) to separate targets for different URLs as in traditional one code piece per markup approach.

Examples

For live example, see Grouped Params screen in the JHP demo.

For a more detailed/extensive login example see User Login.


In-line code would look like this

test.jhp

<% ContentType 'text/html' %>
<html><body>
<%
  UserId=: qcookie 'UserID'
  LoggedIn=: 0<#UserId
%>
<div> Test App </div>
<% if. LoggedIn do. %>
  <p>Hello, <span><%=UserId%></span></p>
<% else. %>
  <p>User: <input name=UserId></p>
  <p>Password: <input type=password name=Password></p>
  <p><input type=submit></p>
<% end. %>
<div> Copyright </div>
</body></html>

Code-Behind code would look like this

test.jhp

<% ContentType 'text/html' %>
<html><body>
<% load 'test.ijs' %>
<div> Test App </div>
<% if. LoggedIn do. %>
  <p>Hello, <span><%=UserId%></span></p>
<% else. %>
  <p>User: <input name=UserId></p>
  <p>Password: <input type=password name=Password></p>
  <p><input type=submit></p>
<% end. %>
<div> Copyright </div>
</body></html>

test.ijs

  UserId=: qcookie 'UserID'
  LoggedIn=: 0<#UserId

Markup-Behind code would look like this

test.jhp

<% ContentType 'text/html'
UserId=: qcookie 'UserID'
LoggedIn=: 0<#UserId
if. LoggedIn do. markup '~CGI/test.html'
           else. markup '~CGI/login.html' end. %>

test.html

<html><body>
<div> Test App </div>
  <p>Hello, <span><%=UserId%></span></p>
<div> Copyright </div>
</body></html>

login.html

<html><body>
<div> Test App </div>
  <p>User: <input name=UserId></p>
  <p>Password: <input type=password name=Password></p>
  <p><input type=submit></p>
<div> Copyright </div>
</body></html>

History

Ric Sherlock made initial proposal to separate business logic and presentation for JHP markup engine by putting the code piece first, and invoking markup processing as a separate step, which made possible post-rendering, state-reuse and markup preservation. Oleg Kobchenko recognized the distinctive features of this approach, identified "Markup-Behind" as a separate procesing model and participated in implementing the support for it in JHP.

See Also