チュートリアル: MFC Scribble アプリケーションの更新 (パート 2)

  • [アーティクル]

このチュートリアルのパート 1 では、従来の Scribble アプリケーションに Office Fluent リボンを追加する方法を示しました。 このパートでは、ユーザーがメニューやコマンドの代わりに使用可能なリボン パネルとコントロールを追加する方法を示します。

前提条件

Visual C++ のサンプル

セクション

このパートは、次のセクションで構成されています。

リボンへの新しいパネルの追加

次の手順では、ツール バーとステータス バーの表示を制御する 2 つのチェック ボックスを含む [表示] パネルと、マルチドキュメント インターフェイス (MDI) ウィンドウの作成と配置を制御する垂直方向の分割ボタンを含む [ウィンドウ] パネルを追加する方法を示します。

リボン バーに [表示] パネルと [ウィンドウ] パネルを追加するには

  1. View という名前のパネルを作成します。このパネルには、ステータス バーとツール バーを切り替える 2 つのチェック ボックスがあります。

    1. [ツールボックス] から、[パネル] を [ホーム] カテゴリにドラッグします。 次に、2 つの [チェック ボックス] をパネルにドラッグします。

    2. パネルをクリックしてそのプロパティを変更します。 [キャプション] を View に変更します。

    3. 1 つ目のチェック ボックスをクリックしてそのプロパティを変更します。 [ID] を ID_VIEW_TOOLBAR に変更し、[キャプション] を Toolbar に変更します。

    4. 2 つ目のチェック ボックスをクリックしてそのプロパティを変更します。 [ID] を ID_VIEW_STATUS_BAR に変更し、[キャプション] を Status Bar に変更します。

  2. 分割ボタンが付いた Window という名前のパネルを作成します。 ユーザーが分割ボタンをクリックすると、Scribble アプリケーションで既に定義されている 3 つのコマンドがショートカット メニューに表示されます。

    1. [ツールボックス] から、[パネル] を [ホーム] カテゴリにドラッグします。 次に、[ボタン] をパネルにドラッグします。

    2. パネルをクリックしてそのプロパティを変更します。 [キャプション] を Window に変更します。

    3. ボタンをクリックします。 [キャプション] を Windows に、[キー] を w に、[大きいイメージのインデックス] を 1 に、[分割モード] を False に変更します。 次に、[メニュー項目] の横にある省略記号 ([...]) をクリックして、[項目エディター] ダイアログ ボックスを開きます。

    4. [追加] を 3 回クリックして、3 つのボタンを追加します。

    5. 1 つ目のボタンをクリックしてから、[キャプション] を New Window に、[ID] を ID_WINDOW_NEW に変更します。

    6. 2 つ目のボタンをクリックしてから、[キャプション] を Cascade に、[ID] を ID_WINDOW_CASCADE に変更します。

    7. 3 つ目のボタンをクリックしてから、[キャプション] を Tile に、[ID] を ID_WINDOW_TILE_HORZ に変更します。

  3. 変更内容を保存し、アプリケーションをビルドして実行します。 [表示] パネルと [ウィンドウ] パネルが表示されます。 ボタンをクリックして、それらが正しく機能することを確認します。

リボンへのヘルプ パネルの追加

これで、Scribble アプリケーションで定義された 2 つのメニュー項目を、[ヘルプ トピック] と [Scribble バージョン情報] という名前のリボン ボタンに割り当てることができます。 ボタンが [ヘルプ] という名前の新しいパネルに追加されます。

ヘルプ パネルを追加するには

  1. [ツールボックス] から、[パネル] を [ホーム] カテゴリにドラッグします。 次に、2 つの [ボタン] をパネルにドラッグします。

  2. パネルをクリックしてそのプロパティを変更します。 [キャプション] を Help に変更します。

  3. 1 つ目のボタンをクリックします。 [キャプション] を Help Topics に、[ID] を ID_HELP_FINDER に変更します。

  4. 2 つ目のボタンをクリックします。 [キャプション] を About Scribble... に、[ID] を ID_APP_ABOUT に変更します。

  5. 変更内容を保存し、アプリケーションをビルドして実行します。 2 つのリボン ボタンを含む [ヘルプ] パネルが表示されます。

    重要

    [ヘルプ トピック] ボタンをクリックすると、Scribble アプリケーションで、your_project_name.chm という名前の圧縮された HTML (.chm) ヘルプ ファイルが開きます。 その結果、プロジェクトに Scribble という名前が付けられていない場合は、ヘルプ ファイルの名前をプロジェクト名に変更する必要があります。

