I would ask if anyone has had experience in integrating a grid based CSS system (960 or similar) with a GWT uibinder application.
Our application is done with GWT 2.1, UIBinder and the latest GWT CSS capabilities, which have been really great to work with and enabled us to have a modular and flexible styling system. Our design team has returned a HTML layout with the corresponding grid css files and we are supposed to integrate them with our GWT code.
If we were to integrate the grid styles into our uibinder xml files we would have to wrap all our GWT widgets with divs with the right grid class names.
Personally I don't like the idea of mixing a completely separate grid css concern with the modular uibinder system, but I do understand the benefits the grid system can provide.
Any opinions or experiences? Pros and Cons for either approach?
We found ourselves in a similar position, having the app built around gwt, MVP and uibinder. This is great for developers, but it turned out to not be so great for designers. At the begining we gave them a html snapshot of our app + css and asked them to design it. They did't like this. It became a nightmare when customers wanted custom designs done by their designers.
The question is will simply wrapping you widgets in div be enough? Our designer provided custom buttons, tables, links, etc.. It was quite a task to force gwt widgets to look like the design.
So what we did was:
Replaced gwt-centric app design with html-centric one. This means we avoid generating html in code. We use classic html+JS+jQuery apporach, just instead of JS we have gwt and instead jQuery we use gwtQuery. We use only a few gwt widgets. Instead, in out Views we use gwtQuery to copy&expand example html that designer provided. GwtQuery can be externalized: all selectors can be put in one (or many) external interfaces, if a design changes (customers want changes or even bring in their designs) this intersection of html and gwt is all in one place.
Ditched gwt 2.2 mvp (activities, places), for our own which is a simplified version of gwt 2.1 mvp architecture. We no longer have to add 2 new classes and update others (place, tokenizer, update place factory) to have a new place.
Related
I am involved in a project that several people working on a react native project.
I need to find a way to separate the styling tasks form code, in a way that UI develop can work without the need of code developer (from my point of view, a style is a person who define the structure of UI, place components on screen and also define their color and visual representation).
my questions are:
Is there any tools that the style developer can use to create styles and export suitable files for inclusion to project?
How can I make sure that the two team work without duplicating their work by other team? I came from a WPF and Web development, and in that systems, there is a good separation between the UI and codes. For example, In MVVM, the only agreement that stylist and coder should have is the name of component, and the stylist can make all of the styles and coder can do all of the coding without repeating their work (I know that this is over simplified, but the concept is there and a good team can use it). In a web development, stylist create the HTML and CSS, and the coder use angolarJS or JQuery to control the component and attach to their events.
In our styling team we are using skitch, can this tool generate suitable style code for react native? If yes, what would be the workflow?
Any other suggestion on how best to separate styling from coding in react native.
I don't have the best answer for this question, But I can provide you some feedback & tips from my experience.
For separating UI & Business code like in MVVM, you can separate the classes as
Container class (handles all business logic) and
View class (Only responsible for presentation) with styles defined as a separate class that can make use of some universal theme provider
There can be multiple view classes (iOs, Android , if possible Web) but all them will use the main container class for business logic (REfer 1st link for more details)
Refer:
https://blog.cloudboost.io/react-native-a-deep-dive-part-1-5a982f847d20
https://medium.com/#dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
For styling you can opt for some Theme Provider classes that will hold universal themes as an object. The coder can use these styles in the components. The main theme will be defined in the root class with the provider. If you are carefully reusing these styles, you only need to update the styles in one place updating all of them. Also there is support for dark & light themes.
Refer:
https://github.com/callstack/react-native-paper
https://github.com/xinthink/react-native-material-kit
https://github.com/xotahal/react-native-material-ui
I have something on my mind for quite a while but couldn't find an answer to it. Consider the following:
You like to build a fancy website with React and have to decide which front-end framework you should use. In my example I have chosen Material-UI.
Now you came to a point where you need more features like a responsive grid system, show/hide styles etc. Instead of implementing them on your own (or copying it from bootstrap/foundation, for example) you think: 'Hey, why wouldn't I include another framework beside Material-UI'.
Now comes the question. I know that most of the css frameworks available have their own normalisation css and basic styles for typography and other elements.
Can I safely include another (more featured) css framework beside Material-UI without breaking fundamental things or should I avoid that?
Furthermore, what is a good practice approach to extend the css features without copying parts from other frameworks and without reinventing the wheel all the time. Did you ever had a case or project where you had to combine multiple front-end frameworks and how did you solve this problem?
Thanks for your feedback.
Cheers
Gregor
FYI, there's a Material Design version of Foundation, you can check it out at http://eucalyptuss.github.io/material-foundation/
Now, talking about your doubts... one should be very careful when mixing and/or using more than one framework at the same time... one issue can be conflict, other can be unnecessary bloating which could make load time heavier.
However, if you are aware of that, most of modern frameworks (as Foundation) can be compiled partially, so you will be loading only the stuff you'll use, minimizing all possible issues.
Have been thinking this exactly thing lately.. I would choose one that has most of the features i need in my project. I usually go just with Bootstrap (sass version) and use only the styling part of that (css grids mostly).
Mixing frameworks will eventually be hard to maintain and you have to include lot of extra (unused) features into your application. When using some "cool", full featured components like Material-UI has, there will still be times when some component doesn't have just the property you would need.
So my opinion is:
Use some framework for styling only. This way you have uniform look in your site. Or even just some responsive grid library could be enough.
Usually basic html components are enough to fill basic needs, you can just build your own custom components for special needs (or use some from npm library). This way you have just the features you need.
This way my site is not depending just some single framework. I can change the styling part anytime, i can change one component to another etc. without having to re-write my whole application just because it's been developed entirely with some "full featured" framework.
Is there a sort of css framework which i can add to a gwt project, and this will completely set a new UI to my gwt application. Sort of changing the look and feel.
I love GWT, but others like Vaadin are so good styled, if there were a complete set of css librarys that would make my app a lot nicer would we great.
I think we can be great developers but not so good designers.
Thanks!
I would recommend starting with http://gwtbootstrap.github.io/
As well as: https://developers.google.com/web-toolkit/doc/latest/DevGuideUiCss
I would then dive deeper into the GWT docs to get a good handle on creating your custom themes. At some point any styling theme/framework will fail your needs and you will need to have some fundamentals for styling yourself.
Personally, I highly recommend using UiBinder and ClientBundle:
https://developers.google.com/web-toolkit/doc/latest/DevGuideUiBinder
http://granitode.wordpress.com/2012/04/19/gwt-uibinder-using-a-clientbundle-with-cssresources/
#fguespe, I'm not aware of something such for example twitter bootstrap that you 'just' plug.
Eventually the 'web designer' needs to know about specific gwt CSS classes that impact the look and feel. If importing the GWT 'non plain' themes, you'll need to write customizations.
Yes indeed Vaadin and GXT provide a default nicer look and feel... Let's just fire all Google devs for a lack of focus :-)
Sorry about longer context before question itself!
I am developer who is fairly new to UI and never had to work extensively on HTML/CSS in past. But my current project I am working on GWT, being aware of Java and basic GWT. I managed to pick up get GWT stuff quickly, but getting stuck from time to time in getting a good UI with CSS for example
I created Menu using Lable and Tree, but later after few questions on SO realized that Anchor was better choice
Though I achieved my objective partially with anchors, the UL/LI came in picture in Style
So with that, and my limited current knowledge of CSS,
Can you suggest me a good tool which can automate style application to GWT elements with a preview?
Would fundamentals of CSS application be different in GWT as compared to HTML (Specially assuming my usage of whatever-I-Wished-in-GWT!
From my experience, learning a HTML/CSS basics and using UIBinder for declaratively creating the UI works best. This way, its quite easy to separate the View and the Controller.
If you're really not into GUI development, try GWT Designer, which is quite a powerful GUI designer (it let's you design the UI, and then generates UIBinder Files + Java sources for you).
i want to manage all the design of my website(asp.net) through my css.
my client requirement is he should be able to change all design of website within 4-5 hrs.
is this possible.
is there any trick to do this?
Sure it is. ASP.NET doesn't but render html, css and javascript. What you need it to let it render the html you're after and hook in css for layouting.
ASP.NET also provides you with some great functionality: Themes and skins. These make changing css, images, ... a snap by either configuration or setting a certain premaid theme in code. I suggest you take a look at these videos for more information:
Customize my Site with Profiles and Themes?
Create User Selectable Themes for a Web Site
Use Skins with CSS for a Flexible and Maintainable ASP.NET Web Site
That's a very tall order indeed. By design does the client mean the color/theme or also the layout?
Basically is boils down to the following:
1. Generate semantic html only from you ASP.NET code. That is no in-line style and use meaning full css class names for html that needs to be styled
2. Break your css files into two. One for style and layout and another for color. If you're using images, they should be a part of your color css file
You can start here but also be clear about what your client means by "should be able to change the design within 4-5 hours".
Yes this possible if you have good knowledge of CSS i.e. 2 and 3. Have look at below links which can provide you and idea about layouts fully dependent on CSS
Yui library
Yui CSS tools
Many more ideas like CSS sprite can be used to achieve what you need