Download source files - 34.8 Kb

Introduction

I have posted an article for standard windows UI. We can write a MFC client using HTML as user interface , too. What’s a lucky thing is that in Visual Studio.NET , there is a class named CdhtmlDialog in MFC. I think that is a good start point for us than to start everything from scratch. You can use that class as per standard dialog of windows except you need to draw user interface using HTML. Many message maps shall map to elements in HTML. As per standard windows UI, there are some problems for user input , as it still exists in HTML UI. See this article on an auto-collection information control group

http://www.codeproject.com/useritems/cntGroup.asp

This are article is one of a series articles , to deal with the same problem in HTML UI.

Bibiography

This article needs the following articles of mine to support.

Wrapper class for DOM interface of windows SDK	http://www.codeproject.com/useritems/xmlFile.asp
A set of universal data check functions	http://www.codeproject.com/useritems/my_check.asp
A ComboBox using XML as dictionary	http://www.codeproject.com/useritems/dictcomb.asp
How to operate controls in HTML file using C++	http://www.codeproject.com/useritems/htmldocument.asp
A auto-collection information control group	http://www.codeproject.com/useritems/cntGroup.asp

How to deal with Date time

In a standard window UI, there is a common control to deal with date /time. In HTML, there are not any controls to do that (see How to operate controls in HTML file using C++). In order to complete this task , we need several input controls . The main thing to deal with is to get a date and validate if this date is OK.

Date can be divided into 3 kinds of information , Date + time , time only and Date only. When we deal with the date , we can deem it as 2 conditions, where first 2 are incorporated. In HTML , we use a custom attribute of HTML element to define which control is in the group of date or time. For example:

<input type="text" mydate="i_now_pre_pro" id="i_now_pre_pro_year" 
  name="i_now_pre_pro_year" size="5" class="bot_border" maxlength="4">
Year<input type="text" mydate="i_now_pre_pro" id="i_now_pre_pro_month" 
  name="i_now_pre_pro_month" size="3" class="bot_border" maxlength="2">
month <input type="text" mydate="i_now_pre_pro" id="i_now_pre_pro_day" 
  name="i_now_pre_pro_day" size="3" class="bot_border" maxlength="2">
  day</td>

In this code segment of HTML , “i_now_pre_pro_year" , ”i_new_pre_pro_month” and ”i_new_pre_pro_day” is composed of a date input. For each INPUT tag, we set an attribute “mydate” with the same name to indicate that these 3 controls are in a date group. Same as date , all controls with time has an attributed nomenclated as “mytime”. As conclusion, to process date and time, we are using “mydate” or “mytime” attributes with same name to group control as one control in HTML.

How to process radio button

In standard windows UI , radio buttons have one variable for a group, which start with a radio button with group property checked, other radios are consecutive number for their control ID. In HTML there will be no group property explicitly. All radios in a radio group has the same “name “ attribute value. We have to obey the rules of HTML . For our control group , we assume that a radio group has same name attribute value and the id of radios are different. But the all radio in same group is ended with 2 digit. So , please don’t nomenclate your radio id ended with digit.

The following is an example code segment of HTML

<input type="radio" id="i_now_isclear01" name="i_now_isclear" 
  VALUE="i_now_isclear01">
<label for="i_now_isclear01" class="hand">clear</label> 
<input type="radio" id="i_now_isclear02" name="i_now_isclear" 
  VALUE="i_now_isclear02">
<label for="i_now_isclear02" class="hand">uncleare</label>
<input type="radio" id="i_now_isclear03" name="i_now_isclear" 
  VALUE="i_now_isclear03">
<label for="i_now_isclear03" class="hand"> stink </label>

For a radio group , there will be another problem to process. As default of CdhtmlDialog in Visual Studio .NET, it will return a zero based index number for each checked radio. In a real application, each item my be a meaning full number for a radio. There will be a map from this index to useful number.

Implementation

To implement this control group, we wrote 4 classes.

`CDhtml_Control`	to define a general control information and variable information. This is contrast to CNT_Control .
`CDhtmlDateTime`	Processing date time control group.
`CDhtml_Radio`	To process the radio group and value mapping.
`CDhtmlControlGroup`	define initialization, data exchange and validating of data in user interface.

Other classes such as CHtmlDocument and so on from other articles will not be explained here. This control group is also can be initialized by both file and manually ( hard code). The file format is same as CXMLResult. You may find it from my last article about control groups for standard windows UI.

How to use these classes

To use these classes, follow the following steps:

Step 1: Create a HTML file you want to be user interface, the Id and name of each element is nomenclated according to your demand.
Step 2: Write an XML file with the HTML file you are just wrote.
Step 3: Add following variables in your declaration of CdhtmlDialog derived class
```
CXMLDict *m_pDict;
CDhtmlControlGroup *m_cntGroup;
```

Step 4: In construction of CDhtmlDialog derived classes, add the following lines

m_pDict = NULL;
m_cntControl.InitFromFile(theApp.m_Path+_T(“\\mytext.xml”));

Step5: In InitDialog add the following line make the dialog display a scroll control in case of the HTML can not displayed fully in dialog.
```
SetHostFlags(DOCHOSTUIFLAG_NO3DBORDER);
```
Step 6: In DoDataExchange function of derived class , add the following line to support the data exchange of both direction.
```
m_cntGroup.DoDataExchange (pDX);
```
Step 7: Rewrite the OnNavigateComplete of CDhtmlDialog , add the following for date/time processing and radio button group processing
```
m_cntGroup.GetAllDateTime( m_spHtmlDoc);
    m_cntGroup.GetAllRadios (m_spHtmlDoc);
```
where m_spHtmlDoc is member variable of CDhtmlDialog, you can use it directly.
Step 8: In you data commit function according your code, add the following line , you can get the input result from user interface in CXMLCmd format.
```
    CString xml;
    CXMLCmd cmd;
        UpdateData(TRUE);
    cmd.InitCmd ();
    m_cntGroup.AddToXML (&cmd);
    cmd.GetXML (xml);
```
Step 9: Add all files used by control group to your project. Compile and enjoy your journey.

Another control group for HTML as user interface