Comments (11)
  • Add a Comment
  • Edit
  • More Actions v
  • Quarantine this Entry

1 justin-m commented Permalink

Hi Tony, <div>&nbsp;</div> Thanks for this tutorial. I'm not a developer, but I could still follow along. Some of the references to dojo is uncompromisable to me since I don't know javascript. I enjoy using Maqetta drag and drop HTML5 canvas to make interactive prototypes. <div>&nbsp;</div> Can you help me or point me in the right direction about how I can use other javascript libraries within Maqetta. I like Twiiter Bootstrap and they're using some jQuery plugins. Since the bootstrap.js requires jQuery would it be as simple as putting all the javascript into app.js ? <div>&nbsp;</div> Thanks for your help. <div>&nbsp;</div> Regards, <br /> Justin

2 JonFerraiolo commented Permalink

Justin, <br /> Thanks for comments and questions. <div>&nbsp;</div> The good news is that we designed Maqetta with a plug-in approach to JavaScript libraries, widget libraries and CSS themes. However, with the current release, you need to be a programmer to take advantage of these extensibility points. You need to have good knowledge of JavaScript coding (along with some knowledge of Java and OSGi bundles), and you have to create a custom build. <div>&nbsp;</div> I expect we will add alternate plug-in approaches before too long that will allow non-programmers to add custom widget libraries and themes to an existing implementation of Maqetta, without requiring any JavaScript or Java coding skills, and not requiring a custom build. I have no concrete estimate on when this would be available, but it is a top requirement for lots of users. <div>&nbsp;</div> Jon

3 MaqettaUser commented Permalink

Hi Tony, <br /> I am currently trying to create a UI that has an event logger and from what I can understand a GridX widget would be good for this!? As usual, I am relatively new to Javascript, Maqetta &amp; Dojo but I found your above tutorial on GridX really helpful. Unfortunately, using the example above I am not able to append new lines to the bottom of the grid? I tried: <br /> var myNewItem = {unique_id: 4, id: "NY", label: "New York"}; <br /> store.newItem(myNewItem); <div>&nbsp;</div> but it didn't work. Any help that you could give would be much appreciated? <div>&nbsp;</div> Best regards, <div>&nbsp;</div> Matt <br />

4 tonyerwin commented Permalink

Hi, Matt, <div>&nbsp;</div> Thanks for your question. The key here is that Maqetta creates the data store for GridX as an ItemFileReadStore, but if you want to dynamically add/remove rows, an ItemFileWriteStore needs to be used. <div>&nbsp;</div> So, I modified the sample JavaScript to create an ItemFileWriteStore for the GridX. And, then I can successfully make the store.newItem call you wanted to make. <div>&nbsp;</div> I've included the updated JS below. I hope this helps. <div>&nbsp;</div> Good luck, <br /> Tony <div>&nbsp;</div> <div>&nbsp;</div> /* <br /> * This file is provided for custom JavaScript logic that your HTML files might need. <br /> * Maqetta includes this JavaScript file by default within HTML pages authored in Maqetta. <br /> */ <br /> require(["dojo/ready", "dojo/dom", "dojo/dom-style", "dijit/registry", "dojo/data/ItemFileWriteStore"], function(ready, dom, domStyle, registry, ItemFileWriteStore){ <br /> ready(function(){ <br /> // logic that requires that Dojo is fully initialized should go here <div>&nbsp;</div> // Create new data for data store <br /> var myData = <br /> { <br /> identifier: "unique_id", <br /> items: [ <br /> {unique_id:1, id: "IN", label: "Indiana"}, <br /> {unique_id:2, id: "MN", label: "Minnesota"}, <br /> {unique_id:3, id: "TX", label: "Texas"} <br /> ] <br /> }; <div>&nbsp;</div> // Need to change our store to ItemFileWriteStore because we want to dynamically <br /> // add rows <br /> var store = new ItemFileWriteStore({ <br /> data: myData <br /> }); <div>&nbsp;</div> // Get reference to our grid object. I set the id to "GridX" using <br /> // the Maqetta properties palette. <br /> var myGridX = registry.byId("myGridX"); <br /> if (myGridX) { <br /> // Tell our grid to reset itself <br /> myGridX.store = null; <br /> myGridX.setStore(store); <div>&nbsp;</div> // Optionally change column structure on the grid <br /> myGridX.setColumns([ <br /> {field:"id", name: "State Abbreviation"}, <br /> {field:"label", name: "State Name"}, <br /> ]); <div>&nbsp;</div> // After 1 seconds add a row to the grid <br /> setTimeout(function() { <br /> var myNewItem = {unique_id: 4, id: "NY", label: "New York"}; <br /> store.newItem(myNewItem); <br /> }, 1000); <br /> } <br /> }); <br /> }); <br />

5 MaqettaUser commented Permalink

Hi Tony, <div>&nbsp;</div> your suggestion worked really well! Thanks a lot for the help, it is much appreciated! <div>&nbsp;</div> Best regards, <div>&nbsp;</div> Matt <br />

