Screen Layout

Object Tree/Inspector

 

JZoneGamer – Sample_Project

1st

2nd

3rd

 

File

Edit

Help

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Standard

Extra

System

Board

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

sample.ts

 

 

 

 

 

 

 

 

 

 

 

 

 

shell

Sample

samp2

samp3

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

my-button: Button

 

import (Hidden-form)

Properties

Events

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

(class (public) Scrab-form extends Form

cancel

false

 

   var (auto) (

caption

Click Me!

 

      Game-server game-server;

cursor

cr-default

 

      Button my-button;

default

false

 

      Button next-button;

enabled

true

 

      Board-grid board-grid;

font

Font

 

      Rack-grid rack-grid;

height

25

 

      Card-stack bag;

hint

 

 

      Editable-grid score-grid;

left

388

 

   )

mod-res

mr-none

 

   (proc (public static) main (String-list args)

name

my-button

 

      var (

show-hin

false

 

         Scrab-form form1 (new Scrab-form);

tab-ord

2

 

         Hidden-form form2 (new Hidden-form);

tag

0

 

      )

top

72

 

   )

visible

true

 

   (proc (public) Scrab-form do (

width

79

 

      : game-server init-game;

 

Main Window

The caption bar contains the project name, preceded by “JZoneGamer.” Below that is the menu bar, and below that is a button bar. If there are enough available buttons, and the main window is resized tall enough, there may be more than one row of button bars. If the main window is not resized tall enough to display all buttons, then the rightmost button contains a “>>” graphic, and the hint of that button reads: “More buttons.” Clicking on it displays a 2D grid of additional buttons.

 

Below the button bar(s) is a row of tabs. Each tab contains the name of a collection of reusable software components (objects). Below that row of tabs is a row of objects (an object palette). At the right end of the row of tabs are 2 small buttons: a left arrow and a right arrow. Clicking on these buttons scrolls the row of tabs horizontally (if all tabs can be displayed, these buttons are hidden). The object palette includes a similar pair of buttons, which are hidden if all available objects can be displayed.

 

Code Editor

The caption bar contains the file name of the current Treescript source file. If this file is not a member of the current project, the full path name is displayed. Below the caption bar is a row of tabs. Each tab contains a file name (minus the extension, which is usually “.ts”). At the right end of the row of tabs are 2 small buttons: a left arrow and a right arrow. Clicking on these buttons scrolls the row of tabs horizontally (if all tabs can be displayed, these buttons are hidden). Below the row of tabs is the contents of the file (usually a source code file) corresponding to the currently selected tab.

 

The leftmost tab may or may not consist of the text: “shell.” (Under the View menu is a command to show/hide the shell.) If this tab is selected, the portion of the code editor below the row of tabs corresponds to the Treescript version of the shell window in Python. The shell allows the user to enter Treescript expressions and display the result of evaluating those expressions.

 

Object/Tree Inspector

The upper portion of this window displays up to 3 different tree views of the current project. It is separated from the lower portion by a splitter bar. The user can drag this splitter bar up and down. The lower portion of this window contains the Object Inspector. Below the splitter bar is a combo box containing the name and type (class name) of the current object. Below that is a pair of tabs: Properties and Events. Below that is a list of name/value pairs of available properties/events. Some property values include an ellipsis button (…), which when clicked displays a dialog box corresponding to that property.

 

Docking Behavior

To dock the code editor with the main window, drag its caption bar until it slightly overlaps with the bottom of the main window, keep holding down the mouse button for about one second, and then both windows will become docked together. To undock the code editor, drag what was once its caption bar (which is now part of the main window) away from the main window.

 

To dock the object/tree inspector with the main window (which is only possible if the main window is already docked with the code editor), drag its caption bar until it slightly overlaps with the left-hand edge of the main window, keep holding down the mouse button for about one second, and then both windows will become docked together. To undock the object/tree inspector, drag one of the tree tabs away from the main window.

 

Using menu commands to dock/undock (under the Window menu):

·      Dock All: when checked, all 3 windows are docked together

·      Undock All: when checked, none of the 3 windows are docked together

·      Partial Dock: when checked, the code editor is docked to the main window

After docking 2 windows together, the user can drag a splitter bar separating the 2 windows up and down (or left and right).