There's a question about using layout managers in GWT, which was however answered in the sense that no direct porting of Swing apps is possible. But I don't need this, I only want to use a sane way of positioning.
Is there a a port of MigLayout (or alike) to GWT?
Since a LayoutManager is mostly a way to set the component sizes and positions using some user preferences, it should be possible. Doing this for a HTML component is possible (and AFAIK some frameworks compute all sizes and positions on the server and avoid all associated HTML/CSS problems).
Depending on your definition of crazy, the LayoutPanels built in to GWT are quite sane. There's a DockLayoutPanel with familiar north/south/east/west behavior, and also panels that allow more arbitrary percentages and positions. Combining them with CSS is very powerful and flexible.
http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html
Although requested years ago, it looks like it hasn't been done yet.
Just one quotation:
I'm just getting started with GWT and I feel like I just stepped back into the dark ages with all the various layout panels and layout managers.
There's gxt-jglayout, which is JGoodies form layout implementation for Ext-GWT (GXT), but Ext-GWT is not free (it's dual licensed).
Related
I'm investigating Adobe CQ5 and would like any advice on how to integrate its drag-and-drop UI to create a responsive website. It seems as if it works on a concept of fairly bland templates with components that can be dropped in pretty much anywhere, including things like "three-column control" - which would make designing a responsive grid structure very hard (as it would be hard to prevent users from dropping in a control that could ruin the layout).
Does anyone have any experience or advice on this? I'm really looking for deep technical details on the structure of templates vs components (paragraphs), and where/how to manage to the CSS.
CQ5 offers ways to control what can be done within a template, so thinking that components "can be dropped in pretty much anywhere" may be misleading. Page templates are designed and configured so that you control which components can be added to a certain area of a page. This allows you to only make those components available that will work with the template layout, excluding components that would wreck the layout. Then authors are only allowed to use things that will work. If they attempt to drag a component onto a paragraph (parsys) where that component has not been configured as available, the UI will not allow them to use it there. So CQ actually makes it easy to prevent users from dropping a control somewhere that would ruin the layout.
This is outlined a bit here:
http://dev.day.com/docs/en/cq/current/howto/components_develop.html#Adding%20a%20new%20component%20to%20the%20paragraph%20system%20%28design%20%20%20%20%20mode%29 which states that
"The components can be activated (or deactivated) to determine which
are offered to the author when editing a page."
When it comes to CSS and JavaScript, you can create a client library and then include the relevant client library on the page. Backend CQ functionality will take care of combining multiple CSS (or JavaScript) files into a single minified file to allow for a single HTTP request of an optimized file. This it outlined a bit here:
http://dev.day.com/docs/en/cq/current/developing/widgets.html#Including%20the%20Client-Sided%20Code%20in%20a%20Page as well as
http://dev.day.com/docs/en/cq/current/howto/taglib.html#%3Ccq:includeClientLib%3E
So you might develop several components that share a client library, then when any of the components is added to a paragraph the client library will be included on the page. You may also want a CSS library that applies to all the templates to give a common look and feel, yet allow components to add their own when they are used.
These guidelines for using templates and components outline how you provide control, yet flexibility:
http://dev.day.com/docs/en/cq/5-5/developing/developing_guidelines_bestpractices.html#Guidelines%20for%20Using%20Templates%20and%20Components
I'll document our successful WIP experience with RWD and CQ5
Assumptions:
A well documented style guide.
Our First Steps:
Modified existing column control component css to utilize twitter bootstrap grid css.
Create a base page property allowing two different classes on the grid container to be set and inherited by child pages. (container||container-fluid).
Leverage out-of-the-box components where ever possible.
All component widths inherit the width of their parent container allowing for components to be dropped into any location within a template.
Issues:
The out-of-the-box column control component can not be nested.
We are looking into building a custom column control component.
Takeaways: this is an evolutionary project and we are constantly iterating.
With the recent launch of AEM 6.0, they have an example website called as Geomatrixx Media. This website is responsive.
You can take this example as reference and start building on top of it.
I'm building a website using GWT and would like to add Image Cropping capability so users can upload their profile image and then crop it as they need to. I'm looking for something similar to Jcrop but in GWT.
I found THIS and THIS code samples how to crop an image on the client side but there is no UI part where user can select part of their image that needs to be cropped.
There were also couple of similar questions on SO (for example and this GWT with Jcrop) but nobody gave an example of the selection part of the image that uses pure GWT.
If you have an idea how to do it please share and I'm sure other people will leverage from this in the future.
Here is the example of what I'm looking for:
I recommend that you take route #1. I've been working full time in GWT for awhile and spend a lot of time looking for libraries, and this is one that I just don't think exists yet.
Here are your options:
Wrap Jcrop using a JSNI interface.
Pros: You have to include JQuery and JCrop, which are small and robust
Cons: Learning how to build your first JSNI wrapper can be a pain
Build your own from GWT Drag and Drop
Pros: "Pure GWT"
Cons: You probably won't handle all the edge cases that JCrop has figured out over time, nor be as featureful.
Port JCrop to GQuery
Pros: JCrop is open source and only around ~1600 lines of code
Cons: It's ~1600 lines of code, which is likely to be much bigger when ported to Java
If you decide to do any of the above, please open source it! I'd be happy to contribute, and it looks like something that I could use in my GWT projects as well.
GWT Cropper is a widget that allows cropping an image.
https://code.google.com/p/gwt-cropper/
Edited in 2015: as long as Google Code is about to be closed, the project has been moved to GitHub. The new address is https://github.com/w32blaster/gwt-cropper
I'm about to start a Web application that will use interactive generated 3D content. Aim is to let it run natively in the browser, i.e. no Flash is allowed, only JavaScript + HTML5.
Apart from using pure WebGL it's better to use a lib that will offer a more high level interface.
The approach of X3DOM looks great for me - and it looks like it's supposed to become native in the browser and the lib will pave the road.
But after my first impressions I'm not sure if it's lightweight enough. Apart from the 400kb JS-File it slows down Firefox.
The features I need are not many. The whole scene set up could be easily done by "hand". But I need user interaction including to figure out where the user clicks. And later I want to be able to load and insert 3D objects in a common file format.
PS: Browsers of choice are Firefox and Webkit based ones. Desktop and Mobile ones. I don't care about IE.
PPS: Yes, I know the question: WebGL Framework
X3DOM is great when you come from an X3D background (and developed by great people), but if you have no preference watsoever, Three.JS would be my pick.
I looked at most WebGL frameworks just last week, and it indeed seems almost every one of them is in the 300kB range. That's too heavy for me, too. Luckily I found lightgl.js which has everything you need to get started in 28kB, MIT license.
The main thing for me is just abstracting canvas, shader and texture initialization. But lightgl.js does also have some mouse handling and model loading etc.
i think the decision boils down to:
do you want to have a more design or programmer approach.
x3dom: its leveraging of x3d for describing the scene lends itself to a more designer approach, with just the adding of the x3dom css and js one can do this :
<X3D><Scene><Shape><Box/></Shape</Scene></X3d>
three.js: only allows for scene generation through javascript, and a lot of additional code is necessary just to set up the canvas. view the source of this simple box example: http://stemkoski.github.com/Three.js/Template.html
neither way is wrong, i prefer designing the scene and then using js when needed for any computations.
I am looking for a nice framework for developing a GUI builder Application. We have an application where 100Os of custom data entry forms and their print formats are required and each client will need some modifications on these. We have a developed a product using java based open source templatnig frameworks so that the layout and field definition are stored in database and rendered dynamically to the user. We also have an appication to design these forms but cannot do visual design.
Now I am trying to make a Visual Form Designer application for generating these forms. Can any one suggest some open source frameworks than can be used? Can I use Eclipse Visual Editor? Or is it better to develop some kind of parser for HTML using AntLR and then parse the HTML output from already existing GUI builders like Dreamweaver to get the desired output?
Thanks and Regards,
-- Kannan
Oooh, great question!
I wouldn't know any readily availble framework that you can use. Depending on your needs however, I think rolling your own shouldn't be too hard.
First of all, you probably wouldn't want to give the users too much freedom. Freedom only gives them the opportunity to mess things up and make the resultant forms hard to use. I think from your description that the fields are pre-defined, so that the user only needs to customize which fields appear on a given form, and in what order. Order can be a simple thing like top-to-bottom. Some semi-intelligent automatic layouting could be used to conserve screen space. Adding a feature to group fields together would probably also be useful, and grouping would lead to some kind of standard "group" widget.
Accepting simplified functionality like this, you don't really need the flexibility of a full gui editor. A couple of listviews, maybe a property sheet and a preview window will be enough to give your users the functionality they need.
Of course, this only holds for screen forms. Print forms may be trickier to layout, as people may want to cram as many fields as possible into very little space so the entire form can fit on a single page or something. I really don't have any suggestions for you there, but maybe a similar "simplified" approach with some intelligent auto-layouting could work.
Overall, my advice would be: Keep It Simple! (S... ;)
I need to display data coming from a GWT-RPC service in a paginated datagrid.
The gwt-ext showcase does not provide an example combining gwt-rpc calls and datagrids.
That is too bad because the original javascript Ext grid components offer paging and remote sorting. How to take advantage of these features with GWT ?
I too wanted to do this a few weeks ago, and searched long and hard and found nothing. In the end I wrote my own paged grid that supports RPC/Sorting/Editing/Etc.
It's intended to be generic, and is still a work in progress, but to use it you simply implement the TableSource and TableRenderer interfaces like so:
new PagedTable(new AssetTableSource(), new AssetTableRenderer(), 30);
I have posted the code here:
http://wiki.shiftyjelly.com/index.php/GWT#GWT_RPC_Paged_Table
Feel free to revert the buttons in the PagingControl.java back to normal GWT buttons.