[Ledger-smb-devel] Dojo tabs demo / using dojo in LSMB
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 -- 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=48808831iu=/4140/ostg.clktrk___ Ledger-smb-devel mailing list Ledger-smb-devel@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/ledger-smb-devel
Re: [Ledger-smb-devel] Dojo tabs demo / using dojo in LSMB
Hi, Erik, I've implemented a Dojo-based account drop-down on the GL - Journal Entry form on the same demo site. For those wanting to check this out, for the time being you can see these enhancements at: https://intranet2.freelock.com/ledger14 -- log in with user demo, pw demo, company demo. The tabs are on individual accounts, and the account selector is hooked up to journal entries (along with a date text box). I'd be happy to commit these changes if welcomed... Cheers, John Locke http://www.freelock.com On 07/27/2013 11:57 PM, 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. !DSPAM:51f4c0f4296851152612237! -- 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=48808831iu=/4140/ostg.clktrk !DSPAM:51f4c0f4296851152612237! ___ Ledger-smb-devel mailing list Ledger-smb-devel@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/ledger-smb-devel !DSPAM:51f4c0f4296851152612237! -- 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=48808831iu=/4140/ostg.clktrk___ Ledger-smb-devel mailing list Ledger-smb-devel@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/ledger-smb-devel
Re: [Ledger-smb-devel] 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: br...@activustech.com 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!
Re: [Ledger-smb-devel] 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
Re: [Ledger-smb-devel] 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: br...@activustech.com Try out Activus Secure Payments, our recurring payments application. Demo at http://demo.activustech.com 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,
