Re: [PROPOSAL] Keel look and feel
"Sasvata (Shash) Chatterjee" <[email protected]>
| Newsgroups | gmane.comp.java.keel.devel |
|---|---|
| Message-ID | <[email protected]> |
Pierre,
I started last night to break out the header, CSS etc. from the apps. I
got app-personality created, and am now going through and cleaning out
the app-* (so far, app-register and clnt-struts are done). Once I check
that in, you can take app-personality and put these files in and
integrate them, we can all get a chance to look at it actually working
and judge. Until then, what does this do differently from what we
have? Am I understanding correctly, that we still need Javascript (in
the .htc file) for IE anyway?
Alex,
Sitemesh allows a runtime decision on which decorator to use. Once I am
done with the first few passes, we can also think about multiple
"personality" (Keel already has disorders, mabe this can be a new one
:-)) or "skin" directories and use a cookie or a session variable to
determine at run time which skin to use, mabe even on a per-user basis.
I am not volunteering to do that part :-), just saying it is possible.
Shash
Raoul Pierre wrote:
> Shash
>
> Sasvata (Shash) Chatterjee a écrit :
>
>> Pierre,
>>
>>>
>>> About app-navigate, I just replace all the hard coded styles *and*
>>> javascript by *only* CSS (cf. Meyer indeed). Are you interested?
>>>
>> I have no idea what "cf Meyer" is :-). But always interested in
>> looking at alternatives, let us know what you propose.
>>
> I get all the idea from "More Eric Meyer on CSS" from ... Eric Meyer,
> a CSS guru
>
>> The app-naviagte js works great for me on several browsers I tried
>> (I have changed to use configured postions, sizes, colors already).
>> How about the CSS menu, how does it work cross-browser?
>>
> Quite good, but it need a htc file for IE.
> I tested this css with IE 6 and FireFox without problem.
>
> The CSS menu is not the "absolute" way. But as a first step it's
> simpler than the javascript code in app-navigate. And if a more
> powerfull tool is needed then there is MenuStruts, JsCookMenu...
> It's also possible to keep the two and give a choice to the
> programmer. This is what I done in my project throughTiles definitions.
>
> Pierre
>
> PJ: css, jsp & htc files
>
>------------------------------------------------------------------------
>
> /* Ref.: More Eric Meyer on CSS, Eric Meyer
> Note: use Peter Nederlof's file "csshover.htc", cf. http://www.xs4all.nl/~peterned/csshover.html
>
> TODO: possibilité de barre séparatrice : lorsqu'un élément de la liste est vide,
> lui associer une boite de hauteur nul avec une bordure horizontale plus marquée
> TODO: menu à largeur automatique ? Ajouter des "div" pour
> englober les "ul" des sous menus ?
> Ou bien cela nécessite-t-il de toute façon Javascript ? Et dès lors quid
> d'utiliser un framework tel que StrutsMenu ? Ou MyFaces+JsCookMenu ?
> Ce dernier semble plus abouti mais nécessite l'intégration de MyFaces
> avec Struts. A priori MyFaces fournit ce qu'il faut.
>
> */
>
> /* with instruction below, css validation isn't possible
> if needed, put it in a separate file and import this file
> */
> body {behavior: url(csshover.htc));} /* Win IE behavior call */
>
> #nomenu {display:none;}
>
> /* It seems IE need "div#pageBanner" and not "#pageBanner" alone */
> div#navbar {
> z-index: 2; /* To show menu above the other contents */
> position: absolute; /* "position" declaration Needed to use "z-index", no matter what kind
> but "relative" forces next block to be under the menubar */
> top: 0; left: 7px; /* default top and left margin of -8px for "body" with NS, IE & FF;
> and same default padding with Opera; others?
> But if left offset < -1px with FF, then border problems */
> background: #6699cc; /* Only for the menubar, not for submenu */
> border: 1px solid white;
> float: left; /* To give a height and a width to the menubar, so that
> border and background are ok
> */
> font-size: small;
> }
> div#navbar ul { /* Caution: first level of "ul" has no height! */
> position: relative;
> left: +1px; /* To mask right border of the rightest link box in level 1 */
> margin: 0; padding: 0;
> }
> div#navbar li {
> position: relative; /* To use "display" in "div#navbar li a" below
> without knowing if any "position" declaration in ancestors */
> list-style: none; /* To remove list marker */
> margin: 0; padding: 0;
> float: left; /* To get horizontal menu bar */
> width: 10em; /* See IE hack for "div#navbar li a" below */
> line-height: 1em;
> border-right: 1px solid white; /* only for the first level of "ul"; use the same color than navbar div border's one */
> }
> div#navbar ul ul {
> position: absolute;
> width: 15em; /* For IE */
> display:none;
> background: #eeeeee; /* Default color for submenu */
> border: 1px solid white;
> }
> div#navbar ul ul li { /* in submenus:... */
> position:relative;
> left: -1px; /* To remove the "left:-1px" in "div#navbar ul" */
> top: +1px; /* To mask bottom border of the bottom link box in level 2 */
> border-bottom: 1px solid white; /* All link boxes with only bottom border of a soft color*/
> width: 15em;
> }
> div#navbar ul.level1 li.submenu:hover ul.level2,
> div#navbar ul.level2 li.submenu:hover ul.level3 {display: block;}
> div#navbar ul.level2 {top: 1.5em; left: -1px;}
> div#navbar ul.level3 {
> top: -1px; left: 15em; /* value <> 15em, to avoid border overlap problem */
> }
> div#navbar li:hover {background: #00bbff;}
> div#navbar li li:hover {background: #3333ff;}
> div#navbar li.submenu {position: relative;} /* To position "span" inside submenu link boxes */
> div#navbar li.submenu span { /* Use of ">" character to avoid loading a picture */
> position: absolute; /* Needed to use "top" and "right" */
> top: 0; /* Needed to keep the character inside the box.
> Haven't been able to get anything with "vertical-align" */
> right: 0.2em;
> font-weight: bold;
> color: white;
> }
> div#navbar li li.submenu span {color:black;} /* See below, "div#navbar li:hover a" */
> div#navbar li.submenu:hover span {color:black;}
> div#navbar li:hover li.submenu span {color:black;}
> div#navbar li:hover li.submenu:hover span {color:white;}
> div#navbar li a {
> display: block; /* To get all the menu box reactive (not only the link) to cursor */
> padding: 0.25em 0 0.25em 0.5em;
> text-decoration: none; /* To remove link underline */
> width: 9.5em; /* with IE hack : any width should be ok, as long as link is readable */
> color:white; /* light color here if menubar background is dark, opposite otherwise*/
> }
> div#navbar li li a {
> color:black; /* light color here if submenu background is dark, opposite otherwise*/
> width: 14.5em;
> }
> div#navbar > ul a {width: auto;} /* And for other browsers */
> div#navbar li:hover a {color: black;} /* To keep menubar link text in "hover" color when cursor in submenu */
> div#navbar li:hover li a {color: black;} /* But in submenu link text must stay in non "hover" color */
> div#navbar li:hover li a:hover {color: white;} /* Unless the one with the cursor on */
>
>
>------------------------------------------------------------------------
>
><attach event="ondocumentready" handler="parseStylesheets" />
><script language="JScript">
>/**
> * Pseudos - V1.30.050121 - hover & active
> * ---------------------------------------------
> * Peterned - http://www.xs4all.nl/~peterned/
> * (c) 2005 - Peter Nederlof
> *
> * Credits - Arnoud Berendsen
> * - Martin Reurings
> * - Robert Hanson
> *
> * howto: body { behavior:url("csshover.htc"); }
> * ---------------------------------------------
> */
>
>var currentSheet, doc = window.document, activators = {
> onhover:{on:'onmouseover', off:'onmouseout'},
> onactive:{on:'onmousedown', off:'onmouseup'}
>}
>
>function parseStylesheets() {
> var sheets = doc.styleSheets, l = sheets.length;
> for(var i=0; i<l; i++)
> parseStylesheet(sheets[i]);
>}
> function parseStylesheet(sheet) {
> if(sheet.imports) {
> try {
> var imports = sheet.imports, l = imports.length;
> for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
> } catch(securityException){}
> }
>
> try {
> var rules = (currentSheet = sheet).rules, l = rules.length;
> for(var j=0; j<l; j++) parseCSSRule(rules[j]);
> } catch(securityException){}
> }
>
> function parseCSSRule(rule) {
> var select = rule.selectorText, style = rule.style.cssText;
> if(!(/(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i).test(select) || !style) return;
>
> var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
> var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
> var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
> var affected = select.replace(/:hover.*$/, '');
> var elements = getElementsBySelect(affected);
>
> currentSheet.addRule(newSelect, style);
> for(var i=0; i<elements.length; i++)
> new HoverElement(elements[i], className, activators[pseudo]);
> }
>
>function HoverElement(node, className, events) {
> if(!node.hovers) node.hovers = {};
> if(node.hovers[className]) return;
> node.hovers[className] = true;
> node.attachEvent(events.on,
> function() { node.className += ' ' + className; });
> node.attachEvent(events.off,
> function() { node.className =
> node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
>}
>
>function getElementsBySelect(rule) {
> var parts, nodes = [doc];
> parts = rule.split(' ');
> for(var i=0; i<parts.length; i++) {
> nodes = getSelectedNodes(parts[i], nodes);
> } return nodes;
>}
> function getSelectedNodes(select, elements) {
> var result, node, nodes = [];
> var classname = (/\.([a-z0-9_-]+)/i).exec(select);
> var identify = (/\#([a-z0-9_-]+)/i).exec(select);
> var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
> for(var i=0; i<elements.length; i++) {
> result = tagName? elements[i].all.tags(tagName):elements[i].all;
> for(var j=0; j<result.length; j++) {
> node = result[j];
> if((identify && node.id != identify[1]) || (classname && !(new RegExp('\\b' +
> classname[1] + '\\b').exec(node.className)))) continue;
> nodes[nodes.length] = node;
> }
> } return nodes;
> }
></script>
>
>------------------------------------------------------------------------
>
><jsp:directive.page language="java" />
><jsp:directive.include file="/common/taglibs.jspf" />
>
><%-- The output from this jsp can be included anywhere in the (X)HTML page.
> It uses the app-navigate parameter "menu" to make nested lists.
>
> No Javascript here, only CSS!
>
> Note: when the cursor goes out of any menu area, all the submenus vanish
> *immediatly*. To get some latence time, Javascript is needed.
>
> --%>
>
>
><div id="navbar">
><c:if test="${! empty menu}">
> <ul class="level1">
> <logic:iterate id="topelement" name="menu" property="nested">
> <bean:define id="topelement_title" name="topelement" property="attributes.title" type="java.lang.String"/>
> <li class="submenu">
> <a href="">${topelement_title}</a>
> <ul class="level2">
> <logic:iterate id="secondelement" name="topelement" property="nested"> <%-- iterator over all second level elements --%>
> <bean:define id="secondelement_title" name="secondelement" property="attributes.title"/>
>
> <logic:present name="secondelement" property="attributes.model">
> <bean:define id="secondelement_model" name="secondelement" property="attributes.model"/>
> <c:url var="secondelement_path" value="/model.do?model=${secondelement_model}"/>
> <logic:present name="secondelement" property="attributes.parameters">
> <bean:define id="secondelement_parameters" name="secondelement" property="attributes.parameters"/>
> </logic:present> <%-- secondelement parameters attribute --%>
> <logic:notPresent name="secondelement" property="attributes.parameters">
> <c:set var="secondelement_parameters" value=""/>
> </logic:notPresent> <%-- no secondelement parameters attribute --%>
> </logic:present> <%-- secondelement model attribute --%>
> <logic:notPresent name="secondelement" property="attributes.model">
> <logic:present name="secondelement" property="attributes.url">
> <bean:define id="secondelement_url" name="secondelement" property="attributes.url"/>
> <c:url var="secondelement_path" value="${secondelement_url}"/>
> </logic:present> <%-- if there is a secondelement url attribute --%>
> <logic:notPresent name="secondelement" property="attributes.url">
> <c:url var="secondelement_path" value=""/>
> </logic:notPresent> <%-- no secondelement url attribute --%>
> <c:set var="secondelement_parameters" value=""/>
> </logic:notPresent> <%-- no secondelement model attribute --%>
>
> <li class="submenu">
> <a href="${secondelement_path}${secondelement_parameters}">${secondelement_title}</a>
> <logic:notPresent name="secondelement" property="nested">
> </a>
> </logic:notPresent>
>
> <logic:notEmpty name="secondelement" property="nested">
> <span>></span></a>
> <ul class="level3">
> <logic:iterate id="thirdelement" name="secondelement" property="nested">
> <bean:define id="thirdelement_title" name="thirdelement" property="attributes.title"/>
> <logic:present name="thirdelement" property="attributes.model">
> <bean:define id="thirdelement_model" name="thirdelement" property="attributes.model"/>
> <c:url var="thirdelement_path" value="/model.do?model=${thirdelement_model}"/>
> <logic:present name="thirdelement" property="attributes.parameters">
> <bean:define id="thirdelement_parameters" name="thirdelement" property="attributes.parameters"/>
> </logic:present> <%-- thirdelement parameters attribute --%>
> <logic:notPresent name="thirdelement" property="attributes.parameters">
> <c:set var="thirdelement_parameters" value=""/>
> </logic:notPresent> <%-- no thirdelement parameters attribute --%>
> </logic:present>
> <logic:notPresent name="thirdelement" property="attributes.model">
> <logic:present name="thirdelement" property="attributes.url">
> <bean:define id="thirdelement_url" name="thirdelement" property="attributes.url"/>
> <c:url var="thirdelement_path" value="${thirdelement_url}"/>
> </logic:present>
> <logic:notPresent name="thirdelement" property="attributes.url">
> <c:url var="thirdelement_path" value=""/>
> </logic:notPresent>
> <c:set var="thirdelement_parameters" value=""/>
> </logic:notPresent>
> <li><a href="${thirdelement_path}${thirdelement_parameters}">${thirdelement_title}</a></li>
> </logic:iterate> <%-- third element --%>
> </ul>
> </logic:notEmpty> <%-- second element --%>
>
> </li>
> </logic:iterate> <%-- all second-level elements --%>
> </ul>
> </li>
> </logic:iterate> <%-- top level elements --%>
> </ul>
></c:if> <%-- menu --%>
></div>
>
>
>
http://keelframework.org/documentation.shtml
Keelgroup mailing list
[email protected]
http://lists.keelframework.com/listinfo.cgi/keelgroup-keelframework.com