I want to create a user selectable theme to a GWT application? How can I do It?
You can use CSS to build theme-system on top of GWT. There are DOM structures in GWT components that limit the options what can be themed, but in general CSS (and CSS3 these days) is very powerful and designed just for this kind of things.
Simply, you can put single theme in a single CSS file and provide users with an option to change the effective CSS file.
Here you can find discussion about creating such system: http://groups.google.com/group/google-web-toolkit/browse_thread/thread/f4b8f184c49b98f9
Related
I am developing a web app with GWT. I'd strongly prefer to code everything in Java instead of hardcoding anything in HTML and CSS. I'm also using GQuery (or GWTQuery) and I'm wondering if using compile time selectors with GWTQuery completely eliminate the need to hardcode any HTML or CSS at all - and have the speed and performance of a fully hardcoded app?
Let me explain with few words what gwt and gquery are.
1- GWT is just a compiler which gives you the tools to produce optimized javascript from java.
2- The js produced with GWT is mainly used to modify the DOM (apart from calculations, business code, ajax etc).
3- GWT additionally gives you a set of widgets, as an abstraction of the DOM, so as you can work with panels, buttons, trees, etc. instead of raw HTML. I think this is what you call hardcoded html.
4- But GQuery is a complement to GWT. It gives you a set of utilities taken from jQuery and ported to java to write less code, it is mainly oriented to manipulate the DOM (select nodes, modify, animate, etc) apart from other cool features like an easier ajax syntax, safe typing, promises, json/xml data-binding, etc.
Said that, don't think that the gwt widget abstraction will make you completely forget about dom and css. Sooner that later you will need to create your own widgets, or customize the current ones.
I think that the only way to forgot almost the DOM is to use a 3rd party widget library like gxt, mosaic, smart-gwt, etc. Because the GWT widgets are tough, they are designed to give the designer the option of easy stylizing them with css.
In the other hand, gwtquery will not help you to forget the DOM at all. It is designed to enhance static DOM elements which are in the page, enhance the DOM of gwt widgets, or create your own DOM structure based on html.
About gQuery compiled selectors, they are used in the same way dynamic selectors are: to select DOM elements, but with a much better performance because the compiler optimizes them. I think you misunderstood their objective, they don't give you any way to eliminate hardcode HTML.
UPDATE: To answer your last comment, it is NOT possible to generate static HTML or CSS with
GWT or GQUERY. They always produce static JAVASCRIPT code written to .js files (or written into javascript tags in .html files depending on the linker)
I'm currently in the process of building a wordpress multi-site for a client. I've completed aspect #1, which was creating Theme-1. Theme-1 was built utilizing excessive amounts of the AdvancedCustomFields PLUGIN.
I'm working to build Theme-2, this one is the primary theme that will be utilized for all of the sub-sites created through the multi-site option. The issue I'm having is that the AdvancedCustomFields are no longer an option, I need to build all of the customization into the functions.php file directly.
Is it possible to create custom fields through the theme directly - without utilizing a plugin?
I need the theme pages to have "Left Side" "Right Side" "Footer" as WYSIWYG editors. So if someone goes to create a new page all of these field settings are there by default.
Is this possible?
It's possible, using the wp_editor function to get the WYSIWYG functionality. See this question on the WordPress stackexchange site. It's demonstrated as a plugin, but you could just as easily put the code in your theme.
I am creating a new template and then a page from SCRATCH in CQ5. But I can't find the option to add my own CSS/images/JS to the page.
I mean a place to add/upload the actual files.
All the tutorials I've seen talk only about creating a template based on an existing template. Is there any tutorial on how to create the page from scratch ?
Your CSS and JavaScript go into nodes under /etc/designs/[your project's name]/clientlibs. (Ordinarily, you would set the page property cq:designPath of your content's home page to be /etc/designs/[your project's name] to point to this.) It's common practice to set up a subfolder of clientlibs called default, where your general-purpose style sheets and JavaScript go; you can set up other clientlibs for special-case script and style sheets. The simplest way to incorporate your script and style sheets into your page template is the <cq:includeClientLib> JSP tag.
The Adobe docs on clientlibs will also be useful to you, and explains how to use the tag.
#David , thanks for your answer, but for now, I got a better way to add and then use external files using WebDAV with CQ5.
The basic integration of WebDAV with CQ5 application is mentioned in this page
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.
can i design my web pages in html and css instead of java methods and use gwt only in parts of page that i need ajax? and which one is better gwt, extgwt, vaadin(it run apps in server-side.can i also use it in client-side?), etc...? do i also need to know javascript for using gwt?
thanks
can i design my web pages in html and
css instead of java methods and use
gwt only in parts of page that i need
ajax?
Yes, you can. You can create a div on your HTML page and insert your GWT widget there.
which one is better gwt, extgwt,
vaadin(it run apps in server-side.can
i also use it in client-side?)
I don't know about vaadin but Ext-GWT is a set of ready made components to use with GWT which make your life easier especially if you want to build an web app that looks and feels like a desktop application.
do i also need to know javascript for
using gwt?
No, it can be useful sometimes but is not necessary.