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.
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.