2010年11月25日木曜日

GeoExt11 Attribute Form - レイヤ属性の表示フォーム

Example サイト
http://www.geoext.org/examples.html

「Attribute Form」リンクをクリックすると Attribute Form が表示されます。
tattribute-form.js. を参考にします。

説明を意訳すると、WFS DescribeFeatureType から読み取った属性から作成したフィールドでフォームを作成する方法を示します。

WFS の DescribeFeatureType は FeatureType の XSD スキーマ情報(プロパティの名前と FeatureType に関連付けられている型)を返します。

次のコマンドでデータを取得します。

$ wget -O mapserver_shinkansen_DFT.xml "http://localhost/cgi-bin/mapserver?map=/home/user/mapfile/tokyo_pf_pgis.map/request=DescribeFeatureType&VERSION=1.0.0&SERVICE=WFS&TYPENAME=shinkansen"

$ wget -O mapserver_gyoseikai_DFT.xml "http://localhost/cgi-bin/mapserv?map=/home/nuser/mapfile/tokyo_pf_pgis.map&request=DescribeFeatureType&VERSION=1.0.0&SERVICE=WFS&TYPENAME=gyoseikai"

<?xml version='1.0' encoding="ISO-8859-1" ?>
<schema
targetNamespace="http://mapserver.gis.umn.edu/mapserver"
xmlns:ms="http://mapserver.gis.umn.edu/mapserver"
xmlns:ogc="http://www.opengis.net/ogc"
xmlns:xsd="http://www.w3.org/2001/XMLSchema"
xmlns="http://www.w3.org/2001/XMLSchema"
xmlns:gml="http://www.opengis.net/gml"
elementFormDefault="qualified" version="0.1" >

<import namespace="http://www.opengis.net/gml"
schemaLocation="http://schemas.opengis.net/gml/2.1.2/feature.xsd" />

<element name="gyoseikai"
type="ms:gyoseikaiType"
substitutionGroup="gml:_Feature" />

<complexType name="gyoseikaiType">
<complexContent>
<extension base="gml:AbstractFeatureType">
<sequence>
<element name="msGeometry" type="gml:GeometryPropertyType" minOccurs="0" maxOccurs="1"/>
<element name="gid" type="string"/>
<element name="con" type="string"/>
<element name="cn2" type="string"/>
<element name="aac" type="string"/>
<element name="total" type="string"/>
<element name="male" type="string"/>
<element name="female" type="string"/>
<element name="foreigner" type="string"/>
</sequence>
</extension>
</complexContent>
</complexType>

</schema>


WFS のバージョンの VERSION=1.0.0 では、GML のバージョン 2.1.2 を出力し、VERSION=1.1.0 では、GML のバージョン 3.1.1 を出力します。
しかし、両方とも制限(restriction)部分は出力されませんでした。
GML のバージョン 2.1.2.1
ファイルを Exlipse にインポートします。


JS ファイルを新規作成します。
「openlayersTokyoproj」 を右クリックして 新規 -> JavaScript ファイル をクリック。
「JavaScript ファイル」ウィンドウの「ファイル名(任意:attribute-form.js)」に入力して「完了」ボタンをクリック。
以下のように JavaScript を作成します。


var form;

Ext.onReady(function() {
Ext.QuickTips.init(); // エラー表示用

// create attributes store
var attributeStore = new GeoExt.data.AttributeStore({ // 属性データのストアを作成
// url: "data/describe_feature_type.xml"
url: "./mapserver_shinkansen_DFT.xml" // MapServer の DescribeFeatureType データ
});

form = new Ext.form.FormPanel({ // 基本的なフォームコンテナ
renderTo: document.body,
autoScroll: true,
height: 300,
width: 350,
defaults: { // 初期設定
width: 120,
maxLengthText: "too long",
minLengthText: "too short"
},
plugins: [ // 機能の追加
new GeoExt.plugins.AttributeForm({
attributeStore: attributeStore
})
]
});

attributeStore.load();
});


HTML ファイルを新規作成します。
「openlayersTokyoproj」 を右クリックして 新規 -> HTML ファイル をクリック。
「HTML ファイル」ウィンドウの「ファイル名(任意:geoext11_attr-form.html)」に入力して「完了」ボタンをクリック。
「charset」を「utf-8」にします。
以下のように HTML を作成します。
geoext10_feature-grid.html をコピーし、 外部 JavaScript 読み込みファイルを修正し body タグ内には何も設定しません。

---
<title>GeoExt11 Attribute Form</title>
---
<!-- attributes.js 追加 -->
<script type="text/javascript" src="./attributes.js"></script>

</head>
<body>
<h1 id="title">GeoExt 11 - Attribute Form</h1>
<p id="shortdesc">
GeoExt Attribute Form
</p>
<p>This example shows how to create a form with fields creates from
attributes read from a WFS DescribeFeatureType response. This can be
useful when doing feature editing with WFS-T.</p>

<p>Note that validation is activated based on the restriction
information read from the DescribeFeatureType document. For example the
"STATE_NAME", "STATE_FIPS", "SUB_REGION", and "STATE_ABBR" text fields
indicate errors if more than 5 characters are entered.</p>

<p>この例では、WFS DescribeFeatureType 応答から読み取った属性から作成したフィールドを
持つフォームを作成する方法を示しています。 WFS-T でフィーチャの編集を行うときにこれが
役立つことがあります。</p>

<p>検証は DescribeFeatureType ドキュメントから読み込んだ制限情報に基づいてアクティブに
なっていることに注意してください。 たとえば、5つ以上の文字が入力されている場合、
"STATE_NAME"、 "STATE_FIPS" 、 "SUB_REGION"、 および "STATE_ABBR"
テキストフィールドは、エラーを示しています。</p>
</body>
</html>

0 件のコメント: