Web server mode

In web server mode we bases all common code in the "demotempl" template. This holds all common libraries and menus used in the demo web server application. The structure is basic HTML5 where we load Bootstrap and jQuery. There are a few points to note:

  1. We use charset="utf-8" in head due to all date returned from server is converted to this regardless of the internal format
  2. We have a title with a LiveText tag [{page.Name}] that will show the Name field from WebServer table in the tab name.
  3. We load some code to make support for IE< 9 somewhat better by simulating some HTML5 in those browsers. If you do not need that, you can remove this code.
  4. We load a custom CSS named deserver.css that can be found in the static folder for the app. This holds colors, fonts and look found in the blog example of Bootstrap. This is why the classes are called blog-something
  5. We have the main menu that you will find in all our templates for the top menu of the page in section with class "blog-masthead"
  6. The template have a bootstrap containers with some explanation of the demo
  7. a container with a menu for the app where the url for the different other pages can be found
  8. The main container with a row containing the body section used to make the insertion point for the page with the section tag [%body%]
  9. A small footer styled like the blog example
  10. The bootstrap javscript loading
  11. Our custom javascript that will activate all the server custom loading and form handling in the form of a deconnect object created from the DataEaseConnect library loaded from the file "/deserver/dataeaseconnect.js" library. A version of this library comes with the DataEase server. You can also find a version of this library in the demo app that might be a little different form the one that comes with the server. The one that comes with the server is considered the last stable one. The one in the demo might have new features in development.
  12. A javascript to determine what tab in the sub menu that should be active. The little script used the url to determine the tab to be active. It works by checking the second part of the url for starting on orders or posting and then selecting the order or postings tab as active and if not select the first tab. This means that all urls for orders and postings must start on /demo/orders or /demo/postings.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>[{page.Name}]</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
     <!-- Custom styles for this template -->
    <link href="/deserver.css" rel="stylesheet">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="/deserver/dataeaseconnect.js"></script>
  </head>
  <body>
    <div class="blog-masthead">
      <div class="container">
        <nav class="blog-nav">
          <a class="blog-nav-item" href="/">Home</a>
          <a class="blog-nav-item active" href="/demo/listaddr/">Demo</a>
          <a class="blog-nav-item" href="/demoapp/">Demo app</a>
          <a class="blog-nav-item" target="_blank" href="http://dg3books.dataease.com/viewbook/?BookPrefix=deserverdev">Documentation</a>
          <a class="blog-nav-item" target="_blank" href="http://www.dataease.com/forum/">Help</a>
          <a class="blog-nav-item" href="/cmd/quit/">Stop server</a>
          <a class="blog-nav-item" href="/cmd/openapp/">Open in DataEase</a>
          <a class="blog-nav-item" target="_blank" href="http://www.dataease.com">To DataEase.com</a>
        </nav>
      </div>
    </div>
    <div class="container">
    <div class="col-sm-12">
        <h1>The demo</h1>
        <p>This demo works like a traditional web soulution. Every page is loaded and generated in seperate url. Each url uses a common template and then just add the rest in separate pages.This template can be found by <a href="/cmd/openapp/">opening the application in DfW</a> and look at ELM00008 in WebServer.</p>
        <hr>
    </div>
    </div>
    <div class="container">
    <div class="row">
    <ul class="nav nav-tabs nav-justified">
    <li role="presentation" class="active"><a href="/demo/listaddr/">Demo</a></li>
    <li role="presentation"><a href="/demo/orderstart/">Orders</a></li>
    <li role="presentation"><a href="/demo/postingstart/">Postings</a></li>
    </ul>
    </div>
    </div>
    <div class="container">
    <div class="row">
[%body%]
    </div>
    </div>
    <footer class="blog-footer">
      <p>A small start helper written for <a href="http://www.dataease.com">DataEase LTD</a>.</p>
      <p>
        <a href="#">Back to top</a>
      </p>
    </footer>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
var deconnect = new DataEaseConnect();
// set the correct tab in sub menu
var parr = location.pathname.split('/');
if (parr.length > 2)
{
    $('#submenu').children().removeClass('active');
    if (parr[2].substring(0,5)=='order')
        $('#submenu li').eq(1).addClass('active'); // set Orders tab as active
    else if (parr[2].substring(0,7)=='posting')
        $('#submenu li').eq(2).addClass('active'); // set Postings tab as active
    else
        $('#submenu li').eq(0).addClass('active'); // set first tab as active
}
</script>
  </body>
</html>

You will find a similar structure to this in most DataEase server templates.