Operamasks-ui2.0 + mvc4.0 + ef5.0 one of the first practice and layout control Introduction

Two years ago, I planned to develop a web development framework by myself, and add departments, personnel, permissions, and logs as basic services. On the basis of this framework, I can perform rapid business development without sticking to the results, just start and die. The reason is that, on the one hand, I am using a new technology that I am not familiar with, not a mature MVC. It is a big impact on me who are used to web form development, coupled with the influx of entityframework concepts, jquery's in-depth understanding and constant upgrades and changes to bugs and versions brought about by the immaturity of these three technologies have all brought about great troubles. Two years later, the development framework will be restarted.

Development Tools to select vs2012, the background using mvc4.0 + entityframework5, front-end selection of operamasks-ui2.0 + jquery1.6.3 (jquery with this version is to match with the operamasks-ui2.0, worried about changing to new out some inexplicable problems ).

I would like to say a few more about the selection of the front-end framework.

I used jquery two years ago. I didn't have a set of jquery controls at that time. I often searched one by one based on my needs, such as layout, tree, tab, and DataGrid, the biggest problem is that there is no uniform style and interface, there is a lack of documents and examples, as well as various online versions for arbitrary Modification and extension of the source code, you need to spend a lot of time exploring and experimenting, at that time, I felt that this chaotic situation would end and a unified framework would emerge.

Now, a lot of similar frameworks have emerged, and we haven't carefully checked and compared them. I probably searched for them. Many people recommended easyui, saying it is free and open-source, and then read the official website, the website provides a wide range of documents and demos with a uniform style (including the interface style and programming style). Therefore, easyui is used in its own development framework, layout, tree, tab, and DataGrid are used to complete addition, deletion, modification, and query of business entities. It feels good. There are some minor problems, for example, when a page is loaded, the element jitter and the carriage return event are added to the DataGrid list page search text box, but the page number is intercepted by the page control. There is also no control refresh method, such as refreshing the tree, when you refresh the DataGrid after adding data, you have to write a refresh by yourself. Although there is usually only one sentence, it is better to directly provide a convenient method call ...... In general, it is quite convenient to use.

I would like to open a series, record the development process, and talk with you. I just published the first article, the first one of easyui1.3.1 + mvc4.0 + ef5.0, and the introduction of layout controls, some Garden friends replied that easyui needs to be paid for commercial use, so they carefully read the official instructions, 449 knives, non-annual fee, unlimited project and time. To tell the truth, this price is still justified.

With this episode, I searched for other similar frameworks for a general comparison, and struggled with the need to replace easyui with free open source.

Yuanyou's replies are concentrated on ligerui and DMZ. From the perspective of the search engine, ligerui's online comments seem to be not very good. I said my personal comments did not fix any bugs. As for dwz, I did not comment on the Internet, there are several application cases of Java and PHP in the background, which seem to be okay. The results showed that the DMZ official page was messy, the display effect of the control was rough, and the demo and documentation were not rational. Instead, the ligerui looked more refined.

Later, some park friends mentioned operamasks-UI and lgpl protocols. After reading the official website and the team, they should be Kingdee products. It feels quite good, there are also interviews with many industry websites and performance evaluations of similar products on the Internet.

In addition, the following text is a comprehensive list of front-end application frameworks. We recommend that you read this article: What do you choose for the front-end framework?

Finally, I decided to try replacing easyui with operamasks-ui, and record the development process.

Official Website: how to download http://ui.operamasks.org/website/homepage.html and join the project I do not say much, refer to the official website instructions.

As I mentioned above, the most common layout is as follows.

For the MIS Management System, the common layout is divided into three main parts: the system name at the top, and the account, name, department, and other information of the current logon user are displayed, as well as operation buttons such as logout and account switching; on the left is the system menu bar, and on the right is the main work area. Click the menu on the left to display the corresponding business processing interface in the main work area. To maximize space utilization, the left navigation menu bar is usually required to hide and hide the display. First, I had an intuitive impression:

The previous development usually used the HTML frameset tag.

<frameset cols="25%,50%,25%">   <frame src="frame_a.htm" />   <frame src="frame_b.htm" />   <frame src="frame_c.htm" /> </frameset>

Then write JS on your own to control collapse and hide a certain area.

Operamasks-UI (Long Name, hereinafter referred to as om) is much simpler. First, extract the downloaded compressed package to the project. I chose to put it under the WEB Project root directory, it is stored at the same level as the view folder, and the name is "operamasksui". Then, modify the index view corresponding to the home controller:

