Web framework topics:

UnitConverter HTML UI

Here is the .schtml template for the unitConverter examples UI:

file: example/unitConverter/html/core/UnitConverter.schtml 
<%@ @URL(pattern="/uc") %>
<html extends="EditablePage">
<head>
	<title>UnitConverter on StrataCode</title>
	<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
   <div id="appFrame" class="appFrame">
      <form id="unitConverterForm">
         <select id="converterChoice" 
               optionDataSource=":= converters" 
               selectedIndex=":=: currentConverterIndex"/>
         <br>
         <span id="unit1Label" class="unitLabel">
              <%= currentConverter.unit1 %>
          </span>
         <input id="unit1Field" class="unitField" autoComplete="off"
                value=":=: numberConverter.numberToString(currentConverter.value1)"/>
         <br>
         <span id="unit2Label" class="unitLabel">
             <%= currentConverter.unit2 %>
          </span>
         <input id="unit2Field" class="unitField" autoComplete="off"
                value=":=: numberConverter.numberToString(currentConverter.value2)"
           />
      </form>

      <div id="feedback"><%= numberConverter.error %></div>
   </div>

</body>
</html>

It uses the same model and coreui layers as the other frameworks it supports. It binds UI elements to properties like 'converters' and 'currentConverterIndex' defined in the those layers.

The first line applies the @URL annotation to set a shortcut URL (overridding the default which uses the template file name).

To run the clientServer version of the unit converter:

scc -v -vs example/unitConverter/html/clientServer

To run the server only version:

scc -v -vs example/unitConverter/html/server

The unitConverter sample also runs in the browser only, without a server:

scc -v example/unitConverter/html/clientOnly

Choosing the app's runtime

The layer js.schtml defines the javascript runtime and the jetty.schtml defines the java_Server process. By including one or both layers, the app uses one or both runtime/processes.

For a UI layer, unless it depends on server only or browser only features, it can extend the base layer html.schtml to permit either mode of operation.

Here's the base layer for unitConverter which supports any of the three modes of operation:

file: example/unitConverter/html/core/core.sc 
package sc.example.unitConverter;

// Core layer defines html specific UI 
example.unitConverter.html.core extends example.unitConverter.coreui, html.schtml {
   codeType = sc.layer.CodeType.UI;
}

Here's the layer to run for client/server mode:

file: example/unitConverter/html/clientServer/clientServer.sc 
package sc.example.unitConverter;

// Use this as the JS prefix for classes instead of "sc_example_unitConverter"
@sc.js.JSSettings(prefixAlias="scex_")
// Runs two separate applications the server (jetty.shtml) 
// and the browser (js.schtml) with synchronization between the
// two enabled (js.sync).
example.unitConverter.html.clientServer extends example.unitConverter.html.core, jetty.schtml, js.schtml, js.sync {
   codeType = sc.layer.CodeType.Application;
}
or run the server only layer:
file: example/unitConverter/html/server/server.sc 
example.unitConverter.html.server extends example.unitConverter.html.core, jetty.schtml {}
or run the client-only layer:
file: example/unitConverter/html/clientOnly/clientOnly.sc 
// Client only version of the unitConverter example, using a 
// relative path name to example.unitConverter.html.core.
public example.unitConverter.html.clientOnly extends core, js.schtml {
}

Specify the layers as command line args to scc by passing layers like clientServer that only specify dependencies on other layers. For example, another way to run the clientServer version:

scc example/unitConverter/html/core js/schtml jetty/schtml js/sync