1.18.1.5.5 HTML Dialog to use Chrome

Contents

Summary

In this tutorial, you build the download dialog with CEF(Chromium Embedded Framework) HTML control

Minimum Origin Version Required: Origin 2024b

Creating an CEF HTML Page for Dialog

  1. Open Code Builder, create a new HTML file and save as DownloadFilewithChrome.html to the folder DownloadFilewithChrome.
  2. Copy the following code and paste it within the DownloadFilewithChrome.html: 
    <!doctype html>
<html>
	<head>
		<meta charset="utf-8" />		
		<script src="http://olab/resource/programfolder/JS/jquery.js"></script>
		<script src="http://olab/resource/programfolder/JS/olab.js"></script>
		<script type="text/JavaScript">
			function On_Path() {
				document.getElementById('btnDownload').disabled = false;
				document.getElementById('hint').value = "";
			}
			function Invoke_Download() {
				window.O.DownloadOnlineFile(document.getElementById("path").value, function(response) 
				{
					if(response) 
					{
						document.getElementById('hint').value = response;
						document.getElementById('btnDownload').disabled = true;
					}
					else 
					{
						document.getElementById('hint').value = 'Error';
					}
				});
			}		
			function Invoke_Abort() {
				window.O.DownloadAbort();
				document.getElementById('btnDownload').disabled = false;
			}
			function Update(str) { document.getElementById('hint').value = str; }  
		</script>  
	</head>
	<body>
		<input id="path" style="width:350px" placeholder="input file url and click Download" onchange="On_Path()"></input>		
		<br>
		<input type="button" id="btnDownload" value="Download" onclick="Invoke_Download();"/>		
		<input type="button" id="btnAbort" value="Abort" onclick="Invoke_Abort();"/>	
		<br>
		<input id="hint" style="width:350px;border:none" disabled="true"></div>
	</body>  
	
</html>
    Note:
    • Include jQuery JavaScript Library:
    <script src="http://olab/resource/programfolder/JS/jquery.js"></script>
    • Setup proxy for external calls:
    <script src="http://olab/resource/programfolder/JS/olab.js"></script>
    • In the functions Invoke_Download and Invoke_Abort, window.O is used to call Origin C. You can learn more about Origin C communicates to JavaScript from here.

Once you finish this step, you can see the html page by opening the DownloadFilewithChrome.html with a web browser.

Creating an Floating CEF HTML Dialog

Now you are ready to edit the Origin C code to create an CEF HTML dialog.

  1. In Code Builder, create a new cpp file named DownloadDlgwithChrome.cpp under the folder DownloadDlgwithChrome.
  2. Copy the following code and paste it within the DownloadDlgwithChrome.cpp : 
    #include <Origin.h>
#include <../OriginLab/DialogEx.h>

#define _USE_CEF_AS_HTML_CTRL		// to enable use CEF as html control
#include <../OriginLab/HTMLDlg.h>

class DownloadDialogChrome;
static DownloadDialogChrome* s_pDLDlg;

class DownloadDialogChrome: public HTMLDlg
{
protected:
	string GetInitURL(){return GetFilePath(__FILE__) + "DownloadFilewithChrome.html";}
	string GetDialogTitle(){return "";}
	BOOL GetDlgInitSize(int& width, int& height){ width = 400; height = 150; return true; }
public:
	int Create()
	{
		InitMsgMap();
		int nRet = Create(NULL, 0);
		Visible = true;
		return nRet;
	}
	
	DECLARE_DISPATCH_MAP
	
	string DownloadOnlineFile(string strURL) 
	{
		string strMsg, strName = GetFileName(strURL);
		m_strFile = GetOriginPath(ORIGIN_PATH_USER) + strName;
		BOOL bWait = FALSE, bShowMsg = TRUE; // download file in a separate thread, and message log will show message after download complete
		double err;
		if( okutil_http_download(strURL, m_strFile, 0, 0, FALSE, bWait, bShowMsg) )
		{
			LT_get_var("@OCDL", &err); 
			strMsg.Format("previous download not completed %.2f%%", err);
		}
		else
			strMsg = "downloading...";
		return strMsg;
	}
	
