[Eclipse] GEF entry series (1. draw2d)

On the first day of the year of Rooster, I would like to celebrate the Spring Festival and wish you all the best. The year is in spring. What are your plans for the new year? Okay. Let's go to the topic.

I believe everyone will be familiar with java2d. It is a two-dimensional graphics processing package based on AWT/swing. The example included in JDKProgramIt demonstrates the powerful graphic processing capabilities of java2d. Before the emergence of draw2d, SWT applications have been in a bad position in this regard, and java2d in the draw2d world has changed this situation.

Many may not know the relationship between GEF and draw2d very well: Some applications only use draw2d, but it looks similar to the GEF application. The following is a brief explanation of the cause:

GEF is a graphical editing framework with a standard MVC (Model-View-Control) structure. The model is designed by ourselves based on the business. It must be able to provide a mechanism for notification of model changes, it is used to tell the control layer about model changes. The control layer is implemented by some editparts. editpart is the core component of the entire GEF. The Mechanism and functions of editpart will be introduced in future posts; the view layer (in most cases) is the draw2d we will talk about here. Its role is to present the model to the user in a graphical way.

Although GEF can use any graphical package as the view layer, GEF has a strong dependency on draw2d. For example: Although editpart (Org. eclipse. GEF. the editpart) interface does not require any draw2d class, but the createfigure () method of the abstractgraphicaleditpart class that we use most often needs to return the ifigure type. For this reason, it is not surprising that the draw2d package is included in the gef sdk. In the same sense, only the first understanding of draw2d can grasp GEF.

In this way, the problems raised at the beginning can be summarized as follows: draw2d is a SWT-based graphics processing package, which is suitable for the view layer of GEF. If an application only needs to display images, it only needs to use draw2d. If the model of the application needs to be edited in a graphical manner, it is best to use the GEF framework.

Now let's take a look at what is in draw2d.

Figure 1 Structure of draw2d

Draw2d is connected to a canvas instance in the SWT through a component called lightweightsystem (LWS). The canvas is generally the shell of the application in the draw2d application, in the GEF application, more parameters are in the control (createpartcontrol () method of an editor). Although we cannot see the existence of LWS on the interface, however, all other images that can be seen are placed in it. These images form a tree hierarchy based on the parent-child relationship.

LWS is the core component of draw2d. It consists of three main components: rootfigure is the root of all images in LWS, that is, other images are directly or indirectly placed in rootfigure; eventdispatcher assigns various events on the canvas to rootfigure. These events are finally distributed to appropriate graphics. Please note that this rootfigure is not the same object as the top-level ifigure in your application, the former is invisible and used internally by LWS, while the latter is usually a visible canvas, which is directly placed in the former; The updatemanager is used to redraw the canvas. When the canvas is required to be repainted, LWS calls its merge mupdate () method.

LWS is a bridge connecting SWT and draw2d. With it, we can not only easily create images of any shape (not only rectangular), but also save system resources (because it is a lightweight component ). A typical pure draw2d ApplicationCodeIt has a structure similar to the following:

 //  Create a canvas for SWT (shell is a subclass of canvas) Shell shell =New  Shell (); shell. open (); shell. settext ( "A draw2d application" );  //  Create lightweightsystem and place it on Shell Lightweightsystem LWS = New  Lightweightsystem (Shell );  //  Create the top-level graph in the Application Ifigure Panel = New  Figure (); panel. setlayoutmanager (  New  Flowlayout ());  // Place this image in rootfigure of lightweightsystem  LWS. setcontents (panel );  //  Create other images in the application and place them in the top-level Graphics of the application.  Panel. Add ();  While (! Shell. isdisposed ()){  If (! Display. readanddispatch () display. Sleep ();} 

