- PR -

コントロールの動的配置について

1
投稿者投稿内容
とも
会議室デビュー日: 2003/01/15
投稿数: 4
投稿日時: 2008-08-07 11:50
お世話になります。

現在、Webアプリケーションの国際化対応を行っており、選択された国によってインプットコントロールの位置を変更する対応を行いたいと思っております。
イメージとしては以下のような感じです。

Street:123XXXAve.
City:New York State:NY Zip:XXXXX
Country:U.S.

国に日本を選ぶと下記のように並びを変更

郵便番号: XXX-XXXX
都道府県: 東京都
市区町村: 港区
番地: ○○1−1
国: 日本


対応方法として以下3つがあると思っています。
 1.コントロールの動的に並び替える
 2.住所入力コントロールを作成
 3.ページを別にする

外国では動いているアプリケーションなので、既存に影響を少なく対応したいため1番にて対応を模索しております。
しかしどのように実現できるか分からず停滞してしまい、こちらに投稿しました。

どなたかお力添え願います。
Jitta
ぬし
会議室デビュー日: 2002/07/05
投稿数: 6267
お住まい・勤務地: 兵庫県・海手
投稿日時: 2008-08-10 16:03
一応 Javascript で作ってみたけど、ASP.NET ですよねぇ?
現在動いているものがどんな感じで、どこまで手を入れていいのかわからないと、なんともいえないなぁ...
まりも
ベテラン
会議室デビュー日: 2006/08/19
投稿数: 77
投稿日時: 2008-08-10 16:18
以前、動的並び替えをやっているのを見ましたが、かなり保守しづらそうでした。

テーブルか何かで該当部分をかこって、日本語も別テーブルで作って、Visibleで切り替えるとかだと楽だったような記憶がありますが。

すみません。よく覚えてないのであまりお役に立てませんがそんな記憶があります。
Jitta
ぬし
会議室デビュー日: 2002/07/05
投稿数: 6267
お住まい・勤務地: 兵庫県・海手
投稿日時: 2008-08-10 21:59
 現在動いているのがどんな風になっているかわからないから、適切に修正してね。
コード:
<script type="text/javascript">
<!--
    function SelectLanguage(selItem) {
        SetLabel(selItem);
        var set = document.getElementById("set1");
        var it1 = document.getElementById("item1");
        var it2 = document.getElementById("item2");
        var it3 = document.getElementById("item3");
        set.removeChild(it1);
        set.removeChild(it2);
        set.removeChild(it3);
        if (selItem.value == "ja") {
            set.appendChild(it1);
            set.appendChild(it2);
            set.appendChild(it3);
        } else if (selItem.value == "en") {
            set.appendChild(it1);
            set.appendChild(it3);
            set.appendChild(it2);
        }
    }

    function SetLabel(selItem) {
        var it1 = document.getElementById("input1label");
        var it2 = document.getElementById("input2label");
        var it3 = document.getElementById("input3label");
        if (selItem.value == "ja") {
            it1.innerText = "郵便番号";
            it2.innerText = "住所1";
            it3.innerText = "住所2";
        } else if (selItem.value == "en") {
            it1.innerText = "Zip code";
            it2.innerText = "City, State";
            it3.innerText = "Street";
        }
    }
// -->
</script>

<fieldset style="background-color:#EEEEEE;">
    <label for="sel1">日本語</label><input name="language" type="radio" value="ja" onClick="SelectLanguage(this);" />
    <label for="sel2">English</label><input name="language" type="radio" value="en" onClick="SelectLanguage(this);" />
</fieldset>
<form>
<fieldset id="set1" style="background-color:#EEEEEE;">
    <div id="item1"><label for="input1" id="input1label"></label><input id="input1" type="text" /></div>
    <div id="item2"><label for="input2" id="input2label"></label><input id="input2" type="text" /></div>
    <div id="item3"><label for="input3" id="input3label"></label><input id="input3" type="text" /></div>
</fieldset>
</form>


BT
ベテラン
会議室デビュー日: 2006/09/24
投稿数: 81
お住まい・勤務地: Tokyo
投稿日時: 2008-08-11 01:01
元の方法がLabelコントロール等を単純に並べたような方法だと仮定した場合ですが、個人的にはスタイルシートを使って位置を制御するのが一番影響がなさそうな気がします。データベースをいじる必要がないですし、対応言語が増えた場合にも同じ方法で対応できますので。

やり方としては、ごく普通のスタイルの記述ですが、

・入力エリア全体をDIVで囲って親DIVとする。スタイルに{position: relative;}を指定
・内部の各要素をDIV等で囲って各々にidまたはclassを付与(例:class="address")
・言語によってテーマを切り替えるようコードを書く
・各言語に対応するスタイルシートで各要素の親DIV内での位置を個別にスタイルに記述{ position: abusolute; top: *px; left: *px; }

ってな感じでしょうか。

言語に応じてテーマを切り替えるというのが一工夫といえますが、多言語対応サイトであれば実施済かもしれませんので、そうであればスタイルをちょっと変更するだけです。

各言語にスタイルを用意するのはスタイルシートのメンテが大変そうな気がするかもしれませんが、基本スタイルは別に用意して各言語用テーマには差分のみ記述し、@importで基本スタイルをインポートすればそれほど手間でもありませんし、たぶん他にも色々と言語に応じて細かく画面を制御したくなってくると思いますのでやっておいて損はないかと。

元がテーブル内に配置されている場合だと(普通考えればこちら?)、たぶんテーブルをTableコントロールに置き換えて、そこに表示する順番に応じてLabelとかを動的に生成してAddするんでしょうが、問題は言語毎の順番をどこかに保存するかでしょうね。英語と日本語のみで増える可能性がないならハードコーディング?
1

スキルアップ/キャリアアップ(JOB@IT)