リボンへの [ペン] パネルの追加

ここで、ペンの太さと色を制御するボタンを表示するためのパネルを追加します。 このパネルには、太いペンと細いペンを切り替えるチェック ボックスがあります。 この機能は、Scribble アプリケーションの [太線] メニュー項目の機能に似ています。

オリジナルの Scribble アプリケーションを使用すると、メニューの [ペンの太さ] をクリックしたときに表示されるダイアログ ボックスからペンの太さを選択できます。 リボン バーには新しいコントロール用の十分なスペースがあるため、リボンの 2 つのコンボ ボックスを使用してダイアログ ボックスを置き換えることができます。 一方のコンボ ボックスは細いペンの太さを調整し、もう一方のコンボ ボックスは太いペンの太さを調整します。

[ペン] パネルとコンボ ボックスをリボンに追加するには

  1. [ツールボックス] から、[パネル] を [ホーム] カテゴリにドラッグします。 次に、1 つの [チェック ボックス] と 2 つの [コンボ ボックス] をパネルにドラッグします。

  2. パネルをクリックしてそのプロパティを変更します。 [キャプション] を Pen に変更します。

  3. チェック ボックスをオンにします。 [キャプション] を Use Thick に、[ID] を ID_PEN_THICK_OR_THIN に変更します。

  4. 1 つ目のコンボ ボックスをクリックします。 [キャプション] を Thin Pen に、[ID] を ID_PEN_THIN_WIDTH に、[タイプ] を Drop List に、[データ] を 1;2;3;4;5;6;7;8;9; に、[テキスト] を 2 に変更します。

  5. 2 つ目のコンボ ボックスをクリックします。 [キャプション] を Thick Pen に、[ID] を ID_PEN_THICK_WIDTH に、[タイプ] を Drop List に、[データ] を 5;6;7;8;9;10;11;12;13;14;15;16;17;18;19;20; に、[テキスト] を 5 に変更します。

  6. 新しいコンボ ボックスは、既存のメニュー項目に対応していないため、すべてのペン オプションのメニュー項目を作成する必要があります。

    1. [リソース ビュー] ウィンドウで、[IDR_SCRIBBTYPE] メニュー リソースを開きます。

    2. [ペン] をクリックして、[ペン] メニューを開きます。 次に、[ここに入力] をクリックし、「Thi&n Pen」と入力します。

    3. 入力したテキストを右クリックして [プロパティ] ウィンドウを開いてから、ID プロパティを ID_PEN_THIN_WIDTH に変更します。

    4. すべてのペン メニュー項目のイベント ハンドラーを作成します。 作成した [Thi&n Pen] メニュー項目を右クリックしてから、[イベント ハンドラーの追加] をクリックします。 イベント ハンドラー ウィザードが表示されます。

    5. ウィザードの [クラス] リスト ボックスで、[CScribbleDoc] を選択してから、[追加と編集] をクリックします。 コマンドによって、CScribbleDoc::OnPenThinWidth という名前のイベント ハンドラーが作成されます。

    6. 次のコードを CScribbleDoc::OnPenThinWidth に追加します。

      // Get a pointer to the ribbon bar
CMFCRibbonBar* pRibbon = ((CMDIFrameWndEx*) AfxGetMainWnd())->GetRibbonBar();
ASSERT_VALID(pRibbon);

// Get a pointer to the Thin Width combo box
CMFCRibbonComboBox* pThinComboBox = DYNAMIC_DOWNCAST(
CMFCRibbonComboBox, pRibbon->FindByID(ID_PEN_THIN_WIDTH));

//Get the selected value
int nCurSel = pThinComboBox->GetCurSel();
if (nCurSel>= 0)
{
    m_nThinWidth = atoi(CStringA(pThinComboBox->GetItem(nCurSel)));
}

// Create a new pen using the selected width
ReplacePen();

  7. 次に、太いペン用のメニュー項目とイベント ハンドラーを作成します。

    1. [リソース ビュー] ウィンドウで、[IDR_SCRIBBTYPE] メニュー リソースを開きます。

    2. [ペン] をクリックして、[ペン] メニューを開きます。 次に、[ここに入力] をクリックし、「Thic&k Pen」と入力します。

    3. 入力したテキストを右クリックして、[プロパティ] ウィンドウを表示します。 ID プロパティを ID_PEN_THICK_WIDTH に変更します。

    4. 作成した [Thick Pen] メニュー項目を右クリックしてから、[イベント ハンドラーの追加] をクリックします。 イベント ハンドラー ウィザードが表示されます。

    5. ウィザードの [クラス] リスト ボックスで、[CScribbleDoc] を選択してから、[追加と編集] をクリックします。 コマンドによって、CScribbleDoc::OnPenThickWidth という名前のイベント ハンドラーが作成されます。

    6. 次のコードを CScribbleDoc::OnPenThickWidth に追加します。

      // Get a pointer to the ribbon bar
