uml and web site development
2007-07-01 00:23 AM
First, an overview of Web sites are often complex and highly dynamic character. In order for Web applications in a short time and the beginning of the operation of the development cycle should be as much as possible to short. Many times, developers write code directly to this stage, do not you want to carefully consider what kind of structure is to prepare the site, as well as how to construct: server-side code is often unprepared for the preparation of the impromptu ceremony, with the database table is With the increase in the need, sometimes the entire application of the system state has a non-planning. However, as long as we use a number of modeling techniques and software engineering, development process will be able to allow more fluid to ensure that future Web applications easier to maintain.
UML (Unified Modeling Language, Unified Modeling Language) is a general-purpose visual modeling language, used to describe software, visual processing, software system structure and the establishment of the document. UML applied to a variety of software development methods, software at all stages of the life cycle, a variety of applications and a variety of development tools. UML to describe static system structure and dynamic behavior: the definition of the static structure of an important object of the system and operate the properties as well as the relationship between objects; the definition of the dynamic behavior of the time characteristics of the object and the object for the completion of objectives, tasks communicate with each other mechanism. UML is not a programming language, but we can use code generator UML model will be converted to a variety of programming language code, or use the tool to generate the reverse source code will be converted to UML model.
This article describes the use of UML for modeling Web site ways. UML to fully utilize technology is a complex process, but certain parts of UML is easy to use, and it can help you use less time structure of the system better.
UML to model building on the site of application, this article constructs a support for wireless users, providing all weather statements and statements of Web site traffic. This article is not prepared to detail UML itself. But for the sake of convenience, the appendix to a brief introduction of common symbols and terminology of the UML. To learn more about UML, please see the article of reference resources.
Second, the planning stage
Whether you are starting from scratch Construction sites, web site or transplanted to a significant increase in function, in order to ensure optimal design decisions, carry out some pre-planning is necessary. If you and others to complete a project collaboration, and distribution of the total work to reach a clear consensus on the role of inestimable. During the plan period, you should make an effort on the system the following aspects of the formation of a correct understanding of:
- Users and roles.
- Application requirements.
- Interface conversion between the various processes.
- Use of tools and techniques.
2.1 users
Understanding of the users using the system is very important. Analysis not only ask you to get in touch with the user (through a questionnaire survey, email, or face-to-face conversation), and you often have to allow the system to control the different user roles and permissions. Classification of users and understand their needs, you can find clues to determine the database's security mechanisms, methods of functional limitations, user interface division, training and assistance needs of the specific content of the demand, they can even learn from the side to the distribution of potential advertisers.
Figure 1: participants / role-level map
The figure shows several different sets of users (in the UML as the Actor, that is, participants). Here, the most common type of user ( "Site User") is located in the top graph, solid line arrows indicate the relationship between generalization ( "generalization" relationship, see Appendix note of this article, the same below), which indicated that specific Site User also can be divided into two types of users: Guest, Registered User. There are two types of characteristics of users in the "Site User" participants described, and the Guest and Registered User respective characteristics of private participants in the corresponding note. Usually, you can directly add documentation for the participants, without a separate document prepared by the user, but you used UML tools. In this case, Registered User can be broken down into the Wireless User and Administrator both types, the system for the treatment of these users should be different.
2.2 the definition of demand
Officially began in before writing code, you should be prepared to construct a kind of system to have a clear understanding. While at the same time in the preparation of the code can also be done gradually, and this is also very attractive, but with graphics and text information in advance to discuss the collective efficiency is much higher. Site preparation for a detailed description of the demand is often less cost-effective, but you should have time to draw a few sketches, notes to write paragraphs that the services provided by the Web site was prepared. This use to Use Case diagram (use case diagram). Use Case can be seen as a set of functions - it may be a corresponding page on the site, one must be prepared, or site of an action may occur (for example, to verify the user login and change the user's configuration file, removing expired accounts, etc.). The following is a web site can help you planning the Use Case diagram. Note that the map does not show all the site's Use Case, usually more than we need in order to describe the Use Case diagram of the site features complete.
Figure 2: Use Case diagram
Even in such a simple Use Case diagram, we can easily express a wealth of information. For example, include the relationship between the two Use Case contains the same authentication function; extend the relationship that the weather likely to WML page or HTML format; generalization relationship between the performance of each specific process will comply with the "Render HTML Page" or "Render WML Page" described the basic rules of conduct in order to achieve the effect of maintaining a unified style and unity of purpose of the macro patterns of behavior.
The figure also shows that wireless users can access the site's other users can not access certain areas. In this Use Case diagram, only wireless users to access traffic reports. This is because we have learned that only the movement of road traffic flow statements for the needs of users, and do not want to spend time on the traffic flow statements into other markup language forms. Thus, "Get Traffic Report" Use Case is divided into WML and HTML do not need to show two forms, it can be directly included in "Render WML Traffic Report" The Use Case.
In general, you should add these simple Use Case Description. Specifically, you should describe each Use Case in what will be, who can use it, how it started, how to stop, as well as certain times of special events that may occur (referred to as variation, that is, change).
2.3 User Interface Organization
Use Case in the production process, you will get some indication of what site the user interface of the clues. Perhaps you have long pages with some wonderful design ideas, but the Use Case to help us from another point of view. Is it really necessary for the user interface so much? Whether or not a page is too complicated? Web site easy to use navigation facilities, that is commonly used from the home visit service is very convenient? Interface in the draft outline, the production of a prototype Web site, you should be in the Use Case diagram to solve these problems.
When the Use Case increasingly clear that we can begin to outline the general structure of the site. Some people will be stressed that the document pages and components should be the corresponding map of (Component Diagram) model, in fact, class diagram (Class Diagram) tool is also very convenient. Please see the following diagram:
Figure 3: user interface and its layout
In the figure above, a variety of Web services are tied to a different region of the web site:
- / - The root site
- / common / - common graphics, scripts, CSS files, etc.
- / maps / - Map Data
- / traffic / - flow statements
- / weather / - weather report
The plan also shows the parameters passed between pages. regionId is a very important parameter, which represents the user's region of interest (which may be a country, city or province). regionId transmission in the region between pages of information, allows users to designated areas from weather to traffic information Jump statements. As for common area site, you can see is the pointer to the entire package (package) rather than a single file in the region, which is a simplified method to reduce the confusion because all other packages must be used in most (if not all) / common / region document.
User interface layout can help you avoid confusion sites, which the planning is very useful site. Moreover, once an effective structure of the organization's Web site, it can serve as a model of a fixed site in a number of applications.
2.4 tools to choose
For small sites, select the tools and techniques is quite simple. In particular the reasons for the investment, only a few tools have practical significance only - Apache, MySQL or PostgreSQL, PHP, Perl or JSP / Servlet. The most popular is a combination of Apache + PHP + MySQL, there are many low-priced Web hosting services to support and mainly concentrated in the combination of this tool. For larger sites, application software in terms of investment, it must be a variety of tools for a more rigorous assessment and testing. Here is an example of component plans, which can be used to describe the architecture of the site. The graphics are simple, but it has been described in the majority of the current site architecture, website for you to re-create the plan may also not necessary, because there is no longer worthy of adding different contents of the graphics.
Figure 4: Architecture website map
Discussed throughout the life cycle of software have been beyond the scope of this article, but it should be noted that the establishment of the application of the prototype model and the interface should be started at this time. Be sure to write down the website page structure and layout of some of the ideas, because in the end you will want to layout (menus, navigation bar, the overall page layout, etc.) to prepare some common code. In addition, if you are transferred to the new tools and technologies, the establishment of the working prototype that allows you to ensure the feasibility of the design, are confident that we have on the use of new tools for development team members sufficient training.
Third, the design phase
The design phase should overlap with the analysis phase. Once the structure of their system to have more awareness, you should begin to develop design ideas. First analysis of one hundred percent re-enter the design phase of system is meaningless. Always needs to develop, and sometimes the design itself needs to promote the development (or vice versa). All the developers are carrying out some type of design - just some of the development of programming code directly to the design of the form. Although this task can be completed, but it makes managing complex projects and working groups in the distribution of the very difficult task. Spend some time before the adoption of structural system model design, since you will receive an enormous return.
3.1 Design for the future
Many developers spend debugging and rewriting code for longer than the time of writing code, if more than one building site look at the issue, the situation is especially serious. Good website design to the structure, organization and the form of code reuse is applied to a number of websites. However, if the code is just a pile of hastily formed, from the existing long-term benefits of code is reduced. Web site design to planning, a very effective way is to draw class diagram (Class Diagram). The chart below shows the class diagram are used in many important relationships.
Figure 5: Class Diagram
Described as follows:
- Renderer is an abstract class (shown in italics). This means that the Renderer can not directly use category, the program can only create instances of its subclasses (ie, new Region ()). In order to meet the contents of the page shows the different types of needs of the browser, all used to generate page content must be derived from the type of Renderer.
- WeatherReport type object to create and have the Region, which, through the relationship between the representative of polymerization (Aggregate Relationship) displayed a black diamond, it said that the creation of an object and other objects have.
- Method name ("+") plus sign in front that it is the common method, can be other objects or function calls; minus sign ("-") that method or variable is private, only members of the same object within the function visit. In the methods and variables in PHP is public, but we should always as a private variable to avoid direct access from outside the object variable.
- Dependence on HTMLWeatherReport category HTMLUtils. Dependence (dependency) that want to create a class instance of another class or another class method calls.
- Each class diagram should be marked with a category: All methods (as well as all the variables, if any), methods of access to property (public, private or protected), the return value of the type of approach, methods, parameters, variables of type . EDITORIAL function, if the class variable, then the general then in a separate list box.
Even if you are not a structural object-oriented system, you are still on the class diagram can be used to establish a model system. Category to describe the ability to easily include a variety of relationships and you have a function of the preparation of documents. Although class diagrams are no longer at this time showed that inheritance, composition / aggregation, such as specific object-oriented system, but it can be used to describe the dependence of the call relations between documents.
3.2 run-time system model
In some cases, we need to show how the application of the various components of collaboration in the run-time task. In front of the class diagram shows the relationship between categories, but it does not show the order of call there and did not show the results from a function may decide to call the next target. In order to better describe the level of dynamic systems, UML provides a number of other types of plans. For Web site design, plot plan (Scenario Diagram) particularly useful. Plot plan is divided into two categories: collaboration diagram (Collaboration Diagram), sequence diagrams (Sequence Diagram). In general, we do not establish a system for all interactive process models, plot plans only system used to describe some of the most complex, or the code used to summarize the general call patterns. For example, we may have to model how a specific page of code to authenticate a user collaboration, or to show how to call the common code page (tools of the framework of the code) in order to maintain a unified look and feel.
Collaboration diagrams and sequence diagrams, respectively, as follows, for example.
Figure 6: Collaboration diagram
Collaboration diagram above shows the weather from the Web site to obtain statements of the general process. Attention to the plan ignored a number of important ways, because we only deal with the key steps in the process of interest. You can code "1" to "1.3.3.4" to identify the implementation of the order of the various functions. Some people prefer to "1,2,3, ... ..." No form of steps, but generally speaking, with "1,1.1,1.2,2,2.1, ... ..." shows the form of the depth of call stack is a kinds of better options, such a symbol indicates more clearly the way to show that the conversion process control procedures. For example, the map shows that report () method call, as well as a Region object WMLUtil in many ways: through a series of inquiries and content generating function to generate statements for the designated areas, we call the WMLUtil in buildHeader (...) function; Finally, we call that WMLUtil module buildFooter (...), and then return to report () method, and finally return getPage (). Collaboration diagrams you can add more details, such as the return value, restrictions, conditions.
Figure 7: Sequence Diagram
On the graphic message, the sequence diagram and collaboration diagrams are very similar. In fact, many modeling tools UML collaboration diagrams generated from the sequence diagram, or vice versa. Sequence diagram and collaboration diagrams of the main difference is: In order map, order of events at a glance, very intuitive. In addition, the sequence diagram can also join the life cycle and time detailed information, such as delay, concurrent thread, and delete objects such as structures.
Map in order to choose the time or collaboration diagrams, consider the following points will help you make the most appropriate choice:
- If you want to show the code with the time or is closely related to the issue of threads, select the order of Fig.
- If you want to show the interaction between object model, select the collaboration diagrams.
- If you want to display a few or a large number of interactions between objects, select the order of Fig.
- If you want to show a lot between a small number of objects or interactive messaging process, select the collaboration diagrams.
3.3 Application deployment planning
As this article in front of "tools options" section mentioned, the majority of Web site architecture is not complicated. Nevertheless, the deployment diagram (Deployment Diagram) in two aspects is still very useful: site structure, file organization. The document organization, planning ahead to discuss the interface has already been mentioned it can also be used for planning modeling tools category. The following components are given a simple map for reference, according to site needs and the complexity of the different, you may not need it.
Figure 8: Component diagram
3.4 Design Principles
UML is just a tool. If you use well, UML can help us to easily construct a better website. However, it is necessary to design a good web site, have a key still lies in the principles of good design or idea.
"Raise the kind of cohesion and reduce the link between different types of" It's a good point in talking about object-oriented design principles are often invoked repeatedly. An inward category includes those objectives and scope are closely related to the behavior and information. It means that you should not be constructed UI code and mathematical algorithms to achieve the code mixed together, you should make every effort to work closely with customers all the information related to UserAccount type of package. Cohesive design is an important design principle for many reasons: it helps to reduce dependence between categories, making the design more intuitive, easier to understand and make it easier for other developers to the entire design, a decrease of developers need to operate at the same time the number of classes, and so on. For example, if you want to change the site's user authentication mechanism, only a single document to amend a class than to amend a number of documents is no doubt, a number of categories more convenient.
"Reducing the links between different types of" means to make or file type of interaction between the minimum. It is not only easy to understand the entire design, but also facilitate the maintenance of the code. Consider the following examples:
Figure 9: Design A
Unless a deeper understanding of the various types of uses, it is necessary to estimate the degree of class cohesion is impossible. However, the relationship between these classes can be seen that this design has been successful in reducing the links between different types. Type of interaction between at least be reduced, making the system easy to understand the behavior. More importantly, the amendments to type any of the categories affected by the reduced number of at least (for example, to amend Class D only a direct impact on B-type). In addition, it is necessary to access the functions of class D, we do not know any of the E, F or G-type situation. As a comparison, consider the following diagram:
Figure 10 Design Example B
Clearly, in this design example, the type of link is very close. Once the category was changed to D1, in order to check such a change would have on other types of impact, we must carry out a wide range of other types of testing.
Only in the practice exercises in order to avoid a too complex design, but note the following points will help to achieve this goal:
- Raise the kind of cohesion. Not closely related to the function of the spread of a number of documents and categories.
- Using an intuitive, meaningful name. If other people can not understand the type, function or the role of variables, no matter what type of structure is perfect, the whole is still a lack of intuitive design. Excessive use of abbreviations will affect the design of intelligibility.
- Do not be afraid to rewrite code. In some cases, in several types of functions between the mobile number to greatly simplify the code.
- Category should remain compact and simple. Code expansion is a type of sign of the lack of cohesion. Too large a class, module or paper is often the lack of clear purpose and objectives.
- So that other people can review your design. Others may be new ideas, or you think you pointed out that the obvious but the others can not understand the question.
- In the early design stage performance not too many issues to consider. With a clumsy, to the problems yesterday and compared to optimize the design, a simple, carefully designed more easily adjusted to optimize performance. This is not to suggest attention to the problem behind the performance, but the details of the proposed optimization problem to stay late to consider the project.
Fourth, UML tools
Here are some worth considering UML modeling tools:
- Microsoft Visio: Visio Professional 2000 now provides support for built-in UML. If the Visio drawing tools to consider a variety of other purposes, this is a very valuable tool. If you use the previous version 2000, you can find Visio Stencil and Template for UML.
- Rational Rose: This is a recommended tool to use, but for many small Web project it is very expensive. With such a tool Rational Rose, improvement and maintenance of design, from model to generate reports, collaborative environment in parallel with others, work together very convenient for modeling.
- MagicDraw: a low-cost Java-based UML modeling tool.
- Together: with C / C + + and Java is closely linked to support the UML model.
- Objecteering UML: a free UML individual products.
- System Architect: high-end of a very popular UML modeling tools in support of two-way project (Round-trip Engineering).
V. Appendix: UML symbols and commonly used reference resources
The following table briefly describes commonly used symbols and the relationship between UML. To learn more about UML and object-oriented concept of a detailed explanation of terms, see the following reference resources.
| Symbol | Description |  | Package
Package. Used to gather and organize a part of the model (Use Case, Class, etc.). |  | Actor
Participants. It represents a user or other external actuators. |  | Use Case
Use case. Use Case describes the behavior of a certain part of the system. In general, Use Case records of the needs of a system, and this function by the action or incident response model. |  | <> Relationship
Inclusion relation. Mark for <> the relationship between the Use Case Relations Use Case to the introduction of other functions. This is a convenient division of Use Case, to avoid too large a single Use Case approach. |  | <> Relationship
The expansion of relations. Mark for <> the relationship between the Use Case relations can not duplicate existing Use Case describes the various circumstances and needs, so that the conduct of the existing Use Case specialization. |  | Dependency
Dependent. As its literal meaning, it means a thing to rely on other things. This means that to understand a thing the other things and other things need to be able to function. |  | Note
Notes. UML diagram in the comments the purpose of providing a brief description is to clarify the contents of the chart. |  | Component
Components. General on behalf of a software component unit, it may be a DLL, an executable file or a database. |  | Node
Node. Node on behalf of a general machine, the machine has to run one or more of the capacity of the system components. |  | Class
Category. In UML class and object-oriented programming in the same category, that it define and package a set of behavior and attributes. Run-time class was instantiated to create the object. |  | Object
Object. Examples of target categories. For example, "MyClass myObj = new MyClass;" created a myObj object. |  | Generalization
Generalization. Category can be derived from the father (or specialization) have more specific sub-category of acts, when the parent is the subclass of the superclass (or subclass of the generalized version). |  | Interface
Interface. A set of interface definitions may act from outside visit. Categories, the Treasury, the implementation of documents, data files can be described by the interface. Interface itself is not the realization of any function, it is just and statements to achieve the object of the interface must be entered into a contract which acts to achieve. |  | Abstract Class
Abstract class. Abstract class can not be instantiated directly, but derived allow specific types of actual function. |  | Association
Associated. Association is to type two or more connecting. You can for the two types of relations between the more specific information. Association of two or more specific types of relationship between the yuan, which describes the examples of these types of contact element. In a related in the same category can appear in multiple positions. |  | Aggregation
Polymerization. Paradigmatic relations that an object belonging to all other objects. |
|
|
