User Manual    [Previous]   [Next]   

Using UmpleOnline

The following describes how to use the UmpleOnline tool accessible online at try.umple.org

For information about writing Umple models or code in UmpleOnline, look at the Getting Started section of this user manual, or any other topic in the left column of this page, including information about defining classes, attributes, associations and state machines.

Loading and saving

• To explore examples of Umple, In the centre pane, select a pre-prepared example from the 'TOOLS' menu. You can also directly access these examples using a URL whose last component is the name of the example. For example click here to jump to the 2DShapes example: https://try.umple.org/?example=2DShapes


• To restart UmpleOnline (you will lose any work you have not saved), click 'Start Over' under the 'SAVE & LOAD' menu.


• To save your work, there are several approaches:
  1. Create a bookmarkable URL. To do this, click 'Create Bookmarkable URL' at the top near the centre 'Save as URLg' in the centre pane under 'SAVE LOAD'. Then copy or bookmark the URL that appears in your browser's URL bar.
      
     Note that from this point on you can keep editing the Umple code or diagram, and your work will continue to be saved at this URL. You are thus saving your work in the 'cloud'. You can embed the URL in other pages to document your product. Note that at the current time, anyone who knows your URL can also edit your work (which enables collaboration), and if you forget your URL, or someone messes up the saved contents at that URL, there is no way to retrieve it. Saved URLs are also only saved for one year since their last edit. Therefore it is also suggested that if this is a concern, you use saving mehods 2 or 3.
      
     
  2. Create a URL that embeds the entire diagram. This is only guaranteed to work for small diagrams, since some browsers such as older versions of Internet Explorer limit the number of characters in a URL.
      
     To do this, click on "Encoded URL" in the 'SAVE' menu, and copy the URL that appears in a separate window. You might want to use a URL shortening service such as bit.ly to shorten the URL before posting it or embedding it in another document. You also need to be aware that you are limited by certain browsers and URL shortening services to files with about 2000 characters or less, so test your URL once you have created it.
      
     
  3. Temporarily stash your current work in your browser. You can click 'Store in Browser' in the 'SAVE' menu at any time. Later on, in the same browser, you can retrieve this model using 'Load from Browser' (and if you load by mistake, you can click undo from the Tools menu). This method is not for permanent saving, but can be useful for temporary backups to protect against power failure, browser crashes and so on.
  4. Download Files. This is probably the safest approach. It will generate a zip file with the code.
  5. Copy and paste the text of important models somewhere else. One thing to note is that if you just copy the visible text in the left hand pane, you will not be saving the layout of the diagram. If you want to save the layout too, you have to do one of the following:
     • Click on 'Source to Copy' in the 'SAVE' menu. This will generate a popup that contains Umple code with the layout information. Copy and paste the contents of this window, and then close the window.
     • Check the box 'Layout Editor' in the 'OPTIONS' menu to view a separate window containing the layout, and then save the automatically-generated layout information in a file. You can actually edit this layout textually, but we suggest you only do that if you are an expert since it us much easier to edit the layout from the right-hand graphical pane, as described later.
 

• To load Umple code into UmpleOnline do one of the following:
  1. Load a URL you saved using one of the saving methods 1 and 2 above.
     
  2. Put a .ump file on the web (saved from Eclipse or using saving method 3 above), and load it using the filename argument to Umpleonline. The filename argument's syntax is ?filename=X, where X is the URL of the file containing the Umple file, minus the leading 'https://'. So, for example there is a .ump file in the repository at the following URL: https://raw.githubusercontent.com/umple/umple/master/cruise.umple/src/Umple.ump . This can be loaded into Umple using the following URL: https://try.umple.org/?filename=raw.githubusercontent.com/umple/umple/master/cruise.umple/src/Umple.ump
     
  3. Paste Umple code into UmpleOnline. Note however, that you have to make sure the pasted file contains the layout information, as described under the saving methods above.
  
  Note that in most of these cases, the user can edit the Umple, without affecting the original content. In other words, a copy is saved first. The only exception is that when you edit Umple saved using method 1, any changes are saved permanently.

Left Pane: Umple textual code

• Type any Umple code into this pane. Three seconds after you stop typing, your program will be interpreted by Umple, and Umple will attempt to draw a corresponding class diagram in the right-hand side. Just about the simplest Umple program you could type here would be class X {}


