Our webapp is implemented in GWT 2.2, with heavy use of UIBinder. I really like UIBinder's ability to define styles either inline with the HTML, or at least in a <ui:style> section. As a programmer, this modularity really appeals to me, as it puts the styling right where it's used.
And for styles that are used in more than one place, I refactor them to a CommonStyles.css/CommonStyles.java, and refer to that in my *.ui.xml files.
This has worked great so far, but now the company has contracted an HTML/CSS designer to re-work the design. We spent a few days trying to get him up to speed on Eclipse & GWT, without much success. To meet a deadline, we ended up having him just deliver an old-school giant CSS file to us, which we then painstakingly refactored back into the various ui.xml modules.
My question: Is it better to maintain a single, old-fashioned giant CSS file for a UIBinder app, so that designers can work with it? It pains me as a programmer to do things this way, but it seems like it's the only practical way to have non-programmers work on the design.
Is it unreasonable to expect designers to know an IDE such as Eclipse or Intellij?
From the perspective of the programmer of a company with one programmer and one designer:
The designer on my team never used eclipse or Java before our current project. We started using UiBinder stuff heavily about two months ago and, with maybe a couple of hours of help from me, he's managed to become quite proficient. He's now checking finished & laid out widgets into the source himself, with perfect CssResource etc modularization. I still set up the corresponding .css and .java files for him, but then I throw the setup at him, he writes 90% of the ui.xml & .css bit himself, and I come back and implement his ui in java afterwards. Occasionally I have to change a <div> to a <g:Panel> or whatever. He has not complained about it being too hard. Now he's starting to explore the extensions to css that gwt provides, like constants and expressions.
I'd say you shouldn't have to give up the benefits of UiBinder for the sake of your designers. In my own project, I expect to have to set up all of the code and generate templates for all of the Java interfaces, but I expect my partner to be able to add his own styles, separate css intelligently (e.g. CommonStyles.java vs. ThisWidgetStyles.java), and understand what's happening when his style names turn into GVDWK.
Related
We're building a large enterprise application (dozens of modules) with GWT and need to decide whether to use ClientBundle or not. I was curious what pros/cons the StackOverflow GWT community view as deal makers and deal breakers for such a use case.
As far as we see it currently:
Pros
All images/css files that take up server resources to download are eliminated
Client loads faster because of the above (i.e. inlined image urls)
CSS names are obfuscated, so namespace collisions are eliminated
CSS is automatically optimized / verified
Unused CSS classes are eliminated (above)
Java reference to class names are replaced with refactorable css interfaces
UiBinder reference to class names are replaced with refactorable css interfaces
No more big "main.css" fails as resources are module bundle specific
Cons
For maintenance CSS becomes either unreadable in obfuscated mode, or extremely verbose in debug mode
More steps needed for basic CSS work (like adding class)
All devs must know Java,CSS,HTML nuances
CSS3 and other at-rules (i.e. #font-face) are not supported by GWT natively
Increased compilation times
Thanks!
I have been using client bundle heavily in m-gwt.
One thing that was bothering me was styling for devices that did not have dev mode. So styling could mean recompiling the complete app.
Mostly all CSS3 Rules can be used in ClientBundle by using the literal function, so that should be okay. It gets a little tricker with #media queries. You can inject the css as a simple textresource as a workaround, but its kind of ugly.
When you are talking about several gwt modules, consider using multiple clientbundles so you can still use split points to keep the download file size under control (Depending on how big your .js files get)
I have used clientbundles in several big gwt apps and for me compile time checking and refactoring support beats the little quirks that are still in client bundles.
Just two additional notes:
There is a utility available in GWT which allows to automatically create the interfaces for your CSSResources
It's true that debugging styles can be a little bit cumbersome because of the obfuscated names. I had good success by using Firebug to change styles in dev-mode directly in the browser and when I am satisfied I change them in my GWT app.
I am looking to speed up time to develop website layouts. So I am wondering if using DreamWeaver for layouts is useful - efficient. I am looking at purchasing this software, so, I had a few questions.
I am very comfortable coding HTML, CSS and JavaScript(jQuery) by hand in either PHPDesigner or Notepad++. Most of the time for layouts I use FireFox and Firebug to see results in real time, and then check if it works across different browsers.
I want to know the opinion of people who have worked on the front-end:
I feel code validation is important but not the end of the world(as my priorities) - I do however like to change my code often by hand. Does the output from this software let you do this?(compare to the html/css that micorsoft word vomits - Does this software do a similar thing?)
Is this software used as a primary design tool by people who can code by hand and does it actually improve efficiency? or is it just for newbies?
I understand the Adobe family of products work really well with each other but I am trying to understand is if DreamWeaver really deserves to be in the front-end workflow(if you are proficient coding by hand).
Once you work with HTML/CSS/Javascript enough, it isn't difficult to "code by hand" but it is important to remember that front-end developers also code with their eyes, as well. There is a lot going on up front that depends entirely on the code that runs on the client and you want to use an editor that helps you organize your code and, more importantly, gives you visibility into the challenges presented by complicated CSS and adhering to web standards.
If front-end coding was nothing more than pushing around angle brackets then notepad and repeatedly pressing F5 would be enough. A great web editor will present the structure of your code in a meaningful way and all of your HTML, CSS, and Javascript takes on a complete feel.
You want a professional editor that will allow you to:
Understand CSS inheritance
Run visual diagnostics
Debug across different browsers
Create modern layouts/designs that are faithfully represented
I haven't used Dreamweaver in a few years but, these days, I'm really enjoying Microsoft Expression Web. It is not the FrontPage mess of yesteryears - it is a serious tool for web design and I urge you to take a close look. The code is clean and smart and it certainly gives you the option of using its tools to build a site or you can code everything 100% by hand. Don't forget, the key is not deciding which editor is best for coding by hand. The thing you should be looking for is which editor makes you a better developer.
Regardless of whether or not you're a Microsoft, LAMP, or other platform person, Expression Web is a great tool for front-end developers.
I've been using Dreamweaver for a few years now. While I initially used some of it's code generators, these days I pretty much spend my time in the code widow coding by hand and viewing the output in the browser. The design window is nice for simple coding as it will build the html for you. However, I did have problems getting the right insertion point to edit it. For example, it might place my update before and end tag when I wanted it to be after it. That led my to switch to the coding window to be sure.
I do like the fact that it opens all included files specified in the file you originally opened. I also use it's site views to synchronize my changes to the production server. I'm sure I could take advantage of other features if I bother to learn them. I haven't used any tools besides FrontPage so I can't compare.
Best thing that happened to me was learing about Eclipse and then after about Aptana. I was using notepad++ for everything, but now im doing everything with eclipse and aptana as plugin for eclipse. Just my 2 cents. Oh and its free.
Primarily I do use Adobe Dreamweaver when working on websites. It is a pretty nice tool to use along with Adobe Photoshop for any graphic designs that I create.
Also, I use Microsoft Visual Studio 2010 for Web Application Development (i.e Console apps, Web Apps, Silverlight, etc.). VS is a little different from DW but its still a nice tool for development projects.
Alison, I looked a preview of Expression Web and may check it out. It may aid as an impressive tool for my front-end dvelopment work. I also tried Microsoft Expression Blend when designing Silverlight applications. It does remind you of how Expression Web looks and feels
General approach in GWT is to use Panels and then apply custom CSS themes to get a customized look. While I can achieve a certain extent of personalization of my GWT app through CSS tinkering, I was wondering how others generally approach styling.
Some of the suggestions I came across the web were to manage layout with plain HTML, through use of HTMLPanel's. This way one can straightaway use the HTML mock-up within the application without having to code all the layout.
So what in your opinion is the best and least painful way to approach layout and custom styling of GWT application?
So far, the best approach I found:
get rid of any default GWT theme
use UiBinder as much as possible
place your CSS in ui.xml that describes the widget
have one public Common CssResource with rules reused by many widgets
that way you don't need to maintain one global stylesheet which always is a pain (common problem: where is this rule used?)
It all depends - on you, your experience, your team, etc:
The usual/older approach of Panels, Widgets and Compositing will be easier to work with/more familiar:
If you are a Java programmer experienced with frameworks like Swing, etc. (I think that was the point of the GWT team),
Or if you come from the "desktop world" in general.
The UiBinder approach is the newer one:
Recommended if you are just starting your experience with GWT (it seems UiBinder is here to stay, and it allows more flexibility than the above approach),
Recommended if you have experience with web development (or desktop frameworks that use markup, like .NET's XAML, etc), since you'll be working in the familiar world of HTML/XML,
If you are working in a larger team, where you have designated designers in charge of the look of the web application (and they don't know/care about GWT). Cutting up the layout into HTML code should be pretty straightforward for them and you can, with little work, convert those templates into UiBinder's XML templates.
None of the above approaches is perfect - that's why it's worth to know their strong and weak points - but the end decision should be yours alone, since you know your/your team's capabilities best :)
I need recommendations from people whom have implemented an easy to use GWT editable datagrid.
I spent 4 hours with the PagingScrollTable in the gwt-incubator-july-14-2009.jar, and would now like to try other options.
What I'm looking for:
easy to get started (ex. drop a jar, edit .gwt.xml)
advanced features once you have gotten started
documentation of advanced features
self-contained module with minimal dependencies on other modules, jars or components
low cost/free
Thats all :)
Please, for goodness' sake, stick with vanilla GWT. Just use GWT data cell tables, lists and trees.
Smart-GWT and GXT really look good in their demo. e.g., Smart-GWT has widgets that accepts xml/json datasource directly that would save you time.
But, you find that your application requirements would "just need that tiny tweak" in the way the widget eats the datasource. Both GXT and Smart-GWT have attractive convenient widgets, but you find you need "just a little" tweak to make them suit your requirement.
Is your "little" tweak "important" enough? So, you resort to writing your patch for that "little" tweak. And soon you find that there is a whole entrail of "little" tweaks. You experiment and research and try untried means.
Finally, you discover that you might just as well had used vanilla GWT for which you would have taken less time to get the behaviour you want. Vanilla GWT is tried and proven.
Do not be tempted by the showcases of SmartGWT or GXT. Learn CSS and learn how to integrate CSS into vanilla GWT, which would make your widgets just as attractive as SmartGWT or GXT.
Then you would not regret because you would not face any impediments toward using other GWT features.
What is good enough for Google is good enough for me.
Hi HJO there are many solutions to problem depends on what you want. The GWT-EXT, EXT-GWt and SmartGWT libraries all have editable data grid implemented. Or you can make your own with FlexTable,ScrollPanel,TextBox and add a few event handlers. Both GWT-EXT and SmartGWT are in LGPL license and I believe EXT-GWT is GPL license. If you not doing it for production then any will do, but if you are doing it for big production environment I suggest to really test each of their performance first. I suggest to choose something light weight and robust instead of simplicity or appearance on production environments. At the end, the less data/widget loaded + less handlers = performance and happy user.
Take care,
NingZhang.info
I do not recommend to use GWT DataGrid for production (in GWT 2.4), unless you like coding workarounds for several bugs (most of them on Internet Explorer):
http://code.google.com/p/google-web-toolkit/issues/detail?id=7065
http://code.google.com/p/google-web-toolkit/issues/detail?id=7347
http://code.google.com/p/google-web-toolkit/issues/detail?id=7139
http://code.google.com/p/google-web-toolkit/issues/detail?id=6747
I use CellTable instead of DataGrid and wait for bugfixing from GWT team.
In the past I've done web application development using Visual Studio. Initially I'd use the design view, editing the page visually. But over time I learned more and more (X)HTML, CSS, and Javascript. I became familiar with the tags for ASP.NET server controls and their common attributes.
I got to the point where I'd do all the markup by hand (still in Visual Studio though) and then test the site in an actual browser. Of course I'd also still use Visual Studio for programming server side functionality in C#, but never the WYSIWYG page editor. I was able to get work done faster too, getting the site to look just the way I wanted, and the same across different browsers.
Now I'm going to be taking charge of a public facing website (entirely static content - no ASP.NET, PHP, or anything). The website was created and maintained using Dreamweaver, which I don't have and never used before.
I'll be working from home, so the organization is looking into getting me a copy of Dreamweaver. Even though it's not money out of my own pocket ...
Is it worth using Dreamweaver if I probably won't touch the visual editor?
Or should I tell them to save their money and I'll just use Notepad++.
Or am I crazy and should relearn to use a WYSIWYG editor?
I do 95% of my web dev stuff using Dreamweaver's code editor. But, for the other 5%, the WYSIWYG stuff really comes in handy.
Plus, it's not your money anyway. I'd say get it and if the WYSIWYG stuff is too much for you just keep it in source code mode and use it as an editor.
You may not know until you see the code. If they were using things like Dreamweaver templates, unless you are going to extricate them, you may end up needing Dreamweaver for sanity sake.
Dreamweaver is really useful if you maintain a site with templates. If the site is in PHP or ASP, then all you need to do is put the common parts (header, footer etc.) in a separate file and include them in the different pages. If the pages are static then the common parts can't be included. Which means that if you want to change the menu, you have to change it in all pages. With dreamweaver, you can save a page as a template and when you create a new page from a template, dreamweaver stores it in the comments. Next time you update the template, all the pages that use the template are updated. I found this to be the best use of dreamweaver.
I haven't used a WYSIWYG HTML editor in years, all the HTML I produce these days is hand-coded, and it's something I would recommend to anyone. WYSIWYG Editors simply make it far too easy to throw in tons of unnecessary markup, and then you end up with unwieldy pages that are tricky to work with and hard to fix browser compatibility problems in.
However. If you're taking over a large existing codebase that has been produced this way, I'd say you probably want to make sure you at least have access to Dreamweaver or a similar editor (if they were produced in Dreamweaver, that's probably the best choice). Simply because many pages designed in this way are rather verbose, and can be a nightmare to deal with in a text editor.
This depends - you mean old school Dreamweaver or CS4 Dreamweaver?
With all the new additions (code hinting with some of the newer javascript frameworks, a "preview" that is integrated with webkit so you can see your page in action, being able to test AJAX calls and do a "code freeze") I'm tempted to walk away from jedit and try it out.
I believe that DreamWeaver gives you intellisense in the code editor for HTML, so I would use it for that, if you're not paying for it. I wouldn't pay for that myself though :)
If the Visual Studio editor works fine for you, there is no point in switching.
And if you don't like WYSIWIG editing, then there's no point in learning it. I stopped using WYSIWIG years ago, and like you, I've found it to be much more flexible and reliable to edit HTML/CSS by hand.
If you like DreamWeaver more and the organisation is willing to pay for it, then go for it!
FWIW, I do a lot of HTML and javascript coding in dreamweaver's code view- the JSF extensions are nice as well. I got it as part of the CS3 bundle, since I needed to get my hands on photoshop and illustrator as well to carve up graphics. If possible, try to get your company to get the whole bundle, since graphics manipulation is always important when you're maintaining a site- and most designers will be giving you photoshop source files. I never ever go in wysiwyg mode, and it's still useful.
I use dreamweaver, but not for the same reasons as everyone here seem to. I like the syntax highlighting, and I absolutely LOVE the way Dreamweaver handles FTP in the window on the right. If I could find another editor that would offer these two things, I would, but none seem to be that great.
I code my pages by hand usually (I do a LOT of PHP, which dreamweaver 8 obviously can't preview) so I do a lot of things like (1) edit page (2) upload changes (3) preview live on testing server. However, I still use the WYSIWIG editor occasionally, especially if I need to throw something together using tables or form elements. I just find it to be a bit quicker that way than doing things by hand.
That said, I never use Dreamweaver (8, mind) for CSS, as the implementation is buggy at best. I much prefer to do CSS and more complex HTML by hand. I also do not use the standard method of templating, as I prefer to have one "index.php" that calls in the appropriate template and stuffs data into it that it generated before.
All that said though, Dreamweaver offers a nice enough set of tools that I don't really want to leave it, and it certainly won't hurt to learn it, especially if its free. I'd say at least try it out and see if its going to work before making a final decision. It comes down to what you personally prefer to use.
I hand-code but there are times Dreamweaver is incredibly useful:
Making visual-tweaks to someone else's complex HTML. It's much quicker to use the WYSIWYG if you're short on time and the code is a mess.
Dreamweaver has got an incredibly good search and replace. The tag-based searching is the best I've seen anywhere for you whilst the regex seach/replace allows back-references, named groups in the replace field etc.
The code Dreamweaver produces isn't too horrific and it's fairly good at not breaking your own nice code if you ever dip into the visual editor.
I use dreamweaver CS5 for code only on a daily basis, and it's a great tool. It is very effective, and its a great tool even for people who already know how to write code. Some of its' features that make it one of the best editors, in my opinion, are:
Code coloring
Customizable color-schemes
Error highlighting
in-app validation
Autocomplete & Codehinting (works great!)
in-app FTP
New document type dialog (great for quick start)
Search & replace
Code Snippets
There are many more features, like setting up a local server and binding it to a database so you can write queries more easily and use dreamweaver's "help" with server-side code, but I haven't really got into it.
Bottom line:
If you are considering getting Dreamweaver mostly for code editing, then I'd say it's definitely a great deal - even if you aren't going to use some of its' other features.
Dreamweaver's a tad bloated for something which you really can just do in Notepad (++ or otherwise). No WYSIWYG will give you code to the same quality as hand-crafted code. Especially since it's vanilla HTML, just use an everyday programmer's text editor. Having intellisense isn't that important: I mean, there's only about 10 tags you need to know.