last update: Tue, 14 Apr 2015 09:39:29 GMT ( 9 years ago )

            4. アプリの開発方法

            #

            synqueryプラットフォーム上での開発方法を解説します。

            • 4.1 Synquery の取り扱い

              #

              synquery プラットフォーム上ではクラウドとの データIO に関する API を定義した $S 名前空間を用いて、極めて自由度の高い開発が可能です。このプラットフォームの原始的な空間に関しては Specifications を参照ください。

            • 4.2. ECDB のレイアウト

              #

              synquery の ECDB コンポーネント は、アプリケーションをより簡単に作成するための、ライブラリ群です。ヘッダー、フッターの自動付与が行われるほか、ログイン画面が固定されるなどが特徴的です。ここでは ECDB コンポーネント の機能について、サンプルを交えて解説します。

              * 表示切替リンクが表示されているサンプルコードは、実際に実行して動作を確認することができます。
              　サンプルコードの実行方法は 付録A (サンプルコードの実行方法) を参照してください。

              ECDB コンポーネント では画面のレイアウトを構築するために、分割 および レイヤー構成 の2つの方法が用意されています。


              画面のレイアウトを構成する単位をブロックと定義します。最上位のブロックはBody ( idは _BODY_ ) です。ブロックを分割したりレイヤー構成にしたりすることにより、複雑な画面レイアウトを実現することができます。

              • 分割

                #

                ECDB.prototype.Divideは指定されたブロックを分割し、新たなブロックを作成します。ECDB.prototype.DivideはDivisionインスタンスを返します。分割された要素および分割している要素(スペーサー)を、Divisionインスタンスのそれぞれdivided関数およびdivider関数を用いて取得することができます。

                また、ECDB.prototype.Divideの第3引数にオプションとして vertical プロパティに true を指定することにより、ブロックを縦方向に分割することができます。(指定しない場合は横方向の分割になります。)
                表示切替
                function beforeLaunch(top) {
                  var division = top.Divide('_BODY_', {
                    'left_block': '30%',
                    'right_block': '70%'
                  });
                  var leftBlock = division.divided(0).css('background-color', '#333333');
                  var spacer = division.divider(0);
                  var rightDivision = top.Divide('right_block', {
                    'right_block_0': '25%',
                    'right_block_1': '25%',
                    'right_block_2': '25%',
                    'right_block_3': '25%'
                  }, {
                    'vertical': true
                  });
                  var rightBlock0 = rightDivision.divided(0).css('background-color', '#ffffff');
                  var rightBlock1 = rightDivision.divided(1).css('background-color', '#cccccc');
                  var rightBlock2 = rightDivision.divided(2).css('background-color', '#999999');
                  var rightBlock3 = rightDivision.divided(3).css('background-color', '#666666');
                }

                実行結果例


              • レイヤー構成

                #

                ECDB.prototype.Multipleは指定されたブロックをレイヤー構成にします。
                ECDB.prototype.MultipleはLayerインスタンスを返します。レイヤーを構成する要素を取得するためにはLayerインスタンスのbody関数を使用します。
                初期表示は第2引数で指定した配列の最初の要素になります。表示を切り替える場合はLayerインスタンスのshow関数またはdisplay関数を用います。

                表示切替
                function beforeLaunch(top) {
                  var division = top.Divide(top.Body(), {
                    'left_block': '10%',
                    'right_block': '90%'
                  });
                  var layers = top.Multiple('right_block', ['layer0', 'layer1', 'layer2']);
                  var layer0 = layers.body(0).css('background-color', 'green');
                  var layer1 = layers.body(1).css('background-color', 'blue');
                  var layer2 = layers.body(2).css('background-color', 'red');
                  layers.display('layer1');
                  
                  division.divided(0).on('mouseover', function() {
                    layers.show(0);
                  }).on('click', function() {
                    layers.show(1);
                  }).on('dblclick', function() {
                    layers.show(2);
                  });
                }

                実行結果例

                mouseoverclickdblclick

              • 要素の配置

                #

                ECDB.prototype.DivideやECDB.prototype.Multipleで作成したブロックには、HTMLのdiv要素、iframe要素の他、BOOKで定義したフォームやテーブルを配置することができます。また、テキストエリア、リッチテキストエディタやスクリプトエディタを配置することもできます。

                • HTMLのdiv要素・iframe要素
                  • ブロックにdiv要素・iframe要素を配置する場合はそれぞれ、ECBOOK.prototype.InlineDiv関数・ECBOOK.prototype.InlineFrame関数を使用します。戻り値がそれぞれの要素となります。

                  表示切替
                  function beforeLaunch(top) {
                    top.Divide(top.Body(), {'div_el': '50%', 'iframe_el': '50%'});
                    var book = top.BOOK({});
                    book.InlineDiv('div_el').css('background-image', 'url(/synquery/img/logo.png)');
                    book.InlineFrame('iframe_el').attr('src', 'http://www.east-cloud.co.jp/');
                  }
                  実行結果例


                • フォーム・テーブル
                  • BOOKのフォーム・テーブルを配置する場合はそれぞれ、ECBOOK.prototype.InlineForm関数・ECBOOK.prototype.InlineTable関数を使用します。

                  表示切替
                  var rsd = {};
                  function beforeLaunch(top) {
                    var division = top.Divide(top.Body(), [50, 50]);
                    var book = top.BOOK(rsd);
                    
                    book.InlineForm(division.divided(0));
                    book.InlineTable(division.divided(1));
                  }
                  実行結果例


                • テキストエリア・リッチテキストエディタ・スクリプトエディタ
                  • ブロックにテキストエリア・リッチテキストエディタ・スクリプトエディタを配置する場合はそれぞれ、ECBOOK.prototype.InlineText関数・
                  ECBOOK.prototype.InlineRichtext関数・ECBOOK.prototype.InlineScript関数を使用します。
                  戻り値オブジェクトにはread関数・write関数が用意されており、要素に対して値を読み書きすることができます。

                  表示切替
                  function beforeLaunch(top) {
                    top.Divide(top.Body(), {
                      'ta_block': '30%',
                      'rte_block': '30%',
                      'script_block': '40%'
                    });
                    var book = top.BOOK({});
                    var ta = book.InlineText('ta_block');
                    var rte = book.InlineRichtext('rte_block');
                    var script = book.InlineScript('script_block');
                    
                    ta.write('This is a textarea.\n' + text);
                    rte.write('<h1>This is a rich-text editor.</h1>\n' + rt);
                    script.write('// This is a script editor.\n' + src);
                  
  ta.read();
                    rte.read();
                    script.read();
                  }
                  var text = 'node-websockets\n...';
                  var rt = '<article class="markdown-body entry-content" itemprop="mainContentOfPage">...</article>';
                  var src = '/***/\n...';
                  実行結果例

              • 4.3. ECDB の配色

              #

              • テーマ

                #

                synquery の ECDB コンポーネント で用意されたテーマを利用するためには、ECDBを定義するRSDのstyle属性のcolorを指定します。

                表示切替
                {
                    :
                    "style":{ "color": "orange" },
                    :
                }

                指定できるテーマは以下のとおりです。
                gray(デフォルト)red
                		greenblue
                antiqueolivepurplepink
                developmonoorangeviolet
                darkreddarkbluedarkgreenblack

              • フォームスタイル

                #

                用意されたフォームの配色を利用するためには、ECBOOKを定義するRSDのstyle属性のcolorを指定します。

                表示切替
                {
                    :
                    "style":{ "color": "blue", .... }
                    :
                }

                指定できる配色は以下のとおりです。
                gray(デフォルト)red
                		greenblue
                antiqueolivepurplepink
                developmonoorangeviolet
                darkreddarkbluedarkgreenblack

              • ボタンの色

                #

                フォーム内で定義したボタンの配色をカスタマイズしたい場合は、BOOKを定義するRSDのbeforeShowForm関数内で、jQueryのsynquery拡張関数であるButtonColorを使用します。

                表示切替
                {
                    :
                    "structure":[
                          ['before', 'before', 'button', '', {'label': 'Button Display'}, 25],
                          ['after', 'after', 'button', '', {'label': 'Button Display'}, 25]
                    ],
                    :
                    "beforeShowForm": function() {
                          var btn = this.Input('after');
                          btn.ButtonColor('#A8A820');
                    },
                    :
                }
                実行結果例


              • 4.4. ECDB.BOOKの取り扱い

              #

              ECBOOK は synquery アプリケーションをより簡単に作成するための、静的な構成単位です。
              ECBOOK インスタンスを利用して、画面上のフォームやテーブルの操作を行うことができるほか、データベースのデータを取得したりデータを更新することもできます。

              • ECDB.BOOKインスタンスの取得

                #

                取得したい ECBOOK インスタンスの名前が既知の場合は ECDB.BOOK 関数を用いて取得することができます。
                var book = ECDB.BOOK('book_name');

                新規の ECBOOK インスタンスを生成する場合は ECDB.prototype.BOOK 関数を使用します。引数にはRSDオブジェクトを渡します。
                var bookRsd = {
                  'name': 'new_book',
                  'db': 'db_name',
                  'table': 'table_name',
                  :
                };
                var book = top.BOOK(bookRsd); // top変数は ECDB インスタンスを表します。
                RSDオブジェクトに name プロパティを定義しておくことで、生成した ECBOOK インスタンスをECDB.BOOK 関数を使用して取得することができます。
                var book = ECDB.BOOK('new_book');

              • ダイアログフォームの表示

                #

                ダイアログ形式のフォームを表示するためには、ECBOOK.prototype.ShowForm 関数を使用します。
                book.ShowForm();

              • インラインフォームの表示

                #

                インライン形式のフォームを表示するためには、ECBOOK.prototype.InlineForm関数を使用します。
                book.InlineForm('block_name');

              • ダイアログテーブルの表示

                #

                ダイアログ形式のテーブルを表示するためには、ECBOOK.prototype.ShowTable 関数を使用します。
                book.ShowTable();

              • インラインテーブルの表示

                #

                インライン形式のテーブルを表示するためには、ECBOOK.prototype.InlineTable 関数を使用します。
                book.InlineTable('block_name');

              • データベースからのデータ取得

                #

                データベースからデータを取得するためには、ECBOOK.prototype.Find 関数およびECBOOK.prototype.Get 関数を使用します。
                ECBOOK.prototype.Find 関数は検索条件を指定して、データを取得するためのキーの配列を取得できます。このキーの配列を引数としてECBOOK.prototype.Get関数でデータを取得します。
                var selector = {}; // 検索条件
                selector['something'] = 'anything';
                book.Find(selector, function(keys) {
                  book.Get(keys, function(data) {
                    :
                  });
                });

              • データベースのデータ更新

                #

                データベースのデータを更新するまたは、新規にデータを作成するためには、ECBOOK.prototype.Put を使用します。
                book.Put(data, function() {
                  :
                });
              or: