This document describes the main usage scenarios of diagrams in an Architecture Management service provider.
Simple View
A client or user will receive a URI to a diagram resource. The user wants to view this resource as an image, ideally in a browser. By default entering in a resource URI in a browser and ‘navigating’ to it will request from the server a text/html representation. If the service provider provides HTML representations, the diagram may be rendered as a image, or the HTML representation might have a link to the image. This should be a <img> tag with the URI of the diagram resource. The browser will then make a call to the GET the resource again, this time with an Accept header that includes the preferred image types that it is capable of rendering.
Embed in external document
A user wishes to embed a diagram managed by an OSLC AM service provider in another document, possibly a static HMTL document, hosted by another server. For HTML documents the user can simply insert a <img> tag with the src attribute set to the diagram resource URI. Browsers will request this resource with the image media types that it is capable of rendering.
Click through navigation
A diagram often is composed of many other views or representations of other resources. The user may want to “zoom” in on or navigate to an alternate representation of one of the elements in a diagram. HTML has a <map> tag that allows the user to click in a specific area of an image, and the browser will navigate to that page. This scenario requires only HTML representations, and the service providers ability to construct use the <map> tag and provide HTML representations of the elements in the diagram.
A client may have a specialized diagram resource viewer that is capable of both rendering the diagram as an image, but also able to provide feedback on specific elements in the diagram. For example hover help, or click through navigation. For example a diagram may render and represent a number of other AM or other OSLC resources.
HTML <map> tag will allow users to clip through an image to another html page. This requires an HTML representation of the diagram (with HTML tags).
UI Preview Hovers
A non-HTML browser client may want to provide additional information to the user about the resources in a diagram. For example such a client might render images, and provide OSLC UI Preview pop up help over selected or hovered elements in the diagram. Other user guestures could get and display additional information about the resource that is represented in the diagram’s views (elements or parts of the diagram image).
Layers
When a client requests a diagram rendering by making a GET call with an Accept header with some image type (i.e. image/png), it can use the oscl_am.layers query parameter to specify the ids of the layers to include in the rendering. By default all layers are rendered.
System Architect example
System Architect has a publishing option. The output from publishing the SA Samples ency is attached - output.zip - unzip and open the default.htm file.
* Output.zip: System Architect, published Samples Encyclopedia
The functions available in the SVG diagram presentation are shown below, of particular interest are the “Pan to connecting node of line symbol” and “Show only lines to connected to node” functions.
SVG Shortcut Keys Help
© Copyright IBM Corporation 1986, 2010
IBM® Rational® System Architect® Publisher™ converts diagrams from your encyclopedia into the SVG image format. A Java-based applet renders the SVG diagrams and provides navigation features that you invoke with keyboard and mouse combinations, and by hovering over symbols. Additionally, you can use the Pan & Zoom window to perform some of the same navigation options as with the mouse and keyboard. All the navigation functions are described in the sections that follow.
Keyboard Functions
|
Function
|
Keyboard
|
| Zoom into diagram. | Press the + (plus) key. |
| Zoom out diagram. | Press the - (minus) key. |
Keyboard and Mouse Functions
|
Function
|
Keyboard and Mouse Wheel
|
| Zoom into diagram. | Press the Ctrl Key, and at the same time, click and hold down your Left-mouse button. Drag the mouse to select a rectangle to zoom into. Release the mouse to zoom in to your selected area. |
| Zoom out diagram. | Press and hold the CTRL key and click right mouse button. |
| Select magnification area. | Press and hold the CTRL key, press and hold the left mouse button. The resulting magnification depends on the size of the box that you create as you drag-the smaller the box, the greater the magnification. |
| Zoom into node symbol | Press and hold down the Shift key and Left-mouse click on a node symbol to zoom into it.
**Note**: on a Swim Lane symbol, within a Business Process diagram expanded to fit the screen on initial view, this function shrinks and repositions the diagram, to show other symbols that may be around it. This behavior is the same as for any other symbols that are expanded to fit the screen. |
| Pan diagram (move around workspace) | Press and hold down the Shift key, at the same time, click and hold down your Left-mouse button and pan the diagram (move it around on the workspace). |
| Pan to connecting node of line symbol | Press and hold down the Shift key and Left-mouse click on line symbol, the diagram view pans to a connecting node, which flashes. |
| Original view | To restore the diagram to the original view, press and hold down the Ctrl and Shift keys, and Right-mouse click. |
| Show only lines to connected to node | Mouse-over node to make all lines invisible except for the lines connected to the node. |
| Hide/Show lines connected to symbol | Alt + Click on a node to toggle whether the lines connected to a node are visible when you move the mouse to a white area. |
| Show all lines | Hover the mouse over a white area away from diagram to show all lines. |
Mouse Wheel Functions
|
Function
|
Mouse Wheel
|
| Pan diagram up. | Scroll wheel forward. |
| Pan diagram down. | Scroll wheel backward. |
| Pan diagram right. | Press and hold down the Shift key, and scroll wheel forward. |
| Pan diagram left. | Press and hold down the Shift key, and scroll wheel backward. |
Pan & Zoom Window Functions
The Pan & Zoom feature is a small navigation window to zoom and quickly go to any area of the diagram. When you first open a diagram, the Pan & Zoom window is anchored to the upper right corner of the canvas area. You can move the window anywhere within the canvas area (framed by a solid line) but not outside of it. When you resize your browser window the canvas area and the Pan & Zoom window resize automatically, and proportionally
The table below lists the Pan & Zoom Window Functions.
| Function | Mouse or Keyboard Action | Description |
| Zoom [In/Out](In/Out.html) |
Click on the diamond shaped slider button and slide left or right.
You can also click on the point in the slider
| Moving the slider to the right reduces the size of the red box and zooms into the area within the red box. Moving it to the left increases the size of the red box and zooms out from the area within the red box. |
| Pan diagram |
Left mouse click on the red box and drag it to the area you want to view.
You can also click once on the red box and then use the right, left, up or down arrows to move the red box to the area you want to view.
| The diagram in the canvas moves according to our movements in the Pan & Zoom window. |
| Resize window | Place mouse pointer on a corner of the window. When the pointer converts to a diagonal line with arrows at each end, drag the pointer to your desired size and release the pointer. | As you resize the window, a black rectangle is displayed to indicate what the new window size will be when you release the pointer. The window maintains its aspect ratio and retains the size you set it to from one session to the next. |
| Resize red box | Click on any side of the red box, drag the pointer to the desired sized, and release the pointer. | The larger the box, the more you see of the diagram and the less that symbols are magnified. The smaller the box, the less you see of the diagram and the more that symbols are magnified. |
| Center the red box within the window | Place mouse pointer over the area outside of the red box and left mouse click it. | The red box can be centered to an area within the Pan & Zoom window by clicking on that area. When you place the pointer in a blank area, the pointer coverts to an arrow, with the arrow head pointing to the inside of a small square. |
| Reposition window | Click on the blue window title bar and drag it to the desired position. | When you undock it from its original position, a small box is shown in the docking position. |
| Reset Diagram | Click the ‘Reset SVG’ button, to the right of the diagram name. | The ‘Reset SVG’ button, located above the diagram, to the right, resets the SVG diagram to its original size. |
| Print | Click on the Print icon, to the right of the diagram name. | Prints the diagram at zoom level at which the diagram is being shown. |
| Dock/ Undock | Right mouse click anywhere on the Pan & Zoom window, and chose one the following options:
- Auto-hide
- Hidden
- Floating
- Docked
|
The docking options work as follows:
Auto-hide - the window is hidden and rectangle is shown in the upper right corner. To show the window, place the mouse pointer over the rectangle
Hidden - hides the window completely. To show the window, right mouse click anywhere in the diagram area and select among the docking options.
Floating - moves the window away from the docked position and displays a rectangle in the upper right corner. You can move the window anywhere within the diagram border.
Docked - displays the window in the upper right corner of the diagram, within the diagram border.
|
Note: you can redefine the keyboard, mouse and cursor mappings via the keymap.xml file located in the C:\Program Files\IBM\Rational\System Architect Suite\11.3\SA Publisher\Common folder. For more information, see the ‘Redefine Keyboard, Mouse and Cursor Mappings’ topic under the ‘Viewing Website’ book in System Architect Publisher help.
