Kumu

注意点

現バージョンよりajax.jsにあったFormの値を取得する機能、

JSONの文字列化機能をkumu.jsに移行しています。

Kumuとは

Kumuはjavascriptをより簡単に記述できるように作られたjavascriptのライブラリです。

Kumuは以下のような機能を提供します。

ショートカットメソッド
既存のFunction拡張
動的なjsファイルの読み込み
イベント処理、および管理
Ajax
テーブルのソート
二重サブミット防止機能
DOM操作のヘルパー
jsによるバリデータ
レイアウト機能
テンプレート機能
Formからの値の取得
JSON文字列化

Kumuは複数のファイルから構成されており、機能ごとにファイルが分かれています。

kumu.js Kumuの本体です。このファイルがないと他のKumuのjavascriptファイルが正しく動作しません。
event.js イベント処理を行うライブラリです。
ajax.js Ajax処理を行うライブラリです。TeedaAjaxで使用します。ajax.jsはKumuに依存していません。そのため単体で使用することが可能です。
sortable_table.js テーブルをソートするライブラリです。
disabled.js 二重送信を防ぐ為のライブラリです。
validate.js 入力チェックを行うためのライブラリです。

では各ライブラリについて詳細な解説をしていきます。

Kumu

Kumuは基本的な機能を提供します。

よく使う関数などをショートカットメソッドとして提供しています。

またプロトタイピング開発時に使用できる機能も提供します。

Kumuではなるべくglobalな領域を汚さないようにしているため関数は全て名前空間 Kumu で始まります。

ショートカット

Kumuではよく使うメソッドのショートカットメソッドを提供しています。

特に要素を特定するメソッドは簡単に呼びだす事ができます。

$i = document.getElementByIdのショートカット
$t = document.getElementByTagNameのショートカット
$n = document.getElementByNameのショートカット

var emp = $i('employeeCode');
var list = $i('br');
var foo_list = $i('foo');

javascriptのload

Kumuでは他のjsファイル同士の依存を解決させるためjsをlodingする機能を持っています。

//foo.jsを読み込む
Kumu.staticLoad('foo');
//foo/bar.jsを読み込む
Kumu.staticLoad('foo.bar');

//foo.jsを読み込む
Kumu.dynamicLoad('foo');
//foo/bar.jsを読み込む
Kumu.dynamicLoad('foo.bar');

loadingする仕組みはふたつあります。

staticLoad
dynamicLoad

loadできるjsファイルはkumu.jsと同ディレクトリ内、あるいはkumu.jsの下位ディレクトリのjsファイルです。

load対象のjsがkumuと同ディレクトリ内にある場合には

Kumu.staticLoad([.jsを抜いたファイル名]);

また下位ディレクトリにある場合はパスのスラッシュ( / )をピリオド（ . )にして指定します。

staticLoad

staticLoadは静的にjsファイルを読み込みます。

staticLoadはscriptタグを出力してファイルを読み込みます。

そのためstaticLoadを呼び出したjsファイル内で読み込んだjsファイルの機能を使う事はできません。

それは出力したscriptタグはその場ですぐには評価されないためです。

（staticLoadを呼び出したjsファイルの解析後に読み込まれる）

dynamicLoad

dynamicLoadは動的にjsファイルを読み込みます。

dynamicLoadは読みこんだjsファイルをその場で評価し、使う事ができます。

但し、dynamicLoadができるjsファイルは正しくevalできるjsファイルでなければいけません。

命名規約ベースの処理

Kumuは関数名を取得する事ができます。

function Test(name){
  alert(name);
};
var name = Test.getName();

関数名を取得できるため命名規則による処理や、設定を関数名に使う事などができます。

Teeda Ajaxでは同様の機能が使われています。

関数の拡張

KumuではFunction.prototypeに幾つかの関数を提供しています。

これを利用すると関数を簡単に拡張することができます。

