libro
www.tuyano.com
DashcodeによるiPhone用Webアプリ作成入門

主なGUI部品を使う (1/5)

作成:2011-05-16 07:48
更新:2011-05-16 07:48

■チェックボックスとラジオボタン

DashcodeでGUI部品をを扱うとき、注意しなければならないのは、「1つのHTML要素だけで構成されているものばかりではない」という点です。先にテキストの表示や入力フィールド、プッシュボタンなどを使いましたが、ボタンは<div>タグを使っていましたね。このように、単純にHTMLのタグをそのまま使っているわけではないところにDashcodeの特徴があります。

ボタンなどは1つの<div>タグだけでしたが、注意しなければいけないのは「部品によっては、いくつかのHTML要素の組み合わせで実現されてるものもある」という点です。その仕組みを頭に入れながら理解する必要があるでしょう。では、チェックボックスとラジオボタンから使ってみましょう。

◯チェックボックス
チェックボックスは、<input type="checkbox">と、<div>タグの組み合わせによって作成されています。チェックボックスを配置すると、ウインドウ左側のプロジェクト内の部品の構造を階層的に表示している部分に、チェックボックスの項目と、その中に2つの項目が表示されます(下の図を見て確認しておきましょう)。

これは、チェックボックス全体を示す要素(<div>タグ)の中に、チェックボックスの要素(<input>タグ)と、項目名を表示する要素(<div>タグ)が組み込まれていることを示します。

ウインドウの左側に、組み込まれている部品類が階層的に表示されていますが、ここを見ると、チェックボックスを組み込んだ際には<div>タグを示す丸いアイコンの項目内に、<input>タグの部品を示す四角いアイコンの項目が入れ子状態で表示されます。この内側の四角いアイコンの項目が、<input>タグを示すものですので、IDを設定するような場合にはこの内側の項目を選択して設定を行うようにしてください。

◯ラジオボタン
ラジオボタンも、チェックボックスと同様に複数の要素から構成されています。ラジオボタン全体を示す<div>タグと、その中にラジオボタンの<input type="radio">タグ、そして項目名を表示する<div>タグが含まれています。

ラジオボタンは、複数のものから1つだけを選択しますが、通常、これらはすべての<input type="radio">タグで同じname属性を指定することでグループ化することができました。Dashcodeのラジオボタンでは、<input type="radio">タグの要素にはname属性がありません(パレットの「属性」ボタンではIDしか設定できない)。nameは、ラジオボタン全体をまとめている<div>タグ側で設定されています。ウインドウの左側にあるページの構造を示す部分を見ると、外側の丸いアイコンの項目(<div>タグの項目)でnameを設定し、内側の四角いアイコンの項目(<input>タグの項目)では個々のIDを設定する、という形になります。

IDnameの設定は、これらを扱う場合、非常に重要です。それぞれデザインの画面上は、GUI部品を示す項目の中に<input>タグの項目が組み込まれる、という形で表示されていますので、属性を設定する際には、「どちらのどの属性を設定するか」ということをよく考えるようにしてください。<input>タグを操作しているつもりで<div>タグを変更していた……といったことは、慣れないうちはよくやってしまいますから。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。


※関連コンテンツ

「DashcodeによるiPhone用Webアプリ作成入門」に戻る