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

Re: Dojo tabs demo / using dojo in LSMB



Not having used the other frameworks I really can't comment on which is more suited to the task. But I've wanted to change the UI since I started using it, some things just confuse the hell out of my accounts girl. With luck I'll get some free time and have a poke about with what you've done.


Lyle

On 28/07/2013 18:27, Brian Wolf wrote:
I've develop with Dojo, Prototype and jQuery.  Each has its strong points.  While jQuery is (perhaps most) popular, with so many developers, its design patterns are varied (not unified), somewhat like a quilt.  Dojo is far more comprehensive in design from one module to the next, with similar architecture.  I found Prototype easiest to learn.

I completely agree that we should replace frames with a dropdown menu system.

I also agree with John that Dojo has good, in-browser data presentation that can be synced up with via AJAX with a database. 

Thanks.
Brian

Brian Wolf
Phone: 410.367.2958
Email: ..hidden..
Try out Activus Secure Payments™, our recurring payments application.
On 07/28/2013 01:14 PM, John Locke wrote:
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!

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