Home    Services    People    Process        More About Us

Full Example of Drawlets Applet

Although there are plenty of ways to use the Drawlets framework, it may not be apparent without some examples. Here is a fairly complex one that provides a DrawingCanvas as an Applet. We have tried to expose many of the key features of the framework and kits in this small example. However, please do not be misled into thinking that all text labels, lines, or various shapes need to behave like they do here, or that this is a complete set of features (e.g. you can easily use a different set of handles, change the manner in which they are initially constructed, etc.).

NOTE: This has been verified to work with Netscape Communicator 4.06 & 4.5 and Internet Explorer 4.01 & 5. If you find it works on something older (or doesn't work on something newer), please let us know.

With that disclaimer, here goes:

• Select from the tool palette and draw on the blue canvas. With this particular configuration of canvas/tools:
  • Each tool stays active until another tool is explicitly selected.
  • Standard shapes (all except polygons) are placed by pressing for a beginning point, and dragging for the next defining point until released.
  • Polygons are defined by clicking for a starting point, then clicking for each point after that. To close a variable-sided polygon, double-click.
  • Holding the shift key down while creating a line will allow you to define new line segments until the shift key is released.
• After drawing a few items, use the select tool to select them.
  • Control key toggles selection of individual items;
  • Shift key adds them to selected set;
  • Drag a box to select multiple items (Shift modifier works here, too).
• Once selected, you can drag the figures around (notice they keep their relative front-back position), or drag the handles to change their shapes.
• You can also cut, copy and paste the figures, by using the buttons in the top tool bar. Note that pasting from the system clipboard (the button farthest to the right) probably will not work, due to security issues inherent in running in a browser.
• Attach lines to items by dragging one of the line's handles (when line is selected) on to another figure... including other lines. Then select and move the figure(s).
• Attach labels to other figures by dragging their connection handle (when they are selected) onto the figure. You can then move the text itself around, or move the figure it is connected to and see the label keep the same relative position.
• Double click on labels to edit them (pretty rudimentary right now). The first character will replace the existing text. Type to your heart's content, backspacing over mistakes. You will be editing the label until <Enter> is pressed (Shift-<Enter> gets you a new line, instead) or you click outside the label area.
• Set the current DrawingStyle by selecting a color and then Fill, Line, or Text. The next thing you draw will take on that style. If you want to apply that style to the currently selected item(s), select Apply.
• Figures can be copied, cut, pasted, or deleted with Ctrl-C, Ctrl-X, Ctrl-V, and Delete or Backspace, respectively.
• Move figures to the front or back using Ctrl-F and Ctrl-B.

This just demonstrates some of the basic functionality you get from the Drawlets framework and included kits. The framework is extremely extensible. If you don't like the way this example draws polygons, all you'd have to do is make your own PolygonTool (writing a couple of methods) and add it to the ToolPalette to suit your needs, or use the supplied PrototypeConstructionTool from the "basics" kit instead.

Pretty cool, isn't it?