Toolbox

Main Page

Upload file

What links here

Recent changes

Help

Search

Participate

ERP/2.60/Projects/UI Technology/Analysis extjs dojo sc

Introduction

This page documents the analysis of the extjs and dojo ui libraries. This analysis is done as part of the process for selecting a new UI technology for Openbravo. The sections in this document reflect the topics covered during the analysis.

General analysis topics

The analysis is done by combining prototypes with information gathered from the documenation, internet and sample code.

Evaluation questions:

how mature is the functionality in the library? Scale: not-mature, modestly-mature, mature, very complete
how easy was/is it to get the function implemented? A scale from: very easy, easy, difficult and very difficult.
what is the extend of customization/extension needed to get the library to the level required for building Openbravo applications. A scale: none, little, much, completely new component required

Topics

Multi-document interface

This topic covers building a ui with multiple independent tabs as well as hierarchical structures of tabs (tabs-within-a-tab).

Grid

The grid is the most important view for an application like Openbravo. This topic should cover all aspects of the future grid:

sorting (multi-column)
paging/scrolling
search/filter per column
selection of row with multi-select
button for actions per row

Editable Grid

The editable grid is a grid with inline editing.

Some cases to check/test:

inline editing with different types of widgets
how to support adding new records to a grid, does the grid automatically create an empty row to edit?
how to do field validation and error messages

Edit Form

This topic covers how an edit form is implemented using the technologies, topics to detect:

interaction between form fields (change in one field disable/enable other fields, etc.)
form layouting (both label-field as well as field grouping)
client side validation
formatting support
focus support (field and actions/buttons)

Master-Detail

Master-detail is a combination of a grid/list with a form which is filled when clicking a specific record in the grid.

Reference Field

The reference field is one of the most important edit dialogs as it occurs often and special attention should be paid to efficient handling. A future implementation should probably be based on a suggestion box combined with a popup for more detailed search logic.

For this topic it needs to be studied how difficult is it to implement an advanced reference field. Specific attention needs to be paid to efficient back end integration.

Keyboard access

Keyboard handling is important for an efficient ui. As part of this topic it should be studied how keyboard access is defined and modeled.

Event system

The ui should be able to handle events which occur in the ui. The events should be translatable in both client/ui-side as well as server side actions.

Widget support

For this topic give an overview of the available widgets both layout, edit dialog, grid, etc.

Buttontoolbar/menutoolbar widget

Specifically check the implementation and capabilities of the button tool bar and menu tool bar widgets. How can they be integrated in forms/grids.

How to accomplish enabling/disabling of actions based on client-side (row click) or server-side events.

Performance client side

Performance is a concern as it is possible that complex dialogs with many grids/forms will not perform on a java-script browser environment. The analysis should be study current documentation, the internet but possibly also try a prototype with many widgets on one form.

Grid performance is not part of this analisys.

Skinnability

Study the customization of the look and feel

Documentation

Documentation has several aspects:

information on manuals on the internet
tutorials
information available in forums
books

Is information available for different experience levels.

Server-side integration

Describe how the framework proposes integrating with the backend server (the data and service provider). Is there a datastore concept, is json used as the data exchange format. Does the framework have explicit support for lazy loading of reference or other performance enhancing capabalities (data-caching).

Internationalization

As part of the topic the following should be supported:

i18n of messages/labels: although this can probably be solved outside of the framework, consider if the framework has specific support for this
ltr/rtl: does the framework support this out-of-the-box, what is needed to get this done

Testability

Does the UI framework have any specific tools/documentation on how to test application user interfaces developed using the library.

Testing environments

Dojo

There is an static prototype using dojotoolkit 1.3.2 at

https://code.openbravo.com/erp/devel/ui-dojo-prototype/

which tries to emulate Rob Goris prototype using plain dojo widgets (Dijit + DojoX)

