formウィジットでのデザイン１

[1] 主筆嬢 06/03/11 10:40

念のため、目次。

今回はformウィジットを使ったデザインについて考えてみる。

[2] 主筆嬢 06/03/11 10:41

業務用のアプリケーションや、あるいは単純な機能を実現するソフトなんかだと、（VC++で言うところの）ダイアログベースのソフトになることが多い。

今回は、これと同じようなことをX-Designerでやってみる。（ついでに言うと、上の画面はVC++6.0で適用に作った画面。最近の奴がどうなってるのかは知らない。）

[2] 主筆嬢 06/03/11 10:43

VBやVBA・VC++だと、画面にコントロールをベタベタと貼り付けるだけで画面を作ることができる。

ところが、X-Designerだとそうはいかない。

というか、できなくはないんだけど、VBやVCの様な感覚では作らない方がいい。そう言うことになってる。

[3] nabiki_t 06/03/11 10:45

そーゆーことになってるって、一体何なんだよ。ちゃんと説明しろよ。

[4] 主筆嬢 06/03/11 10:47

相変わらず細かい事にこだわる奴。

X Window Systemの哲学には、画面に表示される文字列やそのときに使用するフォントは、ユーザが自由に変更できるべきだ、というのある。

Windowsでは、フォントや文字列はエンドユーザには変更できないようにしておくことで、画面のデザインが崩れないよう担保している。

ところが、X Window Systemでは変更できるようにしようというのだから、変更された場合に何らかの方法でデザインが崩れないようにしてあげる必要がある。

そーゆーことで、X Window Systemではウィジット（Windows的にはコントロール）の位置をピクセル単位で固定してしまうのではなく、各ウィジットの位置関係だけを決めておいて、後から自動的に計算されるようにする、という方法をとる。

わかった？

[5] 主筆嬢 06/03/11 10:50

本題に戻るとして。

じゃ、どうやって位置関係を指示するのかというと、それが例のX-Designerの画面。

さすがにそろそろ見慣れてきた感があるけど。

この画面で必要なウィジットやガジェットをShellウィジットの配下に追加していけば、画面を作ることができる。

[6] 主筆嬢 06/03/11 10:51

じゃ、そーゆーことで、>>5の画面に表示されてるアプリケーション・シェルの直下に、メニューを置いてみる。

[7] 主筆嬢 06/03/11 10:52

イメージとしては、こんな感じになることを期待してるんだけど……

[8] nabiki_t 06/03/11 10:53

残念ながら、そうは問屋が卸さない。

[9] 主筆嬢 06/03/11 10:54

実際には、こんな風になる。

メニューしかない。

この状態でウインドウを拡大すると、メニューバー自体が大きくなる。ありえない。

[10] 主筆嬢 06/03/11 10:56

>>9と同じ事がボタンにも言える。

シェルウィジットの直下にボタンを置くと、ボタンしかないダイアログになる。

[11] 広告 06/03/11 10:58

[12] 主筆嬢 06/03/11 11:00

じゃ、どうするのか。

比較的安直な答えとしては、ダイアログ構造という奴を使う方法がある。

シェルのしたにを追加して、その配下に適当にウィジットを追加していく。

そうすると、比較的まともな画面を簡単に作ることができる。

[13] 主筆嬢 06/03/11 11:03

じゃ、提供されるダイアログ構造以外の形式ではウィジットを配置することはできないのか、というと、別にそうとは限らない。

formというウィジットを使えば、比較的自由にウィジットを配置することができる。

[14] nabiki_t 06/03/11 11:05

ようやく今日の本題か。

[15] 主筆嬢 06/03/11 11:06

人のセリフを取るな。

[16] 主筆嬢 06/03/11 11:08

formを使う場合は、シェルウィジットの直下にを追加してあげればいい。そして、実際に配置したいウィジットは、formの配下に置いてやる。

[17] 主筆嬢 06/03/11 11:10

>>16の様にすると、こうなる。

[18] 主筆嬢 06/03/11 11:11

当たり前だけど、こんな物が欲しかったわけじゃない。だから、これから実際に自分が望むように配置してあげなきゃならない。

ボタンやラベルの位置を動かすには、配置ダイアログを使う。配置ダイアログはツールバーのを押すと出てくる。

[19] 主筆嬢 06/03/11 11:15

これが表示された配置ダイアログ。

[20] 広告 06/03/11 11:17

[21] 主筆嬢 06/03/11 11:19

>>19の画面で、左端のラジオボックスから「移動」を選択して、右側の青いボックスをドラッグ・アンド・ドロップで移動させる。

[22] 主筆嬢 06/03/11 11:20

どうすると、こうなる。

[23] 主筆嬢 06/03/11 11:22

ちょっとサイズが小さいけど、なんかいい感じにできているように見える。

ところが、サイズを変更したり表示する文字を変えたりすると、たちどころにボロがでる。

大きさを変えた場合。

label6の文字列を長くした場合。

目も当てられない。

[24] 主筆嬢 06/03/11 11:25

例えば、もしユーザの視力が悪かったら、と仮定してフォントを大きくしてみる。

スタイル・マネージャでフォントを大きくすると、こうなる。

弱者は死ね、とでも言いたいのか。

[25] 主筆嬢 06/03/11 11:28

そーゆーことで、次のページで>>23や>>24の問題への対処法を考えてみる。

[26] nabiki_t 06/03/11 11:30

ヲイ、次のページってのは一体何だよ。

読みにくいから、続けろよ。

[27] 主筆嬢 06/03/11 11:32

読みにくい？　そんなんシラネーヨ。

長いから切るんだ。

[28] 名無しさん 06/03/11 11:36

formウィジットでのデザイン２はこちら

目次はこちら