Hello Worldダイアログ


サマリー

このチュートリアルでは、以下の項目について説明します。

  1. HTMLページの作成
  2. OriginCを使ってダイアログボックス内でHTMLページを表示
  3. ダイアログのイベントに対応するイベントハンドラーのビルド

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

サンプルファイル

  • index.html: htmlページのHTMLコード
  • HelloWorldDlg.cpp: HTMLページを呼び出してダイアログ内でそれを表示するOriginCのコード
  • HelloWorldDlg1.cpp: 応用的な機能を含むOriginCのコード
Note: こちらから、サンプルファイルをダウンロードできます。

HTMLページの作成

HTMLダイアログを作成する際には、まず初めにHTMLページを作成します。

  1. Originを起動して、Cb.pngをダブルクリックしてコードビルダを開きます。
  2. 「index.html」という新しいHTMLファイルを作成して、「Hello World」という新しいフォルダに保存します。
  3. < head >と< body >要素を中に入れ、< title >, < h1 >, < p > などの別のHTML要素を加えてHTMLページを構築します。 
    <!DOCTYPE html>
<html>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <head>
       <title>
          A Small Hello 
       </title>
    </head>
    <body>
        <h1>Hello World</h1>
        <p>This is very minimal "hello world" HTML document.</p> 
    </body>
</html>
Note:編集を終えたら、ブラウザでこのページを開いて、確認します。

HTMLダイアログの作成

このセクションでは、ダイアログのHTMLページ表示を作成します。

  1. コードビルダで、HTMLファイルのパスの下に、新しいcppファイル「DlgWithGraph.cpp」を作成します。
  2. まず初めに、3つの必要なヘッダを入れます。ここで、HTMLDlg.はOrigin 2017で新しくなっており、OriginとHTMLダイアログを一緒に結びつけます。 
    #include <Origin.h>
#include <..\OriginLab\DialogEx.h>
#include <..\OriginLab\HTMLDlg.h>
  3. ユーザ定義HTMLダイアログクラスをHTMLDlgクラスから生成し、手法GetInitURL()の中にHTMLページを示します。 
    class HelloWorldDlg: public HTMLDlg
{
    public:
        string GetInitURL() //htmlファイルのパス取得                    
        {
            string strFile = __FILE__; //現在のファイルのパス
            return GetFilePath(strFile) + "index.html";
        }
};
  4. HTMLダイアログを開くには、すべてのコードを保存してビルドし、以下の関数を実行します。 
    void hello()
{
    HelloWorldDlg dlg;
    dlg.DoModalEx(GetWindow());
}

「Hello World」の付いたHTMLダイアログがポップアップされます。

Hello.png

高度な機能

ダイアログを変更してイベントヘッダーを追加し、プログラムを改良することができます。

Note: 以下の機能の完全なコードは「HelloWorldDlg1.cpp」で利用可能です。

ダイアログのサイズ変更を禁止

この設定を行うには、ModifyStyleを使い、ダイアログクラスの手法 OnInitDialog「WS_THICKFRAME」を無効にします。

BOOL OnInitDialog()
{
    ModifyStyle(WS_THICKFRAME, 0);//サイズ変更禁止
    return HTMLDlg::OnInitDialog();
}

ダイアログサイズの設定

対のクラス手法GetDlgInitSizeをダイアログクラスから呼び出し、ダイアログの幅と高さを指定する必要があります。

BOOL GetDlgInitSize(int& width, int& height)//ダイアログサイズ取得
{
    width = 500;
    height = 200;
    return true;
}

イベントハンドラーの追加

ダイアログビルダと同様に、メッセージマップを使って、どのイベントを扱うのか、どの関数を呼び出すのかを指定します。
例えば、イベントハンドラー手法をユーザ定義のクラス「HelloWorldDlg」に 加えて、ダイアログを閉じるとメッセージがポップアップするようにします。

  1. クラスHelloWorldDlgにある以下のメッセージマップにより、ダイアログメッセージをマップします。 
    //メッセージマップ
public:
    EVENTS_BEGIN_DERIV(HTMLDlg)
        ON_DESTROY(OnDestroy)
    EVENTS_END_DERIV
  2. イベントハンドラー手法をユーザ定義のクラスHelloWorldDlgに加えて、ダイアログを閉じるとメッセージがポップアップするようにします。 
    BOOL OnDestroy()
{
    MessageBox(GetSafeHwnd(), _L("Thank you and have a good day!"),_L("Message"));
    return true;
}
English | Deutsch | 日本語