« Twitterクライアントをつくる1 | トップページ | 時計をつくる 関連リンク »

2010年10月17日 (日)

攻略!wxFormBuilder - レイアウト編 -

久々にwxFormBuilderでGUI設計してみたらなんとも思い通りにレイアウトが上手くいきません(;ω;)。
コツをすっかり忘れているなぁ、ということで我流だが一旦まとめておきます。

ついでなので簡単なチュートリアルも作ってみます。

追記 2015/6

すごい昔の記事ですが何故かメイン記事のwxRubyよりもアクセスが多いのでカテゴリ分けしました。2つしかないですが。

前提知識としてwxFormBuilder(というかwxWidgets)ではButton等のコントロールの配置は座標で指定するのではなく Sizerというモノを使用してレイアウトします。

なのでButtonをいきなり配置しようとしてもレイアウト情報がないので(基本的に)配置できません。Sizerは数種類ありますが、殆どの場合BoxSizerで事が足ります。

BoxSizerはコントロールを縦に並べる、あるいは横に並べるレイアウトです。

(四角はコントロールだと思ってください)

Bs_2_2

これが縦配置、VERTICALのイメージ。上から順番にコントロールが配置されます。

orientの値を変更してレイアウトを変更できます。横に並べたい場合は、HORIZONTAL。

Bs_1

 

こんなカンジで左から順に配置されます。

 

 

取り敢えずこれだけ覚えておけばOKでしょう。ではコツです。

  • まず画面イメージを用意しよう
  • 複雑なSizerは使わない。取り敢えずBoxSizerへ突っ込む
  • 複雑なSizerを使う場合もBoxSizerへ突っ込む
  • Sizerは入れ子にしてみる
  • 内側のSizerは広く、外側のSizerは狭く
  • 下手にパラメータをいじらない
  • 取り敢えずStretchをオフにしてみる

wxFormBuilderでいきなり作業する前に画面イメージを紙かツールで作成しておくとSizerの配置をしていく上でかなり楽になります。最近はブラウザでも画面イメージを作成できるのでらくできます。慣れれば頭の中で想像できるようになりますが。

複雑な画面イメージでも案外BoxSizerで配置できます。最初は何も考えずにコントロールをBoxSizerに入れておきましょう。

Sizerは入れ子にできます。BoxSizer以外のSizerを使う場合もそのまま配置せずBoxSizerに入れて使うことを考えてみましょう。

Sizerはいろいろなパラメータを持っていますが、少し配置が気に入らないからと言って下手にいじるのはよしましょう。大抵はツールバーのアイコン操作で解決できます。

Toolbar

どうしても具合が悪い場合は一旦、Stretchをオン・オフしてみると道が開ける場合があります。

では、試しにWindowsの印刷ダイアログを作ってみましょう。

Printdiag1

今回、画面イメージはそのままを使用します。まず配置を見てみましょう。線を引いてみると、大きく縦に3段に配置していけばよさそうです。
早速wxFormBuilderでベースとなる画面を作りましょう。

F1

ダイアログですけど今回はFrameを使ってやってみたいと思います。

Frameを作ってBoxSizerをセット、その中にPanelを入れます。とりあえずこれがベースになります。他の画面を作る際もここから始めればよいかと。

F2

まず縦に3段なのでBoxSizerを配置します。
では画面の外側から順につくっていきましょう。まず上の2段が「全般」という括りでnotebookをが使用されているのでNotebookとPanelを配置します。ページ名を入れておきましょう。Notebookの中では2段になっているので最後にBoxSizerをセット。

Printdiag2

1段目のレイアウトを掘り下げてみると、さらに縦に2段、その2段目は横に2段に別れていて青色のように格子状になっているようです。

F3

「プリンターの選択」部分はStaticBoxSizerで表現できるのでコレをセット。プリンタ一覧はListCtrlをセットしてExpandやStretchを調整して大きさを決定。下の段はBoxSizerをセット、HORIZONTALにします。

F4_2

左側の水色部分を作成します。StaticTextを一列分BoxSizerに入れてHORIZONTALにします。コレを3列分作ります。ひとつ外側のBoxSizerにVERTICALで3列入れれば左側は完成。