var test = function(){
  alert('call');
};

// 5秒後に実行させるためにdelay化
test = test.delay(1000*5);

// 5秒後にalertが出る
test();

// 追加で状態管理をさせる
test = test.state();

test();

// 状態管理の機能で5秒前にキャンセル
test.cancel();

// 5秒後にalertが出る
test();

キーワード引き数風の関数も作成できます。引き数の名前に一致した値をセットして実行します。

var test = function(name, text){
  alert(name);
  alert(text);
}.kwargs();

test({name:'foo', text:'value'});

また実行するスコープを固定するためにはbindScopeを使います。

関数は自分がどのobjectのpropertyにあるか特定できません。

thisが何を指しているかは動的に変更されるのです。

そのため、thisの値を一定にするためにbindScopeを使用します。

ログ機能

Kumuにはデバッグ用にログ出力する関数があります。

ログ出力はbody要素の一番最後に追加されて出力されます。

// HTMLの最後にtestと出力されます
Kumu.log('test');

上記のlog関数には文字列を指定しなくてはなりません。

objectをデバッグしたい場合には$dump関数を使用します。

$dump関数はobjectをシリアライズしてログ出力を行います。

var o = {'id':'teeda', 'value':'test'};

$dump(o);

$dump可能なもの

$dumpは再帰的にobjectをシリアライズ化してログ出力をします。

そのため、循環参照を行っているobjectなどを渡すとスタックオーバーフローが発生します。

関数のトレース

Kumuにはデバッグ用に関数をトレースする関数があります。

トレース用の関数を使用するとhtmlに実行時のログが出力されます。

var test = function(x, y){
  return x + y ;
}

test = Kumu.trace(test);

レイアウト機能(experimental)

Kumuではmayaaやteedaのincludeに近いレイアウト機能を提供しています。

多くのフレームワークでレイアウトやincludeする機能は存在しますが、UIなどのHTML作成時に使用するにはわざわざフレームワークを通してレンダリングするなど難があります。

Kumuではそういったわずらわしい作業を簡素化するためレイアウト機能を提供しています。

UIやHTMLのモック作成の時点でフレームワークに依存せずレイアウト機能を使用する事が出来ます。

Kumuのレイアウト機能は以下の機能を提供しています。

include機能
レイアウト機能

include機能

include機能はHTMLを指定したHTMLをincludeする機能です。

includeするにはまずKumuのmockInclude機能を有効にします。

有効にするにはKumuを読み込む際にmockInclude=trueパラメータを渡します。

<!-- ?mockInclude=trueとする -->
<script type="text/javascript" src="./js/kumu.js?mockInclude=true"></script>

includeするにはdivタグにid名が"mockInclude"で始まり、src属性にincludeしたいファイルのパスを指定します。

mockIncludeが有効になった状態でincludeしたい箇所に以下のようなdivタグを記述するとHTMLがincludeされます。

<!-- 必ず</div>出終わること -->
<div id="mockInclude1" src="./header.html"></div>

teedaのinclude機能と異なり、includeしたいファイルのパスはコンテキストパスなどとは関係ありません。

includeするためのdivタグは必ず"</div>"で終わるようにして下さい。正しくブロック内にincludeされない場合があります。

includeは以下のように複数指定することも出来ます。

<div id="mockInclude1" src="./header.html"></div>

<div id="mockInclude2" src="./footer.html"></div>

CSSなどはinclude元のHTMLの使用されます。

レイアウト機能

レイアウト機能はteedaのレイアウト機能とほぼ同様な機能です。

teedaと同様、body内のHTMLを親のレイアウトの一部にはめ込み表示することができます。

レイアウト機能を使用するにはまずinclude機能を有効にして下さい。

そしてレイアウト用のHTMLをlayout=<レイアウトファイルのパス>で指定します。

<script type="text/javascript" src="./js/kumu.js?mockInclude=true&layout=./layout.html"></script>

