The Hello, World! application

Here is a preview of the famous "Hello, World!" program made with the Atlas toolkit:

Hello World! preview

Like all "Hello, World!" applications, this one focuses on the basics too. For a live demonstration: http://q37.info/runkit/Hello.

Below the source code of this application for the different available languages.

Note that some HTML code is embedded in the source code for practical reasons. It would be a better practice to put it in a dedicated file.

Java source code

import info.q37.atlas.*;

class Hello extends Atlas {
 private static String body =
  "<div style=\"display: table; margin: 50px auto auto auto;\">" +
  " <fieldset>" +
  "   <input id=\"input\" maxlength=\"20\" placeholder=\"Enter a name here\"'" +
  "          type=\"text\" data-xdh-onevent=\"Submit\"/>" +
  "   <div style=\"display: flex; justify-content: space-around; margin: 5px auto auto auto;\">" +
  "    <button data-xdh-onevent=\"Submit\">Submit</button>" +
  "    <button data-xdh-onevent=\"Clear\">Clear</button>" +
  "  </div>" +
  " </fieldset>" +
  "</div>";

 @Override
 public void handle(String action, String id)
 {
  switch( action) {
  case "": // Action label corresponding to a new session.
   dom.setLayout("", body);
   break;
  case "Submit":
   dom.alert("Hello, " + dom.getContent("input") + "!" );
   break;
  case "Clear":
   if ( dom.confirm("Are you sure ?") )
    dom.setContent("input", "");
   break;
  }

  dom.focus("input");
 }

  public static void main(String[] args) throws Exception {
    launch(() -> new Hello());
 }
}

To install this example, among others: http://github.com/epeios-q37/atlas-java/.

JavaScript source code for Node.js

const atlas = require( 'atlastk' );

const body = `
<div style="display: table; margin: 50px auto auto auto;">
 <fieldset>
  <input id="input" maxlength="20" placeholder="Enter a name here" type="text"
         data-xdh-onevent="Submit" value="World"/>
  <div style="display: flex; justify-content: space-around; margin: 5px auto auto auto;">
   <button data-xdh-onevent="Submit">Submit</button>
   <button data-xdh-onevent="Clear">Clear</button>
  </div>
 </fieldset>
</div>
`;

const callbacks = {
    "": (dom, id) => dom.setLayout("", body,
        () => dom.focus("input")),
    "Submit": (dom, id) => dom.getContent("input",
        (name) => dom.alert("Hello, " + name + "!",
            () => dom.focus("input"))),
    "Clear": (dom, id) => dom.confirm("Are you sure ?",
        (answer) => { if (answer) dom.setContent("input", ""); dom.focus("input"); })
};

atlas.launch(() => new atlas.DOM(), callbacks);

To install this example, among others: http://github.com/epeios-q37/atlas-node/.

You can also launch npm install, create a Hello.js file with above source code, or retrieve this file at http://q37.info/download/assets/Hello.js, and then launch node Hello.js.

PHP source code

<?php
require "phar://Atlas.phar/Atlas.php";

class Hello extends Threaded {
 static $body = <<<EOT
<div style="display: table; margin: 50px auto auto auto;">
 <fieldset>
  <input id="input" maxlength="20" placeholder="Enter a name here" type="text"
         data-xdh-onevent="Submit" value="World"/>
  <div style="display: flex; justify-content: space-around; margin: 5px auto auto auto;">
   <button data-xdh-onevent="Submit">Submit</button>
   <button data-xdh-onevent="Clear">Clear</button>
  </div>
 </fieldset>
</div>
EOT;

 public function handle($dom, $action, $id) {
  switch ($action) {
  case "":    // Action label for a new connection.
   $dom->setLayout("", self::$body);
   $dom->focus("input");
   break;
  case "Submit":
   $dom->alert("Hello, " . $dom->getContent("input") . "!");
   $dom->focus("input");
   break;
  case "Clear":
   if ($dom->confirm("Are you sure?"))
    $dom->setContent("input", "");
   $dom->focus("input");
   break;
  }
 }
}

function hello() {
 return new Hello();
}

Atlas::launch('hello');
?>

To install this example, among others: http://github.com/epeios-q37/atlas-php/.

Python source code

import Atlas

body = """
<div style="display: table; margin: 50px auto auto auto;">
 <fieldset>
  <input id="input" maxlength="20" placeholder="Enter a name here" type="text"
         data-xdh-onevent="Submit" value="World"/>
  <div style="display: flex; justify-content: space-around; margin: 5px auto auto auto;">
   <button data-xdh-onevent="Submit">Submit</button>
   <button data-xdh-onevent="Clear">Clear</button>
  </div>
 </fieldset>
</div>
"""

def acConnect(this, dom, id):
  dom.setLayout("", body)
  dom.focus("input")

def acSubmit(this, dom, id):
  dom.alert("Hello, " + dom.getContent("input") + "!")
  dom.focus("input")

def acClear(this, dom, id):
  if ( dom.confirm("Are you sure?") ):
    dom.setContent("input", "")
  dom.focus("input")

callbacks = {
  "": acConnect,  # This key is the action label for a new connection.
  "Submit": acSubmit,
  "Clear": acClear,
}

Atlas.launch(callbacks)

To install this example, among others: http://github.com/epeios-q37/atlas-python/.

Ruby source code

require 'Atlas'

$body =
<<~HEREDOC
<div style="display: table; margin: 50px auto auto auto;">
 <fieldset>
  <input id="input" maxlength="20" placeholder="Enter a name here" type="text"
         data-xdh-onevent="Submit" value="World"/>
  <div style="display: flex; justify-content: space-around; margin: 5px auto auto auto;">
   <button data-xdh-onevent="Submit">Submit</button>
   <button data-xdh-onevent="Clear">Clear</button>
  </div>
 </fieldset>
</div>
HEREDOC

def acConnect(userObject, dom, id)
 dom.setLayout("", $body)
 dom.focus("input")
end

def acSubmit(userObject, dom, id)
 dom.alert("Hello, " + dom.getContent("input") + "!")
 dom.focus("input")
end

def acClear(userObject, dom, id)
 if dom.confirm?("Are you sure?")
  dom.setContent("input", "")
 end
 dom.focus("input")
end

callbacks = {
 "" => method(:acConnect),  # This key is the action label for a new connection.
 "Submit" => method(:acSubmit),
 "Clear" => method(:acClear),
}

Atlas.launch(callbacks)

To install this example, among others: http://github.com/epeios-q37/atlas-ruby/.