I'm trying to write an app that uses rounded corners for framing the app. I've found a package on google code that has a RoundedLinePanel and it seems to work... kind of.
I'm wondering a few things. Is this what people are using for creating divs with round corners in GWT? The release notes say it hasn't changed in almost a year.
Also, I can't seem to set a fixed height of this div (setHeight sets it on the wrapper div, not the inner one). so it's not useful to me as I have a fixed height app.
Finally, if anyone can suggest a better mechanism for creating rounded corner divs in GWT I'm all ears.
There is a beautiful way to rounded corners using CSS 3 (which thus doesn't work in IE<=8 , but will in IE9 developer preview). Take a look at http://css3please.com/ to see the styles involved. It's fairly simple using a border-radius (or -moz-border-radius or -webkit-border-radius property). In GWT just add a Style Class Name you want to the elements you want to have a rounded border and you are go. Of course supporting rounded corners in legacy browsers is harder, but do you need to do it?
For legacy browsers it is quite harder, depending on the actual context. It always involves images for the borders. You have to create images that mask the border of the box. What works is the trick described in this answer. To use this in GWT you can use either uibinder, htmlelement or you create your own widget. A broader explanation of the technique can also be found here.
The solution most commonly found, the decoratorPanel, is deprecated in the current version of GWT (if you use it with GWT 2.1.1, for example, you'll wind up with a mess of incompatilbility between the GWT-required doctype, the decoratorPanel, and IE, especially IE8).
The required GWT 2.1.1 doctype (!doctype html) also disables the popular rounded-corners.htc for IE8.
You can use the CSS3 series of rounded corner properties to add classes, but they will not work in IE versions prior to 9.
JQuery and other javascript rounded corners have a high probability of conflicting with the native GWT js, so we abandoned those as a possible solution, though I personally did no testing for these.
We wound up having to use rounded corner images in order to be truly cross-browser compliant and create a consistent look.
Related
Is there any native Flutter library for achieving Material Design Speed Dial?
I found only this FAB documentation, but it doesn't say anything about creating a menu out of it, though Material Design FAB documentation says at the top that FAB is supported in Flutter (it doesn't say how much it supports. Only that it supports, which would lead me to understand that it supports everything in the page).
Should I instead develop mine or look for third party libraries?
Nevermind. I'm creating my own Speed Dial. For now, it is part of a very simple project, but once I test it more and add animations, I'll share a final link.
It still don't have animations, because I'm using Visibility for showing or hiding the buttons, and it was tested only in Scaffold's FAB, placed on bottom right of screen, so no link for now, sorry. Less than an alpha right now (and I still need to study how one shares an API for adding to dependency).
I hope I'll be able to create a simple and light enough implementation. Easy to use and easy to understand if anybody wishes to take a look into the code later on. I've seen some implementations, but they are very complex and create (in my view) unnecessary extra widgets.
Some implementations I found:
https://flutterawesome.com/flutter-plugin-to-implement-a-material-design-speed-dial/
https://flutterawesome.com/flutter-floating-action-button-with-speed-dial/
This is not completely a programming question. Today when I load LiLi USB creator software I saw the interfaces are transparent. Is that because they are Photoshopped or is transparency a technique of IDE? I'm using both NetbBeans and Eclipse. To be clear, I'm adding a photo too.
For transparency of the entire GUI, including controls (which doesn't seem to be the case in your screenshot), .NET includes the Form.Opacity property.
Additionally, it may be possible to use LayeredWindows to change only the opacity of the top-level component to produce the desired effect.
For Java specifically, there's an official Java tutorial for that, although it seems to set the opacity of the entire window, including all child components.
I am new to GWT and working on a project involving RPC and MySQL. I want to dynamically draw a network diagram which includes ovals and lines with arrows. I am considering using SmartGWT DrawOval and DrawLinePath.
1) Does it make sense to use SmartGWT for only drawing shapes and using GWT for other things like layouts/widgets/RPC/etc?
2)I know that it is recommended to not mix GWT and SmartGWT, so I want to know if I can safely use drawing widgets with other GWT components.
3) Is there better alternative than SmartGWT for drawing?
Thanks.
Nope, your approach is not a good one because of the answer to your second one.
No, it is not safe, as it is not recommended. Better only use SmartGWT components for your UI elements. But I suspect that you are a bit confused here. Only UI elements are not to be mixed. All the other facilities of GWT (i.e. RPC mechanisms), can, and actually will be required to, be part of your solution.
I see the following options:
Use SmartGWT UI elements for all your layers/widgets and of course use the drawing shapes you have identified to create your solution.
Use GWT elements and use other drawing libraries to achieve your goals. Such can be: gwt-connectors, raphaelgwt, lib-gwt-svg, depending whether connectors or simple lines are enough for your specifications.
Use SmartGWT UI elements and embed one of the above libraries to cover cases that the provided elements can't support. This can be tricky as the success of such marriage is not always guaranteed, but it can't be dismissed either. I had success, with such an approach, by using the lib-gwt-svg.
Some SmartGWT components are composed by a lot of small images. This is the case of IButton for example that gets rendered using images.
I want to adapt the original SmartGWT CSS to fit my needs, that are basically color changes.
This answer is not quite accurate..
If you have staff with experience with image-based skinning and appropriate tools (eg Adobe Fireworks), start from whatever skin you like.
If you don't, and you need to change the colors but don't care about niceties like rounded corners in older IE (which are impossible without images), start from Simplicity, or start from the CSS3 rendering mode provided for the 3 most popular skins (from 3.1 on):
http://blog.isomorphic.com/css3-mode/
The latter approach (CSS3 mode) is more visually rich than Simplicity.
It seems, that the best way of skinning an SmartGWT application is starting from the Simplicity theme.
Isomorphic team suggest starting from this theme, as it uses less images that the others themes.
As far as I've read, everything should be done by hand (editing images, and CSS).
I'm relatively new to google gwt and I'm search for a method, which is comparable to the paint-method in java. I would like to draw small graphics on top of other elements and pictures. I know, there exists the Canvas-class, but I didn't found any way to use it as an overlay painter.
I hope someone can help.
Best regards,
Michael
If you need simple overlays, I would use pre-made images and the css z-index and position: relative attributes to put them on top of each other.
for actual painting you could use the GWT's Canvas (HTML5 canvas) or a 3rd party library, like RaphaelGWT, which uses SVG.