[Zope-Moz] Fw: [IMPORTANT!] XUL Widget Conversion
Martijn Pieters
mj@digicool.com
21 Mar 2000 08:15:57 +0100
ZopeStudio will have to follow the same rules, except for the colors
(last point). I will try and generalize any coloring I need into a
general section of zopestudio.css.
-----------------------------------------------------------------------
From: David Hyatt <hyatt@netscape.com>
I thought I'd post a couple of tips and tricks to help parallelize the
conversion of XUL/JS/CSS files. First of all, for anyone who's been
living under a rock and hasn't been reading news, here's what's going
on.
All HTML is being eliminated from XUL. Every last shred. Your mission,
should you choose to accept it, is to convert your dialogs and windows
over to this brave new world. This document will give you some tips on
how to begin this process.
Second, we're going to make sure that all XUL is skinnable. There are a
couple of easy tests that can tell you where your problem areas are.
(1) Identifying widgets that need to be converted.
Add the following rules to global.css:
===========================================
html|* {
border: 1px solid red !important;
}
html|form {
border: none !important;
}
titledbutton {
border: 1px solid blue !important;
}
============================================
These rules will cause all occurrences of HTML to be outlined in red.
This makes it easy for you to spot anything in your dialog that is still
using HTML. In addition, all occurrences of <titledbutton> are outlined
in blue. These need to become XUL buttons (the <button> tag).
With these rules, you'll know exactly where all your problems are.
Eventually we will even turn these rules on by default, and this will be
a forcing function that will ensure you clean up your dialogs/windows
before shipping. For now, though, I'm just posting the rules and giving
you a chance to get a jump on the conversion. :)
(2) Converting HTML to XUL
Checkboxes
<input type="checkbox"> ===> <checkbox>
Radio Groups
<input name="groupName" type="radio" id="anItem">
====> <radiogroup> ... <radio id="anItem"/> ... </radiogroup>
Combo Boxes/Popup Menus
<select> =====> <menulist>
Tables (not ready yet, but coming quite soon)
<table> ======> <grid>
Iframes
<iframe> ====> <iframe> or <browser> or <editor>
Buttons
<titledbutton> ====> <button>
Images
<img> =====> <image> (but style it! don't use src="")
Lists
<select size="n">, n > 1 ======> <tree>
<div> =====> <html>, although question why you had a div in the first
place and eliminate it if you can. Blind div conversions should not be
done. In almost all cases, you should be able to write your dialog
without needing to use the <html> tag.
Textfields and textareas (not ready yet, but coming very soon)
<textarea> ====> <textarea>
<input> =====> <textfield>
(2) Testing skinnability.
(a) Test fonts. Find the following rule in global.css...
/**
* The is the outer most tag in a xul document all xul
* content will be inside it.
*/
window {
background-color: white;
font: 3mm arial,helvetica,sans-serif;
padding: 0px;
}
... and change it so that the font is HUGE. Now change it so that the
font is TINY. Dialogs should grow and shrink with the font size. If
your window suddenly starts looking bad, it means you've hardcoded pixel
widths and heights into widgets (e.g., into trees or lists), and this is
unacceptable. You should be using ems instead. Windows that do not
intrinsically size are excluded from this rule.
(b) Test colors. Gut global.css and remove EVERYTHING but the following
rule (which seems to be required for some reason, sigh).
/**
* removed 2px black border from iframe
*/
html|iframe {
min-width: 10px;
min-height: 10px;
width: 100px;
height: 100px;
border: none;
}
What should happen: your XUL should become completely bald, black text
on a white background all scrunched together. The only color visible in
your window should come from icons. If you have ANY color that does not
come from icons, then you've messed up. For example, I notice that the
sidebar and taskbar are specifying their own colors. This is BAD BAD
BAD.
What you need to do is identify those areas in your components that
require a color, and then you need to tell Ben, who can make sure you
have a class in global.css from which you can obtain the appropriate
color. DO NOT SPECIFY THE COLOR ON YOUR OWN.
When all is said and done, your derived CSS files should contain nothing
more than icons, and maybe a bit of padding/margin/display info. That's
it.
Hopefully these tricks will help you get started. We have a long way to
go, and we have to get there by beta2. Let's get cracking. :)
Dave
(hyatt@netscape.com)
------------------------------------------------------------------------
--
Martijn Pieters
| Software Engineer mailto:mj@digicool.com
| Digital Creations http://www.digicool.com/
| Creators of Zope http://www.zope.org/
| The Open Source Web Application Server
---------------------------------------------