docs/ja-jp/build/html/formdesigner.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   2   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   3
   4
   5 <html xmlns="http://www.w3.org/1999/xhtml">
   6   <head>
   7     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   8
   9     <title>フォームデザイナーの用法 &mdash; プログラミング言語 Ring 1.12 取扱説明書</title>
  10
  11     <link rel="stylesheet" href="_static/bootstrap-astropy.css" type="text/css" />
  12     <link rel="stylesheet" href="_static/pygments.css" type="text/css" />
  13
  14     <script type="text/javascript">
  15       var DOCUMENTATION_OPTIONS = {
  16         URL_ROOT:    './',
  17         VERSION:     '1.12',
  18         COLLAPSE_INDEX: false,
  19         FILE_SUFFIX: '.html',
  20         HAS_SOURCE:  true
  21       };
  22     </script>
  23     <script type="text/javascript" src="_static/jquery.js"></script>
  24     <script type="text/javascript" src="_static/underscore.js"></script>
  25     <script type="text/javascript" src="_static/doctools.js"></script>
  26     <script type="text/javascript" src="_static/translations.js"></script>
  27     <link rel="top" title="プログラミング言語 Ring 1.12 取扱説明書" href="index.html" />
  28     <link rel="next" title="多国語アプリケーション" href="multilanguage.html" />
  29     <link rel="prev" title="RingQt アプリケーション用のオブジェクトライブラリ" href="ringqtobjects.html" />
  30     <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,600' rel='stylesheet' type='text/css'/>
  31
  32   </head>
  33   <body role="document">
  34 <div class="topbar">
  35   <a class="brand" title="Documentation Home" href="index.html"><span id="logotext1">&#x1f369;Ring</span><span id="logotext2"> 1.12</span><span id="logotext3">:docs</span></a>
  36   <ul>
  37
  38     <li><a href="http://ring-lang.sourceforge.net/news.html">News</a></li>
  39     <li><a href="http://ring-lang.sourceforge.net/download.html">Download</a></li>
  40     <li><a href="https://groups.google.com/forum/#!forum/ring-lang">Get Help</a></li>
  41     <li><a href="https://github.com/ring-lang/ring">Contribute</a></li>
  42     <li><a href="http://ring-lang.sourceforge.net/resources.html">Resources</a></li>
  43     <li><a href="http://ring-lang.sourceforge.net/team.html">Team</a></li>
  44
  45     <li><a title="Ring Homepage" href="http://ring-lang.net/">Website</a></li>
  46     <li><a title="総合索引" href="genindex.html">Index</a></li>
  47     <li>
  48
  49
  50 <form action="search.html" method="get">
  51   <input type="text" name="q" placeholder="Search" />
  52   <input type="hidden" name="check_keywords" value="yes" />
  53   <input type="hidden" name="area" value="default" />
  54 </form>
  55
  56     </li>
  57   </ul>
  58 </div>
  59
  60 <div class="related">
  61     <h3>ナビゲーション</h3>
  62     <ul>
  63       <li class="right">
  64         <a href="multilanguage.html" title="多国語アプリケーション">
  65           次へ &raquo;
  66         </a>
  67       </li>
  68       <li class="right">
  69         <a href="ringqtobjects.html" title="RingQt アプリケーション用のオブジェクトライブラリ">
  70           &raquo; 前へ
  71         </a>
  72          |
  73       </li>
  74       <li>
  75         <a href="index.html">プログラミング言語 Ring 1.12 取扱説明書</a>
  76          &raquo;
  77       </li>
  78
  79       <li>フォームデザイナーの用法</li>
  80     </ul>
  81 </div>
  82
  83
  84     <div class="document">
  85       <div class="documentwrapper">
  86         <div class="bodywrapper">
  87           <div class="body" role="main">
  88
  89   <div class="section" id="index-0">
  90 <span id="id1"></span><h1>フォームデザイナーの用法<a class="headerlink" href="#index-0" title="このヘッドラインへのパーマリンク">¶</a></h1>
  91 <p>フォームデザイナーの用法を学びます。</p>
  92 <p>Ring ノートパッドからフォームデザイナーを実行できます。</p>
  93 <p>Ring ノートパッドのメニューバーから → 表示メニュー → フォームデザイナーを選択するとフォームデザイナーのウィンドウを表示、または非表示にできます。</p>
  94 <img alt="フォームデザイナー - Ring ノートパッドの内面図" src="_images/rnotefd.png" />
  95 <p>また、別のウィンドウからフォームデザイナーを実行することもできます。</p>
  96 <p>Ring ノートパッドからツールメニュー → フォームデザイナーを選択します。</p>
  97 <img alt="フォームデザイナー" src="_images/formdesigner.png" />
  98 <div class="section" id="index-1">
  99 <span id="id2"></span><h2>フォームデザイナーのウィンドウ<a class="headerlink" href="#index-1" title="このヘッドラインへのパーマリンク">¶</a></h2>
 100 <ul class="simple">
 101 <li>ツールボックス (Toolbox)     : ウィンドウへ追加するコントロールを選択します。</li>
 102 <li>プロパティ (Properties)      : アクティブなウィンドウ、またはコントロールのプロパティを設定します。</li>
 103 <li>デザイン領域 (Design Region) : ウィンドウとコントロールの選択、移動、サイズを変更します。</li>
 104 </ul>
 105 </div>
 106 <div class="section" id="index-2">
 107 <span id="id3"></span><h2>ツールボックス<a class="headerlink" href="#index-2" title="このヘッドラインへのパーマリンク">¶</a></h2>
 108 <p>このようなボタンがあります。</p>
 109 <ul class="simple">
 110 <li>ロック (Lock)                         : 同じ種類の様々なコントロールを描画するために使えます。</li>
 111 <li>選択 (Select)                         : デザイン領域のコントロールを選択します。</li>
 112 <li>コントロールボタン (Controls Buttons) : ウィンドウへ追加するコントロールを選択します。</li>
 113 </ul>
 114 </div>
 115 <div class="section" id="index-3">
 116 <span id="id4"></span><h2>プロパティ<a class="headerlink" href="#index-3" title="このヘッドラインへのパーマリンク">¶</a></h2>
 117 <ul class="simple">
 118 <li>ウィンドウ、またはコントロールの選択時に、選択したオブジェクトには、プロパティ (Properties) があります。</li>
 119 <li>また、プロパティのウィンドウには、アクティブなコントロールを選択するためのコンボボックスがあります。</li>
 120 <li>プロパティの一部では、プロパティ値の隣にボタンがあります。ボタンをクリックすると追加のオプションがあります。</li>
 121 <li>コントロールを複数選択した時は、複数のオプションがあります。</li>
 122 </ul>
 123 <img alt="フォームデザイナー - 複数選択" src="_images/fdms.png" />
 124 </div>
 125 <div class="section" id="index-4">
 126 <span id="id5"></span><h2>フォームの実行<a class="headerlink" href="#index-4" title="このヘッドラインへのパーマリンク">¶</a></h2>
 127 <p>フォームデザイナーは、フォームファイル (*.rform) の保存時に二種類の Ring ファイルを作成します。</p>
 128 <ul class="simple">
 129 <li>Controller クラス</li>
 130 <li>View クラス</li>
 131 </ul>
 132 <p>例えば、フォームファイルが helloworld.rform ならば、</p>
 133 <p>フォームデザイナーはファイルを二つ生成します。</p>
 134 <ul class="simple">
 135 <li>helloworldcontroller.ring</li>
 136 <li>helloworldview.ring</li>
 137 </ul>
 138 <p>プログラムを実行するには、 Controller クラスのファイルを開いた後に Run ボタン (Ctrl+F5) をクリックします。</p>
 139 <div class="admonition tip">
 140 <p class="first admonition-title">情報</p>
 141 <p class="last">Ring ノートパッドでフォームを開いた時は自動的に Controller クラスが開かれます。そのまま実行するには (Ctrl+F5) を打鍵、またはフォームデザイナーのウィンドウがアクティブな時に Run ボタンをクリックしてください。</p>
 142 </div>
 143 </div>
 144 <div class="section" id="index-5">
 145 <span id="id6"></span><h2>イベントのコード<a class="headerlink" href="#index-5" title="このヘッドラインへのパーマリンク">¶</a></h2>
 146 <ol class="arabic simple">
 147 <li>イベントプロパティに、メソッド名を入力します。</li>
 148 </ol>
 149 <img alt="フォームデザイナー - イベントのメソッド" src="_images/fdeventmethod.png" />
 150 <ol class="arabic simple" start="2">
 151 <li>次に、 Controller クラスへメソッドのコードを記述します。</li>
 152 </ol>
 153 <img alt="フォームデザイナー - イベントのコード" src="_images/fdeventcode.png" />
 154 <p>この用例での記述は</p>
 155 <div class="highlight-ring"><div class="highlight"><pre><span class="k">func</span> <span class="n">CloseWindow</span>
 156         <span class="n">oView</span><span class="p">.</span><span class="n">win</span><span class="p">.</span><span class="n">close</span><span class="p">()</span>
 157 </pre></div>
 158 </div>
 159 <p>Controller クラスの内側では、 oView オブジェクトからフォームへアクセスします。</p>
 160 <p>その他の用例:</p>
 161 <img alt="フォームデザイナー - Say Hello" src="_images/fdsayhello1.png" />
 162 <p>イベントのコード</p>
 163 <div class="highlight-ring"><div class="highlight"><pre><span class="k">func</span> <span class="n">SayHello</span>
 164         <span class="n">oView</span> <span class="p">{</span>
 165                 <span class="n">LineEdit2</span><span class="p">.</span><span class="n">setText</span><span class="p">(</span><span class="s">&quot;Hello &quot;</span><span class="o">+</span> <span class="n">LineEdit1</span><span class="p">.</span><span class="n">text</span><span class="p">()</span> <span class="p">)</span>
 166         <span class="p">}</span>
 167 </pre></div>
 168 </div>
 169 </div>
 170 <div class="section" id="index-6">
 171 <span id="id7"></span><h2>キーボードショートカット<a class="headerlink" href="#index-6" title="このヘッドラインへのパーマリンク">¶</a></h2>
 172 <p>コントロールを複数選択後に、</p>
 173 <ul class="simple">
 174 <li>カーソルキー (上、下、左、右) で移動します。</li>
 175 <li>Shift + カーソルキー (上、下、左、右) でコントロールのサイズを変更します。</li>
 176 <li>Del キーでコントロールを削除します。</li>
 177 <li>Ctrl + Shift + V でコントロールを複製します。</li>
 178 </ul>
 179 </div>
 180 <div class="section" id="index-7">
 181 <span id="id8"></span><h2>メニューバーデザイナー<a class="headerlink" href="#index-7" title="このヘッドラインへのパーマリンク">¶</a></h2>
 182 <p>ウィンドウのプロパティからメニューバーデザイナー開くことができます。</p>
 183 <img alt="フォームデザイナー - メニューバーデザイナー" src="_images/menubardesigner.png" />
 184 </div>
 185 <div class="section" id="index-8">
 186 <span id="id9"></span><h2>ウィンドウフラグ<a class="headerlink" href="#index-8" title="このヘッドラインへのパーマリンク">¶</a></h2>
 187 <p>ウィンドウのプロパティからウィンドウフラグのウィンドウを開くことができます。</p>
 188 <img alt="フォームデザイナー - ウィンドウフラグ" src="_images/windowflags.png" />
 189 </div>
 190 <div class="section" id="index-9">
 191 <span id="id10"></span><h2>項目の入力<a class="headerlink" href="#index-9" title="このヘッドラインへのパーマリンク">¶</a></h2>
 192 <p>List ウィジェットなどのコントロールでは、項目をコンマ‘,’で区切って入力できます。</p>
 193 <img alt="フォームデザイナー - リスト項目" src="_images/fdlistitems.png" />
 194 </div>
 195 <div class="section" id="index-10">
 196 <span id="id11"></span><h2>レイアウトの用法<a class="headerlink" href="#index-10" title="このヘッドラインへのパーマリンク">¶</a></h2>
 197 <ol class="arabic simple">
 198 <li>レイアウトを使うには、まずウィンドウへ Layout コントロールを追加します。</li>
 199 <li>ウィンドウの “レイアウトの設定” プロパティからメインレイアウトを決定します。</li>
 200 <li>Layout プロパティから、コントロールとレイアウトの種類を決定します。</li>
 201 </ol>
 202 </div>
 203 <div class="section" id="index-11">
 204 <span id="id12"></span><h2>その他のサンプルとテスト<a class="headerlink" href="#index-11" title="このヘッドラインへのパーマリンク">¶</a></h2>
 205 <p>フォルダをご確認ください : ring/applications/formdesigner/tests</p>
 206 <p>オンライン版 : <a class="reference external" href="https://github.com/ring-lang/ring/tree/master/applications/formdesigner/tests">https://github.com/ring-lang/ring/tree/master/applications/formdesigner/tests</a></p>
 207 </div>
 208 </div>
 209
 210
 211           </div>
 212         </div>
 213       </div>
 214       <div class="sphinxsidebar" role="navigation" aria-label="main navigation">
 215         <div class="sphinxsidebarwrapper"><h3>ページの内容</h3>
 216 <ul>
 217 <li><a class="reference internal" href="#">フォームデザイナーの用法</a><ul>
 218 <li><a class="reference internal" href="#index-1">フォームデザイナーのウィンドウ</a></li>
 219 <li><a class="reference internal" href="#index-2">ツールボックス</a></li>
 220 <li><a class="reference internal" href="#index-3">プロパティ</a></li>
 221 <li><a class="reference internal" href="#index-4">フォームの実行</a></li>
 222 <li><a class="reference internal" href="#index-5">イベントのコード</a></li>
 223 <li><a class="reference internal" href="#index-6">キーボードショートカット</a></li>
 224 <li><a class="reference internal" href="#index-7">メニューバーデザイナー</a></li>
 225 <li><a class="reference internal" href="#index-8">ウィンドウフラグ</a></li>
 226 <li><a class="reference internal" href="#index-9">項目の入力</a></li>
 227 <li><a class="reference internal" href="#index-10">レイアウトの用法</a></li>
 228 <li><a class="reference internal" href="#index-11">その他のサンプルとテスト</a></li>
 229 </ul>
 230 </li>
 231 </ul>
 232
 233
 234   <h4>前のトピックへ</h4>
 235   <p class="topless"><a href="ringqtobjects.html"
 236                         title="前の章へ">RingQt アプリケーション用のオブジェクトライブラリ</a></p>
 237   <h4>次のトピックへ</h4>
 238   <p class="topless"><a href="multilanguage.html"
 239                         title="次の章へ">多国語アプリケーション</a></p>
 240   <div role="note" aria-label="source link">
 241     <h3>このページ</h3>
 242     <ul class="this-page-menu">
 243       <li><a href="_sources/formdesigner.txt"
 244             rel="nofollow">ソースコードを表示</a></li>
 245     </ul>
 246    </div>
 247
 248 <form action="search.html" method="get">
 249   <input type="text" name="q" placeholder="Search" />
 250   <input type="hidden" name="check_keywords" value="yes" />
 251   <input type="hidden" name="area" value="default" />
 252 </form>
 253
 254         </div>
 255       </div>
 256       <div class="clearer"></div>
 257     </div>
 258 <footer class="footer">
 259   <p class="pull-right">
 260     <a href="_sources/formdesigner.txt"
 261        rel="nofollow">ソースコードを表示</a> &nbsp;
 262     <a href="#">冒頭へ戻る</a></p>
 263   <p>
 264     &copy; Copyright 2016-2020, Ring Team.<br/>
 265     Created using <a href="http://www.sphinx-doc.org/en/stable/">Sphinx</a> 1.3.6 / astropy-sphinx-theme 1.1 (isVowel)
 266   </p>
 267 </footer>
 268   </body>
 269 </html>