AIR自作工房　- Adobe AIRで創る電卓編

・手順(6) ボタンやUIを配置しよう

電卓を作る上で必要なものを考えてみると、整然と並んだ「ボタン」が思い浮かびます。そこで、上で書きかえたひな型にボタンを配置してみます。ここでは、<input>タグを使ってボタンを作り、CSSでレイアウトを整えます。

<div id="outline">
        <br/>
        <div id="display_div">
                <input id="main_txt" type="text" readonly/>
        </div>
        <div id="number_btn_div">
                <br/>
                 <input id="btn7" type="button" value="7"/>
                <input id="btn8" type="button" value="8"/>
                <input id="btn9" type="button" value="9"/>
                <br/>
                <input id="btn4" type="button" value="4"/>
                 <input id="btn5" type="button" value="5"/>
                <input id="btn6" type="button" value="6"/>
                <br/>
                ～省略～
        </div>
         <div id="op_btn_div">
                 <input id="ce_btn" type="button" value="C"/>
                 <input id="close_btn" type="button" value="close"/>
                ～省略～
        </div>
</div>

ここで、実行ボタンを押すと、次のように数字ボタンが並んで表示されます。

今回、ボタンの配置などは、手書きでCSSを使ってレイアウトしていましたが、<table>タグを使って配置することもできるでしょう。このあたりのレイアウトは、Dreamweaver などのHTMLエディタで作ってしまった方が楽でしょう。