19 Corvids (Magpie) - Hello Ottawa

xholonWorkbook.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--Xholon Workbook http://www.primordion.com/Xholon/gwt/ MIT License, Copyright (C) Ken Webb, Fri Apr 24 2020 21:27:37 GMT-0400 (Eastern Daylight Time)-->
<XholonWorkbook>

<Notes><![CDATA[
Xholon
------
Title: 19 Corvids (Magpie) - Hello Ottawa
Description: 
Url: http://www.primordion.com/Xholon/gwt/
InternalName: fcd8ab104bfe20997cc8389246f51fe6
Keywords: abc

My Notes
--------
April 24, 2020

This workbook is a tutorial.
It's part of my 19 Corvids collection.
It's called Hello Ottawa, because we are temporarily unable to visit the entire World, and can't even visit Quebec which I can see on the other side of the Ottawa River.
So for now, it's just "Hello Ottawa".

The versions (revisions in github speak) are stored at:
https://gist.github.com/kenwebb/fcd8ab104bfe20997cc8389246f51fe6

The tutorial explains and works through:
Design and Specification
 - writing a simple XML structure, as a string
 - writing some simple JavaScript behavior, as a string
Execution
 - clicking one of the "Run app" buttons
 - observing the output in the "out" tab
 - examining the run-time structure using the browser Dev Tools - console
 - examining the run-time behavior using the browser Dev Tools - debugger

runtime URL (to run the latest version)
-----------
https://www.primordion.com/Xholon/gwtCrow/Xholon.html?app=fcd8ab104bfe20997cc8389246f51fe6&src=gist&gui=clsc

Dev Tools - Web Console
-----------------------
var root = xh.root();
var helloOttawa = root.first().first();
console.log(helloOttawa);
var hello = helloOttawa.first();
console.log(hello);
var ottawa = hello.next();
console.log(ottawa);
// note that all three nodes are of JavaScript type: Object  these are part of the structure

Dev Tools - Debugger
--------------------
// beh is an Object ?


versions (revisions at github)
========

version 1
---------
https://gist.github.com/kenwebb/fcd8ab104bfe20997cc8389246f51fe6/revisions
https://gist.githubusercontent.com/kenwebb/fcd8ab104bfe20997cc8389246f51fe6/raw/478c2b31b8e83be55718b740f782d747ed53a56b/xholonWorkbook.xml
- write the XML structure
  basically, just add the string "<HelloOttawa><Hello/><Ottawa/></HelloOttawa>" to the Composite Structure Hierarchy.
- click on the "clsc" button at the top of the screen, to open the separate runtime browser window or tab
  the top of the screen is a view of the Xholon tree structure
   - use the arrow keys or the mouse to navigate to the HelloOttawa node and its subtree
     Application > Model > CompositeStructureHierarchy > chameleon > physicalSystem > helloOttawa > hello AND ottawa
- there is no behavior yet; no JavaScript code; so the app does nothing but statically preen its feathers
  to watch it doing nothing but update its timestep counter at the top of the screen, press the "Step" button

version 2
---------
https://gist.githubusercontent.com/kenwebb/fcd8ab104bfe20997cc8389246f51fe6/raw/7e628ab251c1d00e1abcd16e23b58af14c9c9cf8/xholonWorkbook.xml
- write a JavaScript behavior for the Hello node
  the code is contained inside an XML element called Hellobehavior
  the XML defines where the behavior will live within the structure (inside the Hello node), and defines that it's an instance of Behavior_gwtjs.java
  the code defines what the Hello node will do each timestep
- write a JavaScript behavior for the Ottawa node, called Ottawabehavior
  this code is almost identical to the Hellobehavior code, except it prints "ottawa" instead of "hello"
- run the app by clicking the "clsc" button, or by pressing the browser refresh button (or F5) in the runtime window or tab
- as you press the "step" button, the Hellobehavior node and then the Ottawabehavior node will execute
  - resulting in "hello Ottawa" being displayed in the "out" tab

version 3
---------
- tidying up the notes

version 4
---------
- added notes about Dev Tools

version 5
---------
- Hey Livingroom (the smushed version)

]]></Notes>  

<_-.XholonClass>
  <!-- this is the Inheritance Hierarchy; every app needs to include this small amount of XML -->
  <PhysicalSystem/>
</_-.XholonClass>

<xholonClassDetails>
  <!-- nothing here yet -->
</xholonClassDetails>

<PhysicalSystem>
  <!-- this is the Composite Structure Hierarchy; every app needs to include the outermost "...System" node as part of the XML -->
  <HelloOttawa>
    <Hello/>
    <Ottawa/>
  </HelloOttawa>
  
  <!-- Well, everything is shrinking fast, and here's the smushed code to go with it. -->
  <HeyLivingroom>
    <Hey implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[var me,beh={postConfigure:function(){me=this.cnode;},act:function(){me.print("hey ")}}]]></Hey>
    <Livingroom implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[var me,beh={postConfigure:function(){me =this.cnode;},act:function(){me.println("livingroom ")}}]]></Livingroom>
  </HeyLivingroom>
</PhysicalSystem>

<Hellobehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
// this is the behavior for the Hello node
// it must include a postConfigure function and an act function
var me, beh = {
postConfigure: function() {
  me = this.cnode;
},
act: function() {
  me.print("hello ")
}
}
// the following line gives a name to this code, so we can examine it with the browser debugger at runtime
//# sourceURL=Hellobehavior.js 
]]></Hellobehavior>

<Ottawabehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
// this is the behavior for the Ottawa node
var me, beh = {
postConfigure: function() {
  me = this.cnode;
},
act: function() {
  me.println("Ottawa")
}
}
//# sourceURL=Ottawabehavior.js 
]]></Ottawabehavior> 

</XholonWorkbook>