The EJS user interface
The image below shows the EJS editing window, or user interface, with some annotations that we did to point to its different parts.
The taskbar on the right provides a series of icons to show an information panel for the simulation, clear, open, and save a file, search the code, configure EJS, and display EJS help (this Wiki). It also provides icons to run a simulation and to package one or more simulations in a jar file or export them as applets on Web pages. Right-clicking on some of the taskbar icons invokes alternative (but related) actions. The bottom part of the interface contains an output area where EJS displays informational messages. The central part of the interface contains the workpanels where the simulation is built.
EJS provides three workpanels for creating the simulation. You select the active workpanel by clicking the top radio buttons. The first panel, Description, allows us to create and edit multimedia HTML-based narrative that describes the simulation. Each narrative page appears in a tab within the workpanel and right-clicking on the tab allows the user to edit the narrative or to import HTML files created with other tools.
The second work panel, Model, is dedicated to the modeling process. We use this panel to create variables that describe the model of our simulation, to initialize these variables, and to write algorithms that describe how this model changes in time.
The third workpanel, View, is dedicated to the task of building the graphical user interface of the simulation, which allows final users to control the simulation and to display its output. We build the interface by selecting elements from palettes and adding them to the view’s Tree of elements. For example, the Interface palette contains buttons, sliders, and input fields and the 2D Drawables palette contains elements to plot 2D data.