Home Cooker Classes Others Rice CookerGX
Cooker  >  userinterface
Web browser for user interface

User interface

The Cooker uses a browser (WebBrowser Control) compatible with Internet Explorer as user interface. For this reason, there are some restrictions regarding implementation of the user interface.

These restrictions are explained in the following section.

No navigation

The most important thing among the functions that the user interface browser (UI browser) is restricted is this browser cannot navigate. In other words, nothing happen if you click a link.

Since the UI browser does not navigate, it is not possible to rewrite the user interface by navigation. The user interface must be rewritten using the Document Object Model (DOM).

Rendering mode

The following html is set to the UI browser when the Cooker starts up.

1:

<!DOCTYPE html>

2:

<html>

3:

<head>

4:

<meta charset='utf-8'>

5:

<meta http-equiv='X-UA-Compatible' content='IE=edge'>

6:

<meta http-equiv='Pragma' content='no-cache'>

7:

<meta http-equiv='Cache-Control' content='no-cache'>

8:

<meta http-equiv='Expires' content='0'>

9:

</head>

10:

<body>

11:

</body>

12:

</html>

The above html contains important information for constructing the user interface in the UI browser.

1 : <!DOCTYPE html>

The UI browser interprets user interface html as Html 5 standard by this tag.

2 : <meta charset='utf-8'>

This tag demands to encode user interface html with utf-8.

3 : <meta http-equiv='X-UA-Compatible' content='IE=edge'>

UI browser draws html in the same rendering mode as the installed Internet Explorer by this tag.

Javascript

The UI browser is a specification that is affected by Internet Explorer in security settings.

Especially important for the UI browser is the Javascript setting. Javascript cannot use in the UI browser if Javascript execution is disabled in Internet Explorer.

Example of user interface implementation

An example of implementation of the user interface is shown.

InnerHTML

The easiest way to implement the user interface is to rewrite the contents of <body> tag using the InnerHTML setter.

As an example, let's display three buttons to the console screen. The width of the buttons will be set as same as the width of the console screen.

Figure 1: Console screen

First, css is shown. Suppose the following css code is written in the css.txt file.

1:

button{width:100%;margin-top:5px;padding: 5px;border:solid 1px black;}

Next, html is shown. Suppose the following html code is written in the html.txt file.

1:

<button id="b1" type="button">Button 1</button>

2:

<br>

3:

<button id="b2" type="button">Button 2</button>

4:

<br>

5:

<button id="b3" type="button">Button 3</button>

Finally, the Rice code is shown. Suppose the following Rice code is written in consoleSample.cook file.

On line 12, the contents of css.txt are writen by the PushCss(string) method.

On line 17, the contents of html.txt is writen to the <body> tag by InnerHTML setter.

1:

class main

2:

document _doc;

3:

rice _rice;

4:

open method void start()

5:

//Gets a directory that there is this source file.

6:

file source = new file(_rice.SourceFileName);

7:

directory dir = source.Directory;

8:

// ------------------------------------------Initialization of console

9:

//css

10:

reader cssReader = new reader(dir.FullName + "\css.txt");

11:

string cssText = cssReader.ReadToEnd();

12:

_doc.PushCss(cssText);

13:

cssReader.Release();

14:

//html

15:

reader htmlReader = new reader(dir.FullName + "\html.txt");

16:

string htmlText = htmlReader.ReadToEnd();

17:

_doc.Body.InnerHTML = htmlText;

18:

htmlReader.Release();

19:

endmethod

20:

endclass

If it put css.txt, html.txt and consoleSample.cook in the same directory and run consoleSample.cook with the Cooker, three buttons are displayed in the UI browser as the above figure.

The whole html of the UI browser at this time is shown below.

1:

<!DOCTYPE html>

2:

<html>

3:

<head>

4:

<meta charset='utf-8'>

5:

<meta http-equiv='X-UA-Compatible' content='IE=edge'>

6:

<meta http-equiv='Pragma' content='no-cache'>

7:

<meta http-equiv='Cache-Control' content='no-cache'>

8:

<meta http-equiv='Expires' content='0'>

9:

<style>

10:

button{width:100%;margin-top:5px;padding: 5px;border:solid 1px black;}

11:

</style>

12:

</head>

13:

<body>

14:

<button id="b1" type="button">Button 1</button>

15:

<br>

16:

<button id="b2" type="button">Button 2</button>

17:

<br>

18:

<button id="b3" type="button">Button 3</button>

19:

</body>

20:

</html>

Assign event handler and dynamically addition of user interface

We will discuss event handler assignment and dynamically addition of user interface elements in this section.

As an example, it will improve the example in the section above. It will implement a function to add a button when the button is clicked.

Event handler

The following is the Rice code for assigning an event handler.

