Clever Geek Handbook

7分でExt JSとRuby on RailsのCRUDアプリケーション

これは古い投稿の更新バージョンです 。



この投稿では、Ext JS、Ruby on Rails、 Netzkeを使用してTODOタスクマネージャーを作成する簡単な手順を示します。 所要時間は約7分です。価値があるかどうかを事前に知りたい場合は、「議論の結果」セクションをご覧ください（ちなみに最大）。 私たちの目標は、TODOタスクを追加、編集、削除し、完了済みとしてマークできるWebアプリケーションを作成することです。 これに加えて、タスクを並べ替えたり、それらを検索したり、複数のタスクを同時に編集したりできます-それだけではありません。 必要に応じて、ストップウォッチで時間をとって、始めましょう。











このチュートリアルを作成するとき、次のライブラリバージョンを使用しました：Rails 3.2.8、netzke-core v0.8.0、netzke-basepack v0.8.0、 Ext JS 4.1.1a -Ruby 1.9.3およびMac OSX Mountain Lion



最初のステップ



新しいRailsアプリケーションを作成します。 



$ rails new netzke_task_manager && cd netzke_task_manager




NetzkeをGemfileに追加します。 



 gem 'netzke-core', '~>0.8.0' gem 'netzke-basepack', '~>0.8.0'




gemをインストールします。 



 $ bundle install




Ext JSライブラリと（オプションで） FamFamFamアイコンをpublic/images/icons



それぞれpublic/extjs



とpublic/images/icons



リンクします。 たとえば（ たとえば！ ）： 



 $ ln -s ~/code/extjs/ext-4.1.1 public/extjs $ mkdir public/images $ ln -s ~/assets/famfamfam-silk public/images/icons




Netzkeのルートを指定し、 config/routes.rb



でルートルーティングをコメントアウトしconfig/routes.rb



。 



 NetzkeTaskManager::Application.routes.draw do netzke root to: "welcome#index" end




ウェルカムコントローラーを生成します。 



 $ rails g controller welcome index




public/index.html



忘れずに削除してください。



app/views/layouts/application.html.erb



JavaScriptとスタイルを接続するデフォルトコードをload_netzkeヘルパーに置き換えます。 結果は次のようになります。 



 <!DOCTYPE html> <html> <head> <title>Netzke Task Manager</title> <%= load_netzke %> <%= csrf_meta_tag %> </head> <body> <%= yield %> </body> </html>




load_netzke



ヘルパーは、NetzkeとExt JS自体の両方のスクリプトとスタイルを接続するために必要なものであることに注意してください。



3分が経過しました-本当に面白い部分を始める準備ができました！



モデル作成



属性name



、 priority



、 notes



、 due_date



およびdone



フラグを持つタスクモデルを作成しましょう。 



 $ rails g model Task done:boolean name notes:text priority:integer due:date




データベースのスキーマを更新します。 



 $ rake db:migrate




タスクには少なくとも何らかの名前を付けたいので、適切な検証（ファイルapp/models/task.rb



）を追加しましょう： 



 class Task < ActiveRecord::Base attr_accessible :done, :due, :name, :notes, :priority validates :name, presence: true end




Tasks Gridコンポーネントの作成



完全に機能するNetzke::Basepack::Grid



から継承して、最初のNetzkeコンポーネントを作成しましょう。 ただし、最初にapp/components



ディレクトリを作成する必要があります。 



 $ mkdir app/components




このディレクトリで、次の内容のtasks.rbファイルを作成します。 



 class Tasks < Netzke::Basepack::Grid def configure(c) super c.model = "Task" end end




このコンポーネントは、 Netzke::Basepack::Grid



から継承され、以前に作成されたTask



モデルを使用するように構成されたRubyクラスです。 次に、作成したコンポーネントをアプリケーションのビューに埋め込む必要があります。 app/views/welcome/index.html.erb



ファイルで、デフォルトコードを次の行に置き換えます。 



 <%= netzke :tasks, height: 400 %>




サーバーを起動しましょう。 



 $ rails s




...そして、 http：// localhost：3000 /のブラウザでの表示を確認します 。







