Getting started with Netzke_part1

Netzke is a set of Ruby gems that helps you build client-server components, represented in the browser with the help of Sencha Ext JS, and on the server are powered by Ruby on Rails. It's most useful for creating complex data-rich applications that have to provide the UI to a lot of different data - think about banking, logistics, call centers, and other ERP systems.

In this walk-through I'll show you how little time it takes to set up a simple application with 2 interacting grids that provide the UI to 2 associated (one-to-many) Rails models. As both grids will be powered by the Netzke::Basepack::Grid component, you may be surprised with all the features like sorting, pagination, search, multi-line editing, etc that this app will provide out of the box.
So, let's get started.

Setting things up

Create a new Rails application:

1. $ rails new netzke_bookshelf && cd netzke_bookshelf

Add Netzke gem to your Gemfile:

1. gem 'netzke'

Install the gems:

1. $ bundle

Symlink or copy the Ext JS files (direct download link) and, optionally, the FamFamFam silk icons, into public/extjs and public/images/icons respectively. For example:

1. $ echo MOST PROBABLY NO COPY-PASTING HERE
2. $ ln -s ~/code/extjs/ext-5.1.0 public/extjs
3. $ mkdir public/images
4. $ ln -s ~/assets/famfamfam-silk public/images/icons

Declare Netzke routes:

1. # config/routes.rb
2. NetzkeTaskManager::Application.routes.draw do
3.   netzke
4. end

The netzke method sets up routes needed for communication between client and server side of every Netzke component.

Creating Rails models

We'll build a little personal bookshelf app, let's start with generating the 2 models for it:

1. $ rails g model author name
2. $ rails g model book author:references title exemplars:integer completed:boolean

Run the migrations:

1. $ rake db:migrate

Let's set the 1-to-many relations between the models, and add basic validations:

1. # app/models/author.rb
2. class Author < ActiveRecord::Base
3.   validates :name, presence: true
4.   has_many :books, dependent: :delete_all
5. end
6. 
   
7. # app/models/book.rb
8. class Book < ActiveRecord::Base
9.   validates :title, presence: true
10.   belongs_to :author
11. end

Now let's get to the fun part.

Creating the grids

Netzke components are Ruby classes, so, let's create one in the app/components/authors.rb (you'll need to add the app/components directory first):

1. # app/components/authors.rb
2. class Authors < Netzke::Basepack::Grid
3.   def configure(c)
4.     super
5.     c.model = "Author"
6.   end
7. end

The minimum configuration that Netzke::Basepack::Grid requires is the name of the model, and that's what we provided. Now let's see what this code is capable of.
The netzke-testing gem, which is a part of the Netzke bundle, provides convenient routes for testing components in isolation, so, we'll make use of it. Fire up your Rails app:

1. $ rails s

... and point your browser to http://localhost:3000/netzke/components/Authors
Here's what you should see:

It's a full-featured grid view: try adding, editing, deleting, sorting and searching records in it, or rearranging the columns:

However, a more interesting example to play with would be our books grid, as it will have more columns of different types:

1. # app/components/books.rb
2. class Books < Netzke::Basepack::Grid
3.   def configure(c)
4.     super
5.     c.model = "Book"
6.   end
7. end

Navigate to http://localhost:3000/netzke/components/Books in order to see it. I've added a couple of books before sharing the screenshot with you:

Note that the grid has picked up the Author association without any configuration (yes, it honors some conventions).

As you may expect, our grids are highly configurable, and many configuration options can be found in the documentation. Let us, for instance, make a few changes into the Books grid, customizing the columns and the button bar:

1. class Books < Netzke::Basepack::Grid
2.   def configure(c)
3.     c.columns = [
4.       # you may configure columns inline like this:
5.       { name: :author__name, text: "Author" },
6. 
   
7.       :title,
8.       :exemplars,
9.       :completed
10.     ]
11. 
    
12.     c.model = "Book"
13. 
    
14.     # which buttons to show in the bottom toolbar
15.     c.bbar = [:add, :edit, :del, '->', :apply]
16. 
    
17.     super
18.   end
19. 
    
20.   # you may also use DSL to configure columns individually
21.   column :completed do |c|
22.     c.width = 100
23.   end
24. end

Here's how it'll look like:

Written by Max Gorin
If you found this post interesting, follow and support us.
Suggest for you:

The Complete Ruby on Rails Developer Course

Rails 5: Learning Web Development the Ruby Way

Learn Ruby on Rails from Scratch

Ruby Scripting for Software Testers

Python, Ruby, Shell - Scripting for Beginner