1. add reference to the OM-related CSS style sheet in the head label.

@ Styles. Render ("~ // Operamasksui/CSS/default/om-default.css ")

2. Add the following references to the JS file before the </body> tag.

@ Scripts. Render ("~ /Operamasksui/JS/jquery163.min. js ")

@ Scripts. Render ("~ /Operamasksui/JS/operamasks-ui200.min.js ")

Note: in fact, the above styles. Render and scripts. Render are actually used to compress and transmit multiple CSS and JS files, and I will discuss this in detail later. Here I wrote it in reference to the default template. It can also be run by mistake and can be parsed into correct references.

Refer to the official instructions and demo to add the following content to the body:

<Div id = "page"> <Div id = "North-panel"/> <Div id = "center-panel" style = "padding: 0 10px; "/> <Div id =" East-panel "/> <Div id =" West-panel "/> <Div id =" South-panel "style =" vertical-align: top; text-align: Center "> & copy; @ datetime. now. year-copyright statement </div>

Then, write js to initialize

$ (Function () {// initially load loadlayout () ;}); // load the layout function loadlayout () {$ ('# page '). omborderlayout ({panels: [{ID: "North-panel", Region: "North", resizable: True, collapsible: True, height: 100, header: false }, {ID: "center-panel", Region: "center", header: false}, {ID: "West-panel", title: "function menu", Region: "West", resizable: True, collapsible: True, width: 200}, {ID: "South-panel", Region: "South", resizable: True, collapsible: True, height: 20, header: false}], hidecollapsbtn: True, spacing: 7 });}

Different from easyui, easyui supports two methods: one is similar to the other, initialized through JS, and the other can be initialized through HTML Tag extension attributes without writing JS Code.

<body class="easyui-layout">     <div region="north" title="" split="true" style="height: 100px;"></div>　　……</body>

I mentioned above that OM is simple and easy to use. I planted it when I replaced easyui ......

Because it was modified on the previously completed UI, after completing the above steps, I thought it was done, and the result was running ...... JS reports an error, prompting that the object does not support the "CSS" attribute or method. jquery must have a CSS method, replacing jquery1.8.0 with 1.6.3 that comes with om2.0. On the surface, there is no problem, later, the problem was found on the closure of the <div> tag ......

Change <Div id = "North-panel"/> to <Div id = "North-panel"> </div>.

Is this a bug? Well, this is a note.

This is not complete yet, and the JS error is solved. A white screen is displayed. I suspect that the height and width are not added, and a high width is added to the DIV with the outermost layer ID as page, which can indeed be displayed, however, I want the full screen effect, and set the DIV height and width to 100%, or the white screen, so I supplemented the basic knowledge and needed to add the width and height to the HTML and body, otherwise, the percentage set by the DIV sub-element is invalid, and the official demo adaptive window size is displayed, with a detailed explanation:
After the doctype declaration is added to the page, the body and HTML have no height by default. Therefore, to adapt the body size, you must add a 100% height to the HTML and body. In addition, the browser will add margins to HTML and body by default, so we also need to set the padding and margin of HTML and body to 0

The solution is as follows:

  <style>        html, body {            width: 100%;            height: 100%;            padding: 0;            margin:0;            overflow: hidden;        }</style>

After it is added, it is still a white screen ...... Looking at the example, no exception was found, and then I figured it was the filling reason. I found the property and set the fit attribute automatically filled with the parent element to true (default: false, to be honest, it is more reasonable to set this property to true by default. The official demo is displayed normally because the specific height and width are set for each region.

So many pitfalls ......

The other thing that is not perfect is that the left and right sides of the border are basically invisible and a little lacking. It is quite tolerable.

You can set the upper, lower, left, and middle areas. The right area is not used here. There is only a copyright statement in the bottom area. The top area is the system name, add the account, name, department, and other information of the current logon user, and the operation buttons such as logout and account switching. The left side is the system function menu navigation tree, click the leaf node to open the corresponding business function page in the central area.

Compared with easyui, Om can only fold left and right. It also provides a small arrow that only occupies a small space, which is more elegant.

For example, if you want to allow the left-side menu navigation area to collapse, disable the top area to collapse, set hidecollapsbtn to true, and set the collapsible attribute of North-panel to false.

From the perspective of practice, this article adds your years of development experience and project experience, only specifying key attributes and precautions. For other attributes, please refer to the official website.

For the first time, I am exploring and thinking about some issues on the development platform. You are welcome to discuss and make progress together.