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

[アーティクル]
09/17/2008

更新 : 2007 年 11 月

このチュートリアルのパート 1 では、Office Fluent リボンを従来の Scribble アプリケーションに追加しました。パート 2 では、以前はメニューバーを使用して実行されていたタスクを実行するための、リボンのパネルとコントロールを追加します。

前提条件

SCRIBBLE サンプル : MFC MDI 描画アプリケーション

セクション

このチュートリアルのパート 2 は、次のセクションで構成されています。

リボンへの新しいパネルの追加
リボンへのヘルプパネルの追加
リボンへのペンパネルの追加
リボンへのカラーボタンの追加
ドキュメントクラスへのカラーメンバの追加
設定の初期化と保存

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

この手順では、2 つのパネルを追加します。まず、2 つのチェックボックスを含む [表示] パネルを追加します。それらのチェックボックスは、ツールバーとステータスバーの表示/非表示を制御します。次に、垂直方向の分割ボタンを含む [ウィンドウ] パネルを追加します。そのボタンは、MDI ウィンドウの作成と配置を制御します。

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

パート 1 で追加した [編集] パネルコードの直後で、CMainFrame::OnCreate メソッドに次のコードを追加します。

// Add a panel to control the visibility of tool bars
CMFCRibbonPanel* pPanelView = pCategory->AddPanel(
// Set panel name
   _T("View"),
// Set panel icon
   m_PanelImages.ExtractIcon(0));  
// Add panel buttons for Toolbar and Status Bar
pPanelView->Add(new CMFCRibbonCheckBox(
   ID_VIEW_TOOLBAR, _T("Toolbar")));
pPanelView->Add(new CMFCRibbonCheckBox(
   ID_VIEW_STATUS_BAR, _T("Status Bar")));

[表示] パネルを作成したコードの直後に、分割ボタンを持つ新しい [ウィンドウ] という名前のパネルを作成する次のコードを追加します。ユーザーが分割ボタンをクリックすると、ポップアップメニューに 3 つのメニュー項目 (Scribble 1.0 で定義したもの) が表示されます。

// Add a panel to control the display of MDI windows
CMFCRibbonPanel* pPanelWindow = pCategory->AddPanel( _T("Window"), m_PanelImages.ExtractIcon(0));
CMFCRibbonButton* pBtnWindows = new CMFCRibbonButton( 0, _T("Windows\nw"), -1, 1);
pBtnWindows->AddSubItem(new CMFCRibbonButton( ID_WINDOW_NEW, _T("New  Window"), -1, -1), -1); 
pBtnWindows->AddSubItem(new CMFCRibbonButton( ID_WINDOW_CASCADE, _T("Cascade"), -1, -1), -1); 
pBtnWindows->AddSubItem(new CMFCRibbonButton(
   ID_WINDOW_TILE_HORZ, _T("Tile"), -1, -1), -1);
pPanelWindow->Add(pBtnWindows);

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

[ページのトップへ]

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

次に、Scribble 1.0 で定義された 2 つのメニュー項目を [Help Topics] と [Scribble バージョン情報] という名前のリボンボタンに割り当てます。[ヘルプ]. という名前の新しいパネルにそれらのボタンを追加します。

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

前の手順で追加した [ウィンドウ] パネルのコードの直後で、次のコードを CMainFrame::OnCreate メソッドに追加します。

// Create a new panel with the name "Help"
CMFCRibbonPanel* pPanelHelp = pCategory->AddPanel(
   _T("Help"),           
m_PanelImages.ExtractIcon(0)); 
pPanelHelp->Add(new CMFCRibbonButton(ID_HELP_FINDER, _T("Help Topics")));
pPanelHelp->Add(new CMFCRibbonButton(ID_APP_ABOUT, _T(
   "About Scribble...")));

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

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

[ページのトップへ]

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

次に、ペンの太さと色を制御するボタンを表示するパネルを追加します。このパネルには、太いペンと細いペンを切り替えるチェックボックスが含まれます。この機能は、Scribble 1.0 の [太い線] メニュー項目に似ています。

元の Scribble アプリケーションでは、ユーザーは、メニューの [ペンの太さ] を選択したときに表示されるダイアログボックスでペンの太さを選択しました。このリボンバーには新しいコントロールのための場所が十分にあるため、そのダイアログボックスをリボン上の 2 つのコンボボックスで置き換えます。1 つのコンボボックスは細いペンの太さを調整し、もう 1 つのコンボボックスでは太い線の太さを調整します。

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

パート 1 で作成した [編集] パネルのコードの直後で、CMainFrame::OnCreate メソッドに次のコードを追加します。

// Create a new panel for the pen-related buttons
CMFCRibbonPanel* pPanelPen = pCategory->AddPanel(
// Panel name
   _T("Pen"), 
// Panel icon
   m_PanelImages.ExtractIcon(0));
