The use of DWZ in Aps.net WebForm (i)

1. Preface

In the recent project development, the front-end framework DWZ was used. DWZ is an excellent background management interface framework, but the official release of the document is really embarrassing, a few pages, a little bit on their own products irresponsible. At the same time, thank the Netizen stone enthusiastic help, in my rookie encounter difficulties to give great help.

2. Introduction

Citing the official description: The DWZ rich client framework (jquery RIA Framework) is the AJAX-enabled open source framework developed by the Chinese themselves based on JQuery. DWZ Rich Client Frame design goal is simple and practical, easy to expand, rapid development, RIA ideas, lightweight.

The advantage is that you can reduce the time it takes to write jquery in project development and focus on business development.

3. Use

Because the length is too long to read, the plan is to split the narrative into a split. This post mainly introduces the construction and use of DWZ, the next one describes the problems encountered in personal development.

1. Check the DWZ into your project

It's easy to do this, first go to the official website to download the latest DWZ package: Https://code.csdn.net/dwzteam/dwz_jui , and then rename the folder and copy it to VS, 3.1.1

(Figure 3.1.1)

In order to avoid conflicts and maintain the integrity of the DWZ file, it is recommended to build additional folders such as Imags, JS, etc.

2. Build Home

Find the first page example, copy the corresponding code into the index.aspx, modify the corresponding path, then successfully build, 3.2.1.

Perhaps you will have the following questions: 1. Is it necessary to refer to so many JS files? What does the 2.js initialization code mean? 3. What does the target and rel in the label mean?

Here I will answer one by one:

1. Is it necessary to refer to so many JS files?

The answer is in the negative.

The JS in the example is to show all the features, in real development, if the project does not involve the need to reference, such as rich text editing.

This framework has a feature: the main page reference, and other sub-pages can enjoy the reference. This is because the sub-pages are embedded in the main page in the form of Div, so this effect can be achieved.

Return to the topic, careful review you will find that the citation is divided into 4 aspects (CSS, external js, frame JS, language definition). If you determine that there is no rich text and file upload feature in your project, you can remove the 3.2.2 red area. Figure 3.2.3 as shown in the DWZ frame required JS, the first time I saw it exclaimed My God. In fact, this is the DWZ development team in order to open source, each function is packaged into a JS, convenient for everyone to debug. You will find in DWZ Bin folder Dwz.mini.js,dwz.mini.js is the above JS concentration and compression into a JS. In the development of the project, we can replace the dwz.mini.js directly with the JS as shown in Figure 3.2.3, because we basically do not need to modify JS. If some JS must be modified, we can also repack the dwz.mini.js by Gzjs.bat under the bin file.

Friendly tip: If the dwz.mini.js is introduced directly from the bin file, you can copy it to the JS folder without any effect.

(Figure 3.2.1)

(Figure 3.2.2)

(Figure 3.2.3)

What does the 2.js initialization code mean?

If you summarize in a nutshell: Initialize and define the resources required for the framework. As shown in 3.2.4, ①: Load XML, which holds all the configurations required by the DWZ framework initially and can also be understood as a configuration file. ②: Defines the login page URL that is used to log back in when authentication is invalidated. ③: Defines a status code that represents the result of the request ④: Defines the paging parameter ⑤: It can be understood as a key-value pair, StatusCode is a description of the state for ③,message, and is returned as JSON. ⑥:hidemode:navtab component Toggle hiding mode, supported values are ' display ', ' offsets ' negative offset position value, default value ' Display ' ⑦: Debug mode ⑧: Callback function ⑨: Call initialization function ⑩: Load interface Theme

(Figure 3.2.4)

3. What does the target and rel in the label mean?

Target: page display mode, Navtab display the page As a tab, dialog in the form of a pop-up layer.

Rel: Can be understood as the ID of the page, when the JS code to specify the refresh of a page, this is particularly important. In the actual development of the proposed for each interface to a different ID, but also explicit specification.

3. Use of Label controls

The use of tags can be combined with demo samples and official documentation, with little or no major problem.

In the following chapter, we will discuss the issues that need to be noted during the development process.

The use of DWZ in Aps.net WebForm (i)