私たちのアプリケーションは動作し、一見するとかなり良いように見えます。 すぐにそれが提供する機能の印象的なリストを提供しますが、最初に、アプリケーションの外観を改善するためにいくつかの小さな修正を行いましょう（これにはまだ十分な時間があります）。



Netzke::Basepack::Grid



、グリッドの継承元であり、柔軟に構成されています。 4つの簡単な改善を行ってみましょう。







コンポーネントの最終的なコードは次のようになります。 



 class Tasks < Netzke::Basepack::Grid def configure(c) super c.model = "Task" c.columns = [ :done, :name, {name: :notes, flex: 1}, :priority, {name: :due, header: "Due on"} ] c.scope = {done: [nil, false]} end end




素晴らしい。 残りの2分間を使用して、最後の純粋に視覚的な編集を行います。 グリッドをページの中央にapp/views/layouts/application.html.erb



には、 load_netzke



ヘルパーの直後にapp/views/layouts/application.html.erb



にいくつかのスタイルを追加しapp/views/layouts/application.html.erb



。 



 <style type="text/css" media="screen"> h1 { text-align: center; margin: 10px;} .netzke-component { width: 800px; margin: auto; } </style>




h1ヘッダーをapp/views/welcome/index.html.erb



追加しapp/views/welcome/index.html.erb



。 



 <h1>Incomplete tasks</h1> <%= netzke :tasks, height: 400 %>




さて、それだけです！ ストップウォッチを停止して、結果について話し合うことができます。







結果を議論します



Netzke::Basepack::Grid



は完全に機能するコンポーネントであるため、このためのコードを1行も書かずにNetzke::Basepack::Grid



機能を取得します。 もっと詳しく見てみましょう。



フィールドタイプを自動的に検出する


このアプリケーションでは、整数、ブール、文字列、テキスト、日付など、さまざまなタイプのフィールドをタスクモデルに作成しました。 各フィールドは、対応するタイプをサポートする列を自動的に受け取ります（たとえば、優先順位フィールドに文字を入力できない、日付フィールドにカレンダーがあるなど）。



Pages


タスクテーブルに何万ものレコードが含まれている場合でも、組み込みのページサポートにより、Netzkeグリッドに問題は生じません。



複数の行を一度に編集する機能


一度に複数のレコードを追加、更新、削除するのは簡単です。







コンテキストメニュー


グリッドの下部パネルにあるボタンの一部の機能は、コンテキストメニューに複製されます。







Rails検証のサポート


Railsの検証が考慮されます：





サーバー上のレコードの並べ替え


列見出しをクリックして、エントリを並べ替えます。





サーバー上のレコードのフィルタリング


フィールドのタイプに応じて、スマートフィルターはデフォルトで各列に統合されます。



日付の場合：







優先度：







フォームからエントリを追加および編集する




フォームを介してレコードを追加または編集する方が簡単な場合があります。 Netzkeはそのような機会を提供します（複数のエントリの編集もサポートされています-数行を選択して[フォームで編集]をクリックするだけです）。







クエリの保存をサポートする高度な検索


[検索]ボタンをクリックして、複雑なクエリエディターを呼び出します。







氷山の一角


あなたが学んだことは、Netzkeができることのほんの一部です。 実際、信じられないほど強力なNetzke Coreプラットフォームに基づいて構築された事前作成コンポーネントを使用する方法を示しました。これにより、コンポーネントを新しい（複合）コンポーネントに結合でき、サーバーからのコンポーネントの動的なロード、クライアントとサーバー間の柔軟な相互作用がサポートされますコンポーネントの一部-さらに、Netzkeは、Ext JSとRailsのパワーを活用し、非常に複雑な単一ページWebアプリケーションを作成するための理想的なプラットフォームです。



この記事の続きとして、コンポーネントの3つのインスタンスをブックマークバーに簡単に配置する方法を紹介します。各インスタンスには、完了したタスク、未完了のタスク、およびすべてのタスクが同時に選択されています。 チュートリアルの次の部分を参照してください 。



翻訳者からの注意：Netzke Basepackのコンポーネントはロシア語のローカライズをサポートしています。


More articles:


All Articles