Mgen spa Engineering 2 tutorial (Part 1): 4 Work Parts-core, validators, data streams, controls

Back to the tutorial directory

Update record:

: Added to spa project 2.5.

Directory

• 1. Core and controls
• 2. validators
• 3. Data Stream
• 4. flexible use of four components
• 5. Control validators added to the SPA project 2.5

 

Returned directory

1. Core and controls

Next we will first begin to understand the working principles of the SPA project from the simplest model.

Imagine that we need a string. Yes, an arbitrary string. On the interface, we will use the text box control to allow users to provide data. When users enter text in the text box, our data is updated. This is a simple example of data editing:

The two concepts can be introduced. The data we need is the "core", and the text box on the interface is the "control ".

(Note that there is an arrow that means that changes to the control will update the core .)

 

The core is the data storage behind it. It makes no sense to have no blank interface for real data. Therefore, it is called "core ".

The control is the editing control on the interface. Similarly, it makes no sense to have only the core storage but no operation interface.

Therefore, the core and controls are the two most basic components for data editing in the spa project. Only with these two components can the data be edited and previewed by users and stored.

 

Returned directory

2. validators

Okay. Now let's make the above example more complicated. After all, not all the data can be completed by adding a control to a core as in the preceding example. Now we have another requirement. We want this string to be empty and the length cannot exceed 10 (this is a common requirement). How can we deal with this requirement in the spa project? We introduce the third concept: "validators ".

 

The validators define a judgment logic to determine whether the corresponding data is qualified. In this example, we can define a validator that passes verification only when the string length is between 1 and 10. With the validators, there is another barrier between the control and the core, and the control will not modify the core as needed. Once an error occurs during verification (for example, the user has not entered anything or the input exceeds 10 characters), the entire process is stopped and an error is prompted.

(: Verification Failed)

 

Returned directory

3. Data Stream

Now let's discard the above example and start a new problem that has to be considered in many cases. We often need a variety of data, but the interface controls are always so few, of course, it is impossible to come up with any new tricks, text box is the most common control, however, this does not mean that the data after the text box must be a string. For example, we need an integer (INT type ). Two issues need to be considered:

1. Of course, you can enter numbers in the text box, but you can also enter non-numbers.

2. Even if a number is entered in the text box, but its type is string, we need an integer, that is, int type data.

 

The solution comes from the fourth and last new concept: "data flow ".

The data flow components in the spa project are specially used in data type conversion, so the above problems will be solved immediately. It is very simple. When a user inputs a non-number, the conversion fails and an error is prompted. If the number is entered, the conversion is successful and the converted data is updated to the core data.

(: Conversion failed)

 

OK. After the concept of data flow is mentioned, four concepts mentioned in the title are mentioned:

 

With the data stream involved in type changes, it must be noted that each component has its own type. Our first example is the control, both the validators and the core are for the string type. The example used by data streams is that the control is of the string type, and the core is of the integer type. Data flow is a part of the transformation.

 

Returned directory

4. flexible use of four components

The four components can be used flexibly as needed. One feature of the SPA project is the diversity of controls, which makes the definition of the entire process Flexible. For example, we need an integer ranging from 1 to 18. How to implement it?

Method 1: score (40/100)

Use the string control text box, convert it to an integer using the data stream, and use a validators for the Integer Range to ensure that the core data is set within 1.

 

If you enter a non-number or a number out of the range, an error occurs:

 

Method 2: score (60/100)

The character string control text box is used, but the text box only allows users to enter numbers. The following components and methods are the same, and the data flow and validators are the final core. However, note that although it is similar to the above, note that because the text box on the control restricts the input of numbers, so that all strings entering the data stream are valid numbers, the conversion will always be successful, only the verification fails. That is to say, the only error that the user enters is beyond the permitted range:

 

Method 3: score (100/100)

Use a new sliding control that directly targets the integer range. In this way, the data from the control component is already an integer in the range, and data flow and validators are not required at all.

There will be no verification errors on the interface:

 

 

Of course, everything depends on the actual needs, and it is not good if there is a verification error. Any verification error will be prompted by the SPA project friendly, so there is no need to worry about it, in addition, sliding controls are not applicable to certain situations (when the data range is large ). In short, the SPA project provides a flexible and powerful process for developers to choose from.

 

Okay, these four concepts are all over. If you are not familiar with these four concepts, you are advised to read the article or leave a message again, because you only need to understand these four concepts, then you can smoothly write code and learn more about the SPA project.

 

Returned directory

5. Control validators added to the SPA project 2.5

After the SPA project 2.5, these four components have become five, which are easy to understand. The original is:

Controls-Data Flow-validators-core

After the SPA project 2.5, it becomes:

Controls-control validators-Data Flow-validators-core

 

A "control validators" is added. The control validators are the same as the validators, but one should be on the left side of the data stream and the other is on the right side.

A validators can be used as common validators or as control validators. As a control validators, you only need to set the iscontrolvalidator attribute of the validators to true, as shown in the following code:

// Validators

[Intrangerule (1, 18)]

 

// Control validators (iscontrolvalidator = true)

[Intrangerule (1, 18, iscontrolvalidator = true)]