A novel SVG application in UML system modelling


Abstract


With globalization, collaborative software system development enters a new dimension with competitive advantage and evolving business models. Software houses, seeking to reduce ever escalating software costs and tap into global talent pools, are outsourcing their software processes. This raises an important question: how can software developers who are geographically distributed get together and collaborate on a software project? One way is by providing a new software tool or development environment.

This paper presents eEEL, a prototype thin-client Web-based collaborative CASE tool that supports collaborative software modeling. The tool provides automated rendering of UML visual models in asynchronous mode. Developers can create, discuss and archive software artifacts in a centralized repository. The artifacts include UML visual models, use case narratives, threaded discussions (comments) and glossary.

The tool provides a mechanism to automate the processes of creating high-quality, resolution-independent graphics for UML visual modelling, thus eliminating the need to model UML models manually that is prevalent with current CASE tools. Developers specify their software requirements as a collection of UML triplets and the tool automatically generates the visual models that are textually defined in SVG documents. The mechanism is implemented using several modules: UML triplet management, virtual canvas management, unique filename generation, SVG document authoring, and HTML document authoring. It produces two documents -- SVG and HTML. The SVG document contains information to instruct the SVG rendering engine in Web browser, which is inherent via plug-in or native support, to render UML visual models. As UML visual models tend to be large to fit in a display screen, the sole purpose of the HTML document is to extend the horizontal and vertical scrolling capability in the HTML document to the SVG document, thus enhance the presentation of the visual content in the SVG document.

The current version can generate three UML diagrams -- use case, sequence and class diagrams. The system is implemented using Active Server Page (ASP), the Microsofts server-side script engine, and written in the Microsofts Visual Basic Scripting (VBScript).


Table of Contents

Introduction
Motivations
Aims
Literature Review
Related Works
The Unified Modelling Language (UML)
Scalable Vector Graphics (SVG)
Design and Methods
Overview of eEEL
Fundamental Building Block for the UML Diagrams
Automated Rendering of the UML Diagrams
Triplet Positioning Algorithm
Analyses and Evaluations
File Size Comparison
Cross Web Browser Compatibility
Triplet Positioning Algorithm Limitations
Conclusion and Future Works
Bibliography

Software houses (developers) typically use CASE tools to develop their software systems. CASE tools generally help improve the quality of software produced. They can be used to specify, design, construct, test and document software systems. They can also help reduce costs and improve delivery times. CASE tools today have varying degrees of sophistication. Some support early phases of software processes, e.g., specification; some, later phases, e.g., code generation; and some all phases (including forward and reverse engineering).

Most existing CASE tools are desktop-based, i.e., they cannot be accessed on the Web. This limits software houses to tap into global talent pools which can help reduce software costs and acquire needed expertise. Web-based CASE tools overcome this problem as they allow developers who are geographically distributed to collaborate and work together on software projects. Therefore, there is a strong case for Web-based CASE tools.

As Internet technology has matured over the years and has now become the de facto medium for global communication, it provides an ideal platform for collaborative software development. It is standards-based. Therefore, it provides a very flexible, inexpensive and effective environment for collaborative software development [Webster05].

Thick-client desktop-based CASE tools provide several features such as diagram editing and viewing facilities, sophisticated interaction features, and information management on local workstations [GordonBiddleNobleTempero03][Green89][KhaledMacKayBiddleNobleTempero02]. However, they are not accessible on the Web, so they are not very flexible. Thin-client Web-based CASE tools, on the other hand, are more flexible as they are accessible on the Web. They also provide a consistent ‘feel and look’ user interface. Web browsers also eliminate the need to install CASE tools on every workstation whenever they undergo revisions. They are also less expensive compared to desktop-based CASE tools. However, there is a big challenge: online collaborative CASE tools are restricted in the types of interaction allowed.

This paper presents eEEL, a prototype thin-client Web-based collaborative CASE tool, which allows members of software teams who are geographically distributed to collaborate and work together on software projects. It allows them to specify the software using a set of triplets for each UML diagram and the tool uses the triplets to automatically generate the diagram. It is flexible and cost-effective. The current version supports three UML diagrams: Class, Use Case and Sequence.

