HT graphical Component Design (III), ht graphical component path

HT graphical Component Design (III), ht graphical component path

In the previous article, we customized the CPU and memory display interface and used HT for Web to implement code decoupling and binding linkage between drawing and business data through defining vectors, subsequent articles on such cases will continue to help you learn more about vector application scenarios. In this article, we will switch to a topic and talk about the relationship between Model-View-event.

The graphic component design architecture mainly refers to the relationship between the Data model, View, and Event. Over the years, the industry has gradually refined various GUI Design Patterns into theoretical classifications, the main categories of MVC, MVP, and MVVM are often collectively referred to as MV *. Many articles define and compare various design patterns. This article does not intend to further discuss the theory, there will be many differences in the design architecture of different graphic components. In fact, continuous development components are constantly improving various designs, I believe there are many good components that have created more new and more practical design models, but they have not yet been extracted to the theoretical level for the world to know. Therefore, I have carefully defined what P is, I don't think it makes much sense to define what a VM is and what a function should be written in. As long as the product is continuously improved, the team can better maintain the expansion, and users can learn and use it easily, the theoretical height is left to be defined by God masters like Martin Fowler.

Speaking of Martin Fowler, because of his "GUI ubuntures" and "Presentation Model", I saw an earlier article that clarified MVC and MVP, from the perspective of implementation, Apple's Cocoa Bindings technology used to develop Mac OS X decades ago has adopted a similar design, and the Objective-C Key-Value Coding and Key-Value Observing mechanisms, with the visual support of XCode, it can be said that many developers have been unknowingly enjoying the development power brought by these design models over the years. Java's Swing interface has been criticized for a long time, but in fact there have been excellent projects such as JGoodies very early, Swing is not a public, and JGoodies is even more niche, fewer people know about JGoodies Binding, which has achieved a very good MVP architecture encapsulation many years ago. If you are interested, please refer to JGoodies's 06-year PPT Desktop Patterns and Data Binding.

Adobe's Flex and Microsoft's Silverlight/WPF have high hopes in the industry. They did not think that the two were abandoned by the old owners in a rush, but they still promoted the popularization of MVP and MVVM design models, today, KnockoutJS and Backbone in the HTML5 field. js, AngularJS, PureMVC, and Ember. if many MV * frameworks such as js have sprung up, someone may even need to maintain a website named TodoMVC: Helping you select an MV * framework!

HT itself is also a set of Music Video * frameworks, but we seldom discuss design patterns in detail when training customers. In my opinion, good component encapsulation does not have to tangle users with your design patterns, after a few months of using your framework, you can still get started quickly without having to rewrite the learning process. This is our ideal framework, from this point of view, there are currently few graphic frameworks that can satisfy us. I believe many people have similar painful experiences. After a framework is not used for a period of time, they will completely forget how to start with it, swing veterans do not know how to add data to JTree and JTable without looking at the old code. Flex veterans suddenly cannot remember invalidateProperties. The custom components invalidateSize and invalidateDisplayList must master the details of functions, SL/WPF veterans cannot think of defining a DependencyProperty attribute. Apart from AffectsRenderer and AffectsMeasure, there are still many factors to consider. A bunch of emerging HTML5 music videos * frameworks mentioned in the previous section, I believe fewer people can say that they are proficient. You may have spent several months or even a year or two in a project, but you don't need to forget it for a while, so you lack the courage to shout out your proficiency, I think this is not because we are not smart and hard-working, but the current frameworks are not doing well enough. We have been trying to make HT develop in a direction we feel satisfied, in the future, I will discuss how to design APIs that make users do not forget.

Back to today's Model-View-Event topic, after Data and View are separated, the Event listening and dispatching mechanism is required to establish Data binding, I am not very fond of the dirty checking mechanism of AngularJS. I want to be notified of event changes and handle the changes I should do. As for some people who are worried about performance problems, I have to worry too much, over the years, graphic components have accumulated numerous mature skills to avoid the performance problems of events.

You don't have to worry about performance issues. After all, most of the tasks in this regard are considered by the Framework implementers, but you don't need to have a deep understanding of the Implementation Details of the framework, this does not mean that users can completely ignore the basic architecture context. It is necessary for framework users to understand the reference associations between models, views, and events. Otherwise, memory leakage may occur, I used to go through a client framework designed by a customer team to manage all interface windows. As a result, OOM memory overflow always exists. After checking, I found that they have a global WindowManager object, when each window is created, a reference to the window will be added. Although it seems very powerful, all interface windows can be controlled globally, but because most developers, the reference of the global WindowManager object will not be actively deleted when the window is closed to be destroyed, so that all windows can be referenced by the Global Object and garbage collection fails, therefore, it is necessary for framework users to understand multiple framework mechanisms to avoid such memory leaks.