レイアウトファイルにはめ込んで表示したい箇所にid="mockIncludeChildBody"を持ったdivタグを定義します。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<p>ここからchild</p>
<table border="1">
<tr>
<td><div id="mockIncludeChildBody"></div></td>
</tr>
</table>
</body>
</html>

現在のHTMLのbody内が指定したレイアウトファイルの<div id="mockIncludeChildBody"></div>の部分に表示されます。

レイアウト機能とincludeは組み合わせて使用することができます。

layout.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="mockInclude1" src="./header.html"></div>
<p>ここからchild</p>
<table border="1">
<tr>
<td><div id="mockIncludeChildBody"></div></td>
</tr>
</table>
<div id="mockInclude1" src="./footer.html"></div>
</body>
</html>

layoutSample.html:

<html>
<head>
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script  type="text/javascript" src="./js/kumu.js?mockInclude=true&layout=./layout.html"></script>
</head>

<body>
<form>
レイアウト
<table style="width:100%">
<tr>
  <td>ボタンだよ</td>
  <td><input type="button" value="TEST2" /></td>
</tr>
</table>
</form>
</body>
</html>

レンダリング結果:

<html>
  <head>
  <meta content="ja" http-equiv="Content-Language"/>
  <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
  <script src="./js/kumu.js?mockInclude=true&layout=./layout.html" type="text/javascript" ">
  </script>
</head>
<body>
<p>HEADER</p>
<p>ここからchild</p>
<table border="1">
<tbody>
<tr>
  <td>
  <form>
  レイアウト
  <table style="width: 100%;">
  <tbody>
  <tr>
  <td>ボタンだよ</td>
  <td></td>
  </tr>
  </tbody>
  </table>
  </form>
  </td>
</tr>
</tbody>
</table>
<p>FOOTER</p>
</body>
</html>

レイアウト機能について

この機能は実験的な機能です。そのため、UIモック以外で使用すると予期しない動作を引き起こす可能性があります。

HTMLテンプレート機能(experimental)

Kumuのインクルード機能は外部のHTMLファイルを読み込むことができても中の値を変える事はできません。

そのためKumuはteedaやmayaaに近い簡易テンプレート機能を備えています。

テンプレート機能を使うとAjaxで取得した値などを簡単にHTMLに変換、表示する事ができます。

テンプレート自身もHTMLでそのまま記述できるため、ブラウザでそのままプレビューする事が出来ます。

テンプレートクラス

テンプレート機能を使用するにはKumu.Templateクラスを使用します。

var tmpl1 = new Kumu.Template();
tmpl1.render(data);

Templateクラスはコンストラクタに外部HTMLのurlを渡す事ができます。

外部テンプレートを使用する際にはそちらを使用して下さい。

（外部テンプレートについては後述）

またtemplateはレンダリングのフェーズに合わせてコールバック関数を呼ぶ事ができます。

onInitialize -- 初期化時
onLoad -- 外部テンプレート読み込み時
onLoaded -- 外部テンプレート読み込み完了時
onComplete -- レンダリング完了時

コールバック関数をセットするにはコンストラクタでoptionの値をセットします。

var options = {};
options['onInitialize'] = function(){alert('init');};
options['onLoad'] = function(){alert('load');};
options['onLoaded'] = function(){alert('loaded');};
options['onComplete'] = function(){alert('comp');};

var tmpl1 = new Kumu.Template(options);
//外部テンプレートの場合
var tmpl2 = new Kumu.Template('./template.html', options);

その他、以下のようなoptionがあります。

append -- 追加モード。繰り返し部を前回の値を保持し、さらに追加する

レンダリングの実行はrenderメソッドを使用します。

var data = {
  'test':'データ'
}
var tmpl1 = new Kumu.Template();
tmpl1.render(data);

renderメソッドにはデータであるJSONを渡します。

外部テンプレートを使用する際にはその他に位置を渡す必要があります。

