Join GitHub today
This is an overview of UmpleOnline to help guide developers when making changes or adding features to UmpleOnline. It gives the responsibilities of individual, notable files on UmpleOnline. It also describes the current testing implementation and gives some general suggestions on how to improve UmpleOnline.
Responsibilities by File
This is split into two parts. The backend and frontend of UmpleOnline. This will not contain any discussion of parts of the main Umple software that the UmpleOnline backend interacts with. Instead, it will focus on only files within the umpleonline/ folder. All file paths mentioned are relative to the umpleonline/ folder.
|scripts/compiler.php||This file is responsible for receiving ajax calls from the frontend of UmpleOnline. It maps them to one of the Umple JAR's, either umple.jar or umplesync.jar. It unpacks the parameters from ajax calls, uses them to determine the correct command-line call and passes the parameters.|
|scripts/compiler_config.php||This file largely contains utility functions that are invoked by compiler.php or umple.php. It contains functions to:
|umple.php||This is the main front-facing file for UmpleOnline and therefore contains all the static HTML. In addition to providing the main content for UmpleOnline, it also parse incoming URL query strings. Available URL query parameters include:
|scripts/styles.css||This contains the base styles applied to all parts of UmpleOnline.|
|scripts/umple_page.js||This script contains the main initialization functions, including
|scripts/umple_action.js||This script contains many of the functions that react to user interaction with UmpleOnline. For example, this script contains handling functions for special hovers, click actions, key board shortcuts, and text editing reactions. All the functions and attributes within this file are all held within a global object called
|scripts/umple_layout.js||This script holds the state and the behaviour of UmpleOnline's dynamic layout. This contains a main controller that swaps between using two
|scripts/umple_history.js||This script provides the stack used for the undo functionality of UmpleOnline.|
|scripts/umple_restore.js||This script is responsible for saving/loading page state to/from user's cookies.|
|scripts/umple_action_diagram.js||This script contains the functions that handle user interaction with editable class diagram. Any graphical editing done on an editable class diagram will be handled by this script.|
|scripts/umple_system.js||This class coordinates the overall rendering of the diagram. It can create all the elements of the diagram, and is able to find and remove various elements from the diagram by id.|
|scripts/umple_position.js||This class represents a position on the diagram.|
|scripts/umple_line.js||This class contains the code to render lines on the diagram. These lines are used by various other classes, such as generalizations and associations.|
|scripts/umple_class.js||This class contains the code to render and organize the elements within an UmpleClass.|
|scripts/umple_attribute.js||This class contains the code to render an attribute within an UmpleClass in the diagram.|
|scripts/umple_method.js||This class contains the code to render a method within an UmpleClass in the diagram.|
|scripts/umple_association.js||This class contains the code to render associations within the diagram.|
|scripts/umple_generalization.js||This class contains the code to render generalizations within the diagram.|
Current Testing Implementation
Within the folder umpleonline/testsuite is the ruby-based test implementation for UmpleOnline. It uses rspec as a test framework with Capybara as the website interaction library. To enable cross-platform and headless testing, PhantomJS is used as the browser to run the tests and Poltergeist is used to provide a ruby binding to PhantomJS.
These tests are implemented by emulating the way a user interacts with UmpleOnline. The user's actions are performed on the website and then appropriate changes in state are checked. This has the benefit of catching the same errors that real users will notice. Unfortunately, it depends on a real running version of UmpleOnline, and is therefore much slower than a unit test-based approach to testing. In addition, because the features test many parts of the code at once, it can be difficult to track a particular failure to the offending code.
These tests are run through a ant build script: build/build.websitetests.xml. Instructions on use are built into the script and can be displayed by using
ant -f build/build.websitetests.xml help.
The tests are broken up into a number of features, and the file structure is organized in the same way. Each feature has two files associated with it, a
_test_spec.rb file, and a
_helper.rb file. The test spec file contains the actual test cases, and the helper file contains common functions used within those test cases. These files are contained within the umpleonline/testsuite/spec folder. These are the features that are currently tested:
||These tests ensure the dynamic resizing of the layouts of UmpleOnline work properly.|
||These tests ensure that the URL query string options are processed correctly.|
||These tests ensure that all the umple examples load properly. This tests both the textual portion and the graphical portion of the examples.|
||These tests ensure that graphical editing functionality correctly modifies the model.|
||These tests ensure that the graphical editing functionality correctly modifies the positional data for the model.|
||These tests ensure the menu items in the “options” tab of the menu panel work correctly.|
General Suggestions to Improve UmpleOnline
These suggestions are guidelines to help developers improve UmpleOnline by making more durable and lowering technical debt.
UmpleOnline's file structure could use some cleaning up. A quick look inside umpleonline/scripts will reveal this fact. Many of the files within the
scripts folder would make it clear that they are a separate functional unit.