[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

Re: Dojo tabs demo / using dojo in LSMB



Hi,

The problem, in my view, with jQuery/jQueryUI is how much more work you have to do to implement it. With some clever hookups, we can write our own re-usable components and get contributions to finish hooking things up that don't involve using Javascript.

To hook up the tab container, most of the changes are adding some HTML attributes to the various containers - e.g. on the wrapper div, a data-dojo-type="dijit/layout/TabContainer" and on each tab, a data-dojo-type="dijit/layout/ContentPane" and a title. Aside from that, all that's necessary is to include the elements in use on the page and call the parser.

Dojo plays extremely well with other libraries, too. It does not change any prototypes, does not pollute the global namespace, and as a pioneer in the AMD loading pattern, only loads a minimal amount of js to the browser.

I'll post my code to github shortly, so you can see what changes are involved with adding these things.

For example, making the date box on the Journal Entry page a nice drop-down calendar involved two changes:

1. Add the dijit/form/DateTextBox to the modules loaded on the page
2. Add data-dojo-type="dijit/form/DateTextBox" to the HTML input element (the LSMB preprocessor doesn't like hyphens, though, so I did change this to dojo_type in the UI templates)

... that's it!

The account selector widget I bundled into a custom widget complete with its own data feed, so turning any input into an account selector now involves the same exact two steps, except using "lsmb/accounts/AccountSelector" instead of the date widget. (And at least for now, there's a couple steps to get Dojo loaded on the page in the first place).


But in my view there are much better reasons to add Dojo: there are some opportunities for DRASTIC ui improvements. I'm picturing doing away with the frame, using a tree widget for the left hand side, and providing a persistent, context-aware search area for finding transactions/parts/orders/reports/etc. That can load results into one tab, and then we can load individual detail into other tabs that can be closed when you're done but kept open for comparison.

There's a really good grid available with infinite scrolling, great for looking at individual ledgers -- see http://dgrid.io. And there's a data-driven form handler, that would really streamline data entry on things like the contact addresses pane/contacts pane, which would let you select a row, populate the form from that data, store changes on the browser until you're ready to save the whole thing. None of this cumbersome page reloads.

The huge advantage Dojo has over other toolkits is its data management capabilities that are all done in-browser, and can then be sync'd up with the server through some lightweight rest calls using json. With jQuery, you have to wire all this together yourself, rather than simply connecting a widget to a data store.

And hey, there's also a great chart toolkit that can leverage the same data structures. See https://www.freelock.com/blog/john-locke/2013-06/how-structure-dojo-based-dashboard-drupal for a more Drupal-centric description of what we're doing with charts -- it would be fantastic to get some of that going in LSMB too.

Cheers,
John Locke
http://www.freelock.com


On 07/28/2013 07:34 AM, Lyle wrote:
On 28/07/2013 13:31, Brian Wolf wrote:
Each Javascript library has its strengths and weaknesses; Dojo and
Prototype / Scriptaculous are no exceptions. I've implemented some
custom screens for LedgerSMB using Prototype / Scriptaculous, already
in production. Do I understand that LedgerSMB will now be distributed
with Dojo? That decision does have some impact.
With jQuery and jQueryUI being more popular, using them would
potentially create a larger pool of potential contributors.


Lyle

Thanks.
Brian

Brian Wolf
Phone: 410.367.2958
Email: ..hidden..
Try out Activus Secure Payments™, our recurring payments application.
Demo at http://demo.activustech.com
On 07/28/2013 02:57 AM, Erik Huelsmann wrote:
Hi John,

Just a moment ago, I showed the demo you set up with Dojo tabs for
the ECA screen to Chris. We both like it a lot.

Chris said "If he commits this, I can try to move us away from
scriptaculous." However, if you have time to do it, that's very much
appreciated as well. The only thing that *I* know that needs doing is
replacing the accounts drop-down. The code for that is in
UI/lib/elements.html.

Thanks!

--
Bye,

Erik.

http://efficito.com <http://efficito.com/> -- Hosted accounting and ERP.
Robust and Flexible. No vendor lock-in.


------------------------------------------------------------------------------
See everything from the browser to the database with AppDynamics
Get end-to-end visibility with application monitoring from AppDynamics
Isolate bottlenecks and diagnose root cause in seconds.
Start your free trial of AppDynamics Pro today!
http://pubads.g.doubleclick.net/gampad/clk?id=48808831&iu=/4140/ostg.clktrk


_______________________________________________
Ledger-smb-devel mailing list
..hidden..
https://lists.sourceforge.net/lists/listinfo/ledger-smb-devel


------------------------------------------------------------------------------
See everything from the browser to the database with AppDynamics
Get end-to-end visibility with application monitoring from AppDynamics
Isolate bottlenecks and diagnose root cause in seconds.
Start your free trial of AppDynamics Pro today!
http://pubads.g.doubleclick.net/gampad/clk?id=48808831&iu=/4140/ostg.clktrk


_______________________________________________
Ledger-smb-devel mailing list
..hidden..
https://lists.sourceforge.net/lists/listinfo/ledger-smb-devel

------------------------------------------------------------------------------
See everything from the browser to the database with AppDynamics
Get end-to-end visibility with application monitoring from AppDynamics
Isolate bottlenecks and diagnose root cause in seconds.
Start your free trial of AppDynamics Pro today!
http://pubads.g.doubleclick.net/gampad/clk?id=48808831&iu=/4140/ostg.clktrk
_______________________________________________
Ledger-smb-devel mailing list
..hidden..
https://lists.sourceforge.net/lists/listinfo/ledger-smb-devel

!DSPAM:51f53155296856599388379!