In order to run it properly it you need to clone the repository and run it inside an application server (as Tomcat) and open index.html (http://yourserver:port/ui-dojo-prototype/)

Usage: Application Menu > Add new menu bar item Application Menu > Add new tab

Other menu items are useless

Extjs

The extjs examples are available as a module here:

https://code.openbravo.com/erp/mods/org.openbravo.userinterface.extjs/

After installing the module. You can visit the following web addresses:

Examples: http://localhost:8080/openbravo/web/ext-3.0.0/examples/
API docs: http://localhost:8080/openbravo/web/ext-3.0.0/docs/index.html

The sample for testing client-side performance with rendering many components can be found on this url:

http://localhost:8080/openbravo/web/ext-3.0.0/examples/ob/tabs-perf.html

Comparison

Topic	Dojo (+ Dijit + DojoX)	Extjs	SmartClient
General notes	All widgets could be defined: Programmatically: invoking the Javascript needed to place them Static: defining a html tab within the <body> (with a dojotype attribute) All widgets can be changed programmatically with events	Javascript framework (so no xml way of specifying the UI) Support for GWT through ext-gwt	UI can be defined through both javascript and xml, javascript is recommended way Support for GWT through ext-gwt
Multi-document interface	Dojo supports a multi-document interface through ContentPane with TabContainer. Pros: Ability of personalize the tab adding icons, close button, ... Very good performance. Cons: Keyboard shortcuts don't work in IE7. If the tab row overflows the next tab jumps to next line instead of add a arrow mechanism to be able to move horizontally. Artifacts in FF3.5 (they become fixed if you do a small resize of the browser) No way of collapse the entire ContentPane by double-clicking in the bottom of the container. Problems of percentage width setting in parent-child hierarchy. Problems when setting the minimum height of the TabContainer. Related urls and examples: Dojo Prototype http://www.dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/layout/tab-container http://docs.dojocampus.org/dijit/layout/TabContainer http://docs.dojocampus.org/dijit/layout/TabContainer-examples	Extjs supports a multi-document interface through the TabPanel. The TabPanel has been tested (see the performance example) and afaics there are no issues/obstacles in implementing a multi-document interface using extjs. Some examples: tabs group tabs tab scroller menu	Smartclient supports a MDI interface through the Tabset. Afaics there are no obstacles in implementing a mdi interface with Smartclient.
Grid	Dojo datastore is backed by dojo datastore. Dojo has an implementation of a live grid (scrolling grid) that works with the data store. Supported features Column resizing Column hiding Column reordering Frozen columns sorting One header menu for the whole grid can be defined (so no header menu by column header it seems) different selection models: none, single, multiple, advanced multiple rows per row Afaics it is not possible to store the state of a grid (which columns are hidden etc.). It was/is difficult to find information on column based filtering or overall grid filtering. http://docs.dojocampus.org/dojox/grid http://www.christchurchparishacc.com/webapps/calendar/scripts/dojox/grid/compat/tests/test_sizing.html http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/grid/tests/test_data_grid_large.html http://lib1.freeliberator.com/examples/thirdparty/dojo_grid/index.html	Extjs has several grid implementations: standard, http://extjs.com/deploy/dev/examples/grid/property-grid.html property grid] and an editable grid implementation. A grid has the following main parts: store: holds the data to display column model: the definition of columns view: defines visualization of column headers and row data selection model: defines selection behavior Features supported out of the box: sorting (single column) paging single/multiple select grouping column header menu column resizing column re-ordering summary columns (totals of a set of grouped rows for example) state saving (for example, sorting and column visibility is stored), see here Features supported through community efforts: scrolling grid filter per column Not supported: column header grouping (planned for november 2009) row header (planned for november 2009) multi-column sort Extjs has the concept of grid plugins which allows to extend the grid with custom code (such as expander, selection checkbox etc.). The extjs learning center contains a page with a lot of info and links to other info related to grids: see here.	Smartclient has the following types of grid views: ListGrid: shows values as rows (standard grid) TreeGrid: a tree with columns TileGrid: a grid which shows data both horizontally and vertically laid out ColumnTree: a so-called miller tree CubeGrid: for analysis purposes (not part of the LGPL offering) Smartclient grids are bound to data sources. Supported features: sorting (single column) live grid (meaning scrolling) column based filtering frozen columns single/multiple/range select grouping by columns add items to column header menu column header grouping column resizing column re-ordering Some extra features available in Smartclient: client side query builder, see here Adaptive filter, automatically filter on the client or the server, see here Summary/Formula columns: an end user can dynamically add computed columns which are based on values of other columns, see here Extra feature in the short term future: nested grid/form in a grid, see here
Editable Grid	Dojo supports cell editing, cell editing is simple to enable (just set the editable option in the column definition). Row editing does not seem to be supported. As this cell editing is fairly automatic it is unclear how easy it is to add our own widgets as cell editor (for example a picker field). There were no examples which showed how to add a new empty row to a grid which can then be edited as a whole, without row editing, adding new rows seems difficult. There is not much information on how an edit action interacts with the client-side datastore. Apparently the grid is directly connected to the datastore, so to save/persist a change of data to the server one needs to save the store, impacting other views on that same data store.	Is supported out of the box, two modes are supported: single column editing (with flag that a cell value has changed) row editing, edit a complete row with save/cancel buttons	Is supported out of the box: edit by row edit by cell Smartclient demoes also show some other behavior like auto-fit new rows or massupdate. The smartclient documentation contains a page specifically on editing in a grid, see here. Interesting topics covered there: how is validation done (cell/row, when) how are unsaved-invalid values in a grid handled keyboard navigation Cell editors can be defined globally (based on the type of the field) or on the grid itself.
Edit Form	Dojo provides a lot of form elements (checkbox, radiobuttons, validation input text, date picker, ...). Pros: All dojo form elements can be customized. A lot of pre-existing validation rules and possibility to validate against a regular expression. Cons: Very small look differences with different browsers. Related urls and examples: Dojo Prototype http://demos.dojotoolkit.org/demos/form/	Standard support for collapsable fieldsets and hierarchical form structures (panel in a panel in a panel), see here Support for all relevant primitive field types. Events between fields can be handled through events on field objects. All extjs objects support high-level (for example field valid) to lower-level events (postrender). Many examples of layout managers. Auto-handling of layouting of checkbox/radiobuttons, see here. Form read through Reader concept (JsonReader/XMLReader) Form submit to an url or through writer objects (JsonWriter/XMLWriter) Validation: Clearly defined, extensible validation framework standard validation includes: regex, formatting (date/numeric), mandatory, text length (min/max), number max/min, email, url. validation can be done at blur or at a specifically set event (validation can be delayed slightly), a field can have a specific styling set when it is invalid. validations are defined through so-called vtypes. A vtype contains both the validation function, the error text and an input mask (a regex). New vtypes can be added. Very usable (configurable) standard way of showing validation errors. Apparently setting focus on the first editable field requires custom work (to find the first field to focus etc.). Compared to the maturity of the form support it seems strange that this has not been solved in an easier way. For more info see these posts: Focus on first field Focus on first field FAQ on forms in extjs, see here.	Logical layouting of label/field combinations in a form, described clearly here Advanced auto space handling when layouting, see here for examples. Extendable type system, custom types can be added inheriting from standard types, validators can be specified on type level. Support for all required primitive field types. Forms are connected to datasources, change of values in the datasource are automatically broadcasted to forms. Saving, remove, update are done through the datasource. Forms can be spread over different tabs/visualization components. The ValueManager manages values spread over different visualization containers (see here for an example. Validators are defined in the type definition, data model definition or in the editor component. Validators can be extended/new ones can be defined. Validation messages can be defined in the data model definition or in the component definition. Value transformation (to follow a phone number patter or casing for example) supported Support for first focus field.
Master-Detail	Supported in dojo using a grid and a form which is loaded when a row selection event occurs in the grid. Overall it seems very possible to build complexer form structures (grid in a form with tabs, etc.) using dojo.	Same as dojo, see here for an example.	Same as dojo, see here for an example.
Reference Field	Dijit provides a quality combo box widget with multiple features. Pros: It has autocomplete features. Images can be added as an item or with an item. Its data can be loaded from an static array or from a data store (emulating a suggestion box). Validation capabilities (required). Cons: The deploy arrow belongs to the skin (customizable) but the scroll of the list (if there are a lot of records) belongs to the operating system. It would be nicer if both were customizable. Wrong behavior pressing up and down keyboard cursor arrows: instead of going to the next record it just deploy the list and the focus starts from the first item list (instead of the selected one). Related urls and examples: http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/_autoComplete.html http://www.dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/form-validation-specialized-input/auto-completer http://www.developer.com/design/article.php/10925_3719341_2 http://www.ingeniuz.com/wp-content/ejemplos/dojo_combobox/	The Extjs combobox provides features like autocomplete, remote-loading and paging. List items can be displayed using a template. A combobox is filled using a data store. Examples Examples for basic combo (auto-select etc.): Combo with paging and template to view See this faq for more information on specifics of using a combobox with remote data stores. The Extjs combobox provides enough features for implementing a suggestion reference field. A separate selector popup is not provided by extjs and would be a custom development (the extjs TriggerField can be used as a base for this).	Smartclient offers a select/combobox field which can be loaded from a data source with scrolling support. The select list can show multiple columns. For the rest the visualization of the select list seems limited. The filtering (while typing) is done through filtering on the datasource (on the client or server). In addition a select field can have a picker icon which can be used to implement a popup button. The nice thing of this picker icon feature is that it automatically follows the field in form layouting. Based on the forums and their quick start Smartclient identifies a picker component is a component which is often customized/created by Smartclient users. See here for an example.
Keyboard handling	Dojo provides a way to define key actions based on events Pros: Semi-standard way to define keyboard shortcuts with the same philosofy of "plain"/standard javascript. Complex widgets have its own keyboard shortcuts embedded. There is a library, dojo.keys, to manage special keys capture process. Cons: Seems to have problems with Safari. Related urls and examples: http://api.dojotoolkit.org/jsdoc/1.3/dojo.keys http://turboajax.com/dojo/key_compat.html http://www.dojotoolkit.org/forum/dijit-dijit-0-9/dijit-support/keyboard-shortcuts-and-safari http://stackoverflow.com/questions/1189475/is-keyboard-arrow-key-navigation-supported-in-dijit-tree-1-3-on-safari-1-3-sa	Extjs provides a standard way to define key actions. Custom navigation key access (left, right, up, etc.) supported through the Ext.KeyNav object. The Ext.KeyNav object can be created to bind key strokes to specific function calls, components (like a grid) have a nav member which has the Ext.KeyNav object. The Ext.KeyMap allows you to bind a javascript function to any key. A KeyMap can be assigned to any element in the dom tree (the complete dom document, an invididual tab, etc.). Some links: Grid and KeyNav Switch tab using a KeyMap Extjs blog on keyboard handling	Smartclient has key handling defined on the ui component, in a menu or globally. The ui component can get focus through the access key, a menu item can be clicked through a short cut and there is a global binding of a key to a function to call. Detailed tips on how to do window/tab specific global key handling: see here. specific components (like a grid) have navigation key actions defined Full Aria support (also for screen readers) Support for autofocus when a form is drawn or displayed Menu items components support a keys feature, which means that if a key is pressed then an onclick on that item is selected All components support an access key property
Event System	Dojo provides a complete event system. More information can be found here: http://www.dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/event-system http://www.dojotoolkit.org/book/export/html/88	All Extjs components inherit from the base type Observable, this is a type which supports publishing/firing of events and registration of listeners. Components fire many different events from UI-related (before rendering, after rendering), component specific (for example, valid, after validation), row click, header click. Most components have around 20 events which are fired and which can be caught and acted upon. The event system seems very complete and mature and is the basis for all kinds of dynamic behavior in the ui (disable button on row click for example).	Smartclient's event system consists of generic event handlers at page level. Application code can register these generic event handlers. An event is first published to the page level event handlers (which can cancel them) and then to the widget involved in the event. Each widget has specific methods which are called when an event occurs. The event methods can be easily identified in the api documentation. Overall the Smartclient event system seems less generic than extjs's and is also mostly targeted at lower-level events (mouse clicks, etc.)
Widget Support	Dojotoolkit is divided in three items: Dojo Base: the JavaScript Toolkit Dijit: widget system DojoX: extensions and extras An example is worth thousand words, so check this link to have a complete idea of all existing widgets http://dojocampus.org/explorer/#Dijit	Overview of Extjs Widgets: Chart: bar, column, line, pie, StackedBarChart, StackedColumnChart Form/Field: formpanel, checkbox, datepicker, numberfield, textfield, textarea, timefield, triggerfield, multi-select, file-upload Grid/Column: datecolumn, numbercolumn, templatecolumn, gridpanel, editorgrid, propertygrid, groupingview Layout: absolute, accordion, anchor, border, box, card, column, container, fit, form, hbox, menu, table, toolbar, vbox Others: tabpanel, statusbar, quicktip, progressbar, listview, tooltip, splitbar, window, xtemplate, messagebox, pagingtoolbar, button, buttongroup, colorpalette, container, dataview, flashcomponent, history, boxcomponent Tree: treeeditor, treefiler, treepanel Drag and drop components	Grid: ListGrid, Hilite, TreeGrid, DetailViewer, TileLayout, TileGrid, TileRecord, ColumnTree, DOMGrid Calendar (like google calendar) Layout: TabSet, Window,Layout,HLayout,VLayout,HStack,VStack,LayoutSpacer, Toolbar,ToolStrip,SectionStack,Splitbar,ImgSplitbar,Snapbar Form fields: FileItem, FormItem, CanvasItem, TextItem, BlurbItem, ButtonItem, PickList, SelectItem, SelectOtherItem, CheckboxItem, NativeCheckboxItem, HeaderItem, SectionItem, HiddenItem, StaticTextItem, LinkItem, PasswordItem, RadioGroupItem, ResetItem, DateItem, SpacerItem, RowSpacerItem, SubmitItem, TextAreaItem, AutoFitTextAreaItem, TimeItem, ToolbarItem, UploadItem, ComboBoxItem, MultiFileItem, SpinnerItem, SliderItem, ColorItem, PickTreeItem, NestedEditorItem, NestedListEditorItem, RichTextItem Control: Prompting, Dialog, Button, IButton, Progressbar, ImgButton, StretchImgButton, Slider, Hover, Menu, MenuButton, MenuBar Other: ImgTab, Browser, ViewLoader, HTMLFlow, HTMLPane, StatefulCanvas, Img, StretchImg, Label, Scrollbar, ScrollBar, Canvas, EdgedCanvas, RichTextEditor, GridRenderer Chart/Cube components (part of the non-LGPL software)
Buttonbar Toolbar Menu	Dojo provides a simple Toolbar widget Pros: It is a widget and can be mannaged as it. Cons: Quite simple display. Overflow moves the toolbar line to a next row (no horizontally arrows capabilities). It seems that the final size of the widget could be different depending on the browser. Related urls and examples: http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/test_Toolbar.html	Supported out-of-the-box: button bar/toolbar with multi-level menus, toggle buttons, split button, see this example toolbar overflow multi-column/row button bars supported, see here menu's and buttonbars can contain fields like select boxes, date picker etc. different button types support (image, text, image + text, split button), see here status bar component to add status bar to any panel and to the window	The toolbar is implemented with the Smartclient Menubar. It supports standard buttons, menus, etc. Also form fields are supported but they need to be wrapped in a DynamicForm. Smartclient supports hierarchical menus and actions on menu items. It looks similar to extjs but slightly less advanced/generic. Some examples: toolstrip dynamic items submenu
Performance Client-Side		Client performance testing has been done by creating a page which made it possible to add new tabs to the page. The tab-ohttp://extjs.com/deploy/dev/examples/form/dynamic.htmlpen function created tabs with a form, an editable grid, a grid with 40 columns or a paging grid. The test itself consisted of opening 40-50 different tabs and checking loading times and responsive. Different combinations of tab-types have been tried. The overall result was that even with >40 tabs open that responsiveness stays normal (the same as with 1 tab), opening new tabs was quick and did not take more time when many tabs where already open. Also the interaction with the grid/form/fields on one tab when 50 tabs were open did not show a delay. Switching tabs worked fine to. The example can be tried as follows: install the extjs Openbravo module: https://code.openbravo.com/erp/mods/org.openbravo.userinterface.extjs/ start Openbravo visit this page: http://localhost:8080/openbravo/ext-3.0.0/examples/ob/tabs-perf.html click the add-tab buttons and check the performance. The conclusion is that extjs on the client seems to work fine with many open grids/forms. Topic found on the extjs forum: A forum post on extjs complaints about performance. But when looking at the speed of loading the example it shows fine: example with around 10 tabs with 10-50 fields each	The statement made by Smartclient is that performance (for the user) is not soo much (or not only) related to rendering performance but also related to the number of requests from the client to the server. See the adaptive filter demo for an example of what they mean. See here for a discussion about downloadsize of extjs versus Smartclient: forum post on Smartclient forum comparing extjs/Smartclient download size
Skinnability	Dojo provides a skin infrastructure based on standard css Pros: There are three supported themes: tundra, soria, nihilo More css can be imported and change an item appearance just changing it class attribute Cons: Since it is a system based on css and each browser has its own interpretation of a css class (CSS 1/2/3...) the appearence could be different depending on the browser Different upgrades of dojo could change their css classes (and their supported themes), so if a custom theme is developed for standard dijit widgets, it should be reviewed on each dojo update. Related urls and examples: http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/themeTester.html http://www.dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/themes-and-design/overriding-and-combining-themes http://dojotoolkit.org/book/dijit-functional-spec/dijit-styling-theming	Extjs has about 40 css files. Each main component (form, tab, panel, progress..) has two css files: one for the structure and for the colouring, font and images. This separation clearly facilitates changing the style without changing the layout/structure css styles. Changing the colour/styling is much more easy then the structure/positioning css styles. This because positioning css styles probably influence the layout manager and other layouting logic incorporated within extjs. By separating structure and visualization in different css files it is possible to change the colour/styling without accidentally changing the positioning. This separation of visualization and structure in different css files has been introduced in the 3.0 release. There are forum posts from before 3.0 which identify skinnability as an issue (lot of work). That's why most users just use the theme provided by extjs it seems. However, it is possible that customizing the style is now easier than before. ExtJS Lack of Themes: A weakness in Ext? Ext JS Skin demos	Smartclient has paid attention on skinnability and talks about it specifically in their manual (see here). The default Smartclient skins do certainly not feel as sharp as the ones from extjs. On the other hand Smartclient is delivered with about 7 different skins. This shows (better than extjs) that skinnability is possible.
Documentation	API: http://api.dojotoolkit.org/ FAQ: http://www.dojotoolkit.org/support/faq Online books: http://www.dojotoolkit.org/book Store books: http://www.amazon.com/gp/search/ref=a9_sc_1?rh=i%3Astripbooks%2Ck%3Adojo+toolkit&page=1&keywords=dojo+toolkit&ie=UTF8&qid=1252489744 Forums: http://www.dojotoolkit.org/forum Demos: http://demos.dojotoolkit.org/demos/ Training, online lessons, tutorials: http://dojocampus.org/	Excellent and complete API documentation Good/detailed FAQs Good examples (easy to understand but still showing the more advanced aspects) Books Learning Center Forums Compared to the rest of the documentation the number of howto's and tutorials seems limited	Excellent, very complete, browseable api description (see here). The api description combines both api reference, examples and how-to-use information. Nice concept descriptions available, here Good, very complete and very broad set of examples available: here forums, smartclient employees seems to be more pro-active on forums than extjs Very good quick start guide available (80 pages), here No books available
Server-Side (data) Integration	Dojo has the concept of a datastore, the data store is the data provider for dojo/djit components such as the grid. There are different data stores implementations. The most interesting one is the jsonrestdatastore. This datastore reads/writes data from a remote service by sending/receiving json data. The data in a dojo data store is a real object (so not a flat list of values), meaning that data objects can refer to eachother. It is even possible for a data object to refer to data retrieved from another data store. Some really nice features: Dojo data stores support lazy loading. If a certain property of a data object is referenced (to be displayed in a grid/combobox) and it is not loaded in a data object then an asynchronous request is executed to retrieve that data from the server. It is possible to add methods to objects returned from a datastore, this makes it possible to return/construct objects with meaningfull domain specific methods. The datastores also have explicit concepts for paging and sorting. See also these links about the json rest datastore: some-rpc-with-your-jsonreststore effective-use-of-jsonreststore-referencing-lazy-loading-and-more http://www.sitepen.com/blog/2009/01/26/new-in-jsonreststore-13-dates-deleting-conflict-handling-and-more/ One missing feature in dojo data stores (mainly visible in a grid) is that it is not possible to automatically resolve dot path type of paths, for example: order.customer.name will not work in a grid with a json data store. See this issue. Overall the jsonrestdatastore concept seems mature and there are several tutorials and blogs covering this data store. The json rest data store is however not described/mentioned in the json book or the api doc.	The extjs data api section provides an overview of the main concepts involved in client-server integration. The main data provider of a component in extjs (grid, field, combo, etc.) is a so-called Store. There are different Store implementations (xml, json for example). A Store combines a DataProxy, a DataReader and a DataWriter. A DataProxy defines the data source of the data (the url for example), it defines both read and write sources. A DataReader is used to convert the content from the DataProxy into extjs Record objects. A DataWriter is used to write data from the store to the DataProxy. There are different implementations for the proxy, reader and writer. Next to the data integration there is Ext.Direct which provides an extjs specific way of calling server side methods from an extjs client. Related links: Ext Direct Blog Series on Integrating with Seam	The client-server integration is viewed by Smartclient as one of their main strong points. Smartclient supports a model-driven approach where ui behavior is as-much-as-possible derived from the information in the client side domain model (for example editors, validation, etc.). The central concept is the DataSource. A DataSource is data-provider-independent description of a set of objects that will be loaded, edited and saved within the user interface of an application. Implementations of datasources: json data source, xml data source, rest data source. DataSources are then bound to databinding-capable UI components (form, grid, etc). Each DataSource consists of a list of fields that make up a DataSource record, along with field types, validation rules, relationships to other DataSources, and other metadata. Some highlights (and differences with extjs): the datasource definition is very close to the application domain model, it supports an extendable type system (for example adding a currency simple type which is used throughout the model) the objects returned in the datasource are real objects which support dot-notation access of properties. Objects can also have additional (optional) operations which influence the UI (for example canEdit). Grids/forms can access data in a datasource using a XPath notation, for example to show the name of a referenced object. Datasources can be related to eachother, for example an Order datasource can refer to an Orderline datasource, using foreign keys, this makes it possible to easily load related data, for example when clicking an order in a grid then the order lines are automatically retrieved from the order line datasource to be displayed in an orderline grid. It also means that an object is instantiated only ones in the client making it possible to automatically update different ui component if this one object is updated. Datasources (and related classes) support automatic update of the ui when insert, remove, update actions are performed. So changing values in a form will result automatically in updated grids etc. The advanced part is that the update of other ui components only occurs if the server responded that an update action was successfull. This applies to insert, update and remove operations. Another component of the client-side data integration is the ResultSet. The ResultSet is a list implementation which supports scrolling/paging and filtering (using an advanced criteria object). It is used by for example the grid to (pre-)load data and to only load data for the current page. The ResultSet also automatically takes care of updating the UI when actions occur on the data source. For example say that a grid shows data based on certain criteria and another ui component adds a new record to the datasource, then after the server-insert-request returns successfully it is automatically added to the ResultSet and displayed in the UI. http://www.smartclient.com/docs/7.0rc2/a/b/c/go.html#class..ResultSet http://www.smartclient.com/docs/7.0rc2/a/b/c/go.html#group..clientServerIntegration
Internationalization	Dojo provides the most information (compared to the two others) on internationalization. See here. The dojo documentation discusses resource bundles, local, bi-directionality, encoding. Formatting is not explicitly discussed as this can be handled by formatters in widgets.	Standard formatting support for all fields Internationalization of labels supported through extension of components with translated labels (a valid approach) rtl/ltr support is not complete, a community effort has been done, the quality of this is unknown at this point of time: Will ExtJS 3.0 fully supports RTL ? RTL community effort shows many examples of extjs 3 in rtl version	see this part of the docs, here. date formatting is done, formatting for other fields needs to be done through so-called simpletype definition (for example defining a currency type, etc.). labels: labels of error messages and labels in titles/headers need to be i18n-ed explicitly, seems visible, can maybe be done by pre-processing the javascript before delivering to the client. rtl/ltr support is there but not for all skins/components, overall looking at the forums it seems to be usable, some quotes from smartclient: SmartClient includes beta quality support for RTL langauges, with known issues in certain skins and components. To enable, simple set dir="rtl" on the HTML element ListGrid columns, horizontal layouts, scrolling directions, etc will reverse order automatically
Testability	Openbravo has experience in testing dojo widgets using selenium. In practice the same issues as with the other frameworks will be/are encountered.	Not much information on testing of extjs is available. A blog post from extjs about using selenium and extjs here but with critical recent remarks that there are many details which prevent thorough testing through selenium. Here is an article describing how to work-around some extjs-selenium incompatibilities. Has a link to this article describing how someone accomplished testing of extjs using selenium. There is an older community effort around extjs and jsunit but this seems to have been quiet since 2007. So even though there is some information on testability of extjs it seems clear that this topic requires extra attention.	Smartclient is open about the difficulties with using selenium and other auto-testing tools for testing their apps, see here. The way they describe it, implies that extjs and smartclient have the same issues with using the tools (namely that ria frameworks and auto-testing tools in general have a mismatch).
Extendability	Dojo provides two ways to extend dojo widgets: extend and mixin. The dojo api documentation is not complete and does often not provide enough information, this makes it more difficult to extend/understand widgets and their behavior.	Extjs has a clean component hierarchy which afaics is easy to extend. Extjs provides a specific of extending the current components without changing the original code: Ext.Extend See also this post on Application Design and Structure.	See here for a section in the Smartclient docs about extending Smartclient. Examples show extending current components but also adding new types to the type system.
Other Topics	Dojo has some backbutton support (see here), but it seems that the actual logic of handling the back button needs to be performed by the application. Dojo has many other modules (charting, audio/video, etc), these are provided by different committers, therefore the quality is uncertain, see here	explicit support for client side state saving of all client component's state, see this example. State saving/retrieving is extendable so that for example search values could be saved in a cookie. See the Ext.state package. Support for browser backbutton handling Client-side templating support, for example render a list of javascript data objects using a small html template string	support for back button (the SmartClient demo's all support back button) advanced client side debugging tools, see here and see here support for really dynamic client side (see the examples, you can change and debug the examples in the browser directly), see here for an example client side state saving supported some-what for tree/grids, the state of a grid can easily be retrieved and set, the state saving needs to be done by a custom function. explicit support for printer friendly display, see here Non-LGPL features which maybe necessary: network performance module Interesting Non-LGPL features: Visual builder: build the UI in a web browser using visual tools analytics UI: user interface components to show cubes and other an Extjs-smartclient comparison: on the smartclient forum on the extjs forum ajax framework discussion, see posts further below which give cons/pros of extjs and smartclient
Questions		Setting focus on first field seems to need manual work (this while the rest of the framework seems to cover many things)? In dojo the objects read from a client store are real objects with references between them (using json referencing) and lazy loading of objects when accessing properties of referred-to objects. Does extjs have something comparable? The following grid features are not supported in extjs standard it seems, are there plans to support these and when: grid filter scrolling multi-column sorting column header grouping (still planned for nov. 2009?) row header (still planned for nov. 2009?)

