チュートリアル3

このチュートリアル3は、FbEdit の、ツール・バー作成支援に関するものです。
を作ります。

STEP 1

　Toolbarという名前のプロジェクトを、新規に作って下さい。
　このとき、テンプレートは、DialogAsMain.tpl を選択して下さい。

　プロジェクトを新規作成した時点で、「Go」ボタンを押して下さい。
　ダイアログ(アプリを動かしたときに表示される上の画面のこと)が表示されますが、ツールバー(アイコンのボタンの並び)が有りません。
　どんなボタンも、まだ付いていません。

　FbEdit で Toolbar.rc タブを選択します。そして、右のペインに表示された IDD_DIALOG をダブル・クリックします。
　すると、左側のペインにダイアログが表示されます。
　FbEdit の「ツールバー(アイコンのボタンの並び)」から、「ToolBar(ツールバー)」ボタン(Buttonではないので注意)を選択して、アプリのダイアログに、マウスで配置の対角線(左上から右下)を指定して設置します。
　名前とIDは、デフォルトのままでかまいません。
　ToolTip のプロパティは、TRUE に設定して下さい。
(渡辺注：TRUE に設定する方法がよく分かりません。STEP2 でそれなりの対応方法を書きました。)
　これは、STEP2 で、ボタンにマウス・ポインタを重ねた時に、ToolTip を表示させるために、必要になります。

　ここで、FbEdit の、ツールバー作成支援を、使います。
　FbEdit のメニューから、「プロジェクト」→「新規追加」→「ファイル」を選択して、ファイル名に Toolbar.tbr と入力して「保存」して下さい。

　この大きなダイアログが、表示されます:

　FbEditは、ここでもう一度、私たちのために、多くの仕事をします。やってみましょう。
　エディタは、私たちのエディタに、既存のビットマップ画像を設置することができます。
　私たちは、このチュートリアルで、これを使います。

　ビットマップを追加するために、FbEditリソース・ダイアログを使うと、あなた独自のビットマップを簡単に挿入して、新しい名前と、IDを与えることができます。いつくかの既存の画像は、登録済です。

　「ボタン追加」で、次のボタンを追加して、それらの名前と、それらのIDを挿入して下さい。

IDC_CUT 1002
IDC_COPY 1003
IDC_PASTE 1004
-　←セパレータ追加ボタンを使います。
IDC_UNDO 1005
IDC_REDO 1006
-　←セパレータ追加ボタンを使います。
IDM_FILE_EXIT ← ID は不要です。

　下の図のようになります。

　ツールバー を保存する時は、画面の右側の「保存」ボタンを押して下さい。
　そして、ツールバー作成ダイアログを閉じます。

　右側のプロジェクト・エクスプローラで、Toolbar.tbr をダブルクリックすると、ツールバー作成ダイアログを、また開くことができます。

　ツールバー作成ダイアログの上段を見て下さい。それは、作成中の ツールバーのプレビューになっています。
　IDC_CUTをクリックして、Toolbar の、はさみの絵をクリックします。
　アイコンが、作成中のツールバーに現れます。
　すべてのボタンについて、同様にして、アイコンを変更します:

