UJMLサンプル117：超基礎：四角を表示する 四角の中の四角(2006/05/15)

　今回紹介するサンプルは、<box>の中に入れ子で<box>を描くこと。もちろん、そのまた中に<box>、、、と延々続けて書けるだろうが。

　左の写真のとおり、外側に赤枠の四角、その内側に青枠の四角が描画されている。ポイントは内側の四角の位置<x><y>の指定方法。外側の赤枠の左上の頂点からの距離で指定することができる。

　本サンプルでは赤枠の左上から2ポイントずつ<x><y>をずらし、内側に描画している。そのため、内側の<width><height>は2ポイントの2倍の4ずつ減らしているわけだ。これで、内側にすっぽり収まったように見える。

--- ソース抜き出し
<box>
    <x><eval>mPosX</eval></x>
    <y><eval>mPosY</eval></y>
    <width><eval>mWidth</eval></width>
    <height><eval>mHeight</eval></height>
    <fg>&_COLOR_RED;</fg><!-- 四角の枠色：赤で -->
    <bg>&_COLOR_WHITE;</bg><!-- 四角の中の色：白で -->
    <!-- 箱の中に箱を -->
    <box>
        <x>2</x>
        <y>2</y>
        <width><eval>mWidth-4</eval></width>
        <height><eval>mHeight-4</eval></height>
        <fg>&_COLOR_BLUE;</fg><!-- 四角の枠色：青で -->
        <bg>&_COLOR_YELLOW;</bg><!-- 四角の中の色：黄色で -->
    </box>
</box>
---

ソースコード：
Download 117_main.ujml

UIEngine/UJML 初心者の方にお勧めのページ：
・初心者向けまとめページ
・初心者向けカテゴリ

その他の初心者向けのサンプル：
・UJMLサンプル052：超基礎：HELLO WORLD!　その１
・UJMLサンプル053：超基礎：HELLO WORLD!　その２　文字の色を指定
・UJMLサンプル056：超基礎：HELLO WORLD!　その３　文字の色を指定 ENTITYを使う
・UJMLサンプル057：超基礎：HELLO WORLD!　その４　文字の色を指定 変数から文字の色指定をする場合
・UJMLサンプル091：超基礎：HELLO WORLD!　その５　ラベルの背景も指定する