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
This are article is one of a series articles , to deal with the same problem in HTML UI.
This article needs the following articles of mine to support.
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">
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"
<label for="i_now_isclear01" class="hand">clear</label>
<input type="radio" id="i_now_isclear02" name="i_now_isclear"
<label for="i_now_isclear02" class="hand">uncleare</label>
<input type="radio" id="i_now_isclear03" name="i_now_isclear"
<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.
To implement this control group, we wrote 4 classes.
|to define a general control information and variable information. This is contrast to CNT_Control .|
|Processing date time control group.|
|To process the radio group and value mapping.|
|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
- Step 4: In construction of
CDhtmlDialog derived classes, add the following lines
m_pDict = NULL;
- 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.
- Step 6: In
DoDataExchange function of derived class , add the following line to support the data exchange of both direction.
- Step 7: Rewrite the
CDhtmlDialog , add the following for date/time processing and radio button group processing
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
- Step 9: Add all files used by control group to your project. Compile and enjoy your journey.