View source | Discuss this page | Page history | Printable version   

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

Contents

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:

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:

Editable Grid

The editable grid is a grid with inline editing.

Some cases to check/test:

Edit Form

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

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:

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:

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:

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:

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:

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:

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:

Is supported out of the box:

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:

  • 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:

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:

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

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:

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:

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.

Event System

Dojo provides a complete event system.

More information can be found here:

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

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:

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:

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:

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:

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:

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.

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
  • 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:

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:

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.

  • 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
  • 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:

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:

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

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.