	void DownloadAbort(void){ LT_set_var("@OCDL", 2); }
	
private:
	string m_strFile;
	
protected:
EVENTS_BEGIN_DERIV(HTMLDlg)
	ON_DESTROY(OnDestroy)
	ON_IDLE(OnIdle)
EVENTS_END_DERIV

	BOOL OnDestroy()
	{
		BOOL bRet = HTMLDlg::OnDestroy();
		
		delete this;
		s_pDLDlg = NULL;
		return bRet;
	}
	
	BOOL OnIdle()
	{
		string strMsg, strJS;
		double err;
		LT_get_var("@OCDL", &err); 
		if( err < 0 ) 
		{
			if( !m_strFile.IsEmpty() )
			{
				switch(err)
				{
				case OHTTP_E_INVALID_URL:
					strMsg = "Invalid URL"; 
					break;
				case OHTTP_E_USER_CANCEL: 
					strMsg = "Abort";
					break;
				default:
					strMsg.Format("err = %g", err);
				}
				m_strFile.Empty(); 
			}
		}
		else if( err == 0 ) 
		{	
			if( m_strFile.IsFile() )
			{				
				string strFullPath = m_strFile;
				strFullPath.Replace("\\", "\\\\"); //to show \ in path string
				strMsg.Format("download complete: %s", strFullPath);
				m_strFile.Empty();
			}			
		}
		else
			strMsg.Format("downloading %.2f%%", err);
		
		
		if( !strMsg.IsEmpty() )
		{
			strJS.Format("Update(\'%s\')", strMsg);//call Update() in html code			
			CallJavaScript(strJS);
		}
		return TRUE;
	}
};

BEGIN_DISPATCH_MAP(DownloadDialogChrome, HTMLDlg)
    DISP_FUNCTION(DownloadDialogChrome, DownloadOnlineFile, VTS_STR, VTS_STR)
    DISP_FUNCTION(DownloadDialogChrome, DownloadAbort, VTS_VOID, VTS_VOID)
END_DISPATCH_MAP

int DownloadDlgChrome(int nMsg, DWORD dwCntrl = 0, LPVOID lpData = NULL)
{
	bool bClose = OMSG_CLOSE==nMsg? true:false;
	if(bClose)
	{
		if(s_pDLDlg)
		{
			Window winDlg = s_pDLDlg->GetWindow();
			if(winDlg)
				winDlg.SendMessage(WM_CLOSE);
			delete s_pDLDlg;
			s_pDLDlg = NULL;
		}
		return 0;
	}
	
	if(!s_pDLDlg)
	{
		s_pDLDlg = new DownloadDialogChrome();
		s_pDLDlg->Create();
	}
	return 0;
}

void open_downloaddlgchrome(){DownloadDlgChrome(OMSG_OPEN);}
    Note:
    • Enable CEF as web control, add #define _USE_CEF_AS_HTML_CTRL before #include <../OriginLab/HTMLDlg.h>.
    • DownloadOnlineFile() and DownloadAbort() are called in JavaScript. You need to add DECLARE_DISPATCH_MAP to the front of the functions, and map the the functions to HTML dialog
    BEGIN_DISPATCH_MAP(DownloadDialogChrome, HTMLDlg)
    DISP_FUNCTION(DownloadDialogChrome, DownloadOnlineFile, VTS_STR, VTS_STR)
    DISP_FUNCTION(DownloadDialogChrome, DownloadAbort, VTS_VOID, VTS_VOID)
END_DISPATCH_MAP

    More details of DISP_FUNCTION can be found here.

    • Because the backslash itself is used as an escape character, you must type two backslashes together (\\) to make the path string display correctly:strFullPath.Replace("\\", "\\\\");

Launching The Dialog

Save all the code and build it. Run open_downloaddlgchrome to lauch the dialog.