HT graphical Component Design

We have customized the keyword mining tool interface for CPU and memory display, and realized the code decoupling and binding of HT for Web through definition vector to complete graphic production and transaction data, this type of examples will be used in subsequent articles so that we can grasp more vector application scenarios. In this article, we will switch to a topic and talk about the connection between models, views, and things.

In the graphic component planning architecture, the first thing is the relationship between the planning data model, view and event. Over the years, the industry has gradually refined various GUI planning forms into theoretical classifications, the primary categories of MVC, MVP, and mvvm are often collectively referred to as MV *. There are many articles defining and comparing various planning forms. This article does not plan to deepen the theoretical discussion, different graphic component planning architectures have many differences. Continuous components are constantly improving various plans at all times, trust has many good components have now innovated more new and more useful planning models, but has not yet been extracted to the theoretical height for classification to let the world know, so meticulous to define what is P, what is a VM, And what function is probably written in which is reasonable? I don't think it has much meaning. I just need to constantly improve products, and the team can better protect and expand. Users can learn and use it easily, the theoretical height is left to Martin Fowler and this kind of god level master to define.

Speaking of Martin Fowler, because of his "Gui ubuntures" and "Presentation Model", I saw an earlier article that clarified MVC and MVP, from the point of view, cocoa bindings skills apple used to develop Mac OS X decades ago have adopted similar plans, in addition, the objective-C language's key-value coding and key-value observing mechanisms, coupled with xcode's visual support, it can be said that many developers have been unknowingly enjoying the development power brought by these planning models over the years. Java's swing interface has always been criticized, but originally there were excellent projects such as jgoodies for a long time, and swing was not counted as the masses, and jgoodies was even more niche, fewer people know that jgoodies binding has completed 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 didn't think that the two were thrown away by the old owners in a rush, but they still promoted the deployment of MVP and mvvm plans, currently, knockoutjs and backbone in HTML5 are supported. JS, angularjs, puremvc, and Ember. JS and many other music videos * structures have sprung up, and even some people need to protect a website with todomvc: helping you select an MV * framework!

HT itself is also a set of Music Video * structure, but we seldom discuss the planning form carefully when training customers. In my opinion, good component encapsulation does not need to tangle users with your plan form, users can still get started quickly after a few months without your structure. There is no need to rewrite the learning process. This is our most ambitious structure, from this point of view, there are currently very few graphical structures that can satisfy us and trust many people with similar and painful experiences. After a certain structure is not required for a while, we should completely forget how to get started, swing experts do not look at the old code, I do not know how to add data to the jtree and jtable, flex experts will not remember invalidateproperties, invalidatesize and invalidatedisplaylist these custom components will grasp the details of the function, SL/WPF experts do not want to define a dependencyproperty characteristics in addition to affectsrenderer and affectsmeasure, there are many elements to think about, the last section said a pile of New HTML5 music * structure, less trust someone dare say skilled familiar You may have spent several months or even a year or two in a project, but you don't have to forget it for a while, so you lack the courage to be familiar with it. I don't think we're not smart or diligent, however, the current structures have not been satisfied yet. We have always tried our best to let HT develop in the direction we feel satisfied, in the future, I will discuss how HT plans APIs that make users do not forget.

Back to today's Model-View-things topic, after data and view are separated, the event listening and dispatching mechanisms are required to establish data binding, I am not very fond of the dirty checking mechanism of angularjs. I expect that something will change and I will be told immediately to do what I should do. As for some people who are worried about the function, I have to worry too much about it, graphics components have accumulated many sophisticated tips over the years to avoid functional questions.

You don't have to worry about the functions. Most of the tasks in this regard are handled by the structure completion personnel, but you don't need to know the details of the structure, this does not mean that the user can have no idea about the underlying architecture. It is still necessary for the structure user to know the association between the model, view, and event citation. Otherwise, the user may have a question about memory leakage, I once experienced a client structure planned by a customer team to manage all interface windows. The results show that OOM memory overflow always exists. After checking the results, I found that they have a windowmanager goal, when each window is created, it will add a reference to the window, which is of course very strong and can control all interface windows. However, most developers, it will not automatically delete the quote of the overall windowmanager target when the window is closed or destroyed, so that all windows can be cited by the overall goal and cannot be reclaimed, therefore, it is still necessary for structured users to have multi-structure mechanisms to prevent such memory leaks.

