Copyright 2001 Michael Slinn JBrowCaps Open Source Browser Independent Page Rendering for Java...

Copyright 2001 Michael Slinn

JBrowCapsJBrowCapsOpen Source Browser Independent Page Rendering

for Java Servlets

Mike [email protected]

www.mslinn.com

http://sourceforge.net/projects/jbrowcaps/http:// jbrowcaps.sourceforge.net/


Incompatible Browsers

• Microsoft and Netscape browsers don’t speak the same language.

• Older browsers are at a disadvantage without style sheets.

• More browsers show up every day.• The result is …

Chaos!Chaos!(and lots of extra work for nothing)


Problem Not Going Away

• Microsoft has been successful in upgrading Internet Explorer users

• Netscape users tend not to upgrade

• New devices constantly appearing (WAP, i-mode cHTML, etc.)


Browser Share at mslinn.com

MSIE34%

Netscape28%

Unknown

35.0%

WebTV0.2%

Opera0.4%

AOL3%

(as of March 2001)


Netscape Distribution by Version

5.x5%

4.x37%

3.x58%


Instead of This …


16% of Visitors See This!


Problem Continues to Grow

• Increasingly expensive to maintain multiple versions of web site HTML


What Makes JBrowCaps Special?

• Markup is defined in JSP file, not in Java code (unlike ECS)

• Stylesheet is the single source for markup definition for all browser types!

• Nice transition between HTML/XML page design tool and JSP

• Extensible (for cHTML, XML, etc.)


Good CSS Source is Important

• Change look and feel of a web app by editing CSS, even for browsers that aren’t CSS aware

• JBrowCaps does not assume any defaults

• Baseline HTML definitions necessary


CSS Terminology

Bug {color:white; background-color:blue; display:block;}

Selector Rule


JBrowCaps CSS Parsing

• Multiple selectors per rule permitted: h1, h2 {color:red; display:block;}

• Selector redefinition permitted: h1, h2 {color:red; display:block;}

h1 {font-size:20pt;}

h2 {font-size:16pt;}

• Selectors are case sensitive! H1 is NOT the same as h1


<div> and <span>

• <div> breaks the marked up output• <span> flows the marked up output into the

current line.

• JBrowCaps uses <div> and <span> according to type of CSS tag applied


CSS display Attribute

• CSS display attribute is key to selecting <div> or <span>

• display:inline generates <span>

• display:block generates <div>


CSS Enabled Browser Output

• StyleOn– <h1>– <h1.blah>– <h1 class=“blah”>– <span class=“blah”> or

<div class=“blah”>• StyleOff

– </h1>– </h1.blah>– </span> or </div>


CSS Challenged Browser Output

• StyleOn– <h1><font color=red>

• StyleOff– </font></h1>


Inside Tag Libraries

• Tomcat’s Jasper compiles JSPs into servlets

• .tld files are used by Jasper to verify taglib syntax

• At run time, tag library code uses PageContext class to access request, response and servletContext


Tomcat’s Tag Library Problem

• TagExtraInfo() is called by Jasper at page translation time to define the tag library’s scripting variables

• Unfortunately, Tomcat’s current implementation does not provide TagExtraInfo() access to pageContext

• This means that parameters to tag libraries cannot use URLs or directory names that are relative to the web application


JBrowCaps Work-Around

• Use absolute file names when pointing to CSS files (non-portable, unfortunately)

<jbc:useCss cssFile=/root/webapp/EN.css' />

• I reported bug #75 in Apache’s Tomcat Bugzilla database, but no commitment was made to fix it


JBrowCaps Custom Tag

• <jbc:useCss cssFile=‘/root/mywebapp/EN.css' debug=‘false’ strict=‘false’ declare=‘h1, h2, bug’ />

• Optional attributes are shown in white

• If declare is not provided, all symbols in CSS file are defined in JSP


Using JBrowCaps<%@ page session="true" %><%@ taglib uri="/WEB-INF/jbrowcaps.tld"

prefix="jbc" %><jbc:useCss

cssFile='D:/JavaProjects/jBrowCaps/webapp/EN.css' />

<link rel="stylesheet" type="text/css" href="/EN.css">

<body <%=body%>><%=h1On%>JBrowCaps Custom Tag Test<%=h1Off

%><%=bugOn%>This is a test<%=bugOff%>


Internet Explorer 5.5 Output


Netscape 4.7 Output


Netscape 3.3 Output


JBrowCaps Data Structures

CSSStylesheet

File

JBrowCaps(various classes)

cssTrueHashMap

cssFalseHashMap

Each HashMap stores three kinds of tags, directed to different browser capabilities, for each CSS selector.

Setting background color and image: <%=style%>Start of marked up text: <%=styleOn%>End of marked up text: <%=styleOff%>


Future Browser Support

CSSStylesheet

JBrowCaps

cssTrueHashMap

cssFalseHashMap

i-mode cHTML

HashMap


JBrowCaps Classes

• JBrowCapsTag – tag library runtime• JBrowCapsTagExtraInfo – translation time• StyleSheet – main class; application bean• HtmlFormat – translates between CSS tags

and various flavors of markup• CssRule – parses CSS selectors• BrowserDetector – initialization only• TurbineException – used by BrowserDetector


To Do

• HtmlFormat is not complete. The matrix of browser version vs. tag support needs to be completed.

• More testing

• More sample pages and documentation

• Optimization

• Any volunteers for this open source project?http://sourceforge.net/projects/jbrowcaps/

Copyright 2001 Michael Slinn JBrowCaps Open Source Browser Independent Page Rendering for Java...

Documents

Transcript of Copyright 2001 Michael Slinn JBrowCaps Open Source Browser Independent Page Rendering for Java...