Step 2: Basic UI Resources
| We have added some basic UI Resources in the WUI library. Note that these resources will be copied to the output directory. In the future, we will consider implementing these resources. |
| The Index.html code has two notes: <meta http-equiv = "X-UA-Compatible" content = "IE = 9"/> This is the WebBrowser for us to use, this line of code is very important to render the interface in IE9 mode. Without this line of code, even if you have installed IE11, The WebBrowser may still not behave as you think; second: window. external. WUIPageLoaded (); this line of code will trigger the internal event of the WUI library, telling the end user that the basic interface rendering is complete. You can add your own interface elements after this event is triggered. Communication between JS and C # is involved here. I will talk about it later. |
Step 3: CodeFirst create UI
| Our WUI. Demo Program is a WinForm assembly, But I deleted the default window (Form1) generated by IDE and modified the Program. cs Program. |
| In the entry function (Main), Application. run the form we created in the WUI Library (for a program created based on the WUI library, There is only such a window), we know that there is nothing in the WebBrowser of this window, however, we assigned a value to the PanelMain attribute of WUIMain. This is what we want to add. |
Step 4: a special Panel
In the above Code, we assign the PanelMain attribute to the instance of Main, so let's take a look at what kind of Main is.
First, this class inherits from the PanelMain class, which is a base class provided by the WUI library.
Second, this base class has an event called OnRender. In the JS method we just saw window. external. WUIPageLoaded (); this line of code will trigger this event. |
We know that a user interface has many interface elements installed in a container.
Our Main type is the upper-layer container, and the upper-layer container is a special container, whose type is PanelMain; (You may see that, we added another Panel in the OnRender event. This Panel is not a special container, but we will not talk about it here)
So far, we have a question,
First, when will the OnRender event be triggered?
Now let's look at the PanelMain code. |
| After reading the PanelMain code, we have more questions: first, when will the Loaded method be called? Second, when will the ToJs method be executed? |
Step 5: C # Start of JS Communication
| We know that we handed the Main class instance to the WUIMain window in Program. cs. What does this window do with the Main class instance? Let's take a look at the WUIMain code. |
(The WB is our browser control)
First, let the browser load the homepage document (we will make a dynamic path in the future)
Second, we created an RenderContext class instance and handed the Main instance to the class constructor of this type.
Third: We assigned the DomWindow of the browser to the IHTMLWin attribute of this instance.
Fourth: We assigned this instance to the ObjectForScripting attribute of the browser.
|
| To use IHTMLWindow2, you must reference Mirosoft. the extension library mshtml (note that you should find it in "extension"). After referencing this extension library, add this line of using mshtml to the namespace; you can use the IHTMLWindow2 type. |
Step 6: C # the climax of JS Communication
| However, our questions remain unsolved, so we can only continue to look at the code of RenderContext. First, we get the Main instance in this type of constructor. Second: we set this type to ComVisible (note that to set a type to ComVisible, you must use System. runtime. interopServices; namespace) |
| We have noticed that there is a public WUIPageLoaded method in this type. Is this method name very familiar? By the way, we call the window method in JS. external. WUIPageLoaded (); pay attention to the following two points: first, you must use window. external calls this method. Second, if this type is not set to ComVisible, it cannot be called. Third, In the WUIPageLoaded method, we asked the browser to execute a script, which is the script in the ToJs method of PanelMain, in this case, the control is rendered to the browser. 4: We call the Loaded method of the PanelMain instance. In this method, the OnRender event is triggered, in this way, our user will know when he will take over the next job. |
| Note: here we use C # To let the browser execute the script. the browser uses JS Code to let our C # also do the work. This is the communication between C # And JS! |
Step 7: Conclusion
| Our program looks like this. Of course I know this is not the result you want to see, please give me a compliment on this article -------------------------> your support is the motivation for me to write the next article !!! |
| Modify record: Complete all content |
|
|
|
|