6 triessner commented Permalink

Hi Tony, <br /> thanks for you effort, to make maqetta more usable. Nevertheless I'm stuck in the following problem now: I want to Design a database application with maqetta using gridx - tables to show the data. A lot of it already works. I can get the data from a json store (I wrote a small php-script, that accesses my postgresql database and sends json data back to the dojo.store.JsonRest) and the gridx shows the data. Even the sort module works meanwhile :-). But I didn't overcome the problem, that the table shows just the number of rows, that I put in the csv-table during configuring the gridx. As the number of rows in my database are quite big for some tables, or changes from time to time, it is quite uncomfortable to put in so many rows in the csv table of the configuring wizard. Is there any possibility that the gridx reads the number of rows from my json-store at runtime? How can I add VirtualVScrolling? It would be really great if I could get some hints for that. <br /> Regards, <br /> Thilo

7 tonyerwin commented Permalink

Hi, Thio, <div>&nbsp;</div> Thanks for your question. It sounds like you've successfully set a different store on the GridX and are retrieving some of your data. It also sounds like you've been able to attach GridX modules for sorting, etc. So, all that's good. <div>&nbsp;</div> But, offhand, It doesn't really make sense to me why it would only retrieve data up to the count of rows your happened to enter in the GridX wizard. <div>&nbsp;</div> I've not done a lot with GridX and very large data sets, but I was looking at their sample gallery in the GridX toolkit (see gridx/gallery/gallery.html) and they have a sample called "GridX with a huge store(1,000,000 rows)" that might help you (see gridx/tests/test_grid_huge_data.html). <div>&nbsp;</div> It loads in a gridx/tests/test_grid_huge_data.js file which creates the GridX and appears to set the store to an XQueryReadStore. This store is a custom subclass of ojox/data/QueryReadStore they appear to have written to better deal with paging. <div>&nbsp;</div> It might also be useful if you to look at the modules and attributes they set on their GridX instance. <div>&nbsp;</div> So, I'm not sure if I'm being much help here and if this will allow you get further or not... GridX is actually a separate open source project from Maqetta (see https://github.com/oria/gridx ) and the folks there might also have some hints to help you. <div>&nbsp;</div> Thanks, <br /> Tony

8 triessner commented Permalink

Hi Tony, <br /> thanks for your answer. Yes I replace the default store, created by the wizard (ItemFileReadStore_2) by a Cache store, which combines a Memory store and a JsonRest store, which points to my Json-Database php-script. <br /> Here is the code: <div>&nbsp;</div> var userMemoryStore = new dojo.store.Memory(); <br /> var userJsonRestStore = new dojo.store.JsonRest({target: "http://localhost/php/controller-pgsql.php/some_table/", <br /> sortParam: "sortBy"}); <br /> var store = new dojo.store.Cache(userJsonRestStore, userMemoryStore); <div>&nbsp;</div> // Get reference to our grid object. I set the id to "myGridX" using <br /> // the Maqetta properties palette. <br /> var myGridX = registry.byId("myGridX"); <br /> if (myGridX) { <br /> // Tell our grid to reset itself <br /> myGridX.store = null; <br /> myGridX.cacheClass=Cache; <br /> myGridX.setStore(store); <br /> ..... <div>&nbsp;</div> One funny thing is, that if I use just the JsonRestStore (and not the Cache store), the table shows only the last row delivered by the php-script, repeated as often as there are rows in my initial store (ItemFileReadStore_2). <br /> But I'll follow your hint, and put the question to the GridX folks. <br /> Thanks for your help. <br /> Thilo

9 MaqettaUser commented Permalink

Hi Tony, <div>&nbsp;</div> would it be possible to extend this article to add an example of working with a dynamic dijit tree? I have been trying in Maqetta to populate and update (add, delete, refresh) a tree from javascript using json data for a while now but it never seems to work. <div>&nbsp;</div> As before with the GridX, any help would be much appreciated. <div>&nbsp;</div> Best regards, <div>&nbsp;</div> Matt <br />

10 tonyerwin commented Permalink

Hi, Matt, <div>&nbsp;</div> Thanks for your question on dijit trees. Unfortunately, at the moment, I'm spending the bulk of my time on another project and won't have any time in the short-term to develop a more tree-oriented example. <div>&nbsp;</div> It's possible the other guys on the Maqetta team could help you on the Maqetta Users Google Group (especially if you have more specifics on what you tried and what didn't work): <div>&nbsp;</div> https://groups.google.com/forum/?fromgroups#!forum/maqetta-users <div>&nbsp;</div> Thanks, <br /> Tony <br />

11 MaqettaUser commented Permalink

Hi Tony, <div>&nbsp;</div> don't worry about it, I understand about your other commitments. I finally managed to make a break through anyway using: <br /> http://dojotoolkit.org/reference-guide/1.8/dijit/Tree.html#dijit-tree <div>&nbsp;</div> Good luck with the other project and best regards, <div>&nbsp;</div> Matt <br />