Next we will talk about the graphics. All the graphics in draw2d are implemented ifigure (Org. eclipse. draw2d. ifigure) interface, these images are not only a shape on the screen you see, in addition to controlling the size and position of the image, you can also listen to graphic events (such as mouse events, graphic structure changes, eventdispatcher from LWS), set the mouse pointer shape, make the image transparent, focus, and so on, each graph even has its own tooltip, which is very flexible.

Draw2d provides many default graphics, the most common of which are three types: 1. Shape, such as rectangle, triangle, and elliptical shape. 2. widgets ), such as labels, buttons, and scroll bars. 3. layers are used to provide zoom, scroll, and other functions for the images placed in them. In GEF of version 3.0, gridlayer and guidelayer are also added to implement the "adsorption to grid" function. There are quite a few classes under the class tree with ifigure as the root node, but I personally feel that the organization is a bit messy. Fortunately, in most cases, we only use the common part.

Figure 2 A draw2d Application

Each graph can have a border. The border types provided by draw2d include groupboxborder, titlebarborder, imageborder, buttonborder, and compoundborder that can combine two borders, there is also an insets class in draw2d to indicate the position of the border in the graph. It contains four integer values, from top to bottom to left.

We know that a graph can contain many subgraphs. These included images must be arranged in some way when displayed. The layoutmanager responsible for this task is the parent graph. Similarly, draw2d has provided us with a series of layoutmanagers that can be directly used. For example, flowlayout is suitable for table-based arrangement, and xylayout is suitable for users to freely change the positions of images on the canvas, and so on. If there is no layoutmanager suitable for our application, you can customize it by yourself. Each layoutmanager contains someAlgorithmThis algorithm takes into account the constraint object associated with each subgraph and calculates the final position and size of the subgraph.

A common task of graphical applications is to connect two graphs. Imagine various connections in a UML diagram, or the lines in a program flowchart that represent data streams. They have different appearances, some connection lines also need to display names, and it is best not to cross. Using the router, anchor, and locator in draw2d, multiple connection styles can be implemented. The router is responsible for the appearance and operation of the connection line, and the simplest is to set the router to null (no router ), in this way, a straight line connection is used. Other connection methods include broken lines and broken lines with control points (see figure 3). If you want to control the connection lines that do not cross each other, you also need to make them in the router.Article. Anchor controls the position of the end point of the connection line on the graph, that is, the position of the "anchor". The chopboxanchor is the easiest to use. It assumes that the center of the graph is the connection point, then, the intersection of the hypothetical line and the image edge is calculated as the actual anchor, and other anchor, ellipseanchor, labelanchor, and xyanchor are calculated. Finally, locator is used to locate the image, for example, if you want to display the name/function of the line by a label at the midpoint of the connection line, you can use midpointlocator to help locate the label. Other locator and arrowlocator are used to locate the decoration (decoration, for example, polygondecoration), bendpointerlocator is used to locate the Connection Control Point, and connectionendpointlocator is used to locate the connection endpoint. by specifying the value of the udistance and vdistance attributes, you can set the coordinates based on the endpoint ).

Figure 3 appearance of three Routers

In addition, draw2d is in org. eclipse. draw2d. the geometry package provides several convenient types, such as dimension, rectangle, insets, point, and pointlist. These types are widely used in draw2d and can be used by developers to simplify computing. For example, rectangle indicates a rectangular area. It provides the getintersection () method to conveniently calculate the overlapping areas of the area and the other rectangular area, gettransposed () the rectangular area after the length and width values are exchanged, and the scale () method is used to stretch the rectangle, and so on. When implementing layoutmanager by yourself, we recommend that you use these classes because it involves complex geometric calculations.

The above describes most of the functions provided by draw2d, which can be used to draw beautiful images. But for most practical applications, this is far from enough. We need to edit it and reflect the changes to the image to the model. To accomplish this tough task well, GEF is definitely the best choice. Starting from the next time, we will officially enter the world of GEF.

References:

• GEF developer Guide
• Eclipse development-using the graphical editing framework and the eclipse modeling framework
• Displaying a UML dimo-with draw2d