I'm extremely new to Grails and Groovy and even web development in general, so if this question seems too asinine, please bear with me, I've always been focused up-to-now on desktop development.
I'm attempting to create a web application that allows users to move objects around (drag-and-drop) on their screen from one column to another. Imagine something that allows users to organize things into various groups and each group has it's own column. Also, the users should be able to create or delete any groups they'd like. (The creating/deleting groups part I've gotten taken care of in the Groovy code).
My question is, how, in the view/HTML code, do I get the site to be dynamic in terms of creating the grid? I need one column for each group, but the dataset of groups that exist will not be static, so in theory I will never know how many columns I actually need. I'll also need to do the same thing for the rows, but I expect that doing it for the rows would be more or less the same as doing it for the column.
Thanks for any help you can provide. Cheers!
UPDATE:
I'm seeing Groovy used in the view to iterate over a list of items and create a dynamic bulleted list like this
<g:each in="${ group }" var = "group">
<li> ${ group.name } </li>
Should I just try something like that to dynamically create a <table> object? That seems like it'd work, but might not be the best way to go about it.
Take a look at JavaScript, jQuery and more specifically, jQuery UI Draggable and Droppable.
Related
For a small in-house project I need to display tabular data grouped by a certain column. It would be nice to be able to expand/collapse the groups. The Group title is a simple text string.
Is there an easy way to accomplish this with standard controls, preferably using data-binding instead of manually populating for example a ListView control?
You may be able to achieve what you need using SubDatasheets in Access.
Another way to display information, if you don't have too many columns, is to use a tree view.
There is even a 100% VBA one!
Lets say I want to make a website in which only one HTML template is used. For example, if one wants to create a new object, he clicks a button, and form shows up, leaving the remaining web page intact. My question is simples: should I use only 1 view to handle all the possible inputs/outcomes or should I have multiple views that handle the same template?
Thanks in advance
You can do one view, but if it starts to get complex, accounting for each possible input and output can become a headache. I suggest you use as many views as you need and then later implement AJAX to present everything as if it's only one-page
Seems like if that is the only thing that you want to do, having one FormView and handling the cases accordingly should suffice. For a given form, if it's not necessary, keeping it to one view is generally a good choice.
I have an app that I'm building which is for completing a work order. The main page shows the details of the work order (site address, what needs to be done, etc.) and then there are a couple of listviews which show product and labour for that work order. At the start, there is no labour nor product attached to the work order, so these listviews are empty. When the employee is finished the work order, they can click Add Labour or Add Product to, well, add labour or product to the work order to reflect what work they've done.
I should point out that the main work order, the labour items, and the products are all distinct records in a database, all connected by the work order's primary key.
My question is about how I've laid this out. Currently, I have 3 distinct pages - one for the main work order, another for adding/editing labour and another for adding/editing product. When I say 'distinct page' I don't mean the <div data-role="page">, I mean, clicking "Add Labour" takes the user to a different website URL entirely.
I'm starting to question my logic in this design. Should I have all three (main, labour & product) on the same page, separated only by the <div data-role="page">? Then, when the user adds labour, it just takes them to that 'page' and, upon hitting "Save Labour" the main div (page) is dynamically updated (the labour listview gets an item added to it).
Not entirerly sure how I should have this built - I'm new to jQuery mobile.
Thanks
First let me tell you, you are not doing anything wrong.
There are 2 common ways of creating jQuery Mobile applications.
Single HTMl / multiple pages
Multiple HTML files
Each way has few good and few bad sides to it. From my experience people usually choose multiple HTML files solution and it is to be expected. Single HTML / multiple pages is a new paradigm created by jQuery Mobile developers and it will take some time for people to accept it as a normal/common way.
Because you didn't say what kind of app are you creating I cant advise you which approach is the best one. Usually if you are creating a classic web page it is best to use a multiple HTML solution. In case you are creating a Phonegap mobile hybrid app it is best to use single HTML file with multiple pages (this will make sure page transitions are smooth).
If you have more questions feel free to ask.
I am generating HTML tables based on SQL statements for a Datawarehouse created through meta table information.
One of the issues I have is some of returned Datatables have 100 plus columns. Is there a neat way of displaying this in an HTML table or a specific design solution. Please note I am looking at the display here. Changing the amount of columns available is not an option. All columns need to be rendered.
Many thanks in advance for input.
I can think of 2 good solutions:
Wrap the whole table with a fixed-width container, and set overflow-x: auto on it. That will cause the table to scroll.
Allow the user to filter out whichever columns he doesn't need to see using JavaScript/jQuery.
Both are possible, the first is obviously easier to implement, but with the second you have more control. Choose your path and if you're stuck, you can ask here on StackOverflow for help.
What you are describing is called datagrid. You definitely should not generate the HTML yourself(as you sad) and instead just bind the result set to any kind of server-side data-grid or use some kind of client-side jQuery datagrid implementation.
https://stackoverflow.com/questions/159025/jquery-grid-recommendations
I'm currently evaluating the combination of jQuery Mobile and PhoneGap. For my application, I need a kind of "inner application" navigation model: A fixed header that contains elements to switch between various contexts and functions, and the entire region below that depends on whatever function is selected. An example: The user selects a customer and can then switch between different data and statistics views concerning that customer. Alternatively, the user can switch between different customers while keeping the same view. Each function / view might again be a rather complex construct of multiple pages with its own navigation.
I think I understand the basic ideas of jQuery Mobile by now, but I'm unsure how to implement this "the right way".
I could do this simply by coding the entire header with the navigation into every single page, but that feels like a really bad idea - lots of redundant code, lots of places to insert tiny mistakes that are very hard to find.
I could try to add all the UI elements for the different views to a single page, hide them and only display the ones that belong to the current function. This doesn't feel right either - I suspect that the DOM would be really large and I suspect that this might cause various (performance) issues.
I could try to create the contents of the page that depend on the function dynamically using jQuery DOM manipulation techniques. This sounds like a good idea, but the individual pages can be really complex, and I'm worried that generating lots of complex HTML code using JavaScript will lead to an unmaintainable blob of code.
I could try to combine the approaches - code the individual pages in the HTML file and then somehow "link" them into the appropriate place using DOM manipulation - but I've never done that and I'm unsure if and how I can get this working.
I could try to put the "detail" page into an iframe - would this work at all?
What is the best / canonical way of implementing this kind of application? Do you know of any tutorials or examples?
Just detach your header and then reattach it to your new page. For instance:
$footer = $("#myfooter");
$header = $("#myheader");
$footer.detach();
$footer.appendTo('#newpage');
$header.detach();
$header.prependTo('#newpage');
$.mobile.changePage('#newpage');
Detaching does not kill all of your button handlers / etc. You will need to keep track of what page you are on or look at location.hash to do different things depending on what page is being shown.
--Greg Frame
Thex Interactive
www.thexinteractive.com
The first way is the easiest way to do it. That's the way i did it too. Also this gives u the freedom to add a button specific to whats in the browsing area for that page.
The second approach will have loads of extra calls which you don't want.
The rest of the approaches are not worth the effort.