renderメソッドは以下の引き数を取ります。

data -- データ（JSON）
target -- 外部テンプレートをレンダリングした結果を入れる要素（idで指定)
replace -- 外部テンプレートをレンダリングした結果を入れる要素を置き換え、trueならば置き換え（省略可）

レンダリング

テンプレートはデータをJSON形式で受け取ります。

テンプレートはJSONのキーとHTMLのidをマッチングさせレンダリングを行います。

データ部:

var o = {
  'test' : 'てすと',
}

レンダリング対象:

<span id="test">ここが変化します</span>

上記のようにレンダリングしたい箇所のidをキーとしてJSONを作成することでテンプレートはレンダリングを行います。

foreachのように繰り返し出力する場合には値の部分をObjectの配列にします。

データ部:

var o = {
  'test2' : [
    {
    'no':1,
    'name' : 'name1'
    },
    {
    'no':2,
    'name' : 'name2'
    }
  ]
}

レンダリング部:

<table border="1">
  <tr>
    <td>-</td>
    <td>No</td>
    <td>Name</td>
  </tr>
  <tr id='test2'>
    <td>増えるわかめちゃんTest</td>
    <td ><input id="no" type="text" value="" /></td>
    <td id="name">Test</td>
  </tr>
</table>

上記の例ではid=test2の箇所を繰り返し出力します。また繰り返すobjectに関してもidでマッチした箇所をレンダリングします。

属性の値を変更したい場合にはid名@属性名でキーを作成します。

データ部:

var o = {
  'test@class' : 'foo',
}

またstyle属性を変更する場合には値をobjectにし、キーに変更したいstyle、値をセットにします。

データ部:

var o = {
  'no@style':{'background-color':'red'},
}

テンプレートのタイプ

テンプレートのタイプには２つあります。

内部テンプレート（同一HTML内テンプレート）
外部テンプレート

内部テンプレート

内部テンプレートはテンプレートを呼び出すHTML内にテンプレート部を埋め込むテンプレートです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.foo {color:red }
.bar {color:blue }
</style>
<script language="JavaScript" type="text/javascript" src="./js/kumu.js"></script>
<script>
var o = {
  'test' : 'てすと',
  'test@class' : 'foo',
  'test1' : 'てすと1',
  'test2' : [
  {
    'no':1,
    'no@class':'foo',
    'name' : 'name1'
  },
  {
    'no':2,
    'no@class':'bar',
    'name' : 'name2'
  },
  {
    'no':3,
    'no@style':{'background-color':'red'},
    'name' : 'name3'
  },
  {
    'no':4,
    'no@class':'bar',
    'name' : 'name4'
  },
 {
    'no':5,
    'no@class':'foo',
    'name' : 'name5'
  }]
}
var templ1 = new Kumu.Template(options);
</script>

<title>Sample</title>
</head>
<body>
<div id='test' style="display:none">Test</div>
<div id='test1' style="display:none">Test</div>

<table border="1">
  <tr>
    <td>-</td>
    <td>No</td>
    <td>Name</td>
  </tr>
  <tr id='test2'>
    <td>増えるわかめちゃんTest</td>
    <td ><input id="no" type="text" value="" /></td>
    <td id="name">Test</td>
</tr>
</table>
<input type="button" value="INNER_TEMPLATE_RENDER" onclick="templ1.render(o);">
<div id="target" ></div>
</body>
</html>

上記のままだと繰り返し部のテンプレート部が見えてしまっています。

開発時には良いですが、実際に動作させる場合には表示させたくありません。

そのような場合には繰り返し部のstyleをdisplay:noneとします。

テンプレートはテンプレート部のstyleのdisplayの値も参照しており、noneであれば表示するように振る舞います。