CMFCRibbonBar* pRibbon = ((CMDIFrameWndEx *) AfxGetMainWnd())->GetRibbonBar();
ASSERT_VALID(pRibbon);

CMFCRibbonComboBox* pThickComboBox = DYNAMIC_DOWNCAST(
    CMFCRibbonComboBox, pRibbon->FindByID(ID_PEN_THICK_WIDTH));
// Get the selected value
int nCurSel = pThickComboBox->GetCurSel();
if (nCurSel>= 0)
{
    m_nThickWidth = atoi(CStringA(pThickComboBox->GetItem(nCurSel)));
}

// Create a new pen using the selected width
ReplacePen();

  8. 変更内容を保存し、アプリケーションをビルドして実行します。 新しいボタンとコンボ ボックスが表示されます。 別のペンの太さを使って走り書きを試してください。

[ペン] パネルへのカラー ボタンの追加

次に、ユーザーが色付きで走り書きができるようにする CMFCRibbonColorButton オブジェクトを追加します。

[ペン] パネルにカラー ボタンを追加するには

  1. カラー ボタンを追加する前に、それ用のメニュー項目を作成します。 [リソース ビュー] ウィンドウで、[IDR_SCRIBBTYPE] メニュー リソースを開きます。 [ペン] メニュー項目をクリックして、[ペン] メニューを開きます。 次に、[ここに入力] をクリックし、「&Color」と入力します。 入力したテキストを右クリックして、[プロパティ] ウィンドウを表示します。 ID を ID_PEN_COLORに変更します。

  2. ここで、カラー ボタンを追加します。 [ツール ボックス] から、[カラー ボタン] を [ペン] パネルにドラッグします。

  3. カラー ボタンをクリックします。 [キャプション] を Color に、[ID] を ID_PEN_COLOR に、[簡易表示] を True に、[大きいイメージのインデックス] を 1 に、[分割モード] を False に変更します。

  4. 変更内容を保存し、アプリケーションをビルドして実行します。 新しいカラー ボタンが [ペン] パネルに表示されます。 ただし、イベント ハンドラーがまだないため、使用できません。 次の手順では、カラー ボタンのイベント ハンドラーを追加する方法について説明します。

ドキュメント クラスへのカラー メンバーの追加

オリジナルの Scribble アプリケーションにはカラー ペンがないため、それ用の実装を作成する必要があります。 ドキュメントのペンの色を保存するには、ドキュメント クラス CscribbleDoc に新しいメンバーを追加します。

ドキュメント クラスにカラー メンバーを追加するには

  1. scribdoc.h の CScribbleDoc クラスで、// Attributes セクションを探します。 m_nThickWidth データ メンバーの定義の後ろに、次のコード行を追加します。

    // Current pen color
COLORREF m_penColor;

  2. すべてのドキュメントに、ユーザーが既に描画したストロークの一覧が含まれています。 すべてのストロークが、CStroke オブジェクトによって定義されます。 CStroke クラスには、ペンの色に関する情報が含まれていないため、クラスを変更する必要があります。 scribdoc.h の CStroke クラスで、m_nPenWidth データ メンバーの定義の後ろに、次のコード行を追加します。

    // Pen color for the stroke
COLORREF m_penColor;

  3. scribdoc.h で、太さと色を指定するパラメーターを持つ新しい CStroke コンストラクターを追加します。 CStroke(UINT nPenWidth); ステートメントの後ろに次のコード行を追加します。

    CStroke(UINT nPenWidth, COLORREF penColor);

  4. scribdoc.cpp で、新しい CStroke コンストラクターの実装を追加します。 CStroke::CStroke(UINT nPenWidth) コンストラクターの実装の後ろに、次のコードを追加します。

    // Constructor that uses the document's current width and color
CStroke::CStroke(UINT nPenWidth, COLORREF penColor)
{
    m_nPenWidth = nPenWidth;
    m_penColor = penColor;
    m_rectBounding.SetRectEmpty();
}

  5. CStroke::DrawStroke メソッドの 2 行目を次のように変更します。

    if (!penStroke.CreatePen(PS_SOLID, m_nPenWidth, m_penColor))

  6. ドキュメント クラスの既定のペンの色を設定します。 scribdoc.cpp で、m_nThickWidth = 5; ステートメントの後ろの CScribbleDoc::InitDocument に次の行を追加します。

    // default pen color is black