In many cases, memory leakage is difficult to find out if it is not a long-term operation, but it is particularly difficult to find out that the 3D component based on WebGL, Graph3dView of HT, has obvious problems, most browsers have limits on the WebGL context that can be run on a single page. For example, chrome or firefox on a PC runs for 15 to six, and mobile browsers such as mobile phone tablets are more limited, therefore, if the old context of Memory leakage is not closed, the type will appear when the upper limit is exceeded. oldest context will be lost..

The following is an extension of the first example in the HT getting started manual. Three buttons for the following code logic are added to the toolbar. The first button creates 20 new tabs at a time, each Tab page contains a Graph3dView component, and the other two buttons are used to delete the part Tab.

{    label: 'Create 20',    action: function(){                                     for(var i=0;i<20;i++){              var tab = new ht.Tab();            tab.setName('tab-'+i);            tab.setClosable(true);                                            tabView.getTabModel().add(tab);                var g3d = new ht.graph3d.Graph3dView(dataModel);            g3d.name = 'g3d-' + i;            window['g3d-' + i] = g3d;            tab.setView(g3d);        }                                }},  {    label: 'Destroy 5',    action: function(){                   var emptyModel = new ht.DataModel();        tabView.remove('tab-5');        window['g3d-5'].setDataModel(emptyModel);        delete window['g3d-5'];          this.disabled = true;    }},{    label: 'Destroy 6-10',    action: function(){            for(var i=6; i<=10; i++){            tabView.remove('tab-' + i);            var emptyModel = new ht.DataModel();            window['g3d-' + i].setDataModel(emptyModel);            delete window['g3d-' + i];                                        }         this.disabled = true;    }}

Click the create 20 tabs to open the tabs respectively. The system memory object reference relationships are shown in:

Because dataModel is applied as a global object by window, And Graph3dView in other newly created tabs are bound to this data model, the Framework user should understand that, all components add event listening to The dataModel data model. In fact, the data model does not know the existence of various views. The data model only correctly distributes events to all consumers after data changes, these 20 Graph3dView are consumers, and each Graph3dView has a WebGL context, forming a data model from global window to dataModel, and then to the Graph3dView component, finally, we reference the relationship network in the WebGL context. If we do not manually disconnect the relationship, even if the Tab is disabled and destroyed, graph3dView still has system memory problems (in this example, tabs and Graph3dView objects are directly referenced on the window for test convenience ).

Therefore, when you click the 16th tab containing Graph3dView in chrome, "Too Enabled active WebGL contexts. oldest context will be lost. "exception. In WebGL, you can add a webglcontextlost event listener to the Canvas to determine that your context has been destroyed, you can add webglcontextrestored event listening to resume when the browser resources are sufficient.

In this case, to restore system resources, we must completely recycle Graph3dView in too many tabs. Therefore, the other two buttons on the toolbar are known from the code logic, we set a new empty DataModel Data Model for Graph3dView to disconnect it from the global window. dataModel references. Of course, the Tab must be deleted. From the above video, we can also see that when we destroy some Tab pages, we can recover the webglcontextrestored event, therefore, the first "HT for 3D Web" tab has gone through the process of webglcontextlost and webglcontextrestored.

At startup initialization, only the first tab of "HT for 3D Web" is displayed. Therefore, you can view ht through Chrome's Debug Profiles. graph3d. graph3dView's Objects Count item is only 1. Through the Retainers of Profiles, we can also clearly understand the Objects that currently reference Graph3dView Objects:

After you click the "build 20 tabs" button, you can see that Objects Count is 21 in Profiles:

When we click the delete button to destroy the six tabs, we find that Objects Count drops to 15:

Finally, we can find that the first HT for 3D Web tab is reborn.

This case uses dataModel objects as global variables for test convenience, which causes resource insufficiency caused by column Memory leakage. components not used in project applications do not need to be considered so complicated, for example, you also need to disconnect dataModel to reference these steps. In common application scenarios, for example, after a dialog box is opened, the data model and view components are referenced in the dialog box, as long as the global reference mentioned above does not affect an object in this dialog box, you do not need to perform any processing after using this dialog box, even if a bunch of objects are referenced by each other in a complex way or even applied to each other, they will be destroyed if no global object can be referenced to them.

Summarize the two points in this article:

1. A good encapsulation design also requires users to master the basic architecture context. Just like a good car, you have to learn basic maintenance and never learn anything, even a good framework will be broken by you like a good car.

2. Do not fear the MV * Events and reference relationships. After clarifying the event mechanism and Object Reference relationships, you can precisely control any internal details at any time point. This is mainly for the design framework, users should boldly embrace the MV * framework, and deliver performance and various potential memory problems to the framework with confidence.

For java graphics components

REFERENCE
Feasible design
You can even use the Jbutton or Button component to represent the square.

Read more about the javax. swing package and java. awt package classes (components.

Of course, you can also use Graphics instead of components.
I did two gadgets in this way. It was written n years ago. Although it was very bad, it was so sloppy at the time.
Mail me bianqw@bjhz.com.cn if you need

Java Chapter 9 text and graphic GUI Design Courseware

Only some videos are found. If you need other videos, contact us.