レンダリング結果は以下のようになります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.foo {color:red }
.bar {color:blue }
</style>
<script language="JavaScript" type="text/javascript" src="./js/kumu.js"></script>
<script>
var o = {
  'test' : 'てすと',
  'test@class' : 'foo',
  'test1' : 'てすと1',
  'test2' : [
  {
    'no':1,
    'no@class':'foo',
    'name' : 'name1'
  },
  {
    'no':2,
    'no@class':'bar',
    'name' : 'name2'
  },
  {
    'no':3,
    'no@style':{'background-color':'red'},
    'name' : 'name3'
  },
  {
    'no':4,
    'no@class':'bar',
    'name' : 'name4'
  },
 {
    'no':5,
    'no@class':'foo',
    'name' : 'name5'
  }]
}
var templ1 = new Kumu.Template(options);
</script>

<title>Sample</title>
</head>
<body>
  <div id="test" class="foo" style="">てすと</div>
  <div id="test1" style="">てすと1</div>
  <table border="1">
  <tbody>
  <tr>
    <td>-</td>
    <td>No</td>
    <td>Name</td>
  </tr>
  <tr id="test2:rendered0" style="">
    <td>増えるわかめちゃんTest</td>
    <td>
    <input id="no:rendered0" class="foo" type="text" value=""/>
    </td>
    <td id="name:rendered0">name1</td>
  </tr>
  <tr id="test2:rendered0" style="">
    <td>増えるわかめちゃんTest</td>
    <td>
    <input id="no:rendered0" class="bar" type="text" value=""/>
    </td>
    <td id="name:rendered0">name2</td>
  </tr>
  <tr id="test2:rendered0" style="">
    <td>増えるわかめちゃんTest</td>
    <td>
    <input id="no:rendered0" type="text" value="" style="background-color: red;"/>
    </td>
    <td id="name:rendered0">name3</td>
  </tr>
  <tr id="test2:rendered0" style="">
    <td>増えるわかめちゃんTest</td>
    <td>
    <input id="no:rendered0" class="bar" type="text" value=""/>
    </td>
    <td id="name:rendered0">name4</td>
  </tr>
  <tr id="test2:rendered0" style="">
    <td>増えるわかめちゃんTest</td>
    <td>
    <input id="no:rendered0" class="foo" type="text" value=""/>
    </td>
    <td id="name:rendered0">name5</td>
  </tr>
  </tbody>
  </table>
  <input type="button" onclick="templ1.render(o);" value="INNER_TEMPLATE_RENDER"/>
</body>
</html>

外部テンプレート

外部テンプレートはテンプレートを呼び出すHTMLではなく、外部のHTMLテンプレートです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.foo {color:red }
.bar {color:blue }
</style>
<script language="JavaScript" type="text/javascript" src="./js/kumu.js"></script>
<script>
var o = {
  'test' : 'てすと',
  'test@class' : 'foo',
  'test1' : 'てすと1',
  'test2' : [
  {
    'no':1,
    'no@class':'foo',
    'name' : 'name1'
  },
  {
    'no':2,
    'no@class':'bar',
    'name' : 'name2'
  },
 {
    'no':3,
    'no@style':{'background-color':'red'},
    'name' : 'name3'
  },
 {
   'no':4,
   'no@class':'bar',
   'name' : 'name4'
 },
  {
   'no':5,
   'no@class':'foo',
   'name' : 'name5'
 }]
}

var templ2 = new Kumu.Template('./template.html', options);
<title>Sample</title>
</head>
<body>
<div id="target" ></div>
<input type="button" value="TEMPLATE_RENDER" onclick="templ2.render(o, 'target');">
</body>
</html>

template.html:

<p>TEMPLATE</p>
<div id="test" style="display:none">Test</div>
<div id="test1" style="display:none">Test</div>
<table border="1">
  <tr>
    <td>-</td>
    <td>Template No</td>
    <td>Template Name</td>
  </tr>
  <tr id='test2'>
    <td>Template List Test</td>
    <td id="no">Test</td>
    <td id="name">Test</td>
  </tr>
