I have a smart gwt application which includes VLayouts, HLayouts, DynamicForms, Canvas, etc in a nested fashion.
One form comes inside of another in many places across the application.
But the tab order (Navigation using Tab and Shift+Tab) is behaving in a random order in many places.
Can anyone provide some suggestions for overall archetecture of the application?
For example
Which method should be used vLaout.addMember(myPanel) or
vLayout.addChild(myPanel)?
How to properly nest the components?
should globalTabIndex be used ?
If two forms are added to a VLaoyout, how can I specify the TabIndex to specify which form's components should be focused first ?
I didnt find any proper documentaion in smartgwt website. Please help me. Any kind of suggestions will be helpful.
addMember(Widget widget) shall be used - at least in most cases.
Organize them in logical panels (all components of a form in a form container, all the forms in a layout container and all the layout containers in higher order layout containers)
Depends on your case. You are not very clear on what you want to achieve with it.
DynamicForm is a Canvas. Use focus() at the form you want to be shown firstly focused to the user.
The http://www.smartclient.com/smartgwt/javadoc if very useful to find out about the objects supported methods and actions.
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 know there are many questions concerning this topic but after reading them all I'm even more confused.
I have an application that manages contacts. There are three pages:
Add contact
Show contacts
Modify contact
And now I have no idea what structure to give to my project: should I create three different modules? if so, what would be the best package structure? and how would I call other modules within a page? for example, from the 'add contact' page there should be a button to the 'show contacts' page, and from this one there should be button/links to 'modify contact' and 'add contact'.
would it be enough to add this line to the corresponding buttons event handlers?
Window.Location.assign("showcontacts.html");
(or just create a link to "showcontacts.html" if it's the case)?
GWT is not suited for applications with multiple pages. What you can do is
create a page with multiple div's. Create the links on the top of the page. When any of the link is clicked you can then show or hide divs as per your need. This is how I had done it for a different app.
Hope that helps
To allow multiple pages to be selectively displayed within a single module, I use one of two techniques:
use a SimplePanel or one of its
derivatives (e.g. LazyPanel,
ScrollPanel).Use setWidget to change
the page. Each "page" is a widget.
For example, I am doing a project
with a menubar. When "Home" menuitem
is clicked, the menu command
replaces the body of the simplepanel
by setting its widget to the Home
widget. Likewise for login, etc
menuitems.
A SimplePanel allows only one widget.
Therefore, you do not addWidget to it but setWidget to it.
use tab. Either TabLayoutPanel or
TabPanel. I prefer using the
TabLayoutPanel. You have to meticulously
set/design the CSS for TabLayoutPanel, otherwise
you would only see a blob of text hanging around.
I also try to encapsulate a "page" widget in a lazypanel (which is a derivative of a simple panel. That will prevent instantiation of any pages that may not be used in a module with a large number of "pages".
GWT is indeed suitable for ui presentation with multiple pages. In fact, one of the advantages of GWT over JSP is that you can change a page without a browser refresh/fetch flicker - one of the extremely strong reasons why you would want to use GWT for a web app with multiple pages.
Seems that GWT MVP framework suits your needs:
http://code.google.com/webtoolkit/articles/mvp-architecture.html
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.