Two significant factors fuel the motivation behind the development of the eEEL. The first is the importance of the requirements specification in systems development that is aptly summarized in the article "No Silver Bullet" by Frederick P. Brooks, Jr., the author of the Mythical Man-Month:

The hardest single part of building a software system is deciding precisely what to build. No other part of the conceptual work is as difficult as establishing the detailed technical requirements, including all the interfaces to people, to machines, and to other software systems. No other work so cripples the resulting system if done wrong. No other part is more difficult to rectify later.

The second is the importance of the Use Case Narrative over the Use Case Diagram in UML Use Case modelling. Experts, such as Martin Fowler and Alistair Cockburn, place greater emphasis on Use Case Narrative over Use Case Diagram. The reason for the emphasis lies in the sole purpose of Use Case Diagram: to provide a succinct visual context diagram for a system, illustrating external actors and the ways they interact with the system.

The core of eEEL, which is the mechanism that automates the rendering of UML diagrams, can be summarized in the statement: "If more time should be dedicated to writing the Use Case Narrative and less time to drawing the Use Case Diagram, why not devise a mechanism in such a way that the time dedicated to drawing the Use Case Diagram manually is eliminated?" In other words, there is a need for a mechanism that enables the diagramming tasks to be performed automatically, without the need for user intervention.

Thick-client desktop-based CASE tools provide several features, e.g., repository support, versioning control, data modelling and diagram views. However, they lack automated diagramming support and Web accessibility. To overcome these limitations, vendors are now beginning to make CASE tools Web-enabled and provide automated diagram rendering support.

Some popular desktop-based CASE tools are Argo/UML [RobbinsHilbertRedmiles98], Composers [GrundyMudgridgeHosking00], and Pounamu [ZhuGrundyHosking04]. Because these are thick-client based, copies must be installed on every workstation. There are also meta-CASE tools available, e.g., GraMMI [SapiaBlaschkaHofling00], JViews [GrundyMudgridgeHosking00] and KOOGE [EbertSuttenbachUhe97] to cater to different user preferences.

Recent research efforts on Web-based CASE tools have produced the following prototypes: Pounamu/Thin [CaoGrundyHoskingHermannTemperoZhu05], BSCW [BentleyHorstmannSikkelTrevor95], OzWeb [KaiserDossickJiangYangYe98], Webworlds [Chalk00], Web-CASRE [LyuSchoenwaelder98], Cliki [GordonBiddleNobleTempero03], NutCASE [MackayBiddleNoble03] and Seek [GordonBiddleNobleTempero03]. However, they still lack automated diagram rendering features. Users can only view UML diagrams derived from formal specifications as in TCOZ [SunDongLiuWang01]. Therefore, there is still growing interest in the development of Web-based CASE tools.