</table>

外部テンプレートを使用する際には必ず外部テンプレートのurlと、レンダリング結果を挿入するブロックを指定（id)します。

//urlの指定
var templ2 = new Kumu.Template('./template.html', options);
//結果を挿入するブロック（id）で指定。targetを指定
templ2.render(o, 'target');

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.foo {color:red }
.bar {color:blue }
</style>
<script language="JavaScript" type="text/javascript" src="./js/kumu.js"></script>
<script>
var o = {
  'test' : 'てすと',
  'test@class' : 'foo',
  'test1' : 'てすと1',
  'test2' : [
  {
    'no':1,
    'no@class':'foo',
    'name' : 'name1'
  },
  {
    'no':2,
    'no@class':'bar',
    'name' : 'name2'
  },
 {
    'no':3,
    'no@style':{'background-color':'red'},
    'name' : 'name3'
  },
 {
   'no':4,
   'no@class':'bar',
   'name' : 'name4'
 },
  {
   'no':5,
   'no@class':'foo',
   'name' : 'name5'
 }]
}

var templ2 = new Kumu.Template('./template.html', options);
<title>Sample</title>
</head>
<body>
<div id="target">
  <p>TEMPLATE</p>
  <div id="test" class="foo" style="">てすと</div>
  <div id="test1" style="">てすと1</div>
  <table border="1">
  <tbody>
  <tr>
    <td>-</td>
    <td>Template No</td>
    <td>Template Name</td>
  </tr>
  <tr id="test2:rendered0" style="">
    <td>Template List Test</td>
    <td id="no:rendered0" class="foo">1</td>
    <td id="name:rendered0">name1</td>
  </tr>
  <tr id="test2:rendered0" style="">
    <td>Template List Test</td>
    <td id="no:rendered0" class="bar">2</td>
    <td id="name:rendered0">name2</td>
  </tr>
  <tr id="test2:rendered0" style="">
    <td>Template List Test</td>
    <td id="no:rendered0" style="background-color: red;">3</td>
    <td id="name:rendered0">name3</td>
  </tr>
  <tr id="test2:rendered0" style="">
    <td>Template List Test</td>
    <td id="no:rendered0" class="bar">4</td>
    <td id="name:rendered0">name4</td>
  </tr>
  <tr id="test2:rendered0" style="">
    <td>Template List Test</td>
    <td id="no:rendered0" class="foo">5</td>
    <td id="name:rendered0">name5</td>
  </tr>
  </tbody>
  </table>
</div>
<input type="button" onclick="templ2.render(o, 'target');" value="TEMPLATE_RENDER"/>
</body>
</html>

Formの値の取得

Kumu.FormHelperを使うとFormをJSON化でき、簡単に値を取得する事ができます。

では簡単な見てみます。

<form id="Form">
  <input type="text" name="firstName"/>
  <input type="text" name="lastName"/>
</form>

上記のFormはname属性がfirstNameとlastNameという名前のinputフィールドを持っています。

このFormをJSON化し、値を取得するには以下のように記述します。

// FormをJSON化する
var form = Kumu.FormHelper.create('Form');

//name属性がfirstNameの値を取得
var firstNameValue = form['firsrtName']

//name属性がfirstNameの値を取得
var lastNameValue = form['lastName']

FormをJSON化するのはKumu.FormHelper.createを使用します。

FormHelperの引き数にはFormの要素あるいは対象のFormのid属性の値を指定します。

Kumu.FormHelper.create(<Form要素もしくはFormのid属性>, <タイプ>);

Formのタイプ

FormHelperはいくつかのタイプをサポートしています。

タイプは以下の３つです。

'r' rawモード -- Formそのままのname属性を使用してJSONを構築する。（デフォルト）
't' teedaモード -- FormをTeedaのPageクラスのidのようにJSONを構築する。
'i' idモード -- Formのname属性ではなくid属性をキーに使用してJSONを構築する。

