design a input interface through a html page

• Download demo project - 37 Kb

Introduction

Design a input interface is a headache problem to me. especially when parameters are too much. you have to design lots of property sheets and handle their show status. But the greatest problem is you would found it look bad when you finish you code. 

With dhtml's helping, you may solve the problem at easy. you can design your interface as mush beautiful as you can but need not input a line of code.

In order to input data through web page, we must overcome the communicate problem between program and web page firstly. Fortunately, IE is base on COM, we can operate any html element by some COM interface.

In order to input data, commonly, we design a form in a web page. So at first we need find the destination form, and find input elements secondly.

Code explain

In the demo, I offer two helper classes, there are CDhtmlExport_From and CDhtmlFormInput respectively. CDhtmlFormInput is a template class.

<BR>class CDhtmlExport_From  <BR>{<BR>public:<BR> CDhtmlExport_From(LPDISPATCH pDispDoc,TCHAR *pchFormName,long nForm=0);<BR> virtual ~CDhtmlExport_From();<BR><BR> IHTMLFormElement *m_pIForm;<BR>};<BR><BR>template<class T><BR>class CDhtmlFormInput<BR>{<BR>public:<BR> CDhtmlFormInput(CDhtmlExport_From *pExportForm)<BR> {<BR>  ASSERT(pExportForm);<BR>  m_pInput=NULL;<BR>  m_pExportForm=pExportForm;<BR> }<BR> ~CDhtmlFormInput()<BR> {<BR>  if(m_pInput) m_pInput->Release();<BR> }<BR><BR> BOOL FindObject(REFIID riid,LPCTSTR pszName,long nIndex=0)<BR> {<BR>  IDispatch *pdisp=NULL;<BR>  m_pExportForm->m_pIForm->item(COleVariant(pszName),COleVariant(long(nIndex)),&pdisp);<BR>  if(!pdisp) return FALSE;<BR>  pdisp->QueryInterface(riid,(void**)&m_pInput);<BR>  return m_pInput!=NULL;<BR> }<BR><BR> T *m_pInput;<BR>private:<BR> CDhtmlExport_From *m_pExportForm;<BR>};

With the above two classes' help, the code will get a bit simpler. For example:

Get a form named as "form1":

 CDhtmlExport_From formExport1(m_webBrowse.GetDocument(),_T("form1"));

Get a text box in form1:

 CDhtmlFormInput<IHTMLInputTextElement> text11(&formExport1);<BR> text11.FindObject(IID_IHTMLInputTextElement,_T("T1"));<BR>

If you look in my demo, you will find it show a simple method about how to load data to a web page and how to save data from a web page.

In the test web page, I have tested four input control types include text box, check box, radio box and combox. In order to simulate the property sheet's action, I design 3 buttons to navigate in the web page as well.

Some tips:

1  Use Unicode mode will make code easier.

2  In order to handle the buttons' click event who are in web page, you can write  script as

<input type="button" value="load" onclick=navigate("http://load/")> , and handle BeforeNavigate2 Event by compare the target URL.

For example:

void CHtmlform2Dlg::OnBeforeNavigate2(LPDISPATCH pDisp, VARIANT FAR* URL, VARIANT FAR* Flags, VARIANT FAR* TargetFrameName, VARIANT FAR* PostData, VARIANT FAR* Headers, BOOL FAR* Cancel) <BR>{<BR> WCHAR *ptest=V_BSTR(URL);<BR> if(wcscmp(ptest,_T("<A href='http://load/"))==0'>http://load/"))==0</A>)<BR> {<BR>  OnLoad();<BR>  *Cancel=TRUE;<BR> }else if(wcscmp(ptest,_T("<A href='http://save/"))==0'>http://save/"))==0</A>)<BR> {<BR>  OnSave();<BR>  *Cancel=TRUE;<BR> }<BR>}

Hope my work will bring you some help.