Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
added a little wiki doc on how to make dialogs and grids
- Loading branch information
Showing
1 changed file
with
25 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
# Hints and tips on making different UI components | ||
|
||
This document tries to give some hints and tips on how to make common UI stuff | ||
|
||
## Modal Dialogs | ||
|
||
Its handy to have popups with detailed views, confirmation dialogs or wizards. | ||
|
||
Here's a quick and easy way to make them in hawtio: | ||
|
||
* ensure your angular module depends on **'ui.bootstrap.dialog'**: | ||
|
||
angular.module(pluginName, ['bootstrap', 'ui.bootstrap.dialog', 'hawtioCore']) | ||
|
||
* create a [new Core.Dialog() object in your controller scope](https://github.com/hawtio/hawtio/blob/master/hawtio-web/src/main/webapp/app/activemq/js/browse.ts#L7) with some name | ||
|
||
* Then in the modal dialog markup, using [angular ui bootstrap modals](http://angular-ui.github.io/bootstrap/#/modal) refer to **name.show** and **name.options**, then to open/show use **name.open()** and **name.close()**as in this [example markup for the above controller code](https://github.com/hawtio/hawtio/blob/master/hawtio-web/src/main/webapp/app/activemq/html/browseQueue.html#L70) | ||
|
||
This also means you only have to come up with 1 name per dialog - the name of the dialog object - rather than naming the various flags/options/open/close methods :) | ||
|
||
## Grids / Tables | ||
|
||
We have 2 implementations currentl, [ng-grid](http://angular-ui.github.io/ng-grid/) which has a really nice directive and angular way of working with it; check it out for the documentation on how to make a grid. | ||
|
||
We've also got a [datatable plugin](https://github.com/hawtio/hawtio/blob/master/hawtio-web/src/main/webapp/app/datatable/doc/developer.md) which provides a directive and API to ng-grid but uses the underlying [jQuery DataTable widget](http://datatables.net/) until ng-grid is as fast and solves all the same use cases. |