"Share" the right way to open WeX5 (1)

Recently in the study of WeX5, want to record here in the use of the process of the drip, today first to have mastered the share.
WeX5 's official development guide is more difficult, and the audience may be a HTML5 app developer who has hit tens of thousands of lines of code. But as a new HTML5 app to enter the world of code to develop the baby, I said to take this guide can not find "South",
Leave the official version behind, and take a look at the "Hello World" version of the attack.
Basic part
1, Preparation: Download and open the HML5 app development tool--WEX5 (path: Wex5\studio\studio.exe), in the left Model Explorer to establish the HelloWorld directory and create a new W file, the template selected blank is good. This step has a problem to find right-click.

2, the mouse drag an output on the W page, the effect is as follows:

3, in the Property tab to set the output appearance style, here is commonly used class (set type), style (set the specific style), I set the output of the red border. Here are all visual mouse operation, not much to say, a variety of styles can explore

4, after a careful dress up, of course, to see the effect of the operation, the test run is: First start Tomcat, and then on the W file right-click "Run with Browser". Remember to save the W file before you try to see the effect of the changes oh.

With a simple mouse operation, it is easy to set the appearance of the output control, which is also a powerful WeX5. And more importantly, all of the settings are in accordance with the HTML5 standard! For example, if you want to set the position of a control, you cannot drag the control directly to the position you want, and you can position it by setting the margin, positioning, and so on. So even if the use of WeX5 for development, or to understand the basic HTML, CSS, JavaScript, it is recommended that the less familiar parents to learn a little bit basic HTML5 basics. Novice not too tangled details, first overall understanding, in the future encounter specific problems to find corresponding solutions. Of course, the small eggplant side will also share the relevant content, we can pay attention to ha ~ ~ ~

5, the above mouse flow operation set the appearance, but did not see Hello World shadow it. You must have thought of it. To export Hello World in output, it is very simple: enter "Hello World" in the "Bind-ref" of the Properties tab, and be careful to draw the Hello World with double quotes in English mode. A bit of programming based on the students know, double quotes wrapped up is the string, no double quotes is the variable. This is set up, the test run in the output can see the effect.

PS: "Bind-ref" Here is a data binding mechanism in WeX5 that can be imagined as a conduit through which data from different components can be bound together. For example, I have two output components, we can simply bind to the value of two components, but the binding is not a dynamic refresh function, if you need to do the same as the official Hello World dynamic refresh, but also need to set the value of the binding to observable. This part is difficult to understand, follow-up I will open a separate chapter to talk about this part, this article first skipped.
Note: The native web notation should be to write the content to be displayed within the tag, for example: Hello world.
        But WeX5 encapsulates basic HTML components and introduces a data binding mechanism for easy management of data
        Each time the component is initialized, the corresponding constructor is called to initialize the component, so even if you add Hello World to the source of the output component:
<div component= "$UI/system/components/justep /output/output "class=" X-output "xid=" output1 "style=" height:40px; "datatype=" String ">hello world</div>
But the innertext of output also initializes the component based on the rules of the data binding, and if there is no binding, it is initialized to a null value. Therefore, in addition to the native HTML tags in WeX5, the control should be managed in the same way that data binding is used in the WEX5 specification.

Advanced section
The above-mentioned pure output of the page is not interesting, now try to add a little interactive effect. For example, add a button and click the button to change the output message to "Hello WeX5". The official original Hello World case was implemented using WeX5 's data bidirectional binding mechanism, because we are not familiar with the WEX5 data binding mechanism, so it is very difficult to understand. Aside from the binding mechanism, the WeX5 is actually very simple:
Model.prototype.button2Click = function (event) {
var output = This.getelementbyxid (' output1 ');
Output.innertext = "Hello WeX5";
};
WEX5 provides an event tab to conveniently set up the various events for the component, which allows you to list the event interfaces of the component and also facilitates centralized management of all component events. The use of the method is to fill in the required event in the function name (do not fill in the default functions name) and double-click, and then you can enter the JS source page, where the system will automatically generate Model.prototype. function name = function (event) {} code snippet. Careful classmates will find that the event here is also with the bind prefix. Yes, there is a data binding mechanism in the same way, but here for the time being not to control these, know how to use.

The tomato is also the default of the Web programming basis, the first comparison of native Web writing:
<p id= "OUTPUT1" >hello world</p>
<button>Button</button>
<script type= "Text/javascript" >
function Button2click (event) {
var output = document.getElementById (' output1 ');
Output.innertext = ' Hello WeX5 ';
}
</script>
It can be seen that the main difference point is that WEX5 uses XID instead of the native ID, so use GETELEMENTBYXID to get the element node. The reason for this is mainly to solve the problem of naming conflicts, in a complex page is usually divided into a number of page fragments to develop, and many times a few page fragments may refer to the same component, then in the total page will generate the ID of the naming conflict. And XID is by adding a page after the ID, even if the same ID in different page fragments of XID is also different, this resolves the problem of ID conflict.
Another difference is the creation of a model object in WeX5, where the resources in the page are placed in the model variable, and are also manipulated in model when used. The native notation is to put all the functions and variables in the global environment and use them to refer directly to the function variables in the global context. When a page is more complex, there will be a lot of functions and variables in the world, so it is easy to create variable conflicts and variable overrides, because JS can be repeatedly declared, after the declaration of the variable will overwrite the previously declared variables, so that the function after the declaration of the previous function of the body covered out. What's more, the browser gives JS a high level of authority, and you can even overwrite the interface provided by the system. For example:
alert = function () {window.close ();}
Alert ("Hello");
So alert turns the alarm into a closed page, but the browser allows this behavior, so we should try to avoid polluting the global variables.
Finally, we define the method that is placed under the Model.prototype, that is, under the model prototype. That is, using a mixed mode (construct + prototype) to create objects, of course, directly written under the object is OK, but it is not recommended, such as:
var Model = function () {
This.callparent ();
This.button2click = function (event) {
var output = This.getelementbyxid (' output1 ');
Output.innertext = "Hello WeX5";
};
};
Summary
The above example realizes a button to change the output text function, through this example, we should be able to master the page layout design and simple interactive event WeX5, the above introduction of the wording and the original is similar, for the students who have a web base should be very good understanding. No basic students, or recommend first to W3school to learn the Web Foundation, over the HTML, CSS, familiar with the JS syntax can be.
There are many things to say about Hello World, the next I will introduce the HTML source code and JS source structure.
Appendix: Official Hello World WeX5 writing and native JS notation, you can see in the page complex WeX5 code more concise, more convenient management.
Native JS notation:
INPUT1: <input type= "text" id= "input1" value= "/><br/>
Input2: <input type= "text" id= "Input2" value= "/>
<script type= "Text/javascript" >
var input1 = document.getElementById (' input1 '),
Input2 = document.getElementById (' Input2 ');
Input1.addeventlistener (' Input ', function (e) {
Input2.value = This.value;
});
Input2.addeventlistener (' Input ', function (e) {
Input1.value = This.value;
});
</script>
WeX5 notation:
Define (function (require) {
var $ = require ("jquery");
var justep = require ("$UI/system/lib/justep");
var Model = function () {
This.callparent ();
THIS.INPUT1 = Justep. Bind.observable (""); Core statement
};
return Model;
});

"Share" the right way to open WeX5 (1)