Monday, May 10, 2010

Mobile Web in JavaME apps - now with CSS!

Twitter's home page as rendered by HTMLComponent before CSS support and after

Following my post on Mobile Web in JavaME that discussed the new possibility of embedding web content inside LWUIT applications using HTMLComponent, I'm glad to announce that CSS support was added to HTMLComponent and is now publicly available in the LWUIT SVN.

Now, developers can not only render HTML documents in their JavaME apps, but can also design them with CSS by adding colors, borders, backgrounds, fonts and more. This means that now HTMLComponent is almost fully compliant with the XHTML Mobile Profile 1.0 standard, which requires WCSS support (WCSS specs here)

The support is about 90% complete and provides almost complete coverage for most pages today. The 10% that were not implemented (at least yet) are features that do not sit well with LWUIT's styling model and/or they require extensive efforts and provide with little value (Some of these are less used tags or edge cases). In any case, you should be able to see most pages rendered correctly (And if you create your own content you can simply avoid using unsupported properties for now).

And while there's a great difference in how HTML pages will look now, the change is transparent to developers, and there's almost no difference in using HTMLComponent. Basically once you load a page that has CSS segments (either external, embedded or via the style attribute) they will be parsed and rendered.

The only difference is that you can turn CSS off by calling HTMLComponent's setIgnoreCSS method, if you don't want CSS segments parsed for some reason. And actually there may be reasons for that - CSS does require extra memory, and adds some performance overhead as well, all depending on how complex the CSS used in specific pages are.

There are also more esoteric methods such as addSpecialKey and setCSSSupportedMediaTypes - I won't go into details on those here, you can read the documentation.

Here's the full list of what's supported and what not:

Fully supported CSS properties

Background: background-color, background-image, background-repeat, background-attachment, background-position-x, background-position-y
Border: border-*-width, border-*-style, border-*-color
Fonts: font-family, font-size, font-style, font-weight, font-variant
Lists: list-style-image, list-style-position, list-style-type
Margins: margin-* , padding-*
Text: text-align, text-indent, text-transform
Misc: color, height, width, visibility
WAP : -wap-access-key,-wap-input-format,-wap-input-required
Shorthand properties: All shorthand properties are fully supported
(* = top/left/bottom/right)

Unsupported/Partially supported properties:

Unsupported: clear, float

Partially supported:
- display - Supported: none, marquee / Unsupported: block, inline , list-item
- white-space - Supported: normal, nowrap / Unsupported: pre
- vertical-align - Works only within tables

Known issues
  • width/height work for simple elements, but may be problematic with complex elements.
  • font-family accepts the first mentioned font and ignores all fallback fonts, since finding a matching font is very time consuming, and also since in the ME environment usually there aren't that many fonts anyway.
  • text-decoration is unrelevant: since the only mandatory WCSS decoration value is 'none' which is usually used to remove underlines from links - since we don't have underlines it has no meaning.
  • text-transform may have issues when overriding a parent which has a different transform.
  • HTMLComponent.FIXED_WIDTH mode does not work with some CSS attributes, and thus its default value is now false (The downside is that in FIXED_WIDTH mode 'justify' alignment doesn't work).
  • Some properties will be ignored if associated with a pseudo-class (such as a:focus/hover) - and that's because while LWUIT does have separate styles for selected, unselected and pressed states - these styles include properties such as padding, margins, colors, background, font - but for example not alignment or visibility which affect the component in all of its states.


10 comments:

Anonymous said...

Nice, this is great news.
Thanks

amar said...

Hi. Is it possible to split the parsing and rendering into different categories? The idea being, end user can parse the incoming html and use native controls in lwuit to render rich content.

Regards

Ofir Leitner said...

Currently the parsing code and the DOM model is internal, i.e. has no public access - however we do plan to open it up some time in the future.

Also note that rendering is actually already done to LWUIT components at least in most cases - a text field maps to LWUIT's TextField, form buttons map to Button etc.

amar said...

Thank you. Unfortunately I will not be able to apply styles and themes to the components. What classes would I need to modify to expose the parsing and the dom model so that I can do my own custom rendering of the components? I would appreciate some help in this regard.

Regards

Ofir Leitner said...

First, you actually can change the styles - for example, changing the Button style in the resource file affects buttons inside the HTML, same goes for other types of components.
In addition there are a few new UIIDs such as HTMLLink that affects links look and feel.
Soon we will have detailed documentation on the available styles.


As for moifying classes - I can't go into too much detail here, but you can check yourself the process done within the html package.

Gonzo said...

Hi, I'm developing an application that uses LWUIT HTMLComponent but CSS support does not work according to the specifications. I have a simple embedded HTML table with CSS inside a string. Can you give me ani help? Thanks!

Svetlin Ankov said...

I am making an e-book reader for the j2me and it would have been incredibly useful if the process was split in two parts (layouting and rendering), so that the current viewport could be rendered on any Graphics object. It's a pity that it seems this component (at least considering the design goals its following) wouldn't be able to be of any help to me.

Ofir Leitner said...

Ariel - Post this question in the LWUIT forum:
http://forums.java.net/jive/forum.jspa?forumID=139

You can also add the CSS that causes the problems.

Ofir Leitner said...

Svetlin you can describe what you need in the LWUIT forum, and perhaps I can help:

http://forums.java.net/jive/forum.jspa?forumID=139

Nick Thompson said...

Great post! Thanks for sharing your extensive knowledge in CSS for mobile web apps. Looking forward to reading more.