Simple Example

Example code for a very simple alt-seven application.
Tags:
Categories:

This page shows code for a very simple alt-seven application.

index.html

<!doctype html>
<html>
<head>
	<title>alt-7 example</title>
	<script type="module">
		import {application} from './app.js';
		var app = application();
	</script>
</head>
<body>
	<div name="main">
	
	</div>
</body>
</html>

app.js

import {a7} from '/dist/a7.js';

var app = {
  main: (function() {
    return {
      init: function(state) {

        // render the hello page
        app.components.Hello( { id: 'hello', selector: "div[name='main']" } );

      }
    };
  })(),
  components: (function() {

    function Hello(props) {
      var hello = a7.components.Constructor(a7.components.View, [props], true);

      hello.state = {
        text: " World!"
      };

      hello.template = function(){
        return `<h3>Hello ${hello.state.text}</h3>`;
      };

      return hello;
    }

    return {
      Hello: Hello
    };

  })()
};

export var application = function init() {

  var options = {};

  var p = new Promise(function(resolve, reject) {
    a7.init(options, resolve, reject);
  });
  p.then(function(state) {
	app.main.init();
    a7.log.info("App init.");
  });
  p['catch'](function(message) {
    console.log(message);
  });

  return app;
};

Last modified February 2, 2024: alt-seven docs WIP (4050f35)