eEEL is a thin-client Web-based CASE tool that suuports collaborative software modelling. The primary function of eEEL is to act as a shared, centralized repository system for authorized users to access contents in eEEL via the Web browser. eEEL provides the following functionality, grouped into eight categories:

  • Access Authorization. Available functions include logging in to eEEL and retrieving user access authorization password. Logging in is performed by providing User ID and Access ID and selecting appropriate User Type. Any attempt to view any page in ORCA without first logging in to it will result in the redirection to the login page.

  • Activity Notifications Management. Available functions include viewing activity notifications for all the UML diagrams, use case narratives, glossary terms, and comments. Entries for activity notifications are created in the event of the user (1) rendering new UML diagrams; (2) creating, converting or updating use case narratives; (3) creating or updating glossary terms; and (4) creating comments.

  • UML Diagrams Management. Available functions include creating, editing, and viewing elements and triplets of UML diagrams and rendering and viewing UML diagrams.

  • Use Case Narratives Management. Available functions include creating, editing, and viewing use case narratives (for high level and expanded views), converting use case narratives (from high level to expanded view), and adding detail to use case narratives (for elements in expanded view). Any created use case narratives in the high level view can be converted to expanded view. Additional data can be added to existing use case narratives as needed.

  • Glossary Terms Management. Available functions include creating, editing, and viewing glossary terms. All glossary terms are first categorized by the Project ID and then arranged in an alphabetical order. Creating a new glossary term requires selecting the appropriate Project ID. Viewing a particular glossary requires selecting the appropriate Project ID and starting alphabet of the glossary term.

  • User Comments Management. Available functions include creating and viewing comments for the UML diagrams, use case narratives, and glossary terms. The user can provide comments on either the UML diagrams or created use case narratives or defined glossary terms. Viewing comments is performed by selecting Comment Type, Project ID, and one of the following: (1) for the UML diagrams, Diagram ID (which can be viewed at the Activity Notifications page); (2) for use case narratives, Use Case ID (which can be viewed at the Activity Notifications page); and (3) for glossary terms, Glossary Term (which can be viewed at the Activity Notifications page).

  • User Accounts Management. Available functions include viewing and editing user accounts. Only important information (First Name, Last Name, Access ID and Email) can be updated. The user can only access his user accounts.

  • Administration management. Available functions include creating and deleting users and projects, resetting user access authorization password, and viewing user log history. This functionality is restricted totally users of type Team Member, limited access to users of type Project Manager, and unrestricted to users of type Administrator.

Although all diagrams are rendered using the steps listed in Section 4.3, not all diagrams share the same elements and triplets or use the same triplet positioning algorithm to position elements on the virtual canvas. The algorithm for rendering Class, Sequence, and Use Case Diagrams are described below.

An experiment on the HTML and SVG documents generated in eEEL is conducted on two different platforms (Windows XP Professional and Windows Vista Business) using four popular Web browsers (Firefox 2.0, Internet Explorer 7.0, Opera 2.0, and Safari 3.1). The objectives of the experiment are to determine the accessibility HTML and SVG documents and the proper rendering of the content of each type of the documents in two different locations (server and local). The results of the experiment are in Figure 5 and Figure 6.



From the tabulated experiment results in Figure 5 and Figure 6, the following analyses can be made on the accessibility and content presentation of the HTML and SVG documents:

  • Analysis 1. For the Firefox, Opera, and Safari Web browsers, each Web browser produces the same results for the both platforms and the both file locations. Behaviour #1, Behaviour #2, Behaviour #3, and Behaviour #4 would be further investigated.

  • Analysis 2. The Internet Explorer Web browser produces a 100% results for the XP platform but not for the Vista platform. Behaviour #5 would be further investigated.

  • Analysis 3. The Safari Web browser produces a near 100% results for the both platforms and the both file locations. Behaviour #3 would be further investigated.

As only the Firefox Web browser exhibits the undesirable behaviour, it is important to investigate the SVG text and tspan elements. As the Firefox Web browser does not exhibit the Behaviour #1 in UML Sequence Diagram, where no SVG tspan element is present, it is immediately obvious that the root problem for the Behaviour #1 is the attribute dy and the em value in the SVG tspan element (see Listing 1) as the SVG rendering engine in Firefox Web browser could not recognize and process the dy attribute and the em value.

Listing 1. An example of the original code snippet for the text positioning in UML diagrams.

          
            <text x='100' y='50' fill='black' style='font-family:Verdana;font-size:12' text-anchor='middle' startOffset='0'>
            <tspan></tspan>
            <tspan x='100' dy='1.2em'>Add</tspan>
            <tspan x='100' dy='1.2em'>Administrators</tspan>
            </text>     
          
          

Two possible solutions to remedy the problem brought about by the Behaviour #1 are specify the value for the y attribute, instead of the dy attribute, for the SVG tspan element in absolute value (see Listing 2), or to switch from the native support for SVG in the Firefox Web browser to plug-in support. However, the second solution will crash the Firefox Web browser if no registry tweaking is performed.

