Codefirst Write interface--write your own client UI library

What is a CBS program

CBS program is Client+browser+service program Pure CS Program Write interface, there are various difficulties, then I introduced Browser on the client side, let Browser render HTML-based UI interface

What is Wui

Even if you use HTML to render the UI interface, developers still have to master HTML+CSS+JS knowledge, which is a more complex Wui libraryThe HTML+CSS+JS is packaged up to form an interface element library (similar to ExtJS and Easyui)The intent is for developers to be able to write beautiful UI interfaces just by mastering C # code

First step: Wui the main window in the library

A WinForm program must have a main window we encapsulate this main window into the Wui library.

There is a WebBrowser in the main window (this is not visible to the end user, and the end users do not operate the WebBrowser)

Step two: Basic UI Resources

We have added some basic UI resources to the Wui library, noting that these resources will be copied to the output directory and will be considered for resource in the future.

There are two points in the index.html code: 1th: <meta http-equiv= "x-ua-compatible" content= "ie=9"/> This is the WebBrowser that let us use, In IE9 mode to render the interface, this line of code is very important, without this line of code, even if you installed IE11, then WebBrowser may still not appear as you imagined; 2nd: window.external.WUIPageLoaded This line of code triggers the internal events of the Wui library, telling the end user that the UI rendering is complete and that the user can add their own interface elements after the event is triggered. This involves JS and C # Communication, and later.

Step three: Codefirst Create UI

Our Wui.demo program is a WinForm assembly, but I deleted the IDE's default generated window (FORM1) and modified the Program.cs program

In the entry function (Main), Application.Run the form we created in the Wui Library (for a program based on the Wui library, there is only one window), we know that there is nothing in the WebBrowser of this window, but we have assigned the Wuimain attribute Panelmain, which is what we want to add of things anymore

Fourth step: a special panel

First: This class inherits from the Panelmain class, and the Panelmain class is a base class provided by the Wui Library. Second: There is an event in this base class called OnRender, the JS method we have just seen window.external.WUIPageLoaded (); This line of code will trigger this event.

Our main type is the topmost container, the topmost container is a special container, his type is panelmain; (as you may see, We added a panel to the OnRender event, which is not a special container, but we don't talk about it here. so far, we have a question, First: When is the OnRender event triggered? This time we're going to see Panelmain's code

read Panelmain Code we have more questions: first: When to call the loaded method? Second: When does the Tojs method be executed?

Fifth step: The beginning of C # and JS communication

We know that we have given the instance of the main class to the Wuimain window in Program.cs, so what does this window do with the example of the main class? Let's take a look at Wuimain's code.

(it means that WB is our browser control.) First: We let the browser load the homepage document (we will make the dynamic path later) Second: We create an instance of the Rendercontext class and give the instance of main to the constructor of the class type Third: We assign the Domwindow of the browser to the Ihtmlwin property of this instance Four: We assign this instance to the browser's ObjectForScripting property.

Here is one thing to note: To use IHTMLWindow2 this type, you must refer to mirosoft.mshtml this extension library (note, to find in the "extension"), after referencing the extension library, in the namespace to add this line using the MSHTML; You can use this type of IHTMLWindow2.

Sixth step: The climax of C # and JS communication

However, our doubts are still unresolved, so we can only continue to look at the Rendercontext code First: We get the example of main in this type of constructor second: we set this type to ComVisible (note that to set a type of ComVisible , you must use System.Runtime.InteropServices; namespaces)

As you can see, there is a public wuipageloaded method in this type, does this method name look familiar? By the way, that's the method we call in JS window.external.WUIPageLoaded (); There are two points to note: first: Be sure to usewindow.external Call this methodSecond: If this type is not set to ComVisible, it cannot be called Third: In the wuipageloaded method, we let the browser execute a script, that is, the script in the Panelmain Tojs method, this time the control is rendered into the browserFourth: We call the loaded method of the Panelmain instance, and in that method we trigger the OnRender event so that our users know when he should take over the work that goes on .

Note: Here we use C # let the browser execute the script browser with JS code to let our C # also do the work this is C # and JS communication!

Seventh Step: The end

Our program looks like this, of course, I know it's not what you want to see. So, please have a good liking for this article------------------------->> your support is the driving force for me to write the next article!!!

Modify a record2015-1-19: Complete Full content

Codefirst Write interface--write your own client UI library