pPanelPen->Add(new CMFCRibbonCheckBox(
   ID_PEN_THICK_OR_THIN, _T("Use Thick")));

// Add combo boxes for pen thicknesses
CMFCRibbonComboBox* pThinComboBox = new CMFCRibbonComboBox(
   ID_PEN_THIN_WIDTH, 0, 20, "Thin Pen :", -1);
pThinComboBox->AddItem(_T("1"), 1);
pThinComboBox->AddItem(_T("2"), 2);
pThinComboBox->AddItem(_T("3"), 3);
pThinComboBox->AddItem(_T("4"), 4);
pThinComboBox->AddItem(_T("5"), 5);
pThinComboBox->AddItem(_T("6"), 6);
pThinComboBox->AddItem(_T("7"), 7);
pThinComboBox->AddItem(_T("8"), 8);
pThinComboBox->AddItem(_T("9"), 9);
pThinComboBox->SelectItem(1);
pPanelPen->Add(pThinComboBox);
CMFCRibbonComboBox* pThickComboBox = new CMFCRibbonComboBox(
   ID_PEN_THICK_WIDTH, 0, 20, "Thick Pen:", -1);
pThickComboBox->AddItem(_T("5"), 5);
pThickComboBox->AddItem(_T("6"), 6);
pThickComboBox->AddItem(_T("7"), 7);
pThickComboBox->AddItem(_T("8"), 8);
pThickComboBox->AddItem(_T("9"), 9);
pThickComboBox->AddItem(_T("10"), 10);
pThickComboBox->AddItem(_T("11"), 11);
pThickComboBox->AddItem(_T("12"), 12);
pThickComboBox->AddItem(_T("13"), 13);
pThickComboBox->AddItem(_T("14"), 14);
pThickComboBox->AddItem(_T("15"), 15);
pThickComboBox->AddItem(_T("16"), 16);
pThickComboBox->AddItem(_T("17"), 17);
pThickComboBox->AddItem(_T("18"), 18);
pThickComboBox->AddItem(_T("19"), 19);
pThickComboBox->AddItem(_T("20"), 20);
pThickComboBox->SelectItem(0);
pPanelPen->Add(pThickComboBox);

新しいコンボボックスは既存のメニュー項目には対応していません。したがって、それぞれのペンオプションに対するメニュー項目を作成する必要があります。
1. [リソースビュー] ウィンドウで、IDR_SCRIBBTYPE メニューリソースを開きます。
2. [ペン] をクリックして [ペン] メニューを開きます。[ここへ入力] をクリックし、「Thi&n Pen」と入力します。
3. 今入力した文字列を右クリックすると [プロパティ] ダイアログボックスが表示されます。その ID プロパティを ID_PEN_THIN_WIDTH に変更します。
4. また、ペンメニューの各項目に対するイベントハンドラを作成する必要があります。直前に作成した [Thi&n Pen] メニュー項目を右クリックして、[イベントハンドラの追加] をクリックします。イベントハンドラウィザードが表示されます。
5. このウィザードの [クラスリスト] ボックスで [CScribbleDoc] を選択し、次に [追加と編集] ボタンをクリックします。これによって、CScribbleDoc::OnPenThinWidth という名前のイベントハンドラが作成されます。

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 = (int) pThinComboBox->GetItemData(nCurSel);
}
// Create a new pen using the selected width
ReplacePen();

次に、太いペンのメニュー項目とイベントハンドラを作成します。
1. [リソースビュー] ウィンドウで、IDR_SCRIBBTYPE メニューリソースを開きます。
2. [ペン] をクリックして [ペン] メニューを開きます。[ここへ入力] をクリックし、「Thic&k Pen」と入力します。
3. 今入力した文字列を右クリックすると [プロパティ] ダイアログボックスが表示されます。その ID プロパティを ID_PEN_THICK_WIDTH に変更します。
4. 直前に作成した [Thick Pen] メニュー項目を右クリックして、[イベントハンドラの追加] をクリックします。イベントハンドラウィザードが表示されます。
5. このウィザードの [クラスリスト] ボックスで [CScribbleDoc] を選択し、次に [追加と編集] ボタンをクリックします。これによって、CScribbleDoc::OnPenThickWidth という名前のイベントハンドラが作成されます。

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 = (int) pThickComboBox ->GetItemData(nCurSel);
}
// Create a new pen using the selected width
ReplacePen();

変更を保存し、アプリケーションをビルドして実行します。新しいボタンとコンボボックスが表示されます。フリーハンドでさまざまな太さのペンを使用してみます。

[ページのトップへ]

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

モノクロでもよいのですが、カラーではいっそう明確になります。次に、ユーザーのフリーハンドをカラーにできる CMFCRibbonColorButton オブジェクトを追加します。

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

