Component technology column
The last phase introduced the basics of component technology and the brief introduction of Ilog company products JViews. This issue we have learned about JViews technology, and use one or two examples to explain how we use advanced components simple and fast development. High performance, professional-grade dynamic interactive graphical interface.
This period of this issue: JViews Diagrammer and Charts; the next issue we will introduce JViews Maps and Gantt. Through this period and the next introduction, the reader should be able to easily use the JVIEWS components to easily develop applications, and can quickly construct a variety of graphical interfaces, in the application, web client free use.
Phase II JVIEWS Technology Introduction: Charts and Diagrammer
JViews Charts Introduction
In the previous brief introduction, JViews Charts can display a wide variety of chart formats, including two-dimensional point maps (2D Point), Packed, Bar, Stacked, Bubble (BUBBLE), Regional (Area), High / Low, Candle, Radar, Polar, Pie, Pie, Pie, etc. Charts implements a view controller (MVC) framework for class Swing component model, which is clearly separated from data and representation. The data model is fully open and scalable and can be connected to other application components. The update communication mechanism is automatic, transparent. When the data model changes, the chart is also updated; when the user changes the chart, the data model also changes.
This part we have to analyze the concept, characteristics, features, and typical applications of Charts:
(1) Basic introduction, introducing the features of JViews Charts and its typical use.
(2) Basic concepts introduce the basic concepts of various elements in JViews Charts.
(3) General framework, show the main components of the general framework and JViews Charts.
(4) Application development, introduction design tools, is a GUI application, including different graphics components that can be used without writing code, and SDK using the Java API extended chart component.
(1) Basic introduction
This section will introduce you to the features of Charts and describe the characteristics of the product and its typical use.
What is Charts:
Chart (Charts) uses different forms (markers, line segments, strips, etc.) to show data in a graphical manner, using the scale to represent the value of the data being displayed.
Charts uses chart to display data, and you can define your own way, and add a variety of interactions in the chart. Charts is designed to have the optimal performance and clear object structure, which is the best solution for processing a large number of and / or dynamic data models - such as real-time monitoring systems -.
Charts offers a wide range of display:
Ÿ Standard Cartesian chart. The data is displayed with a Cartesian coordinate system, and the x-axis and Y-axis are represented by horizontal axis and vertical axis, and the scale is rectangular, and there is a right angle.
(Cartesian chart) (pole coordinate chart) (radar graph) ÿ Polar coordinate graphic display with circular display data. The data is displayed with a pole coordinate system, and the value of the abscissa is displayed on the circle, and the value of the ordinate is rectangular, and is arranged in an emission.
Ÿ Radar chart. The radar chart can be related to each data and perform multiple types of comparisons. In the radar chart, each type of value has its own coordinate axis, emitted from the central point. The same series of values are connected by lines.
Ÿ Bubble chart represents the performance of a certain discrete curve.
Ÿ High and low value diagrams, display two data sets with a high and low value, and define a rising style (high value ratio low value) and drop-down style (high value ratio low).
(Bubble map) (high low value map)
Static and dynamic chart
The chart can be static, that is, when it is displayed, it does not change in the appearance; it may be dynamic, that is, as the user's action or the change of external data varies.
Main feature
Charts has the following characteristics:
Ÿÿ Full API.
Ÿ 最 Optimality and clear object structure.
Ÿ Extensive display Type: Pacific, strip, region, bubble, high low value, scatter, trapezoidal, combined map.
Ÿ Easy customization.
Ÿ 数据 Data and its graphic display clear distinction.
Ÿ 数据 Data related chart.
Ÿÿ Dynamically control the appearance of the displayed appearance using the Calm Style Table (CSS).
Ÿ and any Java application integration that supports Swing.
Ÿ Java beans set, you can use it in your Ide you used to.
Ÿ 进行 Coordinate transformation on a given coordinate axis. The change can be linear or non-linear.
Ÿ Import on demand. On-demand import mechanism allows you to control memory by connecting the chart to the data you want to display by connecting the chart to the data you want to display.
Ÿ Thin client architecture.
¡ Class package based on standard servlet Java technology.
¡ Built-in support graphics creation.
¡ Supports graphics in JPEG and PNG formats (additional formats can be added) by adding custom encoding.
¡ Automatic creation of client graphics.
Ÿÿ Full print API.
¡ Print API based on standard Java 2.
¡ Multi-page printing.
¡ Rich page format (paragraph arrangement, local font, etc.).
¡ Combined document (chart, table, text mix).
¡ Scalable frame.
Typical use of Charts
Use Charts to react data to observe their value and trend towards, such as:
Ÿ 需要 Need to respond data to observe the value of data and the trend of trend. Users can be a lot (such as displaying the NASDAQ index through the search engine), or some employees of a company. These applications use ordinary charts, anyone can understand without training. These charts are read-only, usually published on the web page (thin client), which only occasionally used.
Ÿ Require more stringent applications, it is professional to use their daily work. These charts usually need real-time updates, that is, they are connected to the data stream and refresh in real time. These charts are customized by the application, requiring precise scrolling, scaling, specifying focus data, interaction, and editing data. Such applications exist in all industries: trading applications, engine tests (automobiles, aircraft, etc.) and other mechanical testing, networks or application management, scientific research. (2) Basic concept
This part introduces the basic concepts of various elements in Charts.
2D and 3D
Charts can display two-dimensional data models with a three-dimensional chart. Only the Cartesian chart and the pie chart support three-dimensional display.
Data and views of the view
CHARTS is based on a SWING variant with an MVC model, called the separable model architecture. In this design, the model management data or component represents the value, and the view management model is graphically displayed and handled on the interaction on the graph.
Chart type
Charts has four different chart types:
Ÿ Cartesi
Ÿ radar shape
Ÿ 极 坐 图 图
Ÿ 饼
Supported graphics show
Charts supports eight types of graphics:
Ÿ foldline
Hump
Ÿ ÿ area
Ÿ bubble
Ÿ High low value
Ÿ ÿ 点
Ÿ trapezoidal
Ÿ 组 组 组 图
Chart area
The chart area refers to the place where all painting movements (the data itself and the decorative graphic display portion) are.
Head and foot
These components are optional Jcomponent, corresponding to the upper or lower portion of the chart area.
Axis
The coordinate is automatically created by the chart, the default status is a longitudinal coordinate.
Scale
The scale can be defined on the graphical representation of the chart axis, and automatically configured when the chart is created.
The scale consists of the following elements:
Ÿ The coordinate axis, which is determined by the chart project (can be a straight line and arc).
Ÿ 主 Main mark, draw on the length of each scale on the coordinate axis.
Ÿ Tag label, indicate next to the main mark, which specifies the value indicated by the corresponding tag.
Ÿ Sub-marker, the smaller scale drawn on the coordinate axis.
Ÿ Title, can be expressed anywhere on the coordinate axis.
Due to the difference in chart type, the scale can be:
Ÿ Rectangular (that is, the coordinate axis is parallel to the coordinates of the screen).
Ÿ Circular arc (generally used in pole coordinate chart).
icon
The icon component is an optional component that can be added in the chart or added in other containers. The icon is associated with the chart and will be automatically updated when needed.
grid
The grid helps to locate a data point in the chart, which is a graphical instruction of the value.
decoration
The chart can have a decoration as follows:
Ÿ Data indication
Ÿÿ 的 注解 指 数 指解
Ÿ and a given data point connection
Ÿ Image in the marker area
Painting order
Painting sequence controls the decoration position during the drawing of the chart, and also controls a decoration to draw above or below; negative painting sequence drawn below the graphic graphics, while zero or positive painting sequence decoration Draw on the graphic graph.
interactive mode
Interacting chart objects and one or more behaviors together, there are the following ready-made interactions:
Ÿ Zooming interacts, enlarged or shrinks the displayed data. Ÿ Two sliding interactions, on a given data axis, slide with the arrow keys.
Ÿ Flat transfer mutual, translate the displayed data with the mouse.
Ÿ A interaction set to correct the properties of zoom data conversion.
Ÿ Data interaction, users can:
Ÿ Edit a data point.
Ÿ Highlight or display information about data points.
Ÿ Select a data point.
Predefined interaction
The following list is the predefined interaction in Charts:
interactive mode
description
Zoom
Drag the slider to realize the zoom operation, the slider is placed in the chart area.
X-axis scrolling
Rolling operation on the X axis.
Y-axis scrolling
Rolling operation on the Y-axis.
Translation
The panning operation in each direction is performed with a mouse on the displayed graph.
Activity button
Press the specific button to perform an action.
Local translation
Drag and drop the mouse to translate the panning of the zoom window in the respective directions, click the mouse in the zoom window to start this operation.
Local adjustment
Adjust the shape of the zoom window by dragging the boundary of the zoom window.
Local zoom
Drag the slider change the zoom ratio of the zoom window.
Edit data point
Drag the data point corresponding to the data display area to change the data point.
Focus event
A interactive event is triggered when the mouse moves onto the graphics corresponding to the data point.
Information view
When the mouse moves to the graphic corresponding to the data point, the information is displayed.
Select data points
A event is triggered when the mouse click on the graphics corresponding to the data point.
(3) General Framework of Charts
CHARTS is based on a SWING variant with an MVC model, called the separable model architecture. In this design, the model management data or component represents the value, and the view management model is graphically displayed and handled on the interaction on the graph. This design clear area is divided into chart data models that handle data sets (also known as data sources), and drawing chart displayed by drawing data graphics.
Data model
The data model processes the data set through the data source. The dataset is a collection of data points, and the data points are defined by the (x, y) coordinate, with two values and an optional tag.
The content of the data source is dynamic, and its type is determined by data source (XML, JDBC, text file or memory value).
If you want to create a new chart with an API, use the following interfaces:
Ÿ l ilvdataset interface, with data container features.
Ÿ ilvdataasource interface, with data source features.
Graphic display
The graphical presentation of the data source is defined by the following guidelines:
Ÿÿ Global feature of the chart (for example, it is the Cartesian coordinates or polar coordinates).
Ÿ The conversion of data space to the screen coordinates is handled by the "Projector" object, which is an instance of the IlvChartProjector class. The type of projector object is defined by the type of chart, is the global parameter of the chart:
¡ When using the Cartesian chart, it is a Cartesian "Projector" object.
¡ When using radar charts, polar coordinates or pie charts, it is a polar coordinate "projector" object.
The mode (fold line, strip or bubble) is displayed on the screen, which is processed by the chart display, which is an instance of the subclass of the IlvChartRenderer class.
There are two types of chart displays:
Ÿ Combine display (instance of the ILVCompositeChartrenderer class).
Ÿ Single monitors (instances of the ILVSINGLECHARTRENDERER class).
Bundle data model and graphic display
Method for using the IlvChartrenderer class by a data source and graphic display, using the ILVChartrenderer class: Void Serdatesource (IlvdataSource DataSource)
Use the following methods to get the graphic presentation current data source:
Ilvdataserce getDataSource ()
style
The appearance of the chart can be dynamically controlled by CSS.
CSS is a mechanism for HTML appearance of a powerful definition web browser. We transform the CSS2 level of Java language, and set beans's properties according to the Java object level and status.
In Charts, the CSS engine is used to create and customize graphics and data graphics presentation when loading. When running, the engine is displayed based on the model of the model.
When you create a chart, you can define your own style for the following objects:
Ÿ chart components
CSS rules are used to customize the global appearance of the chart.
Ÿ Chart data
The CSS rule is used to control a single data point or a column of data.
(4) Developing CHARTS
This section describes the process of establishing a chart component with Charts.
The graph can be created by the GUI of the CHARTS design tool and develops the development of the SDK expansion chart. Most of the work should be done in design tools, however, in some places you may need to develop in the API expansion chart.
Establish the basic steps for chart components
The basic steps for establishing the chart are as follows:
Ÿ 组 Composition chart
Ÿ 给 to the chart application style
Ÿ Join interaction
Ÿ Save with projects
Ÿ Integrate chart to the app
Chart
To make a chart, you must first load data from the data source. Data can be loaded from the following four types of data source:
Ÿ XML
Ÿ text file
Ÿ Database (JDBC)
Ÿ memory
Xml
This type of data source is loaded from an XML file, and the supported file format should comply with the W3C XML language standard.
Text file
This type of data source is to require a value of each line of text, separated by a separated symbol. Supported separators have comma, semicolons, spaces, and Tab keys, with automatic detection of separated symbols. If it is data exported from the Microsoft Excel file, it is usually a comma as a separate symbol. Under this type, this type of data model is implied: the first line is the name of the model attribute, and then the next line is the value of the object attribute, the order of the attribute, and the name of the first line.
Database (JDBC)
This type of data source loads data from the Database Server via JDBC. The database contains a table consisting of rows and columns, each of which represents an object of the data model, and each column represents an attribute and mapped into the chart. The Excel file (.xls) is considered a database, and the form is considered a table of the database.
RAM
The supported memory data model is composed of Java classes that conform to the CHARTS data model, such as adding a new data point or changing the value of the existing data point.
Apply patterns on the chart
To display the chart objects corresponding to business data, and our end users and graphical interactions, we customize it through CSS.
By adjusting the style properties of the object, you can change the graphic display of the data in the following aspects:
Ÿ The color and outline of the selected data.
Ÿ The shape of the data point logo.
Ÿ 分 分..
Ÿ The appearance of the grid line.
Ÿÿ The location of the icon.
Join interaction
Charts provides the interactive mechanism of users and charts, interacts through charts, you can connect one or more behaviors on a chart object; they define the smallest interactive elements, which can combine complex interaction.
Save with projects
The project file is the association of the data source type (text file, XML, JDBC or memory) and style form (.css file), when you save the chart for the first time, it will be created as the suffix name in .icpr.
When you save your project in your design tool, you saved three files: project files, style sheet files and data files. The project file specifies the name, type, and data source of the style sheet file, and the name of the data file.
Integrate charts to the app
You can already create Charts, now you are integrating it into the app. Applications can be deployed from different ways: Swing GUI, Applet or thin client mode. In essence, in order to add the chart components to the GUI, you need to load a project, this project is set up a data source and style form combination, both of which are the foundation of the chart.
JViews Diagrammer introduction
In the previous brief introduction, the flowchart design tools provided by JViews Diagram Mer are a development tool, node, and link diagram that can quickly configure flowcharts without programming, and can be directly connected to the data source of the background, and can automatically follow Update the change of data. Intelligent graphics layout algorithms can clearly show the relationship between flowchart elements.
This section we will in depth, analyze the concept, feature, functionality, and typical applications of JViews Diagrammer:
(1) Basic introduction, introduce Diagrammer's product characteristics and some typical purposes.
(2) Basic concepts, discuss Diagrammer and the basic concepts needed to use it to develop.
(3) General framework, introduce the various parts involved, including Diagrammer internal components and
External entry.
(4) Application development, introduces the basic steps of the development process, and explain more details for each step of using design tools, and gives a general description of the development with a lower layer. The design tool is a GUI app for establishing a Diagrammer component.
(1) Basic introduction
This section will introduce you to the features of Diagrammer, indicating the characteristics of this product and its typical use.
What is Diagrammer
Diagram is a graphic display that consists of a line between various shapes and shapes. Diagram is mainly used to explain the relationship between individual associated objects in the system.
Many user interfaces developed by Java language require the business objects in the underlying system. These user interfaces typically display the system objects in the form of Diagram (the node is connected between nodes), and the precise term should be Graph.
Diagram can be static or dynamic, static is in the display process, it is not changed, just like its name suggests, it is a snapshot of a given system. Static diagram is usually used to make documents, typical applications are workflow maps and organization diagrams.
Work flow map
The following figure is a typical example of the workflow map, which has judgments, operations, and end:
Organizational Chart
The following figure is an example of an organizational map that represents the reporting path of an organization:
Dynamic
The dynamic simply can operate accordingly or external data, which maintains the connection between the business data in the display phase, and changes the graphic with the change of business data. Examples of dynamic simply: the operator changes the position of an item, the object changes the color as the state, and the line segment changes the width as the amount of transaction changes, and so on.
As a large computer system, the chart usually associates through a specific software. When the business object changes, the chart elements will change, and the display of the graphic object representing the business object will change to the change of the business conditions. This ability causes the chart to become an active entity, reacts the change of the underlying data, in fact, the term "data" is often used to describe the display interface to the service data in this manner. Diagrammer is used to create a computer display of dynamic maps or static diagrams. The following is some examples of dynamic diagrams:
Ÿÿ Process flow map
Ÿ Network monitoring diagram
Ÿ Logistics equipment map
Ÿ Business activity monitoring
Note that although the dynamic map can be used as a snapshot function, its true value is on dynamic display.
Process flow map
Process flow diagram is dynamic, it can display the current status of the underlying service:
Network monitoring diagram
Network monitoring diagram is dynamic, which shows the current state of the underlying network. For example, if a message passes an exception between the two nodes, the simply can change the color of the link to notify this.
The following image shows the connection and other network charts:
Main features of Diagrammer
The main features of Diagrammer are as follows:
Ÿ JViews simple map design tools.
Ÿ 易 Customized graphics.
Ÿ Custom development with complete SDK.
Ÿ 应 There should be a layout algorithm.
Ÿ Data and clear separation of display.
Ÿ 内 Built-in flow model and flow monitoring.
Ÿ Easy to deploy thin client mode.
Ÿ 显示 Display according to geographic location.
Ÿ 数据 Data association.
Ÿ Predefined JavaBeans.
Ÿÿ Full print API.
Ÿ Easy integrated.
Typical application of Diagrammer
In essence, the brief map shows the abstract underlying system, which often in the supply chain management, communication network, business process, network service plan, product stream, UML diagram, organizational map, route map, structure diagram, panel map, transportation hub Wait, etc. It has been widely used in the fields of telecommunications, military, weather, logistics, transportation (aviation, shipping, railways, etc.).
Diagrammer provides solutions for the following conditions:
Ÿ graphic editor
Ÿ asset management diagram
Ÿ Workflow
Ÿ Business process editing
Ÿ Product procedure
Ÿ Traffic monitoring
(2) Basic concept
This part of the goal is to explain the basic concepts of Diagrammer. It will use the following terms when doing development, you need to understand them when you implement your needs.
Diagrams
The simple map is the abstraction of your system. The main units in the system are called nodes on the graphics, and the line segments connecting the nodes are called connecting. In the most basic simplicity, the node can be a simple circle or polygon, usually have a text help explanation next to it. The connection is usually a straight segment, or a fold line.
Graphic layout
In many cases, the brief map is too complicated, manually unable to process, or simple map does not require manual operation to automatically establish the data of the application, so that the simply needs to automatically layout algorithms to process nodes and links. Such as shown below:
data
Diagrammer allows you to deal with the underlying Java graphic API, just care about business data and how to display. Diagrammer based on model - view structure, clear separation of data, display, and components interaction. It complies with the SWING architecture, which is the developer only cares about the data model, allowing the component to handle how to display data and operations (such as selected and editing). (3) General framework of Diagrammer
This section describes how to build a brief map and how Diagrammer helps you deliver the highest quality. It introduces the structure of Diagrammer, and how Diagrammer handles simple maps, and the internal and external components involved are expected.
Composition of Diagrammer
The figure below shows the nature of the Diagrammer, and the next chapter explains the individual parts and the alternating current integration between each part.
The schematic component is represented by the parent IlvDiagrammer, which provides many other services that can be directly obtained when you need better control.
Service can be divided into the following types:
Ÿ Make up a briefly.
Ÿ Management view service.
Ÿ Apply the style of service.
Ÿ Control the service of the simplicity in the app.
Composition Diagram
The formation is a simplicity involved the following topics:
Ÿ Data Source
The function of the data source is to load the data to be displayed, and the data source is written while the data is changed. There are three types of data sources: text files (only in design tools), XML files, and JDBC. If the above three cannot be used, you can connect the data model by implementing Java's data model interface.
Ÿ style sheet
The style sheet controls the appearance of the graphic corresponding to the data by complies with the style rules of CSS2. It defines the way the data objects of the data model correspond to the graphical object.
Ÿ Project
The project is the connection of the style sheet and the data source, which combines the input of the simple map. The project is saved as an XML file, the suffix name is .idpr (on behalf of Diagrammer Project), the project file is usually generated by the design tool.
Management view
The Diagrammer management view is done by the following sections:
Ÿ SDM engine
The SDM engine is one of the most important parts of Diagrammer because it controls data to maps.
Ÿ Data model interface
The SDM data model is to tell the SDM engine how to get the interface to be displayed, which is an abstract description of the node and between the nodes.
Ÿÿ
The display section is a Java class that helps to manage business data graphics, Diagrammer provides a lot of defined such classes.
Ÿ Draw graphics
The drawing part is a Java class that handles the graphic objects generated by saving and managing Diagrammer. It not only manages nodes and links, also manages any graphic objects that display background or decorative (such as icons).
Interactive
Interaction is a Java class that responds to events (such as mouse click), and Diagrammer provides a variety of definitions.
Application style
Application styles involve the following topics:
Ÿ style rules
Ÿ 组 组 组 图
Ÿ 图 graphics layer
Ÿ background and map
(4) Developing Diagrammer
When starting to develop a project, you usually build a prototype first. After the prototype is completed, it is usually developed in a stage in a stage in a stage.
This part introduces a typical way of doing development with Diagrammer, the goal is to describe the accurate development process, mainly given some guidance using DiagramMer performance. Establish a basic step of building a Diagram component
We recommend using Diagrammer to do the following four main steps:
Ÿ 组 Data model for consisting of application data
Ÿ Use design tools to establish a brief map
Ÿ Apply simple map components to develop Java Swing applications, applets or servlets
Ÿ Custom application
Another way is to start step by step from the gap with JViews framework.
Composition data model
The data model is the source of graphics display, and Diagrammer uses visual style tables that represent nodes and connectors of the data model. If there is no data model, you can't define a style sheet, so that you can't draw a brief map.
Ÿ prototype
Diagrammer provides built-in data models, you can manually form a model in the design tool, or use an XML file to indicate the data source; another built-in approach to constitute a data model from the database through JDBC. If you pass through the JDBC, XML or text files, you can import data directly in the design tool.
Ÿ Development
When developing applications, you can use a data model in memory and a data source provided by Diagrammer. This means that your application produces the XML file that Diagrammer can identify, or you can use XSL-T to convert the program's XML format.
If the data in the application is saved in the object model, you can implement the Diagram Mer data model interface to map the object model to the data model. This approach needs to write more code, but it does not have data repetition, and it is well synchronized in data and display.
Establish Diagrammer using design tools
The default style sheet provided by Diagrammer displays a traditional simply, there is a basic shape and connection, which has no distinctive properties; if you want a meaningful display, then you have to build an icon using the Diagrammer style function.
The most convenient way to define a distinctive brief map is to use design tools; you can also manually write a style sheet without designing tools, and then use SDK to establish a simple map parameter.
Ÿ How does design tool help to develop
Ÿ Fill data model
Ÿ View data model with Diagram view
Ÿ View style rules
Ÿ Establish style rules
Ÿ Configure layer
Ÿ Define background
Ÿ Save project
Development application
At some point you need to develop the following types of applications: Java Swing programs, Applets, or servlets. In these applications, you need to create an ILVDIAGrammer object, load the items produced by the design tool, then join the Swing or DHTML toolbar and menu to create a touch, such as zoom, pan, editing, and more.
Custom application
Diagrammer's built-in style sheet may not meet your requirements, this part is for you to define interactive interactions or implement data model interfaces that connect to the application data.
A comprehensive API defines a comprehensive API in the Diagrammer SDK, which is used to build and extend the classes that you are involved when making a simple map. Basically you can access all classes involved in establishing a simple map: SDM engine, data source, display, graphics, view, interaction, combined graphics, and graphics object itself.
Some types of data JViews Framework, they provide a more underlying feature. In JViews Framework, you have in-depth control of various classes of graphics systems to help you break through the limits of Diagrammer's simple map components.
Alternatively: JViews framework When you don't meet your requirements for the DiagramMer's simple map, you will use the JVIEWS framework, you use it to manage the synchronization between the drawing process, graphics, and data, and more.
If you choose to do this, give up the high-level component that hides the complexity of graphics, give up the style mechanism provided by Diagrammer, then you will use a good choice for Diagrammer: You will find that JViews framework provides all you. Want, including graphic layout packages.
In the Framework mode, you manage the graphics class, including your own graphic objects and connect, you can also manage the layout of the brief map with your own layout algorithm.
This approach is used in this way before the market is launched in Diagrammer. However, you have to write a lot of code, so although you can manage a brief map, the project cost will be much higher.