Listing 2. An example of the new code snippet for the text positioning in UML diagrams.

          
            <text x='100' y='50' fill='black' startOffset='0' style='font-family:Verdana;font-size:12' text-anchor='middle'>
            <tspan x='100' y='110'></tspan>
            <tspan x='100' y='120'>Add</tspan>
            <tspan x='100' y='130'>Administrators</tspan>
            </text>
          
          

Except for the Internet Explorer Web browser, all the other Web browsers exhibit the undesirable behaviour with the HTML documents. The culprits are the embed tag and the bgcolor attribute of the body tag in the HTML documents (see Listing 3). Further research to rectify the problem of the content presentation of the HTML documents reveals that the bgcolor is deprecated and the style attribute is favoured as the new attribute for specifying the background of HTML documents. In addition, the embed tag is more suitably used to embed the Web browser plug-ins.

Listing 3. An example of the original HTML document using the embed tag to embed the SVG documents and the bgcolor attribute in the body tag to specify the background of the HTML documents.

          
            <html>
              <head>
                <title>Log In</title>
              </head>
              <body bgcolor='#000000'>
                <div align='center'><embed src='rad7FB26.svg' width='950' height='935' type='image/svg+xml'/></div>
              </body>
            </html>
          
          

One possible is to use the style attribute for specifying the background of the HTML documents and the iframe tag to embed the SVG documents in the HTML documents (see Listing 4). However, the Internet Explorer Web browser would exhibit the Behaviour #5 with the HTML documents when the style attribute and the iframe tag are used but the error information still points to the SVG documents, and not the HTML documents.

Listing 4. An example of the new HTML document using the iframe tag to embed the SVG documents and the style attribute in the iframe and body tags to specify the background of the HTML documents.

          
            <html>
              <head>
                <title>Log In</title>
              </head>
              <body style='background-color: black'>
                <div align='center'>
                  <iframe src='rad7FB26.svg' width='950' height='935' type='image/svg+xml' frameborder='0' style='background-color: white'/>
                </div>
              </body>
            </html>
          
          

The triplet positioning algorithms for rendering the Class, Sequence and Use Case Diagrams have limitations.

For the Class Diagram, itemization of each class and grouping of other classes based on relationship for each itemized class can be viewed to give detailed information on each class. However, the algorithm is not designed to position class triplets to create a Class Diagram where the position of each class is arbitrary. From the viewpoint of each itemized class, the region for each type of class relationship has been predetermined and the position of each class depends on the type of relationship it has with each itemized class.

For the Sequence Diagram, ordering of participating objects presents a problem. The current practice orders the actor objects to the left of the diagram. While results of the automated rendering correspond to the ordering of participating objects (the first object in the set of interactions appears at the left and the last object at the right), there is no mechanism for user to determine the order of participating objects manually. Flexibility could be introduced at this point to enable the user to order manually the participating objects.

For Use Case Diagram, itemization of each primary use case and grouping of subsidiary use cases based on relationships with each itemized primary use case can be viewed to have more detailed information on the interaction between an actor and a primary use case. However, the algorithm is not designed to position triplets where the position of each use case is arbitrary. From the viewpoint of each itemized primary use case, the region for each type of primary use case relationship with the subsidiary use cases has been predetermined and the position of each subsidiary use case depends on the type of relationship it has with each itemized class.

The current categorization of use case triplets is still incomplete. We can add another category of triplets: subsidiary use case-subsidiary use case. The triplet interaction in use case is far more complex and the current categorization fails to address this complexity.

Although existing thick client desktop-based CASE tools perform complex tasks covering all or most of the software processes, they have two shortcomings: (1) they lack automated diagram rendering and (2) they are not Web-enabled. This paper has presented a prototype thin-client Web-based collaborative CASE tool that allows members of software teams who are geographically distributed to collaborative and work together on software projects. It overcomes both the above limitations, i.e., it generates diagrams automatically and it is Web-enabled. The current version supports Class, Use Case and Sequence Diagrams. Further works can be done to incorporate other UML diagrams. The triplet positioning algorithms can also be improved to provide dynamic triplet positioning and interactive system-rendered diagrams.

Conferences, Journals, and Articles