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

Re: Dojo tabs demo / using dojo in LSMB



Ok. Code is posted on github for the time being...

Here's the repository: https://github.com/freelock/ledgersmb

Branches:
ledger13 is the current tip of the svn/1.3 branch
ledger14 is the tip of svn trunk
ledger14-dojo contains the current additions to add the dojo stuff that's there so far.

You can see what I've done so far here:

https://github.com/freelock/ledgersmb/compare/ledger14-dojo

... this is so far just a demo setup, took a couple shortcuts we'll need to fix (like the ability to load more than one dojo file in a sane way -- right now it assumes you'll provide a single dojo AMD module that returns an object with an init() method that will invoke the parser).

But now that it's here, adding dojo to more screens is a pretty simple thing. Here are some notes:

* I've defined an AMD package path that maps "lsmb" to the UI directory. So now Dojo will load your js modules if you require them with this pattern:
  lsmb/accounts/AccountSelector -- loads UI/accounts/AccountSelector.js
  lsmb/accounts/init -- loads UI/accounts/init.js
* For the time being, you add Dojo to a page by creating an init module and adding it to the <?lsmb?> processing block at the top of your UI template, using a "include_dojo = [ 'lsmb/accounts/init' ]". This will trigger the template system to add the Dojo.js and require the init module you create.

* Your init module should require any widget definitions you want to use, along with dojo/parser, and return an object with an init() method. The init() method should call parser.parse(). See UI/accounts/init.js and UI/Contact/tabs.js for examples.

* The Dojo parser will populate widgets automatically with values, titles, ids, and names -- you really don't have to do much beyond declare the widget you want an element to load.


So now adding things like drop-down calendars is trivial. Next things I see doing include:

* Intercept the form updates on the Contacts section, post those via Ajax and populate the result, make the list views editable in more of a live way
* Create an account lookup widget for customers, vendors, employees, etc that connects to an appropriate data feed
* Create a parts lookup widget for orders/invoices/quotes
* Move the menu to a tree widget
* Remove the frame, and add some parameter to the page controller to detect whether we're getting an ajax request (return only body) or a page request (return menu tree and body)
* Replace General Ledger reports with a Dgrid that supports paged data, allowing fast lookups on thousands of rows, filtering, sorting
* Add some date comparison widgets for financial reports (PNL, Balance Sheet) to allow side-by-side presentation of several different time periods (e.g. show me last 2 years of data with quarterly summaries)
* Line charts of financials over time/pie charts of data broken out by account/gifi


On those notes, I do find what took me longest on the AccountSelector widget was trying to get a JSON feed of the accounts, since I'm not much of a Perl hacker. I tried using the rest_server.pl system that Chris had started, but could not get that to work, even for the existing Contact class -- it looks like the API has changed enough that the Contact class doesn't have the necessary methods to do a lookup of a contact or a search. I ended up just adding on to LedgerSMB::Scripts::journal because it seemed the most expedient, but a bit messy. If we can get the REST api working as we defined earlier, that can expose so much more richness to the UI with minimal JS programming, if we're using Dojo.

So for the contact lookup widget, parts lookup widget, menu, transactions, main thing I'm looking for is a JSON array of the data -- for parts, contacts and transactions it should definitely support searches and paging. For ledger account lists and menu items, it's better to load the entire json string without searching, because then the browser will cache that (and it's not going to be that big a data set). If someone can assist on the Perl side with getting those web services up and running, I can wire together the data handling on the dojo/browser side pretty quickly.

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




On 07/28/2013 10:14 AM, 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




------------------------------------------------------------------------------
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:51f5519d296851303011669!