Netzke Core

Some knowledge of Sencha Ext JS will be needed in order to fully understand this overview.

Rationale

Sencha Ext JS is a powerful front-end framework, which is used for crafting web-apps that give the end user experience similar to that of a desktop application. It has an extensive set of widgets ('components'), and leverages a modular approach to its fullest: a developer can extend components (using Ext JS's own class system), nest components using many powerful layouts, dynamically create and destroy them. The architecture of Ext JS is well-thought and very complete.

However, with Ext JS being server-agnostic, it is not always a trivial task for a developer to bind Ext JS components to the server-side data and application business logic, especially in complex applications. Netzke as the solution that allows you to extend the modular approach to the server side.

Netzke Core takes the burden of implementing the following key aspects of the framework:

Client-side (JavaScript) class generation

Client-server communication

Convenient declaration of Ext actions

Extendibility of components (class inheritance and mixins)

Unlimited nesting (composition)

Dynamic component loading

Client-side class caching

Inclusion of extra JavaScript and CSS files

...and more.

All this extremely facilitates building fast, low-traffic, robust, and highly maintainable applications. As a result, your code scales much better in the sense of complexity, compared to using conventional MVC, where developers are pretty much limited with programming techniques they can apply.

HelloWorld component

This component is distributed as a part of the test application, see test/core_test_app/components.

In YOUR_APP/components/hello_world.rb:

classHelloWorld<Netzke::Base# Configure client class
js_configuredo|c|c.title="Hello World component"c.mixin# mix in methods from hello_world/javascripts/hello_world.js
end# Actions are used by Ext JS to share functionality and state b/w buttons and menu items
# The handler for this action should be called onPingServer by default
action:ping_server# Self-configure with a bottom toolbar
defconfigure(c)superc.bbar=[:ping_server]# embed the action into bottom toolbar as a button
end# Endpoint callable from client class
endpoint:greet_the_worlddo|params,this|# call client class' method showGreeting
this.show_greeting("Hello World!")endend

What is a Netzke component

A Netzke component is a Ruby class (further referred to as "server class"), which is being represented by an Ext JS Component on the server-side (further referred to as "client class"). The responsibility of the server class is to "assemble" the client class and provide the configuration for its instance (further referred as "client class instance"). Even if it may sound a bit complicated, Netzke provides a simple API for defining and configuring the client class. See Client class for details.

Further, each Netzke component inherits convenient API for enabling the communication between the client and server class. See Client-server interaction for details.

With Netzke components being a Ruby class, and the client class being incapsulated in it, it is possible to use a Netzke component in your application by simply writing Ruby code. However, while creating a component, developers can fully use their Ext JS skills - Netzke puts no obstacles here.

A typical Netzke component's code is structured like this (on example of MyComponent):

The configuration of a client-class is done by using the Netzke::Base.js_configure. For example, in order to inherit from a different Ext JS component, and to mix in the methods defined in an external JavaScript class:

Composition

Any Netzke component can define child components, which can either be statically nested in the compound layout (e.g. as different regions of the 'border' layout), or dynamically loaded at a request (as in the case of the edit form window in Netzke::Basepack::GridPanel, for example).

Defining child components

You can define a child component by calling the component class method which normally requires a block:

Client-server interaction

Communication between the client class and the corresponding server class is done by means of defining endpoints. By defining an endpoint on the server, the client class automatically gets a method that is used to call the server.

Requirements

Installation

For the latest ("edge") stuff, instruct the bundler to get the gem straight from github:

gem'netzke-core',git:"git://github.com/netzke/netzke-core.git"

By default, Netzke assumes that your Ext JS library is located in public/extjs. It can be a symbolic link, e.g.:

$ ln -s ~/code/sencha/ext-4.1.1 public/extjs

(Make sure that the location of the license.txt distributed with Ext JS is exactly public/extjs/license.txt)

Running tests

The bundled test/core_test_app application used for automated testing can be easily run as a stand-alone Rails app. It's a good source of concise, focused examples. After starting the application, access any of the test components (located in app/components) by using the following url: