"Hello, World!"

The "Hello, World!" program


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

"Hello World!" preview

Like all "Hello, World!" programs, this one focuses on the basics too.

Below the source code of this program for the different available languages. This example and others are available as online demonstration (more about online demonstrations).

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 =
  "<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>";

 @Override
 public void handle(String action, String id)
 {
  switch(action) {
  case "": // Action label corresponding to a new session.
   dom.inner("", 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)
 {
  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 = `
<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>
`;

const callbacks = {
    "": (dom, id) => dom.inner("", 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/.

Perl source code

use Atlas;

my $body = '
<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>
 ';

sub acConnect {
    my ($hello, $dom) = @_;

    $dom->inner("",$body);
    $dom->focus("input");
}

sub acSubmit {
    my ($hello, $dom) = @_;

    $dom->alert("Hello, " . $dom->getContent("input") . "!");
    $dom->focus("input");
}

sub acClear {
    my ($hello, $dom) = @_;

    if ( $dom->confirm("Are you sure?") ) {
        $dom->setContent("input", "");
    }

    $dom->focus("input");
}

my %callbacks = (
    "" => \&acConnect,
    "Submit" => \&acSubmit,
    "Clear" => \&acClear,
);

Atlas::launch(\%callbacks);

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

Python source code

import atlastk as Atlas

body = """
<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>
"""

def ac_connect(dom):
  dom.inner("", body)
  dom.focus("input")

def ac_submit(dom):
  dom.alert("Hello, {}!".format(dom.getContent("input")))
  dom.focus("input")

def ac_clear(dom):
  if ( dom.confirm("Are you sure?") ):
    dom.set_content("input", "")
  dom.focus("input")

callbacks = {
  "": ac_connect,  # The action label for a new connection is an empty string.
  "Submit": ac_submit,
  "Clear": ac_clear,
}

Atlas.launch(callbacks)

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

Ruby source code

require 'Atlas'

$body =
<<~HEREDOC
<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>
HEREDOC

def acConnect(userObject, dom, id)
 dom.inner("", $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/.