[deltacloud-devel] How To Write The New UI Code

[Tomas Sedovic]

All,

I'm attaching a patch that partially implements the Pools page in the new UI.
While it's not done yet, you can look at the code to see how to code other
other pages for the new UI.

Here are some pointers:

1. We're using namespaced routes for the controllers/views.

The controllers are located in:

    aeolus/src/app/controllers/$NAMESPACE/

The same thing for views.

The URLs look like this: http://example.com/image_factory/assemblies

The layout for the new UI is at: aeolus/src/views/layouts/newui.haml


2. Most of the time you will be using the "list" and the
"details" panes. You set their content using `content_for :list` and
`content_for :details` in the views.

When you don't specify the "details" content, the list will take up all the
vertical space.


3. The controllers use your typical restful/crud actions: index, show, new,
create, destroy, update. And they use the proper HTTP methods (PUT for
`update`, DELETE for destroy, etc.) -- you can run `rake routes` to see the
URLs, HTTP methods and the path helpers.

For nonstandard stuff feel free to add new actions of course.


4. Form submit:

When you have a form with GET or POST method, a single submit button and a
static form action URL, it's all good.

It gets trickier when you have a form full of checkboxes (e.g. the list pane)
and you want to do batch actions on them. Especially since it must work
without JavaScript and with non-GET or POST methods.

For that you can use the new `restful_submit_tag` helper that Ladislav cooked
up. You use it like this:

    = restful_submit_tag "Delete", "delete", resources_pool((a)pool.id),
'DELETE'

(button text, button name, form action URL, HTTP method)

It will create some hidden fields that our app will translate to proper HTTP
methods.

Note that you can use multiple submit buttons with different form URLs. This
allows you to put "New Pool" and "Delete Selected Pools" along with
"Edit
Selected Pool" buttons all into the same form and it'll all work.

If you're confused, I recomend that you look at the the attached patch. It
shows the stuff described here in action.

Feel free to ask me questions on IRC or this list.

Thomas