F5_2

と、BoxSizerだけでも表現できるのですが格子状のレイアウトはGridSizerを使うのが便利です。右側はこちらを使ってやってみます。

何も配置するコントロールがない場合はspacerを入れます。

Buttonの大きさをアイコンでExpandやStretchして調整。StaticBoxSizerも同様に調整して余計なスペースがでないように引き締めます。

F6_2

こんなカンジで一段目完成。残りもこの調子で作成していくと...

F7_2

最終的にこんな画面ができました。オリジナルに十分近づけたのではないでしょうか。

Printdiag_2

 

最後にXRCを貼っておきます。

  1. <?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
  2. <resource xmlns="http://www.wxwindows.org/wxxrc" version="2.3.0.1">
  3.   <object class="wxFrame" name="MyFrame1" subclass="PringDialog">
  4.     <style>wxCAPTION|wxCLOSE_BOX|wxSYSTEM_MENU|wxCLIP_CHILDREN|wxTAB_TRAVERSAL</style>
  5.     <size>500,402</size>
  6.     <title></title>
  7.     <centered>1</centered>
  8.     <object class="wxPanel" name="m_panel1">
  9.       <style>wxTAB_TRAVERSAL</style>
  10.       <object class="wxBoxSizer">
  11.         <orient>wxVERTICAL</orient>
  12.         <object class="sizeritem">
  13.           <option>1</option>
  14.           <flag>wxEXPAND | wxALL</flag>
  15.           <border>5</border>
  16.           <object class="wxNotebook" name="m_notebook1">
  17.             <object class="notebookpage">
  18.               <label>&#20840;&#33324;</label>
  19.               <selected>0</selected>
  20.               <object class="wxPanel" name="m_panel2">
  21.                 <style>wxTAB_TRAVERSAL</style>
  22.                 <object class="wxBoxSizer">
  23.                   <orient>wxVERTICAL</orient>
  24.                   <object class="sizeritem">
  25.                     <option>0</option>
  26.                     <flag>wxALL|wxEXPAND</flag>
  27.                     <border>5</border>
  28.                     <object class="wxStaticBoxSizer">
  29.                       <orient>wxVERTICAL</orient>
  30.                       <label>&#12503;&#12522;&#12531;&#12479;&#12540;&#12398;&#36984;&#25246;</label>
  31.                       <object class="sizeritem">
  32.                         <option>0</option>
  33.                         <flag>wxALL|wxEXPAND</flag>
  34.                         <border>5</border>
  35.                         <object class="wxListCtrl" name="m_listCtrl1">
  36.                           <style>wxLC_ICON</style>
  37.                         </object>
  38.                       </object>
  39.                       <object class="sizeritem">
  40.                         <option>1</option>
  41.                         <flag>wxEXPAND</flag>
  42.                         <border>5</border>
  43.                         <object class="wxBoxSizer">
  44.                           <orient>wxHORIZONTAL</orient>
  45.                           <object class="sizeritem">
  46.                             <option>1</option>
  47.                             <flag>wxALIGN_BOTTOM</flag>
  48.                             <border>5</border>
  49.                             <object class="wxBoxSizer">
  50.                               <orient>wxVERTICAL</orient>
  51.                               <object class="sizeritem">
  52.                                 <option>1</option>
  53.                                 <flag></flag>
  54.                                 <border>5</border>
  55.                                 <object class="wxBoxSizer">
  56.                                   <orient>wxHORIZONTAL</orient>
  57.                                   <object class="sizeritem">
  58.                                     <option>0</option>
  59.                                     <flag>wxEXPAND|wxBOTTOM</flag>
  60.                                     <border>5</border>
  61.                                     <object class="wxStaticText" name="m_staticText1">
  62.                                       <label>&#29366;&#24907;:</label>
  63.                                       <wrap>-1</wrap>
  64.                                     </object>
  65.                                   </object>
  66.                                   <object class="sizeritem">
  67.                                     <option>0</option>
  68.                                     <flag>wxEXPAND</flag>
  69.                                     <border>5</border>
  70.                                     <object class="wxStaticText" name="m_staticText4">
  71.                                       <label></label>
  72.                                       <wrap>-1</wrap>
  73.                                     </object>
  74.                                   </object>
  75.                                 </object>
  76.                               </object>
  77.                               <object class="sizeritem">
  78.                                 <option>1</option>
  79.                                 <flag>wxEXPAND</flag>
  80.                                 <border>5</border>
  81.                                 <object class="wxBoxSizer">
  82.                                   <orient>wxHORIZONTAL</orient>
  83.                                   <object class="sizeritem">
  84.                                     <option>0</option>
  85.                                     <flag>wxEXPAND|wxBOTTOM</flag>
  86.                                     <border>5</border>
  87.                                     <object class="wxStaticText" name="m_staticText2">
  88.                                       <label>&#22580;&#25152;:</label>
  89.                                       <wrap>-1</wrap>
  90.                                     </object>
  91.                                   </object>
  92.                                   <object class="sizeritem">
  93.                                     <option>0</option>
  94.                                     <flag>wxEXPAND</flag>
  95.                                     <border>5</border>
  96.                                     <object class="wxStaticText" name="m_staticText5">
  97.                                       <label></label>
  98.                                       <wrap>-1</wrap>
  99.                                     </object>
  100.                                   </object>
  101.                                 </object>
  102.                               </object>
  103.                               <object class="sizeritem">
  104.                                 <option>1</option>
  105.                                 <flag>wxEXPAND</flag>
  106.                                 <border>5</border>
  107.                                 <object class="wxBoxSizer">
  108.                                   <orient>wxHORIZONTAL</orient>
  109.                                   <object class="sizeritem">
  110.                                     <option>0</option>
  111.                                     <flag>wxEXPAND|wxBOTTOM</flag>
  112.                                     <border>5</border>
  113.                                     <object class="wxStaticText" name="m_staticText3">
  114.                                       <label>&#12467;&#12513;&#12531;&#12488;:</label>
  115.                                       <wrap>-1</wrap>
  116.                                     </object>
  117.                                   </object>
  118.                                   <object class="sizeritem">
  119.                                     <option>0</option>
  120.                                     <flag>wxEXPAND</flag>
  121.                                     <border>5</border>
  122.                                     <object class="wxStaticText" name="m_staticText6">
  123.                                       <label></label>
  124.                                       <wrap>-1</wrap>
  125.                                     </object>
  126.                                   </object>
  127.                                 </object>
  128.                               </object>
  129.                             </object>
  130.                           </object>
  131.                           <object class="sizeritem">
  132.                             <option>0</option>
  133.                             <flag>wxALIGN_BOTTOM|wxEXPAND</flag>
  134.                             <border>5</border>
  135.                             <object class="wxBoxSizer">
  136.                               <orient>wxVERTICAL</orient>
  137.                               <object class="sizeritem">
  138.                                 <option>0</option>
  139.                                 <flag>wxEXPAND</flag>
  140.                                 <border>5</border>
  141.                                 <object class="wxGridSizer">
  142.                                   <rows>2</rows>
  143.                                   <cols>2</cols>
  144.                                   <vgap>0</vgap>
  145.                                   <hgap>0</hgap>
  146.                                   <object class="sizeritem">
  147.                                     <option>0</option>
  148.                                     <flag>wxALL</flag>
  149.                                     <border>5</border>
  150.                                     <object class="wxCheckBox" name="m_checkBox1">
  151.                                       <label>&#12501;&#12449;&#12452;&#12523;&#12408;&#20986;&#21147;</label>
  152.                                       <checked>0</checked>
  153.                                     </object>
  154.                                   </object>
  155.                                   <object class="sizeritem">
  156.                                     <option>0</option>
  157.                                     <flag>wxALL|wxEXPAND</flag>
  158.                                     <border>5</border>
  159.                                     <object class="wxButton" name="m_button1">
  160.                                       <label>&#35443;&#32048;&#35373;&#23450;</label>
  161.                                       <default>0</default>
  162.                                     </object>
  163.                                   </object>
  164.                                   <object class="spacer">
  165.                                     <option>0</option>
  166.                                     <flag>wxEXPAND</flag>
  167.                                     <border>5</border>
  168.                                     <size>0,0</size>
  169.                                   </object>
  170.                                   <object class="sizeritem">
  171.                                     <option>0</option>
  172.                                     <flag>wxALL|wxEXPAND</flag>
  173.                                     <border>5</border>
  174.                                     <object class="wxButton" name="m_button2">
  175.                                       <label>&#12503;&#12522;&#12531;&#12479;&#12540;&#12398;&#26908;&#32034;</label>
  176.                                       <default>0</default>
  177.                                     </object>
  178.                                   </object>
  179.                                 </object>
  180.                               </object>
  181.                             </object>
  182.                           </object>
  183.                         </object>
  184.                       </object>
  185.                     </object>
  186.                   </object>
  187.                   <object class="sizeritem">
  188.                     <option>0</option>
  189.                     <flag>wxEXPAND</flag>
  190.                     <border>5</border>
  191.                     <object class="wxBoxSizer">
  192.                       <orient>wxHORIZONTAL</orient>
  193.                       <object class="sizeritem">
  194.                         <option>0</option>
  195.                         <flag>wxEXPAND|wxALL</flag>
  196.                         <border>5</border>
  197.                         <object class="wxStaticBoxSizer">
  198.                           <orient>wxVERTICAL</orient>
  199.                           <label>&#12506;&#12540;&#12472;&#31684;&#22258;</label>
  200.                           <object class="sizeritem">
  201.                             <option>0</option>
  202.                             <flag>wxEXPAND</flag>
  203.                             <border>5</border>
  204.                             <object class="wxGridSizer">
  205.                               <rows>2</rows>
  206.                               <cols>2</cols>
  207.                               <vgap>0</vgap>
  208.                               <hgap>0</hgap>
  209.                               <object class="sizeritem">
  210.                                 <option>0</option>
  211.                                 <flag></flag>
  212.                                 <border>5</border>
  213.                                 <object class="wxRadioButton" name="m_radioBtn1">
  214.                                   <label>&#12377;&#12409;&#12390;</label>
  215.                                   <value>0</value>
  216.                                 </object>
  217.                               </object>
  218.                               <object class="spacer">
  219.                                 <option>0</option>
  220.                                 <flag></flag>
  221.                                 <border>5</border>
  222.                                 <size>0,0</size>
  223.                               </object>
  224.                               <object class="sizeritem">
  225.                                 <option>0</option>
  226.                                 <flag></flag>
  227.                                 <border>5</border>
  228.                                 <object class="wxRadioButton" name="m_radioBtn2">
  229.                                   <label>&#36984;&#25246;&#12375;&#12383;&#37096;&#20998;</label>
  230.                                   <value>0</value>
  231.                                 </object>
  232.                               </object>
  233.                               <object class="sizeritem">
  234.                                 <option>0</option>
  235.                                 <flag></flag>
  236.                                 <border>5</border>
  237.                                 <object class="wxRadioButton" name="m_radioBtn3">
  238.                                   <label>&#29694;&#22312;&#12398;&#12506;&#12540;&#12472;</label>
  239.                                   <value>0</value>
  240.                                 </object>
  241.                               </object>
  242.                               <object class="sizeritem">
  243.                                 <option>0</option>
  244.                                 <flag></flag>
  245.                                 <border>5</border>
  246.                                 <object class="wxRadioButton" name="m_radioBtn4">
  247.                                   <label>&#12506;&#12540;&#12472;&#25351;&#23450;</label>
  248.                                   <value>0</value>
  249.                                 </object>
  250.                               </object>
  251.                               <object class="sizeritem">
  252.                                 <option>0</option>
  253.                                 <flag>wxEXPAND</flag>
  254.                                 <border>5</border>
  255.                                 <object class="wxTextCtrl" name="m_textCtrl1">
  256.                                   <value></value>
  257.                                   <maxlength>0</maxlength>
  258.                                 </object>
  259.                               </object>
  260.                             </object>
  261.                           </object>
  262.                         </object>
  263.                       </object>
  264.                       <object class="sizeritem">
  265.                         <option>1</option>
  266.                         <flag>wxEXPAND|wxALL</flag>
  267.                         <border>5</border>
  268.                         <object class="wxStaticBoxSizer">
  269.                           <orient>wxVERTICAL</orient>
  270.                           <label></label>
  271.                           <object class="sizeritem">
  272.                             <option>0</option>
  273.                             <flag>wxEXPAND</flag>
  274.                             <border>5</border>
  275.                             <object class="wxGridSizer">
  276.                               <rows>2</rows>
  277.                               <cols>2</cols>
  278.                               <vgap>0</vgap>
  279.                               <hgap>0</hgap>
  280.                               <object class="sizeritem">
  281.                                 <option>0</option>
  282.                                 <flag>wxALL</flag>
  283.                                 <border>5</border>
  284.                                 <object class="wxStaticText" name="m_staticText7">
  285.                                   <label>&#37096;&#25968;</label>
  286.                                   <wrap>-1</wrap>
  287.                                 </object>
  288.                               </object>
  289.                               <object class="sizeritem">
  290.                                 <option>0</option>
  291.                                 <flag>wxEXPAND|wxALL</flag>
  292.                                 <border>5</border>
  293.                                 <object class="wxSpinCtrl" name="m_spinCtrl1">
  294.                                   <style>wxSP_ARROW_KEYS</style>
  295.                                   <value>0</value>
  296.                                   <min>0</min>
  297.                                   <max>10</max>
  298.                                 </object>
  299.                               </object>
  300.                               <object class="sizeritem">
  301.                                 <option>0</option>
  302.                                 <flag>wxALL</flag>
  303.                                 <border>5</border>
  304.                                 <object class="wxCheckBox" name="m_checkBox2">
  305.                                   <label>&#37096;&#21336;&#20301;&#12391;&#21360;&#21047;</label>
  306.                                   <checked>0</checked>
  307.                                 </object>
  308.                               </object>
  309.                             </object>
  310.                           </object>
  311.                         </object>
  312.                       </object>
  313.                     </object>
  314.                   </object>
  315.                 </object>
  316.               </object>
  317.             </object>
  318.           </object>
  319.         </object>
  320.         <object class="sizeritem">
  321.           <option>0</option>
  322.           <flag>wxALIGN_RIGHT</flag>
  323.           <border>5</border>
  324.           <object class="wxBoxSizer">
  325.             <orient>wxHORIZONTAL</orient>
  326.             <object class="sizeritem">
  327.               <option>0</option>
  328.               <flag>wxALL</flag>
  329.               <border>5</border>
  330.               <object class="wxButton" name="m_button3">
  331.                 <label>&#21360;&#21047;</label>
  332.                 <default>0</default>
  333.               </object>
  334.             </object>
  335.             <object class="sizeritem">
  336.               <option>0</option>
  337.               <flag>wxALL</flag>
  338.               <border>5</border>
  339.               <object class="wxButton" name="m_button4">
  340.                 <label>&#12461;&#12515;&#12531;&#12475;&#12523;</label>
  341.                 <default>0</default>
  342.               </object>
  343.             </object>
  344.             <object class="sizeritem">
  345.               <option>0</option>
  346.               <flag>wxALL</flag>
  347.               <border>5</border>
  348.               <object class="wxButton" name="m_button5">
  349.                 <label>&#36969;&#29992;</label>
  350.                 <default>0</default>
  351.               </object>
  352.             </object>
  353.           </object>
  354.         </object>
  355.       </object>
  356.     </object>
  357.   </object>
  358. </resource>
  359.  

|

« Twitterクライアントをつくる1 | トップページ | 時計をつくる 関連リンク »

wxFormBuilder」カテゴリの記事

環境」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1201593/37264515

この記事へのトラックバック一覧です: 攻略!wxFormBuilder - レイアウト編 -:

« Twitterクライアントをつくる1 | トップページ | 時計をつくる 関連リンク »