　これでツールバーを作成できました。
　次に、でき上がったツール・バーを、プロジェクトにコピーします。
　Toolbar 作成ダイアログで、「出力」をクリックします。
　FbEdit の出力ウィンドウに、テキスト(下の #Define と Sub DoToolbar)が現れます。
　このテキストが、必要なコードです。

　まず、.biファイルを選択して、以下をコピーして下さい。
　コピーするとき、ショート・カット・キー、Ctrl+C を使うと良いでしょう。

#Define IDC_TBR1 1001
#Define IDC_CUT 1002
#Define IDC_COPY 1003
#Define IDC_PASTE 1004
#Define IDC_UNDO 1005
#Define IDC_REDO 1006

　以上が、.biファイルに必要な、全てです。

　今度は、以下(DoToolBar sub)を参照して、Toolbar.bas ファイルの、
#Include と Function の間の行の部分に、下記の Sub のコード全てをコピーします:

Sub DoToolbar(ByVal hTbr As HWND,ByVal hInst As HINSTANCE)
  Dim tbab As TBADDBITMAP
  Dim tbrbtn8 As TBBUTTON=(5,IDM_FILE_EXIT,TBSTATE_ENABLED,TBSTYLE_BUTTON,{0,0},0)
  Dim tbrbtn7 As TBBUTTON=(0,0,TBSTATE_ENABLED,TBSTYLE_SEP,{0,0},0)
  Dim tbrbtn6 As TBBUTTON=(4,IDC_REDO,TBSTATE_ENABLED,TBSTYLE_BUTTON,{0,0},0)
  Dim tbrbtn5 As TBBUTTON=(3,IDC_UNDO,TBSTATE_ENABLED,TBSTYLE_BUTTON,{0,0},0)
  Dim tbrbtn4 As TBBUTTON=(0,0,TBSTATE_ENABLED,TBSTYLE_SEP,{0,0},0)
  Dim tbrbtn3 As TBBUTTON=(2,IDC_PASTE,TBSTATE_ENABLED,TBSTYLE_BUTTON,{0,0},0)
  Dim tbrbtn2 As TBBUTTON=(1,IDC_COPY,TBSTATE_ENABLED,TBSTYLE_BUTTON,{0,0},0)
  Dim tbrbtn1 As TBBUTTON=(0,IDC_CUT,TBSTATE_ENABLED,TBSTYLE_BUTTON,{0,0},0)

  'Set toolbar struct size
  SendMessage(hTbr,TB_BUTTONSTRUCTSIZE,SizeOf(TBBUTTON),0)
  'Set toolbar bitmap
  tbab.hInst=hInst
  tbab.nID=IDB_STD_SMALL_COLOR
  SendMessage(hTbr,TB_ADDBITMAP,15,Cast(LPARAM,@tbab))
  'Set toolbar buttons
  SendMessage(hTbr,TB_ADDBUTTONS,8,Cast(LPARAM,@tbrbtn1))

End Sub

　これで、DoToolBar sub の部分は完成です。


　Toolbar.bas の WM_INITDIALOG では、

	Select Case uMsg
		Case WM_INITDIALOG
			hWnd=hWin

DoToolbar(GetDlgItem(hWin,IDC_TBR1),HINST_COMMCTRL)

　これで Step1 は終了です。「Go」を押して下さい！

STEP 2

　ここでは、Step1 で作ったツールバーに、tooltips を追加します。
　たくさんのアイコンが並んだ、見栄えするツールバーがあっても、それらのボタンが、何に使うものか、アイコンだけでは、誰も分かりません。
　それで、ツールバーのボタンにマウス・ポインタを持って行ったときに、短い tooltips を表示させると、使いやすくなるわけです。

　まず最初に、Toolbar.rc を選択して、メニューの「資源」→「文字列表追加」をクリックします。
　文字列(String)表を、下のように登録して下さい。:

　Toolbar.bas の Function WndProc に、以下のコードを、追加して下さい:

Dim lpTOOLTIPTEXT As TOOLTIPTEXT ptr
Dim buff As ZString*256

Case WM_NOTIFY
  ' ToolBar tooltip
  lpTOOLTIPTEXT=Cast(TOOLTIPTEXT ptr,lParam)
  If lpTOOLTIPTEXT->hdr.code=TTN_NEEDTEXT Then
    LoadString(hInstance,lpTOOLTIPTEXT->hdr.idFrom,@buff,SizeOf(buff))
    lpTOOLTIPTEXT->lpszText=@buff
  EndIf
  '

注意：
　ダイアログで、Toolbar 様式セットの TOOLTIPS を、TRUE に設定することを忘れないで下さい。

　Go! をクリックして、tooltips が表示されることを確認して下さい。

　この事例のコードを、 ここで、ダウンロードできます。