m_penColor = RGB(0, 0, 0);

  7. scribdoc.cpp で、CScribbleDoc::NewStroke メソッドの先頭行を次のように変更します。

    CStroke* pStrokeItem = new CStroke(m_nPenWidth, m_penColor);

  8. CScribbleDoc::ReplacePen メソッドの最終行を次のように変更します。

    m_penCur.CreatePen(PS_SOLID, m_nPenWidth, m_penColor);

  9. 前の手順で m_penColor メンバーを追加しました。 ここで、メンバーを設定するカラー ボタンのイベント ハンドラーを作成します。

    1. [リソース ビュー] ウィンドウで、[IDR_SCRIBBTYPE] メニュー リソースを開きます。

    2. [色] メニュー項目を右クリックし、[イベント ハンドラーの追加] をクリックします。 イベント ハンドラー ウィザードが表示されます。

    3. ウィザードの [クラス] リスト ボックスで、[CScribbleDoc] を選択してから、[追加と編集] ボタンをクリックします。 コマンドによって、CScribbleDoc::OnPenColor イベント ハンドラー スタブが作成されます。

  10. CScribbleDoc::OnPenColor イベント ハンドラーのスタブを次のコードで置き換えます。

    void CScribbleDoc::OnPenColor()
{
    // Change pen color to reflect color button's current selection
    CMFCRibbonBar* pRibbon = ((CMDIFrameWndEx*) AfxGetMainWnd())->GetRibbonBar();
    ASSERT_VALID(pRibbon);

    CMFCRibbonColorButton* pColorBtn = DYNAMIC_DOWNCAST(
        CMFCRibbonColorButton, pRibbon->FindByID(ID_PEN_COLOR));

    m_penColor = pColorBtn->GetColor();
    // Create new pen using the selected color
    ReplacePen();
}

  11. 変更を保存し、アプリケーションをビルドして実行します。 カラー ボタンを押すと、ペンの色を変更できるようになりました。

ペンの初期化と基本設定の保存

次に、ペンの色と太さを初期化します。 最後に、色の描画を保存してファイルから読み込みます。

リボン バーのコントロールを初期化するには

  1. リボン バーのペンを初期化します。

    次のコードを、scribdoc.cpp の CScribbleDoc::InitDocument メソッドの m_sizeDoc = CSize(200,200) ステートメントの後ろに追加します。

    // Reset the ribbon UI to its initial values
CMFCRibbonBar* pRibbon =
    ((CMDIFrameWndEx*) AfxGetMainWnd())->GetRibbonBar();
ASSERT_VALID(pRibbon);

CMFCRibbonColorButton* pColorBtn = DYNAMIC_DOWNCAST(
    CMFCRibbonColorButton,
    pRibbon->FindByID(ID_PEN_COLOR));

// Set ColorButton to black
pColorBtn->SetColor(RGB(0, 0, 0));

CMFCRibbonComboBox* pThinComboBox = DYNAMIC_DOWNCAST(
    CMFCRibbonComboBox,
    pRibbon->FindByID(ID_PEN_THIN_WIDTH));

// Set Thin pen combobox to 2
pThinComboBox->SelectItem(1);

CMFCRibbonComboBox* pThickComboBox = DYNAMIC_DOWNCAST(
    CMFCRibbonComboBox,
    pRibbon->FindByID(ID_PEN_THICK_WIDTH));

// Set Thick pen combobox to 5
pThickComboBox->SelectItem(0);

  2. 色の描画をファイルに保存します。 次のコードを、scribdoc.cpp の CStroke::Serialize メソッドの ar << (WORD)m_nPenWidth; ステートメントの後ろに追加します。

    ar << (COLORREF)m_penColor;

  3. 最後に、ファイルから色の描画を読み込みます。 次のコード行を、CStroke::Serialize メソッドの m_nPenWidth = w; ステートメントの後ろに追加します。

    ar >> m_penColor;

  4. ここで、色付きで走り書きし、描画をファイルに保存します。

まとめ

MFC Scribble アプリケーションを更新しました。 既存のアプリケーションを変更するときに、このチュートリアルをガイドとして使用してください。

関連項目

チュートリアル
チュートリアル: MFC Scribble アプリケーションの更新 (パート 1)