Chromeを使用するためのHTMLダイアログ

HTML ダイアログ使用 ChromeChrome HTML ダイアログ

概要

このチュートリアルでは、CEF (Chromium Embedded Framework) HTMLコントロールを使用してダウンロードダイアログを構築します。

必要なOriginのバージョン: Origin 2024b以降

ダイアログ用CEF HTMLページの作成

コードビルダを開き、新しいHTMLファイルを作成してDownloadFilewithChrome.htmlという名前でDownloadFilewithChromeフォルダに保存します。

次のコードをコピーし、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:

jQuery JavaScriptライブラリを含める:

<script src="http://olab/resource/programfolder/JS/jquery.js"></script>

外部呼出しのプロキシを設定する：

<script src="http://olab/resource/programfolder/JS/olab.js"></script>

関数 Invoke_Download と Invoke_Abort、 window.O はOrigin Cを呼び出すために使用されます。Origin CとJavaScriptの連携方法の詳細についてはこちらをご覧ください。

この手順が完了したら、WebブラウザでDownloadFilewithChrome.htmlを開くと、HTMLページが表示されます。

フローティングCEF HTMLダイアログの作成

これで、Origin Cコードを編集してCEF HTMLダイアログを作成する準備が整いました。

コードビルダで、DownloadDlgwithChrome.cppという名前の新しいcppファイルをDownloadDlgwithChromeフォルダに作成します。

次のコードをコピーし、DownloadDlgwithChrome.cpp内に貼り付けます。

#include <Origin.h>
#include <../OriginLab/DialogEx.h>

#define _USE_CEF_AS_HTML_CTRL             // CEFをHTMLコントロールとして使用できるようにする
#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; // 別のスレッドでファイルをダウンロードし、ダウンロードが完了するとメッセージログにメッセージを表示する
                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("\\", "\\\\"); //パス文字列に \ を表示
                                strMsg.Format("download complete: %s", strFullPath);
                                m_strFile.Empty();
                        }                  
                }
                else
                        strMsg.Format("downloading %.2f%%", err);
                
                
                if( !strMsg.IsEmpty() )
                {
                        strJS.Format("Update(\'%s\')", strMsg);//HTMLコードでUpdate()を呼び出す                      
                        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:

WebコントロールとしてCEFを有効にし、#include <../OriginLab/HTMLDlg.h> の前に#define _USE_CEF_AS_HTML_CTRL を追加します。
DownloadOnlineFile() とDownloadAbort() はJavaScriptで呼び出されます。関数の先頭にDECLARE_DISPATCH_MAP を追加し、関数をHTMLダイアログにマップする必要があります。

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

DISP_FUNCTIONの詳細はこちらをご覧ください。

バックスラッシュ自体がエスケープ文字として使用されるため、パス文字列を正しく表示するには、次のように2つのバックスラッシュ(\\)を一緒に入力する必要があります。strFullPath.Replace("\\", "\\\\");

ダイアログの起動

すべてのコードを保存してビルドします。open_downloaddlgchrome を実行してダイアログを表示します。

Chromeを使用するためのHTMLダイアログ

目次

概要

ダイアログ用CEF HTMLページの作成

フローティングCEF HTMLダイアログの作成

ダイアログの起動