カラーボタンを追加する前に、カラーボタンに対するメニュー項目を作成します。[リソースビュー] ウィンドウで、IDR_SCRIBBTYPE メニューリソースを開きます。[ペン] メニュー項目をクリックして [ペン] メニューを開きます。[ここへ入力] をクリックし、「&Color」と入力します。今入力した文字列を右クリックすると [プロパティ] ダイアログボックスが表示されます。その ID を ID_PEN_COLOR に変更します。

太いペンのコンボボックスを作成したコードの直後で、次のコードを CMainFrame::OnCreate メソッドに追加します。

CMFCRibbonColorButton* pColorBtn = new CMFCRibbonColorButton(
   ID_PEN_COLOR, _T("Color"), TRUE, -1, 1);
pColorBtn->SetAlwaysLargeImage();
pColorBtn->SetColor(RGB(0,0,0)); // Black is the initial color
pColorBtn->SetDefaultCommand(FALSE);
pPanelPen->Add(pColorBtn);

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

[ページのトップへ]

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

Scribble 1.0 にはカラーペンがないため、その実装を作成する必要があります。ドキュメントのペンカラーを格納するには、ドキュメントクラス CscribbleDoc に新しいメンバを追加します。

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

scribdoc.h の CScribbleDoc クラスで // Attributes セクションを探します。m_nThickWidth データメンバの定義の後に、次のコード行を追加します。
```
// Current pen color
COLORREF   m_penColor;
```
各ドキュメントには、ユーザーが既に描画したストロークの一覧があります。各ストロークは、CStroke オブジェクトによって定義されます。CStroke クラスには、ペンカラーに関する情報は含まれません。したがって、このクラスを修正する必要があります。scribdoc.h の CStroke クラスで、m_nPenWidth データメンバの後に次のコード行を追加します。
```
// Pen color for the stroke
COLORREF   m_penColor;
```
scribdoc.h に、新しい CStroke コンストラクタを追加し、そのパラメータで幅とカラーを指定します。次のコード行を CStroke(UINT nPenWidth); ステートメントの後に追加します。
```
CStroke(UINT nPenWidth, COLORREF penColor);
```

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();
}

CStroke::DrawStroke メソッドの 2 行目を次のように変更します。
```
if (!penStroke.CreatePen(PS_SOLID, m_nPenWidth, m_penColor))
```
ドキュメントクラスに対する既定のペンカラーを設定します。scribdoc.cpp では、m_nThickWidth = 5; ステートメントの後に、次のコードを CScribbleDoc::InitDocument に追加します。
```
// default pen color is black
m_penColor = RGB(0,0,0); 
```
scribdoc.cpp で、CScribbleDoc::NewStroke メソッドの最初の行を次のように変更します。
```
CStroke* pStrokeItem = new CStroke(m_nPenWidth, m_penColor);
```
CScribbleDoc::ReplacePen メソッドの最終行を次のように変更します。
```
m_penCur.CreatePen(PS_SOLID, m_nPenWidth, m_penColor);
```
前の手順では、m_penColor メンバを追加しました。次に、メンバを設定するカラーボタンのイベントハンドラを作成します。
1. [リソースビュー] ウィンドウで、IDR_SCRIBBTYPE メニューリソースを開きます。
2. [カラー] メニュー項目を右クリックし、[イベントハンドラの追加] をクリックします。イベントハンドラウィザードが表示されます。
3. このウィザードの [クラスリスト] ボックスで [CScribbleDoc] を選択し、次に [追加と編集] ボタンをクリックします。この操作によって CScribbleDoc::OnPenColor イベントハンドラスタブが作成されます。

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();
}

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

[ページのトップへ]

設定の初期化と保存

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

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

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

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);

ファイルにカラー描画を保存します。scribdoc.cpp で、CStroke::Serialize メソッドの ar << (WORD)m_nPenWidth; ステートメントの後に、次のコードを追加します。
```
ar << (COLORREF)m_penColor;
```
最後に、ファイルからカラー描画を読み込みます。CStroke::Serialize メソッドの m_nPenWidth = w; ステートメントの後に、次のコード行を追加します。
```
ar >> m_penColor;
```
次に、カラーでフリーハンド描画し、それをファイルに保存します。

[ページのトップへ]

成功

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

参照

処理手順

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

その他の技術情報

チュートリアル (MFC Feature Pack)

次の方法で共有

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

前提条件

セクション

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

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

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

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

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

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

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

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

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

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

設定の初期化と保存

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

成功

参照

処理手順

その他の技術情報

その他のリソース

次の方法で共有

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

前提条件

セクション

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

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

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

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

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

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

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

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

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

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

設定の初期化と保存

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

成功

参照

処理手順

その他の技術情報

その他のリソース

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

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

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

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

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

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

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

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

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

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