I hate to duplicate posts to get my posts noticed, but I need to get some questions answered on why Sidewinder renders different than what is rendered by IE 7.0. IE 7.0 renders the expected way, but Sidewinder does not; here is my duplicate post:
Thanks for the advice on the hints. That seemed to have alleviated the hint problem in IE7.
Now, I need to comment on Sidewinder and ask a few more questions:
In the latest Sidewinder viewer 2.0, the same document that displays the controls correctly in IE7, does not display correctly in Sidewinder. I'll focus my comments on Sidewinder because I believe the same renderer fixes will allow my embedded Sidewinder rendering application to function in the same ways as the Sidewinder viewer is functioning.
First, in Sidewinder, the hints are still single word per line, even with the hint width set to 200px.
Second, the second and subsequent labels, input, select1, and select controls are displayed on the same line as the URL label and input control. Depending upon the size of the window, the controls will move around as if they never got the command to be on separate lines to begin with:
xf\:input,
xf\:select,
xf\:select1,
xf\:textarea,
xf\:output
{
width : 100%;
Third, the labels align vertically to the bottom of the control height, whereas the examples in the tutorial show them at the top. This happens in IE7 and Sidewinder.
Fourth, if I put the hint command for the "description" textarea before the help command, the hint does not function properly. Putting the hint after the help works. This happens in IE7 and Sidewinder.
And finally, some question specifically about the Sidewinder renderer: When will there be a significant update to it, fixing these and other problems? And, is there another option for embedding XForms functionality into an application other than the Sidewinder renderer?
Here is my document:
<?xml version="1.0" encoding="utf-8"?>
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
>
<head>
<object width="0" height="0" id="formsPlayer"
classid="CLSID:4D0ABA11-C5F0-4478-991A-375C4B648F58"
codebase="http://skimstone.x-port.net/files/releases/formsPlayer1.4.3.1028.cab#Version=1,4,3,1028"
>
<b>formsPlayer has not been installed.</b>
</object>
<?import namespace="xf" implementation="#formsPlayer"?>
<title>Submit link to del.icio.us</title>
<style type="text/css">
html
{
font-family : "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
font-size : x-small;
}
xf\:input,
xf\:select,
xf\:select1,
xf\:textarea,
xf\:output
{
width : 100%;
padding-top : 0.4em;
padding-bottom : 0.1em;
border-bottom : #d0c49d 1px dashed;
}
xf\:hint
{
width : 200px;
}
.input-value,
.select-value,
.select1-value,
.textarea-value
{
background-color : lightgreen;
}
xf\:input xf\:label,
xf\:select xf\:label,
xf\:select1 xf\:label,
xf\:textarea xf\:label
{
width : 12em;
vertical-align : middle;
margin-right : 0.2em;
}
.pc-enabled
{
-event-xforms-enabled : fx-Effect-Highlight();
}
</style>
<xf:model>
<xf:submission id="sub-add-link" action="http://del.icio.us/api/posts/add" method="get">
<xf:message level="modal" ev:event="xforms-submit-error">
Please ensure that you have entered both a
URL <em>and</em> a title.
</xf:message>
</xf:submission>
<xf:bind nodeset="url" required="true()" />
<xf:bind nodeset="description" required="true()" relevant="../url != ''" />
<xf:bind nodeset="extended" relevant="../url != '' and ../description != ''" />
<xf:bind nodeset="tags" relevant="../url != '' and ../description != ''" />
<xf:bind nodeset="replace" relevant="../url != '' and ../description != ''" />
<xf:bind nodeset="dt" type="xs:date" relevant="../url != '' and ../description != ''" />
<xf:setvalue ev:event="xforms-ready" ref="replace">yes</xf:setvalue>
</xf:model>
</head>
<body>
<xf:input ref="url">
<xf:label>URL:</xf:label>
<xf:hint>Please enter the URL for the link you want to store</xf:hint>
</xf:input>
<xf:input ref="description">
<xf:label>Title:</xf:label>
<xf:hint>Enter a <strong>title</strong> for the link</xf:hint>
</xf:input>
<xf:textarea ref="extended">
<xf:label>Description:</xf:label>
<xf:help>
As well as providing a title for your link, del.icio.us
allows you to add a full description.
</xf:help>
<xf:hint>Enter a <strong>description</strong> for the link</xf:hint>
</xf:textarea>
<xf:select ref="tags" appearance="full">
<xf:label>Tags:</xf:label>
<xf:hint>Enter some <em>tags</em> for the link</xf:hint>
<xf:item>
<xf:label>XForms</xf:label>
<xf:value>xforms</xf:value>
</xf:item>
<xf:item>
<xf:label>Skiing</xf:label>
<xf:value>skiing</xf:value>
</xf:item>
</xf:select>
<xf:input ref="dt">
<xf:label>Date:</xf:label>
<xf:hint>Enter a date to store with this link</xf:hint>
</xf:input>
<xf:select1 ref="replace" appearance="full">
<xf:label>Replace:</xf:label>
<xf:hint>
Set this to <em>no</em> to prevent
del.icio.us from overwriting a previous entry
for the same link, if one exists.
</xf:hint>
<xf:item>
<xf:label>Yes</xf:label>
<xf:value>yes</xf:value>
</xf:item>
<xf:item>
<xf:label>No</xf:label>
<xf:value>no</xf:value>
</xf:item>
</xf:select1>
<xf:submit submission="sub-add-link" ref="extended">
<xf:label>
<img src="http://del.icio.us/static/img/delicious.gif" alt="" />
Save
</xf:label>
</xf:submit>
</body>
</html>
CSS bugs in Sidewinder
Hi Dean,
I was originally going to reply to your post by documenting Sidewinder's CSS 3 interpretation, which includes resolution of properly namespaced CSS 3 selectors. However, I've just discovered that code is broken for now. Until it is fixed and documented then, I have raised another bug to fix the styling problem you describe here. A new version of Sidewinder should then follow in the near future.
--
Phil Booth, formsPlayer
www.formsPlayer.com
standards. innovation.
New version of Sidewinder available
Dean,
An updated release that addresses this CSS problem is now available from the Sidewinder releases page. Please note that this release has not been made the default version for download due to other outsanding issues.
Phil.
--
Phil Booth, formsPlayer
www.formsPlayer.com
standards. innovation.
All posts are noticed :)
Phil is going to document how the CSS works in the various modes. The main factor here is that Sidewinder has a component that parses CSS rules and understands rules that use namespace prefixes. But I'll leave a more thorough explanation to Phil.
Also, we're putting together a new public release of Sidewinder, based on a version we've been using internally, that fixes a number of bugs, and provides a lot of new features.
--
Mark Birbeck, formsPlayer
http://www.formsPlayer.com | http://internet-apps.blogspot.com
standards. innovation.