1:

element b1Button = _doc.GetElementById("b1");

2:

ehswitch b1Switch = b1Button.Click(this, "buttonHandler(elementeventargs)");

3:

b1Switch.Start();

The first line is the retrieval of an instance representing a button.

The second line is assignment of handler to the Click event of the element taken out by the first line. It assigns with the Click method.

The first argument of the Click method is an instance with the handler as a member. The second argument is the signature of the handler.

As a result of the assignment, an instance of the ehswitch class that controls the execution of the handler is returned.

The third line is the start of handling. The handler is started with the start method of ehswitch class.


Please note to the second line. It pass the "this" (the instance of the main class) and the signature "buttonHandler(elementeventargs)" to the Click method. As a result, the buttonHandler method of the main class is called for the Click event of "b1Button".

The buttonHandler method must be the "open" since it will be called from outside. In addition, it need to have one argument of the elementeventargs class as specified in the signature.

The following code is the outline of the definition of the buttonHandler method.

1:

open method void buttonHandler(elementeventargs eea)

2:

// Handler implementation.

3:

endmethod

Let's implement a code to add a button in this buttonHandler method.

The code to add a button is shown below.

1:

open method void buttonHandler(elementeventargs eea)

2:

eea.EHSwitch.Stop(); // Handling it only once.

3:

// ------------------------------------------Dynamically addition of new button

4:

//Makes new button.

5:

element br =_doc.CreateElement("br");

6:

element newButton =_doc.CreateElement("button");

7:

newButton.SetAttribute("id", "b4");

8:

newButton.SetAttribute("type", "button");

9:

newButton.InnerText = "New button";

10:

//Addition

11:

_doc.Body.AppendChild(br);

12:

_doc.Body.AppendChild(newButton);

13:

endmethod

The argument (elementeventargs class) passed to the handler have the EHSwitch getter. This getter returns an instance (b1Switch) of the ehswitch class generated at handler assignment time.

You can control the handler's own execution within the handler like the second line.


The consoleSample.cook added the event handler assignment is shown below.

1:

class main

2:

document _doc;

3:

rice _rice;

4:

open method void start()

5:

//Gets a directory that there is this source file.

6:

file source = new file(_rice.SourceFileName);

7:

directory dir = source.Directory;

8:

// ------------------------------------------Initialization of console

9:

//css

10:

reader cssReader = new reader(dir.FullName + "\css.txt");

11:

string cssText = cssReader.ReadToEnd();

12:

_doc.PushCss(cssText);

13:

cssReader.Release();

14:

//html

15:

reader htmlReader = new reader(dir.FullName + "\consoleSampleHtml.txt");

16:

string htmlText = htmlReader.ReadToEnd();

17:

_doc.Body.InnerHTML = htmlText;

18:

htmlReader.Release();

19:

// ------------------------------------------Assigning event handlers

20:

element b1Button = _doc.GetElementById("b1");

21:

ehswitch b1Switch = b1Button.Click(this, "buttonHandler(elementeventargs)");

22:

b1Switch.Start();

23:

endmethod

24:
25:

open method void buttonHandler(elementeventargs eea)

26:

eea.EHSwitch.Stop(); // Stop handling.

27:

// ------------------------------------------Dynamically addition of new button

28:

//Makes new button.

29:

element br =_doc.CreateElement("br");

30:

element newButton =_doc.CreateElement("button");

31:

newButton.SetAttribute("id", "b4");

32:

newButton.SetAttribute("type", "button");

33:

newButton.InnerText = "New button";

34:

//Addition

35:

_doc.Body.AppendChild(br);

36:

_doc.Body.AppendChild(newButton);

37:

endmethod

38:

endclass

It executes consoleSample.cook and click on the top button, the result looks like the following.

Figure 2: Add button

The whole html of the UI browser at this time is shown below.

1:

<!DOCTYPE html>

2:

<html>

3:

<head>

4:

<meta charset='utf-8'>

5:

<meta http-equiv='X-UA-Compatible' content='IE=edge'>

6:

<meta http-equiv='Pragma' content='no-cache'>

7:

<meta http-equiv='Cache-Control' content='no-cache'>

8:

<meta http-equiv='Expires' content='0'>

9:

<style>

10:

button{width:100%;margin-top:5px;padding: 5px;border:solid 1px black;}

11:

</style>

12:

</head>

13:

<body>

14:

<button id="b1" type="button">Button 1</button>

15:

<br>

16:

<button id="b2" type="button">Button 2</button>

17:

<br>

18:

<button id="b3" type="button">Button 3</button>

19:

<br>

20:

<button id="b4" type="button">New button</button>

21:

</body>

22:

</html>

Next
Previous
Copyright © Rice All rights reserved.