Content area
In this paper we propose an online learning method for constructing and editing different types of UML diagrams, with details about their purpose and the technologies used to create the study application. It describes how to design and use the application and how to integrate it as an e-learning content in a virtual learning platform. The paper presents the UML notations, which will be grouped according to the diagrams corresponding to each notation. Analysis of an application implies the development of several categories of models: the use case model, the structural model and the behavior model. The following web technologies were used to build the application: HTML, Javascript, jQuery, CSS3, Ajax, PHP, and MySQL. The basic technology of the application is Javascript, namely the jsuml library. This library has a level-based architecture where graphics management (objects specific to UML charts) is done using application objects, separated into various files. The paper describes the actions in order of their appearance in the application menu. A new created UML chart (type: class, use case, status) generates a new work area, the specific elements of the selected diagram appearing in their dedicated areas. The paper presents case studies with generating and editing examples for all types of UML charts. The procedures the UML charts are created and modified with, as well as the definition of UML diagrams and their classification are described in the application. The Javascript technology was chosen because it allows work with the server without refreshing the page and because it has become more and more powerful, resulting in a more dynamic client-browser interaction. The paper presents examples of new created diagrams using the proposed UML chart management tool. The corresponding application is integrated as e-learning content into the Easy-Learning online learning platform in order to be used as a virtual learning module. Survey experimental results are presented.
Abstract: In this paper we propose an online learning method for constructing and editing different types of UML diagrams, with details about their purpose and the technologies used to create the study application. It describes how to design and use the application and how to integrate it as an e-learning content in a virtual learning platform. The paper presents the UML notations, which will be grouped according to the diagrams corresponding to each notation. Analysis of an application implies the development of several categories of models: the use case model, the structural model and the behavior model. The following web technologies were used to build the application: HTML, Javascript, jQuery, CSS3, Ajax, PHP, and MySQL. The basic technology of the application is Javascript, namely the jsuml library. This library has a level-based architecture where graphics management (objects specific to UML charts) is done using application objects, separated into various files. The paper describes the actions in order of their appearance in the application menu. A new created UML chart (type: class, use case, status) generates a new work area, the specific elements of the selected diagram appearing in their dedicated areas. The paper presents case studies with generating and editing examples for all types of UML charts. The procedures the UML charts are created and modified with, as well as the definition of UML diagrams and their classification are described in the application. The Javascript technology was chosen because it allows work with the server without refreshing the page and because it has become more and more powerful, resulting in a more dynamic client-browser interaction. The paper presents examples of new created diagrams using the proposed UML chart management tool. The corresponding application is integrated as e-learning content into the Easy-Learning online learning platform in order to be used as a virtual learning module. Survey experimental results are presented.
Keywords: E-learning content, Web application, Learning environment, Virtual class, On-line platform, Unified Modeling Language, Automatic-generated tools.
I.INTRODUCTION TO UML
In this paper we propose an online learning method for constructing and editing different types of UML charts, with details about their purpose and the technologies used to create the study application. It describes how to design and use the application and how to integrate it as an e-learning content in a virtual learning platform.
UML (Unified Modeling Language) [1] is a universal language used for specifying, viewing, building and documenting software system elements, being a standard for software modeling. UML is not a simple object-oriented modeling language, but is now the standard universal language for software developers around the world. UML is the successor of the best three previous object-oriented modeling languages (Booch, OMT, and OOSE). UML is a union of these modeling languages, and it also has an expressiveness that helps solve modeling problems that previous languages did not have.
UML provides system architectures that work on analyzing and designing objects with appropriate language for specifying, visualizing, building and documenting software systems artifacts and also for process modeling in enterprises. UML is a modeling language that provides a graphical representation of the structure and software behavior. Graphical expression uses UML notations.
UML notations are an essential element of the language for the proper realization of modeling, namely, the part of the graphical representation on which any modeling language is based. Modeling in this language is accomplished by combining UML notations within their main elements, called diagrams [2]. Within UML chart technology there are 9 types of diagrams:
1. Use case diagram;
2. Sequence diagram;
3. Collaboration diagram;
4. Class diagram (the most used);
5. State diagram;
6. Component diagram;
7. Construction diagram;
8. Object diagram;
9. Activity diagram.
II.DESCRIPTION OF THE UML CHART MANAGEMENT APPLICATION
The present paper presents the UML notations [3], which will be grouped according to the diagrams corresponding to each notation. Analysis of an application implies the development of several categories of models, the most important of which are [4], [5]:
* The use case model. It accomplishes the modeling of problems and their solutions in the manner in the end user of the application perceive it. The associated chart is the use case diagram.
* The structural model. It is based on the static analysis of the problem and describes the static properties of the entities that make up the field of the problem. The associated charts are the component (module) diagram and the class diagram.
* The behavior model. It refers to the description of the functionality and succession over time of the actions performed by entities in the problem domain. The associated charts are the state diagram (map), collaboration diagram, and interaction (activity) diagram.
The following web technologies [6] were used to build the application: HTML, Javascript, jQuery, CSS3, Ajax, PHP, and MySQL [7]. The basic technology of the application is Javascript, namely the jsuml library [8]. This library has a level-based architecture. Graphics management (objects specific to UML charts) is done using application objects of jQuery [9], which are separated into various files. Thus, the library has two basic files [10]:
* UDCode. It is the core of the library and focuses on basic functionality such as line and shape tracing, user-driven event management.
* UDModules. It is the level that contains the UML objects.
The initial interface of the application can be seen in Figure 1.
On the left part of the main page, the available actions and the specifics of each chart type are displayed. These items appear when a chart or work area has been selected. The available actions can be seen in Figure 2:
* XML Export/Import (Open diagram / Save diagram);
* Save image (PNG file);
* Delete object;
* Change color;
* New diagram - class diagram;
* New diagram - use case diagram;
* New diagram - state diagram.
III.ACTIONS ASSOCIATED WITH THE MAIN MENU OF THE APPLICATION
The present paper describes the actions in order of their appearance in the application menu. The first action is to export or import XML or open or save the diagram (see Figure 3).
The export action converts all elements in the canvas (the area in which objects and diagrams are created) into XML documents [11]. The import action performs the opposite of the export action and generates UML charts based on an XML chart.
In order to save the working area in the database (MySQL), the export button must first be pressed, after which a window will open in which a name can be introduced and/or it can be saved under a name already found in the database. Entering into the database is done using Ajax, which sends the workspace name and its content to the PHP (save.php) file, which consists of an XML object. The work area may contain one or more charts.
To open a work area, a window appears where one can select the desired work area. This is done by creating an Ajax request to the server, which will return a response containing an XML object. The XML object is copied to the text content area and the import button click event.
The image saving action is intended to export or save the current open diagram with Javascript to data URL. This feature was introduced into Javascript with the release of the HTML5 standard, and its role is to read all the information inside the canvas area by encoding it in the 64th base.
The color change action displays a window made up of tree RGB (Red, Green, and Blue) rectangles, where one can click on them, creating a new shade from the combination of the tree types of colors. Once the desired color has been selected, the UML elements to be applied will have the previously selected background color (see Figure 4).
Once the desired color has been selected, the OK button is pressed, and the UML elements to be applied will have the previously selected background color. To remove an element or a link between the elements, the action of deleting an object is used. This action takes place in two stages:
1. Click the "Delete Object" action;
2. Click the object / link in the open diagram.
If an object in the chart is deleted, all links that come in or out of that object are deleted. After an object or link is deleted, the application redesigns (renders) the objects in the canvas, just as they were before being deleted an object, but the deleted one. The new chart (type: class, use case, status) generates a new work area, the specific elements of the selected diagram appear in the area for them. Once a chart has been selected, the specific elements of that chart appear in the area for them. These elements are of two types:
* The objects of the chart;
* The links between objects.
The main diagrams created using the proposed application are:
A. Class diagrams (see Figure 5);
B. Use case diagrams (see Figure 6);
C. State diagrams (see Figure 7).
IV.EXAMPLES OF UML CHARTS CREATED USING THE APPLICATION
The paper presents case studies involving generating and editing examples for all types of UML charts. The procedures the UML chart are created and modified with, as well as the definition of UML diagrams and their classification are described in the application. The commonly used Javascript technology was chosen because it allows work with the server without refreshing the page and because it has become more and more powerful, resulting in a more dynamic client-browser interaction.
To use the UML tool application, first WAMP is installed (for instance, in the folder C:\ wamp) and then an import of the dump is made. To do this, open phpmyadmin using the following URL: http://localhost/phpmyadmin, open the "Databases" tab within, enter the database name (jsuml), choose collation "utf8_general_ci" and click the "Create" button. Having the database created, the next step is importing it. On the left side of the phpmyadmin application, one can see the name of the newly created database. Click it and then click the Import button. From here, upload the db.sql file by clicking the Browse/Choose button next to the "Browse your computer" sentence. Select the db.sql file on your hard drive and then press the "GO" button. The jsuml directory is copied to C:\wamp.
To run the application, the URL http://localhost/jsuml is accessed, using the latest versions of Mozilla Firefox, Google Chrome, or Internet Explorer as the browser, and then follow the steps:
1. Select the option "New diagram - class diagram" from the main menu;
2. The name of the current chart can be changed by clicking the zone above the work area in Figure 1 (Class diagram): the new name will be "Computer_Diagram".
3. Click on the "Package" element and then click in the work area where the item is intended to be positioned: the package name will be "Motherboard_Components". Remark. Any item positioned in the work area can be resized (using drag & drop) above the bottom left-hand square of the element.
4. Associate the package to 4 classes (Resistor, Condenser, Transistor, and Diode). This action is performed by pressing the "Class" element, changing the class name, and adding the "Compose" linking element in order to link the package to the class. Remark. The name of the class can be changed by clicking on the top part of the item (see Figure 8).
5. Create a new "Motherboard" class with "Processor" and "Video Card" as public attributes. The "Motherboard" class will import the package "Motherboard_Components" using the "Public Package Import" element, used the same manner as the "Compose" element. Remark. To add a new attribute, click on the green points associated with the attributes (see Figure 8). Once the attribute has been added, double click on the new created attribute and a window similar to the one in Figure 9 will appear. Within this window one can complete the corresponding attributes: visibility (public, private, protected), derived (yes/no), name, type, default value and restricted value(s) of the selected attribute.
6. Add 2 more classes: "Monitor" and "Keyboard". The "Monitor" class will have two public attributes: Resolution and Contrast, and "Keyboard" class, only one private attribute: Number Keys.
7. Create the "Computer" class, which will have 3 derived attributes: Baseboard, Keyboard and Monitor, as well as two public methods: Start and Stop.
8. The "Baseboard" and "Keyboard" classes will connect to the "Computer" class using the Generalization item, and the "Aggregate" element is used to link the "Monitor" class to the "Calculator" class. This element's fields will be completed as in Figure 10. Completing the aggregation element with the values, it is said that a computer can contain at least one monitor.
9. Save the UML diagram with a user-selected appropriate name. Finally, a chart should appear as represented in Figure 11.
By proceeding in a similar manner, the UML charts in Figures 12 and 13 may be created.
The final step of the procedure is to introduce this application module in the e-leaming content into the Easy-Learning online platform [12], an original e-learning product of the IT research team, in order to be used by students as e-learning application within the E-activities Management subject [13], studied in the Master program of Information Technology and Computer Systems within the Department of Applied Electronics and Information Engineering at the University "Politehnica" of Bucharest.
V.IMPROVEMENT OF E-LEARNING ACTIVITIES USING THE UML TOOL
In the academic and educational context, it is desired that the multiple e-learning tools, including UML, provide not only the features and functionalities for which they have been designed but also other options strongly related with education and academic issues such as: continuous assessment and learning, tracking student activity and progress, etc. A limiting factor of the learning tools is that all these require to be properly installed and the most of them require additional software for designing and drawing diagrams. On the other hand, the specific tools are independent so they cannot be integrated in a general framework (such as an e-learning platform) for offering support to different topics of courses.
A case study is presented in the following to illustrate a typical use of UML tools in an e-learning platform. A pilot study was accomplished to better understand the feedback self-regulatory behavior of graduate students (master study program) of E-activities course, integrated in the Easy-Learning platform [12], [13], [16]. To evaluate the proposed UML tool we consider a target group of 57 students assigned to the E-activities course (28 in 2016, 29 in 2017). In the group to teach the UML tools a number of 6 hours was spent. The tutor has introduced the basic UML concepts and then a set of three exercises was proposed to the students to acquire the required practical skills (see Fig. 11-13). The exercises require the proper use of the above described UML tool, using different numbers of classes and associations [14]. After that, a survey was conducted to better understand the feedback and the self-regulatory behavior of the target group [15]. A number of 9 questions were prepared, 5 for self-improvement evaluation and 4 for self-monitoring evaluation. The questions have 5 degree scale responses: strongly agree (5), agree (4), not agree nor disagree (3), disagree (2), strongly disagree (1).
Figure 14 shows the plots of students responses collected for the survey on the above mentioned two topics. Fig. 14a highlights the students' deliberate attention to their own performances to be improved upon and Fig, 14b conveys students' responses on importance of their own monitoring tasks: stick to plan, keep track of work to achieve the goals, set rewards on goals achievement, etc., as well as the tutor's perception of students' self-commitment toward the monitored learning.
In order to manage the students' feedback, in the experimental setup, the students' needs were collected using a classic feedback system supposing that students in the target group asynchronously post their comments (using forum, email or other means) on the efficiency and usefulness of the UML tool. Based on the feedback, the tutor continuously makes the necessary improvements. Faculty student communication is facilitated by this system through e-Mail and other means. This feedback system promotes peer-to-peer communication (student-student and tutor-student), enhancing the self-regulated e-learning results. From the tutor's impressions, one can remark that the UML tool is easy to use.
It does not require any previous installation and it provides important gains compared to the classical teaching and learning methodology. It offers a feedback system for continuous assessment of students' activity progress, making easier the personalized attention to the students and the assessment of student's degree of participation. The students' impressions have been very good emphasizing the fact that the access to the UML only needs an internet connection within the e-learning platform. During the multiple sessions students have been asked to comment on the difficulties they use to face while using the tool and their responses were strongly positive. Students feel motivated this way to solve all the proposed problems. The opportunity to self-adjust or to correct a problem in real time has encouraged them to keep working until a valid final solution is found.
VI. CONCLUSIONS
This paper proposed an online learning method for constructing and editing different types of UML diagrams, following these specific rules, with details about their purpose and the technologies used to create the study application. It describes how to design and use the UML chart management tool and how to integrate it as an e-learning content in a virtual class system. Case studies with generating and editing examples for all types of UML charts are presented. The procedures the UML charts are created and modified with, as well as the definition of UML diagrams and their classification are described in the application. The examples of new created diagrams using the proposed application emphasize the qualities of the UML chart management tool, integrated in the Easy-Learning online learning platform.
The application interface is very easy and simple to use, with clear and explicit menus, intuitive and strategically placed buttons and graphic symbols. Improvements that can be made are mainly related to introducing new features of animation and interactivity. The major conclusions drawn from the survey was that in an advanced e-learning platform an UML-based learning and teaching framework was proposed to improve the complexity management. Discussions and feedback on the experimental studies revealed very positive responses and students' awareness towards their own perception on different self-oriented learning strategies and techniques.
The following items suggest future work to be accomplished: (a) Experimental studies can be scaled up to cover larger cross-section of students to better understand their behavior and needs; (b) Techniques of Data Mining in Education can be applied to understand students' learning patterns and learning behavior in order to get knowledge discovery; (c) Code generation for various IT applications can be introduced using the UML tool; (d) Continuous improvements and modify requirements could result in frequent code changes so that code reengineering is applied to keep the UML tool up-to-date.
Reference Text and Citations
[1] Leon, Fl., 2012. Ingineria programării, course notes. Technical University of Iaşi.
[2] Roşu, I.C., UML - Diagrame de stare, online presentation: https://www.scribd.com/presentation/200667546/UML-Diagrame-de-Stare, accessed 2017
[3] Melnic, R., 2016. Analiza şi Modelarea Sistemelor Informaţionale (AMSI), online couse notes. Technical University of Moldavia: https://www.scribd.com/document/204600132/Curs-AMSI, accessed 2017
[4] techIT.ro, 2017. Unified Modelling Language (UML Tutorial), accessed 2017
[5] itzone.ro, 2017. UML Concept - Prezentare generală (UML Tutorial), accessed 2017
[6] Stoian, Fl., 2013, Webtop - virtual desktop, degree thesis. University "Politehnica" of Bucharest.
[7] Petrescu, M., Baze de date II, course notes. Technical University of Iaşi.
[8] http://code.google.com/p/jsuml2/wiki/Architecture, accessed 2017
[9] http://docs.jquery.com/Main_Page, accessed 2017
[10] http://ro.wikipedia.org/wiki/UML, accessed 2017
[11] http://bazededate.org/ModelulUnificat.pdf, accessed 2017
[12] Rădescu, R., 2011. The Easy-Learning Platform: Concept and Solution - An Educational Online System, Lambert Academic Publishing. Germany-USA, 1st Edition.
[13] Rădescu, R., 2010, E-Activities Management - practical works (in Rom.), Politehnica Press. Bucharest, 1st Edition.
[14] Vivekananthamoorthy, N., Sankar, S., Siva R., Sharmila, S., 2009. An effective E-Learning Framework Model - A case study. In Proceedings of the 7th International Conference on ICT and Knowledge Engineering. Siam University, Bangkok, 2009. Pages 8-14
[15] Brown, J.M., Miller, W.R., Lawendowski, L.A., 1999. The self-regulation questionnaire. In VandeCreekL, Jackson TL, editors. Innovations in clinical practice: A sourcebook, Vol. 17. Sarasota, FL: Professional Resource Press/Professional Resource Exchange. Pages 281-292
[16] The Easy-Learning platform: http://easy-learning.neuro.pub.ro, http://easy-learning.neuro.pub.ro:8888, accessed 2017
Copyright "Carol I" National Defence University 2018