チュートリアル3


英語版→http://members.a1.net/ranmasaotome/tut3.html

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


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 と入力して「保存」して下さい。

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

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

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

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

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

 下の図のようになります。
ToolbarCreator2.jpg (103475 Byte)

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

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

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

ToolbarCreator3

 これでツールバーを作成できました。
 次に、でき上がったツール・バーを、プロジェクトにコピーします。
 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
の次に、下の1行を追加して下さい:

DoToolbar(GetDlgItem(hWin,IDC_TBR1),HINST_COMMCTRL)

下の画面のようになりましたか。

DoToolbar.jpg (123158 Byte)

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

Dialog4.jpg (18566 Byte)


STEP 2

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

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

Stringtable.jpg (48110 Byte)
IDM_FILE_EXIT Quit
IDC_CUT Cut selected
IDC_COPY Copy selected
IDC_PASTE Paste from clipboard
IDC_UNDO Undo
IDC_REDO Redo

 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 に設定することを忘れないで下さい。

ツール・チップ
渡辺追記:
IDC_TBR1 ToolBar のプロパティの一番下に xStyle があります。
xStyle を選択すると、セルの右端にボタンが表示されます。
このボタンを押すと「Style manager」画面が表示されます。
見ていくと TBSTYLE_TOOLTIPS 00000100 という行があります。
この行を選択すると、青くなって、xStyle の値が 50000101 と変わりました。

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


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


この Top に戻る↑ この続き(チュートリアル 4)を見る↓ トップページに戻る


Copyright © 2008-2016 WATANABE Makoto. All rights reserved.