I'm starting to work with the GWT editors framework.
My app allows to view some entities, edit them, or create new ones.
However, in each state, the layout of the form is a bit different -
Labels in "view" mode should become textboxes in "edit" and "create"
Some fields are only visible in edit/create mode but not in view mode
Some fields are only editable when creating but cannot be changed later on in edit
The general layout might differ (order of fields, location in the form)
Many, many more...
I know that this is a very very general question - I'm looking for best practices that will be powerful yet flexible to deal with those issues. What I'm afraid of is having to write three different editors...
Maybe you don't like to hear this but I create different editors for each. But finally, that's hardly more to implement than a different UIBinder with corresponding Composite for each editor. The subeditors are the same so it does not comprise that much work at the end of the day;
Related
I don't know if this is the right place to ask this question but I figured I might as well try to get an answer here.
My problem is the following: I'm a huge fan of Bootstrap and all there components so I'm genreally using them in every project im working on. So when I'm using container and container-fluid with different row's in between for sertain content-elements I haven't figured out a way to implement this inside the backend in an user-friendly way.
The way I used to do it was simply use the Grid Elements Extension to simply create containers, row's and col's and implement those within each other in the backend. Works fine, but its a whole lot of work for the user of the site to create content. I don't know if my explenation was clear, english isn't my first language and I don't know how to describe it in another way, but here's a picture of what I'm trying to say:
As you can see there are a lot of elements nested within each other so the user or admin has to actually "know" how bootstrap works to edit content without destroying the layout.
Is there any other way I can achive full flexibility for the content, e.g. a bunch of container's within a container-fluid as a wrapper and another bunch of cols's as children of the container?
I've tried to work with Mask, which seemed to be the solution at the beginning, but in the end I had to create one mask object for every possible way an element could be loaded, so there goes this option..
Does anyone else have this kind of "problem" or is there a simple (or hard, idc) solution I can use?
Thank you guys :)
I understand your "problem". My opinion: As soon as you have a page layout with multiple containers (container / container-fluid) and a flexible grid layout, I guess there is no better way without restricting flexibility or have some dirty logic / code. In some (minor) cases, you can help yourself with layout classes (DB field "layout") and some logic in fluid + a viewhelper to calculate the grid columns (e.g. imagegallery, where you can set the columns in backend and calculate the columns in frontend). But in my opinion, this is the most flexible way.
There are some people who solve this with new content elements and inline relation to its content elements. But IMHO this is more confusing for editors to see a grid layout in the backend and the possibility to flexible add content elements via content element to the container / column of choice.
A small, but effective useful helper for editors is to colorize your grid elements in the backend to help the editor to recognize different grids.
In my experience, editors can handle nested grids better than searching for multiple dropdowns in elements to understand grids.
Offtopic: editors survived templavoila, they will understand grids :-)
i'm new to j2me. how to set form elements (text field ,text box) width,font,alignment and other Gui related properties.
i tried to find solution for setting form background but no success. can you guide me
Firstly, J2ME is a very limited framework.
As far as I can remember if you are just using an item from the basic javax.microedition.lcdui package there is very limited styling available. It allows you to give directives on how to lay the item out on the screen and what the item's appearance mode will be.
An Item is not responsible for where it is placed and is down to the Screens layout management algorithm to place your item on the Screen. For example, the way Items are laid out on Forms and Lists differ based upon how the layout management works.
You can create your own customs items by extending CustomItem and implementing and overriding various functions to get the desired visual effect. This however is a lot of work
and the end result is not always very pleasing. You could also do the same by extending the Form class and overriding the paint methods to get your disered visual effect.
The best way to have control over form elements is to use one of the Widget like frameworks that exist and are built upon these basic J2ME classes. For example LWUIT and J2ME Polish allow you to style items in a very similar manner and layout Items using a CSS box inspired manner.
Although I have no used LWUIT so cannot vouch for it.
I'm fighting to understand the weird behavior of GWT Layout Panels. I'm wondering how GWT translate Layout logic into javascript and html. sometimes we don't get the expected Layout . something under the cover is done by GWT compiler.
the GWT documentation is not clear enough on how Layout is performed under the cover.
is there some good books or tutorials that explains well the GWT Layout issues?
thanks.
I don't know about good books or tutorials but here's a little information that may be helpful.
First, as you may know there's a big difference between the FooPanels and the FooLayoutPanels. These are two different sets of panels that are based on different layout mechanisms. The Layout Panels are the new stuff that seems to be suited better for layouts that have hard-coded sizes, Google Wave style. The older FooPanels (VerticalPanel, etc.) are based on HTML tables mostly.
FlowPanel - this is simply something that outputs your widgets as successive HTML elements in a single DIV. As documented: "A panel that formats its child widgets using the default HTML layout behavior".
DockLayoutPanel - Looking at the code shows that it hard-codes the sizes of the different regions according to what you specify in the children (north, east, etc.)
Finally - my experience has led me to abandon all usage of the Layout Panel system and rely only on HTML and CSS wherever I can. This means using HTMLPanel + UiBinder mostly and sometimes FlowPanel, rarely also some of the other panels.
Trying to understand and battle the Layout Panel system to do things that are not the "default case" was a waste of time. I'm not saying it's the best thing to do, but I just couldn't get the kind of control I wanted without this - especially with regard to elements that should automatically expand vertically. If you haven't already, take note of this from the GWT documentation about Layout Panels:
The panels described above are best used for defining your application's outer structure — that is, the parts that are the least "document-like". You should continue to use basic widgets and HTML structure for those parts for which the HTML/CSS layout algorithm works well. In particular, consider using UiBinder templates to directly use HTML wherever that makes sense.
I'm really struggling with a choice between the GWT Tree widget, which has been a part of GWT for ages; or the new CellTree, which is introduced by GWT 2.1.
The tree I want to present to the user is not particularly large, but I am very concerned about responsiveness.
The data at the nodes of the tree will be editable. By clicking on a node, the user will put the node into edit mode. Editing the more simple nodes will require only a single TextBox or TextArea; but others will involve several widgets, over which I want styling control via CSS.
I'm attracted to the CellTree approach because it seems to offer great flexibility and speed; however, the sample code for CellTree editing deals with only very simple data types: string, date, integer, etc. I don't know if CellTree is appropriate when you've got more complex node-editing needs.
What do you think? Is CellTree the best approach? Does CellTree replace Tree in general? What heuristics can I apply in choosing between them?
I'm using a CellTable with several custom input Cells, including one comprised of many widgets. It works great!
It took me a couple of hours to understand how to implement a custom Cell that could do complex operations - since a single instance of the Cell will flit around the CellTree, pretending to be many instances, you need to understand how it's getting its data and when it is refreshed and rendered. I learned a lot from the source of the DatePickerCell.
I can't speak for CellTree, but the CellTable is very flexible, was easy to program, and saves me hundreds of Widget instances.
Using CellTree is problematic. Because it hasn't good access to view implementation stored in CellTree. It cause problem (ex. for me :D) in making custom handlers for opening nodes with children by clicking on whole parent cell. Of course you can make custom cells by AbstractCell, where you must write own renderer.
I think this widget must be enchanced and more objects must be more visible for users.
Customizing CSS is simple. All what you have to do is extende CellTree.resource and insert own css based on celltree.css class names.
From a design and usability perspective is it best that an edit page mimics the layout of the view page?
Our view page is very dense. The data is tightly packed together, but when editing there are going to be extra controls next to each entry field. If we leave the layout the same it will be overly crowded. Will this cause problems with usability if the fields are rearranged?
It definitely impairs usability. Two hazards of re-arranging fields are:
Confusing users about which field they are editing
Making it difficult for users to find the field they want to edit.
These problems are exacerbated on high-density pages.
There are some times when this is ok. The best example I can think of is where the editor and viewer are different users. Another (more ambiguous) case is a situation where the edit screen needs to be highly optimized for fast throughput.
If possible, you might consider splitting the screen up, or making collapsable regions to give the user (and the screen) a little room to breathe.
In general you want to keep the edit page as simillar as possible to the view page. In general. There are cases where this just doesn't make sense especially if you have to input a lot of extra data that is not shown in the view, which it sounds like is your case.
What I would try and do is make sure you continue to group and order the fields in the same manner as if you were viewing so while they might be in slightly different places at least they would be logically grouped the same.
It depends upon your workflow.
If the user has to go back and forth between edit and view, it will be very confusing to the person, as fields may jump around, they might lose which field they are on, etc.
If your view page is very dense, you might try breaking it up into sections, each with its own edit function. You could have it shoot to its own edit page or be all 'web 2.0' and throw up a lightbox with the section edit form over the view page.
The more that things are similar, typically, the easier it is for a user to use. I don't know what your particular layout looks like but from a general point of view, a crowded view is often hard to look at and cluttering it up with additional controls would make it worse.
As much as I'm not a spreadsheet guy, editing in Excel or similar products is easy because it doesn't clog up the view with lots of controls. The edit panel is the view panel. For my own products, when things are consistent, the users are generally less confused.
I have had a similar problem. What I did was have a View page that lets you see everything, but you need to drill into individual edit pages for logical sections. Within the logical sections the fields are always in the same order (and with the same labels) as on the view page. It's things like this which make your application just feel a bit nicer.
Don't throw everything onto a massive edit page just because they all relate to the same thing in your database model. Break them out into sets that make sense each with 3-7 fields on them.
If they really need to edit everything (like when creating a new thing) then I would go for a wizard approach which steps through through, presents a view-only summary and then lets them save.