/ [R J Botting]
/[CS320 Course Materials]
Fri Apr 15 10:01:40 PDT 2011
- Learn how to draw UML graphics and put them on the Web.
- Start a web page documenting some UML models.
- By the end of the laboratory session I expect
to see a new item on the list of labs on your web site.
- The new link should point to a new page that has some graphic images on it.
- There must be at least two UML diagrams on the new page.
- Start "Dia" by
- Opening a terminal window and inputting "dia&" and tapping return.
- searching the menus for the "dia" graphics program.
- In the middle of the "toolbox" window that opens there is a pull
down menu. Pull down to UML.
- Expand the toolbox by dragging a corner to show the complete set
of UML tools.
- Under the File menu in the toolbox, select "New diagram".
- Draw a UML diagram:
- Select a tool in the tool box.
- Click in the diagram roughly were the symbol should be.
- If a Warning about fonts happens -- close the Warning window.
- Double click the image on the window to fine-tune the details of
the icon: contents, form, options etc in a tabbed dialogue box...
- Right-click the diagram -> Edit to cut/copy/delete/paste images
- Save your "Dia" diagram: right click in the diagram and select File->Save as.
- Note: you can print a Dia diagram by right clicking->File->Page Set up and setting
"Fit to 1 by 1" and "OK". Then Right-click -> Print.
- Right-click the diagram -> View to simplify the appearance: no grid, no connection points, ...
- Generating a Graphic image for the web: PNG, GIF, JPG,...
- If you have the newer Dia (after Dia .94 pre-release 4) you
use the file menu to generate PNGs and GIFs.
- Start GIMP to convert your Dia diagram into a GIF:
- Type this command: "gimp&" into a terminal window.
- Read a tip and then click "Close"
- Use Gimp to make a GIF of your UML diagram.
- In the GIMP toolbox, select File->Acquire->Screen shot...
- Select Single Window and uncheck "With Decorations"
- Select a 2 or 3 seconds delay.
- Select OK and get the window you want on top!
- When the cursor becomes a plus sign, click in the window
you want to snapshot.
- In the GIMP tool box select the "Exacto" knife (Crop or Resize)...
- In the GIMP image drag accross the part of the image you want.
- Click the "Crop" button.
- Right-click -> File -> Save as...
- Select By Extension and imput a name like this "uml1.gif". The ".gif"
is important! OK!
- In the following dialoguaes select "Export" and "OK".
- You have now got an Graphic Interchange Format version of your UML diagram.
- Publish the GIF by copying it into your public directory.
- Draw another UML diagram in "Dia".
- Use Gimp to make a GIF of your second UML diagram. Call it "uml2.gif".
- Publish the second GIF.
- Create a web page (lab05.html is a good name)
about the UML that has a good header and image tags pointing to your new GIFs
in the body:
- Use your browser to visit
[ Raster ]
to see what is there -- can you find the UML model of Pascal?
Add a link to your UML page to this model.
- Publish your uml page and make sure it looks good.
- Print a copy of your page.
- Add to your list of laboratories on your own "index.html" a new item
<a href="the URL of your new page">Samples of UML</a>
- Copy the index.html to your public space.
- Reload it and view it on the web.... and check the link.
- Call me over to earn credit.
. . . . . . . . . ( end of section Process) <<Contents | End>>
. . . . . . . . . ( end of section CSci320/lab/05 -- UML and WWW Graphics) <<Contents | End>>
[ ../06.html ]