• If you make a mistake, you can click 'Undo' in the 'TOOLS' menu, repeatedly to 'back out' each change you made (or use your browser's undo keystroke). You can also redo changes in a similar manner.


• You can hide this textual Umple pane entirely by unchecking 'Text Editor' in the 'OPTIONS' menu.


• If you are doing a lot of text editing, and don't want to have the diagram generated all the time, you can check 'Manual Sync' in the 'OPTIONS' menu or uncheck 'Canvas' to hide the diagram entirely.


• Syntax assistance: As you type Umple text, the text editor will attempt to help you keep the correct indentation of your code. It will also highlight matching parentheses, and umple keywords. We intend to improve syntax assistance.
  
• Jumping to a line in the text editor: You can type a line number in the box above the textual pane and hit 'tab' to jump to that line. In most browsers you can also hit 'return'. If an error message is displayed below the browser, the line number causing the error will also appear. You can click on this line number to jump to the line in the text.
  
• Collapsing blocks of text You can click on the line number of any line that ends in ' {' to collapse that block of code. This can be used to temporarily hide the bodies of classes or methods that you are not interested in viewing. Note that currently there must be a space before the '{' for this to work.

Right Pane: UML diagram

This can be an editable class diagram, which is the default. The 'E' button at the top-left returns the display to this state as will ctrl-E. The instructions below refer to this format. This can also be a class diagram laid out using Graphviz (G button or ctrl-G), or a state diagram (S button or ctrl-S). To change the Graphviz diagrams, you have to edit Umple textually.

• To add a class, click on 'Class' in the 'TOOLS' menu, then position the cursor over the canvas. To add a whole series of classes, double-click on 'Class' then click repeatedly on the canvas. Press escape if you change your mind and you don't want to add a class.


• You can also use the text (left) pane to write Umple code that will appear on the canvas. If you do this, you will have to then lay out the diagram, since the layout algorithm is rather simple.


• To rename a class, click on the class name and type over it, then hit enter or click somewhere else. Alternatively edit it on the text (left) pane.


• To reposition classes, you can drag classes around to align them the way you like. You can also select a class and use the arrow keys to move it by a small amount in any direction. This is nice to carefully arrange classes. Note that the positions of your classes are saved in a hidden text pane on the left hand side. See the discussion above regarding showing this pane and saving the layout information


• To add an attribute, click in the 'Add More' box and type the attribute name. To give an attribute a type, follow the name by a colon, and then one of the Umple types (Integer, String, Date, Time, Boolean or the name of an Umple class). Note that this is UML diagram syntax for typed attributes which is not the same as the Umple textual syntax. You can click on an attribute at any time to change its name or type, or you can edit the attribute in the textual (left) pane. You can add a whole series of attributes by just hitting return after each one and typing the next one.


• To delete an attribute, click on the little red X next to it.


• To add a generalization (an inheritance relationship between classes), click on 'Generalization' in 'TOOLS' menu., and then click first on the subclass, then the superclass. If you double-click on Tools/Generalization you can then hook up a subclass to its parent, and then the parent to a higher-level parent, etc. Press escape to cancel the process of adding generalizations..


• To add an association (a relationship that describes how instances of one class are to be connected to instances of another at run time), click on 'Association' in 'TOOLS' menu. Then click on one class to be connected, and then the second class. By default, the multiplicity of a new association is many-to-many (* -- *). To change this, or to add a name to the assocation, you currently have to edit the Umple code in the left (textual) pane.


• To adjust the location of an association, in other words how it is connected to each class, hover over the association until you see little squares at its ends, then click. The squares should change to a darker colour. Select a little squares and move it to a new location on the class. If an association crosses a class's border, just move the class a little. Note that the location of the association end is saved with the layout information of the diagram.


• To delete a class, generalization or association click on 'Delete' in the 'TOOLS' menu and then select the item to delete.


• To hide the 'add more' line in each class, select 'Photo Ready' from the 'OPTIONS' menu. You can also click on any class to adjust its size a little. UmpleOnline is an excellent tool for preparing nice-looking diagrams ready for publication. Note that this works best in Firefox at the current time.

Adjusting the panes

• To hide (or re-show) the graphical canvas, click the 'D' button or use ctrl-D.


• To hide (or re-show) the text editor, click the 'T' button or use ctrl-T.


• To adjust the size of the canvas hover the cursor over either edge of the menu; an arrow will appear, allowing you to drag left or right to change the portion of the screen allocated to text or graphics .

Bottom Pane: Errors, Warnings and Generated Results

• Messages: As you edit your text or diagram, warnings or errors may appear at the bottom of the page. Each warning or error message has a line number pointing you to the line in the code where the error originated. Each message also has a link to the user manual page describing the problem and how to fix it.


• Generated code: You can generate many types of output from your Umple model/code. Pick an output format from the pulldown menu under 'GENERATE' in the 'SAVE & LOAD' menu, then click 'Generate Code'.
  Multiple files of generated code are concatenated when they appear on the web page. A link is also provided to download a zip file with the code so you can easily compile and execute it.

Shortcuts

• Common shortcuts for all computers:

  • Control + E: Show the Editable class diagram
  • Control + G: Show GraphViz class diagram
  • Control + S: Show GraphViz state diagram
  • Control + L: Show Composite Structure diagram
  • Control + D: Show/Hide the diagram
  • Control + A: Toggle attributes
  • Control + M: Toggle methods
  • Control + R: Toggle traits

• Mac Specific Shortcuts:

  • Command + Z: Undo text changes
  • Command + shift + Z: Redo text changes
  • Control + T: Toggle the text area
  • Control + N: Toggle the menu

• Windows/Linux Specific Shortcuts:

  • Control + Z: Undo text changes
  • Control + Y: Redo text changes
  • Control + Alt + Shift + T: Toggle the text area
  • Control + Alt + N: Toggle the menu

See here for the statement regarding privacy and other risks when using UmpleOnline.