2013年5月30日木曜日

AngularJS UI でtypeahead,ng-changeだと動かない

AngularJSでBootstrapを使う場合、UI Bootstrapを使うと便利だ。もともと、AngularUIと呼ばれていたが、AngularUIが幾つかのサブプロジェクトに別れ、Bootstrap関連はUI Bootstrapとなったようだ。

Bootstrapにはtypeaheadの機能があり、テキストボックスに文字を入力すると、これだろうと候補を上げてくれる、イケてる入力補助だ。今回これを使ってみた。


  1. 営業担当の人をテキストボックスへ直接入力した時、typeaheadの機能で候補を選択させる。
  2. typeaheadから入力したい候補を選択する。
  3. 選択した候補のIDをID欄に表示する。

こんな機能を実現したい。
テキストボックスにはtypeahead、変更された事を検知して、営業担当からIDを選択、設定する。

UI Bootstrapではtypeaheadという属性が定義されているのでこれを使う。
変更された後の処理ではAngularJSのng-change属性を使う。

てっきり上記2点で大丈夫だと思っていたのだが、ハマってしまった。
ng-change属性が邪魔してtypeaheadが動かない。いろいろ調査した結果typeahead-editable="false"なる属性設定すると動いた。


 
<input class="inputSellName" type="text" name="inputSellNameForm" placeholder="営業" autocomplete="off" ng-model="project.sell.name" ng-change="changeId()" required typeahead="sell.name for sell in sells | filter:$viewValue " typeahead-editable="false">


こんな長い属性設定になってしまった。でもこの設定書いてる順番で動きが変わる。いいのだろうか。

2013年5月16日木曜日

.NET C#でのMVC

.NET C#でアプリを書いてみる。久しぶりに.NET C#を使った。
アーキテクチャとしてMVCを採用してみた。忘れないように。

 :Model
    public class Model
    {

        public int number = 0;
        public string message = "";

        public EventHandler toChange;

        public void addOne()
        {

            number = number + 1;
            message = "number has changed to " + number.ToString();

            toChange(this, null);
        }
    }


 :View

 
    public partial class Form1 : Form
    {
        public Model model;
        public Controller controller;

        public Form1()
        {
            InitializeComponent();
        }


        public void render(object sender, EventArgs e)
        {
            this.label1.Text = model.number.ToString();
            this.label2.Text = model.message;
        }

        private void button1_Click(object sender, EventArgs e)
        {
            controller.addOne();
        }

    }


 :Controller

 
    public class Controller
    {
        public Model mode;
        public Form1 view;

        public void addOne()
        {

            mode.addOne();

        }
    }


 :Main

 
        [STAThread]
        static void Main()
        {
            Application.EnableVisualStyles();
            Application.SetCompatibleTextRenderingDefault(false);


            Form1 view = new Form1();
            Controller controller = new Controller();
            Model model = new Model();

            view.controller = controller;
            view.model = model;

            controller.view = view;
            controller.mode = model;

            model.toChange += new System.EventHandler(view.render);


            Application.Run(view);
        }

こんな感じで作ってみた。
最近Railsでの開発を行っているが、先人達が苦労して編み出した、アーキテクチャとかベストプラクティスとかは積極的に取り入れた方がいい。勉強するコストが掛かっても、それ以上のリターンがあると思う。


2013年5月9日木曜日

AngularJS + Bootstrap + Ruby on Rails

Ruby on Railsで開発を始めて2週間になる。正直言って生産性は高いのではないか。動くものがすぐ作れるのでいい。

フロントエンドをAngularJS、バックエンドをrailsで実装して、フロントーバック間はJSONフォーマットでデータのやり取りをする。こんなシステム構成で開発している。

フロントエンド側をAgularJSベースで開発する利点はリアルタイム、インタラクティブなWebシステムを作り易いことだ。MVCフレームワークなので、ブラウザ側で階層毎にユニットテストが行える。

加えてフロントエンド側にbootstrapを使えば、いい感じでデザインされたWebアプリができる。bootstrapはレスポンシブにも対応しているので、タブレットにも対応できる。

バックエンド側はRailsで実装しているが、ここはRestfulなAPIとしている。Railsを使う利点はこのRestfulなAPIが簡単に作れることだ。

モデルを作成して、それをリソースとして使うと宣言するだけで、GET,POSTなど主だったサービスができる。フロントエンド側ができていなくても、リクエストを発行できるツールなど(firefoxのプラグイン使っている)で動いているのが確認できる。

Rubyが分からないので手探りだけど、RSPEC等のテストフレームワークを使うことで、書いた部分を何度もテストできるので、よりよい書き方があればリファクタリングできる。この後で変えられるという安心感は大切だ。

オープンなフレームワークを使うことで、いいものを安価に開発できる環境はある。あとは何を作るのが大切だ。
例えると、なんか英語は喋れるようになったけど、伝える事がないみたいな感じかな。

2013年5月8日水曜日

twitter-bootstrap-railsでcannot load such file が発生

Railsでbootstrapを使うときtwitter-bootstrap-railsというパッケージを使うと便利だ。Gemfileファイルに

gem "therubyracer"
gem "less-rails"
gem "twitter-bootstrap-rails"
3つのパッケージを使用するように記述。gem "twitter-bootstrap-rails"だけだとエラーが発生する。

cannot load such file -- less
  (in ~/app/assets/stylesheets/bootstrap_and_overrides.css.less)
 


使用する際は上記サイトを良く読もう。読まないとハマってしまい、無駄に時間を使う。