CSSE Individual Practical Part 2

Document Sample
CSSE Individual Practical Part 2 Powered By Docstoc
					CS/SE Individual Practical: Part 2
Stephen Gilmore School of Informatics November 9, 2009

1 Version information 1.1 Version history . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Introduction 3 Description 4 Core requirements 4.1 Create a bigraph by drag and drop 4.2 Rename and resize components . . 4.3 Cut/copy/paste functions . . . . . 4.4 Undo/redo functions . . . . . . . . 4.5 Marquee function, show and hide . 2 2 2 2 3 3 3 4 4 4 5 5 5 6 6 6 7 7 7 8 8 8 8 8 9 9 9 9

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

5 Advanced requirements 5.1 Node designer (design a node, place ports) . . . . . . . . . . . . . 5.2 Property editors . . . . . . . . . . . . . . . . . . . . . . . . . . . 5.3 Views (outline, bird’s eye, place graph, link graph) . . . . . . . . 5.4 Save functionality (XML document with model, XML with formatting) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5.5 Export functionality (Some of JPEG, PDF, PNG, SVG, TikZ) . 5.6 Built-in help (HTML pages accessible from within the editor) . . 5.7 About menu with version number . . . . . . . . . . . . . . . . . . 6 Extra credit 6.1 Aesthetics . . . . . . . . . . 6.2 User friendliness . . . . . . 6.3 Proper nesting of nodes and 6.4 Layout management . . . . 6.5 Bigraph concepts . . . . . .

. . . . . . sites . . . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

7 Submission information 7.1 What to submit . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7.2 How to submit . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7.3 Deadline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .



Version information

This is Version 1.0 of this document, released November 9, 2009. Later versions of this document will be released if further clarification is needed on this coursework exercise.


Version history

• Version 1.0 released November 9, 2009.



