-
1. Re: Growl
jbalunas Apr 20, 2010 9:27 AM (in response to blabno)FYI - I have added a comment and link to this forum thread to https://jira.jboss.org/jira/browse/RF-7281 which is a request for this type of component.
First - WOW - that was fast ;-)
A few questions/comments:
- This was built on 3.3.X - do you know how much effort would be needed for 4.0.X
- We have no plans for further 3.3.X releases
- So I would like to target something like this for 4.0 - wdyt?
- Could you provide a simple war example of this?
- Your comments and concerns regarding using 3rd party plugins are right on.
- That is one of the problems of reling on these, it can limit flexibility, and future support.
- I have not looked into gritter plugin, so I'm not sure how complex it is
In general RichFaces tends to favor customization, skinning, and stability, to rapid integration of 3rd party plugins. So it sounds like we are on a similar page. In order to support some of the options you discuss I think modification or customer impl may be needed.
This is great though, lets keep the conversation going!
-Jay
- This was built on 3.3.X - do you know how much effort would be needed for 4.0.X
-
2. Re: Growl
blabno May 4, 2010 9:06 AM (in response to jbalunas)I've had problems checking out from SVN the 4th version before. Now i've managed to get in, but i'm confused by it's structure: /root contains some dirs which contain branches,trunk,tags.
Please instruct me what do I need to check out in order to start building components for RichFaces-4.0.0.
Sample War is big, so I provide only mavenized version. Demo is available for several days at http://bernard.labno.pl/growl-sample
My greatest concern now is how customizable and skinable this component should be.
rich:messages accept marker facets to display user provided icons for different message severity.
I wonder why isn't this done via CSS, i.e. user could provide classes for each severity and icons could be loaded as background images.
Providing icon urls as attributes (warnIcon,infoIcon,etc) seems poor solution to me. What do you think?
Again problem with gritter script is that it uses hardcoded template and substitutes some tokens with summary, detail, img url, so I don't know how to use embeded UIGraphic components (I would need to retrive the url from them) and thus using faces is out.
The more havyweight, but way more customizable solution is to modify JS and make it growl (fade in at right top corner) some outputed panels (tag would output messages represented as panels).
I vote for the light-weight solution without changing the JS too much (just exchange img/icon with div and css). All in all this component will be used to display faces messages.
-
growl-sample.tar.bz2 2.8 KB
-
-
3. Re: Growl
nbelaevski Apr 20, 2010 8:07 PM (in response to blabno)Hi Bernard,
I've had problems checking out from SVN the 4th version before. Now i've managed to get in, but i'm confused by it's structure: /root contains some dirs which contain branches,trunk,tags.
Please instruct me what do I need to check out in order to start building components for RichFaces-4.0.0.
Here is the document that describes this structure: http://community.jboss.org/wiki/RichFaces40BuildSystem . Speaking shortly, there is a number of modules in http://anonsvn.jboss.org/repos/richfaces/root/ , each of them can be versioned separately. If you want to do project build, you can checkout the whole structure from root and do:
mvn clean install -Ptrunk,components
Otherwise, you can create Maven project for your component (some archetypes are already available in CDK module) and use nightly builds of CDK from JBoss snapshots Maven repository.
My greatest concern now is how customizable and skinable this component should be.
Usual requirement for this is certain set of:
- facets/attributes: content customization, event handlers, component settings, etc.
- set of rich-* CSS classes for all significant HTML elements
- predefined CSS classes wired to skin parameters + images
rich:messages accept marker facets to display user provided icons for different message severity.
I wonder why isn't this done via CSS, i.e. user could provide classes for each severity and icons could be loaded as background images.
Providing icon urls as attributes (warnIcon,infoIcon,etc) seems poor solution to me. What do you think?
We've just followed markup from our HTML designer. I guess that's a variation of "spacer.gif" pattern - inline image element that's dimension can be controlled. In 4.x we've dropped off IE6 & quirks mode support from requirements, so in the latest design markups we use background images as you've described.
Again problem with gritter script is that it uses hardcoded template and substitutes some tokens with summary, detail, img url, so I don't know how to use embeded UIGraphic components (I would need to retrive the url from them) and thus using faces is out.
I think we can do two things to deal with the problem (this is in case we don't modify source code):
- Ask the author to make plugin more customizable (suggest a patch)
- Pass another template markup in setup method like this:
$.extend($.gritter.options, { fade_in_speed: 100, // how fast notifications fade in (string or int) fade_out_speed: 100, // how fast the notices fade out time: 3000, // hang on the screen for... _tpl_item: '...markup template...' });
-
4. Re: Growl
blabno Apr 21, 2010 7:15 AM (in response to nbelaevski)Ok, so i've followed your suggestion with substituting template. It works like a charm now. Demo will be online later today.
I just wonder if template config code could be placed in script, so that it would not be rendered on each re-render of growl.
Some config like stay time, fade in/fade out times and style class must be re-rendered any way.
What needs to be done now is generation of background image according to skin. We should have 4 background image classes for each severity so that resource url can be different and thus cached. Am I right? Cause I don't know how caching works in Richfaces.
Which skin properties should we re-use? We need border color and background color. Or should new properties be introduced?
-
5. Re: Growl
nbelaevski Apr 21, 2010 9:21 AM (in response to blabno)Bernard,
I just wonder if template config code could be placed in script, so that it would not be rendered on each re-render of growl.
Yes, that's the best place.
We should have 4 background image classes for each severity so that resource url can be different and thus cached.
Yes, four images.
Which skin properties should we re-use? We need border color and background color.
I think generalBackgroundColor & panelBorderColor should be ok for this.
-
6. Re: Growl
blabno Apr 22, 2010 6:17 PM (in response to nbelaevski)I think that if any, then "headerBackgroundColor" should do as background cause "generalBackgroundColor" is general (page background) and message will not be distinguishable.
Besides, we were talking about 4 different colour sets for different severities. I propose to introduce new variables: warningBackgroundColor,warningTextColor,infoBackgroundColor,infoTextColor,etc.
I've managed to make skin aware image rendering! Jupi! Even alpha works! Watch the demo (well, there is no skin changing yet) or try to use it yourself with your favourite skin.
So to sum up...
Component has following attributes:
- showDetail (default:true)
- showSummary (default:true)
- sticky (default:true)
- stayTime (default:3000 millis)
- fadeInSpeed (default:2000 millis)
- fadeOutSpeed (default:1000 millis)
- styleClass - CSS class for all messages wrapper (fixed box in upper right corner that holds the messages)
It is skinable. Background (for curvy corners) is generated on the fly. As for now the background is the same for all severities. The icons depend on severity and are also modifiable via CSS. They are stored as images in JAR.
As for JavaScript, the jquery.gritter.js, the jQuery plugin, is used with minor modifications, which will be soon proposed as patches to it's author. Rendered output is really slim thus good for frequent AJAX re-rendering.
TODO:
- work on CSS
- introduce new skin properties
-
growl-3.3.0.GA.jar 43.9 KB
-
growl.tar.bz2 26.4 KB
-
7. Re: Growl
ilya_shaikovsky Apr 23, 2010 2:17 AM (in response to blabno)yay! Thats really fast and sounds cool!!
Will review the component and demo today.. but quick concern about new skin properties.. in general current skin properties is minimal set. And we took it as minimal as possible in order to avoid richfaces-css analog product to appear . We make our best to introduce base look and feel by this minimal set and provide rich- classes which could extend this easilly.
So how about next proposal.. popups with different severities could still be differentiated by default icons but have still the panel look and fell which Nick already proposed. And for the end-developers - it still could be really easy custoizable by using CSS classes which should differs for different popups.
-
8. Re: Growl
blabno Apr 23, 2010 9:23 AM (in response to ilya_shaikovsky)Ok, so lets stay with same background for all severities and differentiate them with icons. If end-dev wants to have different background then backgroundPanelColor or wants to have different color for each severity then he shall provide copy of current image with different color.
What do you say about curvy corners as they are now? Are they needed? They look cool with Primefaces.
We need to beautify the colors and CSS for this component looks poor in standard skining compering to Primefaces.
Ok. That should be enough for this component. Any more comments are welcome. Now I'm switching to implementing schedule component.
-
9. Re: Growl
ilya_shaikovsky Apr 23, 2010 9:36 AM (in response to blabno)If end-dev wants to have different background then backgroundPanelColor or wants to have different color for each severity then he shall provide copy of current image with different color.
slightly confused by
provide copy of current image
he shall be able just to redefine corresponding rich class with specifyin custom bg-color.
Soryy if misunderstand somthing.
-
10. Re: Growl
jbalunas Apr 29, 2010 4:59 PM (in response to blabno)HI Bernard,
Very sorry for not getting back to this sooner, there has been a sudden flurry of activities and meetings.
I'm a little concerns because all of this effort is for 3.3.X, and at this point we're all moving on to 4.0. If you do add your code to 3.3.X then it would be available in snapshot releases, but we're not planning another 3.3.X release at this time.
Have you given any thought back to 4.0.X? Nick, Alex, and I will be redesigning the 4.0 build structure in the next couple of weeks to be easier to navigate and understand.
As for the component. I agree with only having one "style" while allowing the image to shift. This way skinning will be easier and get the best "bang for the buck". While still allowing customizations for those that want with images, and styles.
For curvy corners - I think they do look good, and would prefer them. My question to you would be trade offs. What do you see as tradeoffs for this?
Next Actions:
We'll need you to sign a CLA agreement ( just a standard open source contributors agreement ). You can do that and check it out here - https://cla.jboss.org/ . This will allow us to use your code, and is the path to committer rights eventually.
Then either you can or we can create update https://jira.jboss.org/jira/browse/RF-7281, Then we can upload your code, talk more about how to get into the project, and see whats next :-)
Please think about the 4.0.X branch? It would help us to get some outside opinions on the CDK, and any missing component parts.
Thanks Again,
Jay
-
11. Re: Growl
jbalunas Apr 29, 2010 5:02 PM (in response to blabno)I also agree we need to get some more default styling in place - make it look cool :-)
-
12. Re: Growl
blabno May 4, 2010 9:09 AM (in response to jbalunas)Hi,
Demo has been updated to allow user to modify growl component's properties online.
-
13. Re: Growl
jbalunas May 4, 2010 10:16 AM (in response to blabno)Excellent Bernard!!
I will take a look as soon as I can.
Prepping for our team meeting at #richfaces irc.freenode.net.
-
14. Re: Growl
jbalunas May 6, 2010 9:56 AM (in response to blabno)That update is really great! I also like the updated styling :-)