Summary

Dojo is one of the most known in the community (a lot of commercial books about it)
Dojo has the best license for us
Dojo is the fastest
Dojo has the worst widgets (I think we would have to do our own widgets)

Extjs has a much nicer default theme than Smartclient.
Extjs demoes are snappier and faster than Smartclient, Extjs is smaller, seems to load faster than Smartclient.
Extjs component architecture/class hierarchy structure seems more generic than Smartclient's. This is also seems to be visible with the flexibility of menu/toolbars, templating and expandable comboboxes (meaning that components can easily be embedded in eachother).
Extjs seems very event based, the event system is implemented in the root of the system. The event system seems much better/more detailed/extensive than Smartclient's.
Extjs seems to have a better traction when looking at number of forum posts, books
Extjs api documentation is better visualized, easier to read.

Smartclient seems to be more mature, there is more attention for detailed functionality in the documentation.
Smartclient components are more feature-rich and and more complete.
Smartclient documentation is better, next to api there is more descriptive texts and a good quick start guide. One mayor draw back for Smartclient is that there are no books available.
Smartclient has a friendlier license.
Smartclient has much better data model integration with using model information for visualization, on the client with support for references between objects on the client and update of ui after successfull server-side updates.
Smartclient seems to have more attention for visualizing large datasets, just looking at their documentation, responses in the forum etc.
Smartclient forum responses are more detailed and give more information than extjs.
Smartclient has interesting additional features (non-lgpl) not delivered by extjs (analytics, performance module)
Smartclient has at least some officially published support for lrt/rtl, text formatting seems less advanced though.
Smartclient implement its own scroll (when needed) in all widgets, so there is no browser/SO dependency in this aspect

Retrieved from "http://wiki.openbravo.com/wiki/ERP/2.60/Projects/UI_Technology/Analysis_extjs_dojo_sc"

This page has been accessed 23,682 times. This page was last modified on 16 September 2009, at 03:03. Content is available under Creative Commons Attribution-ShareAlike 2.5 Spain License.