Teedaモードを使用するには以下のように記述します。

Kumu.FormHelper.create('Form', 't');

rawモード

rawモードはそのままname属性の値をキーとしてJSONを構築します。

デフォルトではこの動作になります。

Kumu.FormHelper.create('Form');

teedaモード

teedaモードはteedaでレンダリングされたFormをJSON化します。

teedaはJSF実装FWのためFormをレンダリングするとname属性がそのまま出ないケースなどがあります。

例えばItemsのケースです。

<form id="Form">
<input type="text" id="num1" class="hoge"/><br/>
<input type="text" id="num2"/><br/>
<span id="str">aaa</span>
<input type="hidden" id="fooItemsSave" />
<table border="1">
       <div id="fooItems">
       <tr>
         <td><span id="fooNo">100</span></td>
               <td><input type="text" id="aaa" title="AAA" /></td>
               <td><input type="text" id="bbb" title="BBB" /></td>
       </tr>
       </div>
</table>
<input type="submit" id="doNothing" />
</form>

このケースの場合、idは同じになってしまうためidで取得するのは難しく、またname属性は複雑な値になり解析が困難です。

このようなケースもKumu.FormHelperを使用することができます。

var form = Kumu.FormHelper('Form', 't');
var items = form['fooItems']
for(var i = 0; i < items.length; i++){
    var item = items[i];
    alert('aaa = '+item['aaa']+' bbb = '+item['bbb');
}

Teedaモードを使うと上記のように繰り返し部分もリスト化され、簡単にアクセスすることができます。

idモード

id属性の値をキーとしてJSONを構築します。

その他の動作はrawモードと変わりません。

JSONの文字列化

Kumu.JSONSerializerを使うとJSONを文字列化することができます。

var form = Kumu.FormHelper.create('aForm');

// Kumu本体のログ機能でログ出力
Kumu.log(Kumu.JSONSerializer.serialize(form));

上記のようにFormの内容などをデバッグする際に使用することができます。

またobjectであればなんでも文字列化することができます。

応用

JSONSerializerを使用すると複数のobjectをまとめて文字列にする事ができます。

そのためAjaxで送信するパラメータも減らすことができます。

JSON化した文字列はサーバサイドでorg.seasar.teeda.ajax.JSONSerializerを使用してMapに復元することができます。

String str = "{'test1':'test2'}";
Map map = JSONSerializer.evalMap(str);

Mapに変換後、Dxoなどを使用することによって簡単に好きなDtoなどにマッピングする事が出来るようになります。

リファレンス

Kumu.extend(self, super)

継承のようにobjectのpropertyをコピーします。

var obj = {
  a = 'TEST',
  print : function(txt){
    alert(txt);
  }
};

var self = {};

Kumu.extend(self, obj);
obj.print("TEST");

Kumu.provide(name, obj)

指定されたobj上に指定した名前のobjectを生成します。

objが省略された場合はglobalに作成します。

この関数は名前空間のようなものを生成する際に使用します。

//foo.bar を作成する
Kumu.provide('foo.bar');

alert(foo.bar);

Kumu.define(name)

指定した名前のobjectを作成します。

ライブラリのようなobjectを作成する場合、名前空間のようなものを同時に生成します。

if(typeof Foo = 'undefined'){
  Foo = {}
}

if(typeof Foo.Bar = 'undefined'){
  Foo.Bar = {}
}

Kumu.extends(Foo.Bar,{
  ...
  ...
  ...

});

上記のような処理を以下のように記述する事が出来ます。

Kumu.define('Foo.Bar')({
   ...
   ...

});

Kumu.defineClass(name)

指定した名前のクラス関数を作成します。

ライブラリのようなクラス関数を作成する場合、名前空間のようなものを同時に生成します。

if(typeof Foo = 'undefined'){
  Foo = {}
}

if(typeof Foo.Bar = 'undefined'){
  Foo.Bar = Kumu.create();
}

Kumu.extends(Foo.Bar.prototype,{
  ...
  ...
  ...

});

上記のような処理を以下のように記述する事が出来ます。

Kumu.defineClass('Foo.Bar')({
   ...
   ...

});

Kumu.undef(value)

値が存在していないかチェックします。

//false
var result = Kumu.undef('Kumu');
//true
var result = Kumu.undef('Test');

Kumu.bind(value, [....])

関数のカリー化を行います。

引き数に渡された値を束縛し状態の関数を返します。

var test = function(a, b){
  return a+b;
}

test = test.bind(1)
#return 3
test(2);

Kumu.$i(id, [...])

document.getElementByIdのショートカットメソッドです。

またこの関数は$iという名前でも使用可能です。

複数のidを指定する事も出来ます。

// idがemployeeの要素を取得
var obj = $i('employee');

var list = $i('department', 'person');

Kumu.$t(name, [....])

document.getElementByTagNameのショートカットメソッドです。

またこの関数は$tという名前でも使用可能です。

複数のnameを指定する事も出来ます。

// tag名がpreの要素を取得
var obj = $i('pre');

var list = $i('ul', 'ol');

Kumu.$n(name, [...])

document.getElementByNameのショートカットメソッドです。

またこの関数は$tという名前でも使用可能です。

複数のnameを指定する事も出来ます。

//nameがemployeeの要素を取得
var obj = $i('employee');

var list = $i('search', 'employeeCode');

Kumu.map(Array, function)

引き数で渡された関数を引き数で渡されたArrayに対して実行し結果のArrayを返します。

この関数はArray.prototypeにも登録されています。

var src = [1,2,3];
var map_func = function(value){
  return value+1;
};

// result = [2,3,4]
var result = Kumu.map(src, map_func);

// result = [2,3,4]
result = src.map(map_func);

Kumu.filter(Array, function)

引き数で渡された関数を引き数で渡されたArrayに対して実行しファイルタをかけ結果のArrayを返します。

引き数で渡した関数がfalseの場合にはその結果を返しません。

この関数はArray.prototypeにも登録されています。

var src = [1,2,3];
var filter_func = function(value){
  return value % 2 ? true : false;
};

// result = [2,3,4]
var result = Kumu.filter(src, filter_func);

// result = [2,3,4]
src.map(filter_func);

Kumu.toArray(list)

引き数で渡されたobjectを可能であればArray化します。

関数の引き数であるargmentsなどに対して使用します。

var func = function(){
var args = Kumu.toArray(arguments);

};

Kumu.keys(object)

渡されたobjectのpropertyのキーをArrayで返します。

var obj = {
  a : '1',
  b : '2',
  c : '3',
};

// [a, ,b, c]
var list = Kumu.keys(obj);

Kumu.items(object)

渡されたobjectのpropertyの値をArrayで返します。

var obj = {
  a : '1',
  b : '2',
  c : '3',
};

// [1, 2, 3]
var list = Kumu.items(obj);

Kumu.shift([...])

渡されたlistの先頭を抜いて返します。

渡されたArrayは詰められます。

この関数はArray.prototypeにも登録されています。

var src = [1,2,3];

// first = 1 src = [2,3]
var first = Kumu.shift(src);

// first = 2 src = [3]
first = src.shift();

Kumu.unshift([...])

渡されたArrayの先頭に渡されたobjectを追加します。

この関数はArray.prototypeにも登録されています。

var src = [1,2,3];

// src = [0, 1, 2, 3]
Kumu.unshift(src, 0);

// src = [-1, 0, 1, 2, 3]
src.unshift(-1);

Kumu.include(value, [...])

指定したvalueが指定したArrayの中にあるか判断します。

// true
var result = Kumu.include(1, [0,1,2,3,4]);
// false
var result = Kumu.include(1, [0,2,3,4]);