In many cases, it is hard to find out that memory leaks are not long-running, but the questions about the HT graph3dview 3D components based on webgl are particularly significant, some browsers have constraints on the webgl context that can 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 rendering memory leaks, the old context is not closed, and the type will be displayed when the upper limit is exceeded. "too implements active webgl contexts. oldest context will be lost. "exception.

Below I will expand the first example in the "HT getting started manual" and add three buttons for the following code logic to the things bar, the first button creates 20 new tab pages. Each tab page contains a graph3dview component. The other two buttons delete some tabs.

JavaScript code preservation code

{

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 );

-Indexread arguments from command-line "http://www.shoudashou.com"

-Indexread arguments from command-line "http://www.4lunwen.cn"

-Indexread arguments from command-line "http://www.zx1234.cn"

-Indexread arguments from command-line "http://www.penbar.cn"

-Indexread arguments from command-line "http://www.whathappy.cn"

-Indexread arguments from command-line "http://www.lunjin.net"

-Indexread arguments from command-line "http://www.ssstyle.cn"

-Indexread arguments from command-line "http://www.91fish.cn"

-Indexread arguments from command-line "http://www.fanselang.com"

}

}

},

{

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 tab button to separate the system memory target quote after the tab is opened, as shown in:

Screen Shot 2014-08-15 at 9.46.17 pm

Because datamodel is used by window as the overall goal, and graph3dview in other newly created tabs are bound to this data model, the structure user probably knows that, various components have added event listening to The datamodel data model. Originally, the data model does not know the existence of various views. The data model only forwards events to all consumers after data changes, these 20 graph3dview are consumers, and each graph3dview has a webgl context, forming a data model from the overall window to datamodel, and then to the graph3dview component, finally, the link is cited in the webgl context. If we do not automatically disconnect the link, even if the tab is closed and destroyed, graph3dview still has questions about the system memory (for example, we have directly cited the tab and graph3dview targets on the window for convenience testing ).

Screen Shot 2014-08-15 at 10.12.59 pm

 

As a result, the above video will be published in chrome. When you click the 16th tab pages that contain graph3dview, "Too Enabled Active webgl contexts" is displayed. oldest context will be lost. "exception. In webgl, you can listen to the webglcontextlost added to the canvas to identify that your context is destroyed, webglcontextrestored listeners can be used to recover from scratch when the browser capital is satisfied.

In our case, to recover the system capital, it is necessary for us to make the graph3dview in too many tab pages completely withdrawn. Therefore, the other two buttons on the things bar can be seen from the code logic, we have set up a new empty datamodel Data Model for graph3dview to disconnect it from the overall window. datamodel cited, of course, the tab has to be deleted. From the above video, we can also see that when we destroy some tab pages, we will be able to recover from webglcontextrestored, therefore, the first "HT for 3D Web" page shows the processes of webglcontextlost and webglcontextrestored.

During initialization, you only need the first tab of "HT for 3D Web". Therefore, you can view HT through Chrome's debug profiles. graph3d. graph3dview's objects count item is as long as 1. After the retainers of profiles, we can also clearly grasp the current targets and cite the graph3dview objectives:

Screen Shot 2014-08-15 at 10.11.31 pm

After you click the "build 20 tabs" button, you can see that objects count is 21 in profiles:

Screen Shot 2014-08-15 at 10.11.50 pm

When we click two delete buttons to destroy six tabs, we find that the objects count is reduced to 15:

Screen Shot 2014-08-15 at 10.12.23 pm

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

Screen Shot 2014-08-15 at 10.13.47 pm

This example uses datamodel as the overall variable only for convenience of testing. As a result, there is a lack of doubt about the capital for column memory leaks. Generally, unnecessary components in project use do not need to think about such disorder, for example, you also need to disconnect the datamodel citation process. In conventional use cases, for example, after a dialog box is opened, data models and view components are usually cited by each other within the scope of this dialog box, you only need to ensure that the above-mentioned general case citation does not affect a certain goal in this dialog box, so you do not need to deal with it after using this dialog box, the pile of targets, even if the quotes between them are messy or even used by each other, will be destroyed even if there is no overall goal to cite them again.

Summarize the two concepts in this article:

1. A good encapsulation plan also requires users to grasp the fundamental architectural clues. Just like a good car, you have to learn how to maintain it. If you don't learn anything, even a good structure will be damaged by you like a good car.

2. Do not be afraid of music videos and citation links. After clarifying the mechanism and target citation links, you can accurately control any internal details at any time point. This is first for the scheduler structure, the user probably boldly embraces the structure of music videos *, and provides functions and various potential memory questions to the structure for handling.