This is an assessed practical exercise. It is worth 75% of the marks of the IP course. It represents roughly 75 hours of work. The work which you submit for assessment should be your own although you may make use of any part of any publicly-available Java and GEF source code which you find useful. This means that you can make use of code from tutorials which are available on the GEF such as the “Entreprise” tutorial, the “shapes” tutorial, the “logic” tutorial and others. In addition, you may use any free Java APIs which you find useful. For example, these might include XML libraries, or libraries for rendering SVG and PDF output such as Batik (, FOP (, iText ( iText/), or others.



Recall the requirements on the Bigraph editor presented to you at the start of the course. • Create a bigraph by drag and drop • Rename and resize components • Cut/copy/paste functions • Undo/redo functions • Marquee function, show and hide • Node designer (design a node, place ports) • Property editors • Views (outline, bird’s eye, place graph, link graph) • Save functionality (XML document with model, XML with formatting) • Export functionality (Some of JPEG, PDF, PNG, SVG, TikZ) • Built-in help (HTML pages accessible from within the editor) • About menu with version number This document groups the requirements into core and advanced requirements. It also breaks the requirements down into numbered targets, and presents the number of marks available for each target, to give you an indication of the relative importance of each. This mark information can be found in the margin. 2


Core requirements
Create a bigraph by drag and drop

Figure 1 shows a bigraph. Bigraphs contain nodes and edges. Nodes have a graphical shape such as an ellipse, or a circle, or a rounded rectangle, or a triangle. Nodes have names called their control. Edges can also be named. Nodes have connection points called ports. Nodes can be inside a root. They may contain other nodes or sites. Bigraphs also feature two kinds of names: inner names and outer names. No graphical symbol is associated with names, they are just a point.

Figure 1: The anatomy of a bigraph We identify the following targets. • Your bigraph editor should have a palette from which you can drag and drop bigraph contents such as roots, nodes, and sites. • You should be able to add inner and outer names to your bigraph. • You should be able to add edges to link ports to ports, ports to names, or names to names. • Edges should be undirected (i.e. they have no arrowhead), and they should by default be green in colour. • Edges can be used to explicitly show that a port is not connected to something. This kind of edge is referred to as an idle edge. For example, Figure 2 shows a computer, C, whose north port is not connected. It should be possible to draw this kind of idle edge with your bigraph editor. 5. [5 marks] 1. [5 marks] 2. [5 marks] 3. [5 marks] 4. [5 marks]


Rename and resize components

In your bigraph editor it should be possible to rename components (for example, to change a control from K to K2, or change an outer name from y to y2) and it should be possible to resize components (for example, to make a node bigger in order that it can include another node, or another site). We identify the following targets. 3

˘ hE A




Figure 2: A zoom-in to show part of a bigraph with a computer C with an idle edge at its north port.

earlier example, theYour bigraph editor exercise rename dlalogue or a property sheet following should have a will be instructive. •
which allows you to change the name of a component. • It should be possible to resize components. Edges connected to these should remain connected and not need to be separately repositioned. 6. [5 marks] 7. [5 marks]

˘ graph D representing the three agents that are inside rooms. Make 4.3 Cut/copy/paste functions aph D by defining basic cut, copy and paste functions of an editor should be available. Cutting The its outer face.
components from the bigraph should not leave the bigraph in an inconsistent state. For example, it should not be possible to cut a node which has edges attached to it without the edges also being cut.

d study of dynamics is deferred to Part III, let us now illustrate how • It should be possible to undo and redo edit operations such as adding a gure themselves. We are free node. define different reconfigurations node or deleting a to 9. [5 marks] . This is done by reactionfunction, eachand hide 4.5 Marquee rules show consisting of a redex (the ) and a reactum Sometimes with a diagram editor one wants an operation to apply to several (the changed pattern). Part of the idea of bigraphs diagram elements at once. For example, to cut several nodes, or re-position a whole section of and linking. may involve both placingthe diagram. For this reason, it should be possible to draw a temporary box around several diagram elements and have the next operation apply themselves bigraphs, a marquee (like tent). It should actum of a rule are to this box. This temporary box is calledand may amatch any part show its extent visually on the screen and hide itself when the edit operation is over. (This remark will be made precise in Part III.) Here are three • Your bigraph editor should have a marquee which is used for edit purposes. lt environments, such as the system E: 10. [5 marks]
The maximum mark which can be obtained from these 10 core targets is 50%

˘ ter face that makes E into a bigraph E, allowing the possibility • It should be 8. [5 marks] ildings may be situated in possible to cut, copy and paste diagram draw the bigraph different cities. Then elements. 4.4 Undo/redo functions uch that C ◦ D = E.
Users make mistakes so they should be allowed to undo these, and redo them if the undoing itself was a mistake.








Advanced requirements
Node designer (design a node, place ports)

Bigraphs are a general modelling language. A node in a bigraph is used to represent something in the real world such as a computer, a room, a building, a phone, a car, a hospital bed, an ambulance, etc. Very often these are represented by generic graphical shapes such as an ellipse, a circle, a triangle, or a rounded rectangle. However, occasionally it is helpful to represent an object with a familiar shape by a node which looks a little like a simple drawing of the object. For instance, a car could be represented by a custom polyline drawing such as the one shown in Figure 3.

Figure 3: A custom node which could be used to represent a car in a bigraph. Separately from this, it would be useful to allow users to define where the ports are on a node, even if the node is just a simple rectangle, or an ellipse. For example, the user could design a node to represent a computer where there is one port on the left and one on the right. In this way, when computer nodes are used in a bigraph they should be used consistently (each with one port on the left and one port on the right) and it is not possible to have a computer which has an edge from the top, or the bottom. We identify the following targets here. • Your bigraph editor could have a node designer which allows custom nodes to be drawn. • Your bigraph editor could have the facility to specify where ports are positioned on a node, even if just for simple graphical shapes. 11. [5 marks] 12. [5 marks]


Property editors

Graphical editors allow users to associate properties with diagram elements. These properties store further information about elements. Properties can be edited using table editors. For bigraphs properties of a node could include its class (i.e. is this a building, or a room, or a computer). Further, they could contain information about the number of ports which a node should have, or they could contain information about the colour of the diagram element. Another possibility for a property is a note or a comment, which is just a plain text string describing a particular diagram element. Large complicated diagrams need comments just like programs need comments. • Your bigraph editor could have a property editor which allows users to customise graphical elements such as nodes and edges. 13. [5 marks]



Views (outline, bird’s eye, place graph, link graph)

Graphical editors support views which provide an alternative way to represent the content. Their primary function is to allow content to be viewed, not edited. A typical example is a tree viewer which displays content in the form of indented lists. An alternative is a “bird’s eye view” which allows the user to see the entire content of the canvas even if zoomed in on one small part of it. • Your bigraph editor should have an outline view which allows the user to see an outline of the content. For bigraphs there are two possible outlines: the place graph outline (which shows what is nested inside what) and the link graph outline (which shows what is linked to what). A good outline view for a bigraph editor should support both views, possibly inside a tabbed pane. • Your bigraph editor should have a bird’s eye view which allows the user to see which part of the bigraph is currently being displayed.

14. [5 marks] 15. [5 marks]


Save functionality (XML document with model, XML with formatting)

Your bigraph editor should allow a bigraph to be saved to a text file in XML format on disk. There are two possible XML formats which are relevant. The first contains only the model, and no layout information, for processing by other applications which do not need the graphical representation. The second saves also the layout so that it would in principle be possible to reload the bigraph from this XML document and continue editing in a separate editing session. This would be useful for users collaborating on preparing a bigraph model. The XML document could be sent by email and loaded into another copy of your bigraph editor running on the remote users’ computer. • Your bigraph editor should have “Save” functionality which allows a user to save a bigraph to an XML document. 16. [5 marks]


Export functionality (Some of JPEG, PDF, PNG, SVG, TikZ)

Exporting a model is different from saving it in the sense that the export is to another file format (such as an image file format) and there is no expectation that the bigraph editor will ever be able to reload the content from this format, for display or any other purpose. There are two possible kinds of graphical file formats which are relevant to a graphical editor. 1. An image file format (such as JPEG or PNG) which represents the content at a fixed resolution, and cannot be scaled without loss of quality. This format is suitable for embedding in Web pages or low-resolution printing. 2. A scalable vector format (such as PDF or SVG or TikZ) which can be scaled without loss of quality. This format is unsuitable for embedding in Web pages but is suitable for publication in scientific papers or posters with high-resolution graphics. We identify the following two targets. 6

• Your bigraph editor should allow the visual representation of your bigraph to be stored in an image file format such as JPEG or PNG. • Your bigraph editor should allow the visual representation of your bigraph to be stored in an scalable vector file format such as PDF or SVG.

17. [5 marks] 18. [5 marks]


Built-in help (HTML pages accessible from within the editor)

Computer programs need documentation. The documentation for a program such as a graphical editor should include pictures cropped from screenshots showing the graphical editor working. A good documentation format for mixing pictures and text documentation is a web page, or a set of web pages. This is particularly helpful for an Eclipse Rich Client application because Eclipse can display web pages as help pages in its built-in help, provided that one prepares a “table of contents” style page as well. Thus, there are two possibilities for the documentation for your bigraph editor, either a set of web pages or builtin Eclipse help (made from the Web pages). The latter is preferable, but the former is easier to do. • Your bigraph editor should have HTML-based documentation, preferably accessible via a “Help” menu. 19. [5 marks]


About menu with version number

All non-trivial software contains bugs. Sometimes these bugs are found by users of the software and reported back to the developers. In order for users’ bug reports to be useful it is vital to know which version of the software they are using. This should be accessible to the user from an “About” menu in the menu bar. • Your bigraph editor should have an About menu which displays the version number of the editor and other relevant information such as the name of your bigraph editor application. The maximum mark from all 20 core and advanced targets is 100%

20. [5 marks]


Extra credit

This section describes other features which you could add to your bigraph editor for extra credit. The concept of “extra credit” is the following: 1. A provisional mark is first assigned to your submission based on your completion of the core and advanced targets listed above. 2. If this provisional mark is already 100% then that is your final mark. That is, it is possible to get full marks for this practical without attempting anything in the extra credit section. 3. If your provisional mark is not already 100% on the basis of your completion of the core and advanced targets then work done for extra credit is considered and marked. The marks awarded for the extra credit work are added to the provisional mark already obtained. 7

4. Whether or not you have added other features to your bigraph editor for extra credit this practical exercise is assigned a mark out of 100, so your final mark cannot be more than 100. That is, your final mark is the smaller of 100% and the mark obtained in step 3 above.



It is sometimes useful to add colour to a bigraph to aid readability. It is sometimes just nice to have colour to make the bigraph look more attractive. Being able to change the colour of nodes and edges would be a useful additional feature. • Your bigraph editor could allow users to choose the colours of elements of the bigraph which they are editing. 21. [5 marks]


User friendliness

Users are more likely to use software which is friendly to use. Adding a splash screen adds appeal to a product. Adding keyboard bindings to access menu items improves ease-of-use. • Your bigraph editor could have a graphical splash screen, and keyboard shortcuts. 22. [5 marks]


Proper nesting of nodes and sites

Bigraphs have nodes and sites which are properly nested. A node is not allowed to overlap another node so that it is partly inside it and partly outside. It must be either fully inside the node, or fully outside it. The same is true for sites. It is possible for your bigraph editor to support this discipline and thereby prevent the user from accidentally producing a non-well-formed bigraph. • Your bigraph editor could enforce proper nesting of sites and nodes, 23. [5 marks]


Layout management

The term layout refers to the positioning of the nodes on the canvas in the graphical editor window. Usually this is done explicitly by the user by dragging a node from the palette onto the canvas and positioning it in the appropriate place. One time where this does not apply is when cut or copied nodes are pasted back into the bigraph. Here it is possible for an automatic procedure (the “layout manager”) to decide where the pasted nodes are positioned. and whether or not existing nodes are repositioned or resized to make room for them. • Your bigraph editor could include a layout manager, 24. [10 marks]


Bigraph concepts

The purpose of this practical exercise is to build a graphical editor for bigraphs. Extra credit is available for any attempt to implement more of the theory of bigraphs. These specialist topics are not described in detail here but pointers to the bigraph literature can be obtained on request. Among the specialist topics in bigraph theory considered here are: 8

• sorting nodes according to a type system; • merging or composing bigraphs; • generating an algebraic representation of a bigraph; • allowing the user to define the reaction rules of a bigraphical reactive system (BRS); and • other bigraph operations not listed above.

25. [15 marks] 26. [15 marks] 27. [15 marks] 28. [15 marks] 29. [15 marks]


Submission information
What to submit

You should submit the folder in your Eclipse workspace which contains your bigraph editor project. This should contain the following things: 1. all of the Java source code, XML configuration files, JAR files and other libraries needed to recompile your project; 2. the HTML documentation which you have written for your editor; and 3. an OpenOffice spreadsheet which specifies the marks which you think that you should obtain for each target in this practical exercise (a template will be provided for this). In assigning marks to targets you should interpolate in order to give yourself a fair mark on the available scale. For example, if a target is worth 5 marks and you think that you have provided a robust, working implementation of this then assign yourself 5 marks. If you think that you have met this target to a reasonable extent but not fully then assign yourself 4, 3 or 2 marks as appropriate. If you have made only a start on a target but not much more then assign yourself 1 mark. If you have not addressed a target at all then give yourself 0 marks for this. Proceed in this way for each of the 29 targets specified here. The supplied spreadsheet will keep a running total of your mark. The activity of assigning yourself marks for targets will give you a justification of the mark which you think that you should get for this practical exercise. However, if the mark assigned by the markers may be higher or lower than the mark you assign yourself. In the case of a wide discrepancy between these marks please refer to the comments of the markers.


How to submit

First, check that your code works on the School of Informatics DICE computer system, copying it from your own laptop as necessary. If your project is in a folder called bigraphs then you should submit it using the command

submit cs3 ip 2 bigraphs
7.3 Deadline

The deadline for this practical exercise is Friday 18th December 2009 at 16:00. 9

Shared By:
Description: CSSE Individual Practical Part 2