Click here to Skip to main content
11,718,016 members (74,674 online)
Click here to Skip to main content

Another control group for HTML as user interface

, 27 Dec 2002 53.3K 733 24
Rate this:
Please Sign up or sign in to vote.
To process user input from a HTML interface in windows using MFC

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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Johnson Zhou
Software Developer (Senior)
China China
I'm write program from 1990. My research field is CAG,CAD and Image processing. I select C/C++, ASP, Java, XML as my usaully developing tools. Occasional , write code in Delphi and VB. I'm using Visual C++ from 1996. If you have anything unclear, e-mail to :zhou_cn123@sina.com Software Engineering and CAD is my mainly research program.

You also can reach me on msn: zhoujohnson@hotmail.com

You may also be interested in...

Comments and Discussions

 
GeneralNo scroll Pin
Chrumak28-Aug-03 22:28
memberChrumak28-Aug-03 22:28 
GeneralRe: No scroll Pin
Chrumak28-Aug-03 22:58
memberChrumak28-Aug-03 22:58 
GeneralRequest Pin
Daniel Martin28-Dec-02 1:49
sussDaniel Martin28-Dec-02 1:49 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150901.1 | Last Updated 28 Dec 2002
Article Copyright 2002 by Johnson Zhou
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid