examples wanted

classic Classic list List threaded Threaded
13 messages Options
Reply | Threaded
Open this post in threaded view
|

examples wanted

Paul Kelly-5
Hi everyone. I'm having a tough time styling xforms on the client side and was wondering if there were any good examples of complex, good-looking forms done this way (I'm using the mozilla plugin). I'm hoping the problem is just my own ineptitude with css.

By complex I mean things like nested repeats, repeats kept in the same row as other inputs/outputs, many-columned headers that line up with the rows. Am I sounding inept? :)

Thanks you and apologies to those who are getting the twice. Sent to www-forms @w3.org and to [hidden email]
--
--paul

Paul Kelly
Dir. of Operations
XML Team: http://xmlteam.com
_______________________________________________
dev-tech-xforms mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-xforms
Reply | Threaded
Open this post in threaded view
|

Re: examples wanted

Dan McCreary
On Feb 15, 10:24 am, Paul Kelly <[hidden email]> wrote:

> Hi everyone. I'm having a tough time styling xforms on the client side and was wondering if there were any good examples of complex, good-looking forms done this way (I'm using the mozilla plugin). I'm hoping the problem is just my own ineptitude with css.
>
> By complex I mean things like nested repeats, repeats kept in the same row as other inputs/outputs, many-columned headers that line up with the rows. Am I sounding inept? :)
>
> Thanks you and apologies to those who are getting the twice. Sent to www-forms @w3.org and to [hidden email]
> --
> --paul
>
> Paul Kelly
> Dir. of Operations
> XML Team:http://xmlteam.com

Hi Paul,

I also agree that finding good CSS examples is a problem.

I have a few on my XForms Wikibook but nothing elaborate yet.

http://en.wikibooks.org/wiki/XForms

I did a form with 250 data elements and 8 tabs last year but it was
too difficult to make public.  It had many repeats in it into tabular
structures.

If you find repeats into the same row, let me know.  I have been
trying to do that with a <div class="single-row"> and .single-row
{display: inline} with no luck.

If you find a nice one let me know.

- Dan
_______________________________________________
dev-tech-xforms mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-xforms
Reply | Threaded
Open this post in threaded view
|

Re: examples wanted

Dan McCreary
In reply to this post by Paul Kelly-5
On Feb 15, 10:24 am, Paul Kelly <[hidden email]> wrote:

> Hi everyone. I'm having a tough time styling xforms on the client side and was wondering if there were any good examples of complex, good-looking forms done this way (I'm using the mozilla plugin). I'm hoping the problem is just my own ineptitude with css.
>
> By complex I mean things like nested repeats, repeats kept in the same row as other inputs/outputs, many-columned headers that line up with the rows. Am I sounding inept? :)
>
> Thanks you and apologies to those who are getting the twice. Sent to www-forms @w3.org and to [hidden email]
> --
> --paul
>
> Paul Kelly
> Dir. of Operations
> XML Team:http://xmlteam.com

Here is an example of a repeat that uses the "inline" display.  It was
a little trick since there is not a lot of documentation on using
the .xf-repeat-item {display:inline;}

Hope this helps - Dan
_______________________________________________
dev-tech-xforms mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-xforms
Reply | Threaded
Open this post in threaded view
|

Re: examples wanted

Dan McCreary
On Feb 18, 7:59 am, Dan McCreary <[hidden email]> wrote:

> On Feb 15, 10:24 am, Paul Kelly <[hidden email]> wrote:
>
> > Hi everyone. I'm having a tough time styling xforms on the client side and was wondering if there were any good examples of complex, good-looking forms done this way (I'm using the mozilla plugin). I'm hoping the problem is just my own ineptitude with css.
>
> > By complex I mean things like nested repeats, repeats kept in the same row as other inputs/outputs, many-columned headers that line up with the rows. Am I sounding inept? :)
>
> > Thanks you and apologies to those who are getting the twice. Sent to www-forms @w3.org and to [hidden email]
> > --
> > --paul
>
> > Paul Kelly
> > Dir. of Operations
> > XML Team:http://xmlteam.com
>
> Here is an example of a repeat that uses the "inline" display.  It was
> a little trick since there is not a lot of documentation on using
> the .xf-repeat-item {display:inline;}
>
> Hope this helps - Dan

I forgot the URL in that last message:
http://xforms-examples.googlecode.com/svn/trunk/10-dev-tools/process-editor/edit.xhtml
_______________________________________________
dev-tech-xforms mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-xforms
Reply | Threaded
Open this post in threaded view
|

Re: examples wanted

Paul Kelly-5
Thanks Jozef, Dan and Nuno for posting your examples! Very helpful.

At 6:00 AM -0800 2/18/08, Dan McCreary wrote:
>I forgot the URL in that last message:
>http://xforms-examples.googlecode.com/svn/trunk/10-dev-tools/process-editor/edit.xhtml

Dan, is there a way to get the "Process" label (or just some sibling <div/> that's in the same row but outside the repeat) in the same horizontal ordering?

That's my main stylistic problem: single row with a combination of standalone and repeat-built columns. An example is a line score in a sports game: in one row you have the team name, an iteration over the event periods for filling in the period scores, and a column for the total score.
--
--paul

Paul Kelly
Dir. of Operations
XML Team: http://xmlteam.com
_______________________________________________
dev-tech-xforms mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-xforms
Reply | Threaded
Open this post in threaded view
|

Re: examples wanted

Aaron Reed
In reply to this post by Dan McCreary
Hi Paul,

I'm not sure I know exactly what you want, but I'll give it a shot.
Each row of a repeat is still in the repeat.  So there is no way to get
at anything in a repeat row that is 'outside the repeat'.

The layout of a table is like this under the covers:
<repeat>
   <div>
     <contextcontainer>
       ...the repeating content for the first row...
     </contextcontainer>
     <contextcontainer>
       ...the repeating content for the second row...
     </contextcontainer>
     ...
   </div>
</repeat>

If you want to style a repeat row, you could use something like this in
your <style> section:

@namespace url(http://www.w3.org/2002/xforms);
.xf-repeat-item {
   border: thin solid black;
}

If you want to style the currently selected repeat row, you could use
something like this in your <style> section:

@namespace url(http://www.w3.org/2002/xforms);
.xf-repeat-index {
   border: thin solid black;
}

Or you could do the all out qualification in your css:

@namespace url(http://www.w3.org/1999/xhtml);
@namespace xf url(http://www.w3.org/2002/xforms);

xf|repeat &gt; div &gt; xf|contextcontainer.xf-repeat-item {
   border: thin solid black;
}
xf|repeat &gt; div &gt; xf|contextcontainer.xf-repeat-index {
   background-color: palegreen;
}

I hope that this helps,
--Aaron

Paul Kelly wrote:
> Thanks Jozef, Dan and Nuno for posting your examples! Very helpful.
>
> At 6:00 AM -0800 2/18/08, Dan McCreary wrote:
>> I forgot the URL in that last message:
>> http://xforms-examples.googlecode.com/svn/trunk/10-dev-tools/process-editor/edit.xhtml
>
> Dan, is there a way to get the "Process" label (or just some sibling <div/> that's in the same row but outside the repeat) in the same horizontal ordering?
>
> That's my main stylistic problem: single row with a combination of standalone and repeat-built columns. An example is a line score in a sports game: in one row you have the team name, an iteration over the event periods for filling in the period scores, and a column for the total score.
_______________________________________________
dev-tech-xforms mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-xforms
Reply | Threaded
Open this post in threaded view
|

Re: examples wanted

Dan McCreary
On Feb 18, 11:50 am, Aaron Reed <[hidden email]> wrote:

> Hi Paul,
>
> I'm not sure I know exactly what you want, but I'll give it a shot.
> Each row of a repeat is still in the repeat.  So there is no way to get
> at anything in a repeat row that is 'outside the repeat'.
>
> The layout of a table is like this under the covers:
> <repeat>
>    <div>
>      <contextcontainer>
>        ...the repeating content for the first row...
>      </contextcontainer>
>      <contextcontainer>
>        ...the repeating content for the second row...
>      </contextcontainer>
>      ...
>    </div>
> </repeat>
>
> If you want to style a repeat row, you could use something like this in
> your <style> section:
>
> @namespace url(http://www.w3.org/2002/xforms);
> .xf-repeat-item {
>    border: thin solid black;
>
> }
>
> If you want to style the currently selected repeat row, you could use
> something like this in your <style> section:
>
> @namespace url(http://www.w3.org/2002/xforms);
> .xf-repeat-index {
>    border: thin solid black;
>
> }
>
> Or you could do the all out qualification in your css:
>
> @namespace url(http://www.w3.org/1999/xhtml);
> @namespace xf url(http://www.w3.org/2002/xforms);
>
> xf|repeat &gt; div &gt; xf|contextcontainer.xf-repeat-item {
>    border: thin solid black;}
>
> xf|repeat &gt; div &gt; xf|contextcontainer.xf-repeat-index {
>    background-color: palegreen;
>
> }
>
> I hope that this helps,
> --Aaron
>
> Paul Kelly wrote:
> > Thanks Jozef, Dan and Nuno for posting your examples! Very helpful.
>
> > At 6:00 AM -0800 2/18/08, Dan McCreary wrote:
> >> I forgot the URL in that last message:
> >>http://xforms-examples.googlecode.com/svn/trunk/10-dev-tools/process-...
>
> > Dan, is there a way to get the "Process" label (or just some sibling <div/> that's in the same row but outside the repeat) in the same horizontal ordering?
>
> > That's my main stylistic problem: single row with a combination of standalone and repeat-built columns. An example is a line score in a sports game: in one row you have the team name, an iteration over the event periods for filling in the period scores, and a column for the total score.

If you need to iterate through lines and have each line itself do a
function you can nest the repeat groups.

Here is an example of a simple line and then a group of lines.

http://en.wikibooks.org/wiki/XForms/Inline_Repeats#Adding_Two_Dimensional_Nesting

You would just replace the inner loop with your team name, scores in
the inner look and the total, I think.

If you can send me a picture of what you want I can mock up an example
for you.

- Dan
_______________________________________________
dev-tech-xforms mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-xforms
Reply | Threaded
Open this post in threaded view
|

Re: examples wanted

Paul Kelly-5
In reply to this post by Aaron Reed
At 11:50 AM -0600 2/18/08, Aaron Reed wrote:
>I'm not sure I know exactly what you want, but I'll give it a shot.
>Each row of a repeat is still in the repeat.  So there is no way to get
>at anything in a repeat row that is 'outside the repeat'.

Sorry. I meant the display row. Let's see, Dan asked for an illustration so I'll just show exactly what I'm trying to do:

http://sports.yahoo.com/nfl/scoreboard?w=21

A football boxscore. Now take a look at the first row of that scoreboard. That would consist, in one single display row, an ouput (team name -- NY Giants), a repeat producing four inputs (period subscores) and an input (total score). All displayed in a single row!

Here's the xml I would use for that:

http://showcase.xmlteam.com/index.php/documents/fetch/doc-ids/xt.6539341-box/stylesheet
--
--paul

Paul Kelly
Dir. of Operations
XML Team: http://xmlteam.com
_______________________________________________
dev-tech-xforms mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-xforms
Reply | Threaded
Open this post in threaded view
|

Re: examples wanted

Aaron Reed
In reply to this post by Aaron Reed

Ok, so given that example, what part are you having trouble doing?
Displaying all of that in a line?

--Aaron

Paul Kelly wrote:

> At 11:50 AM -0600 2/18/08, Aaron Reed wrote:
>> I'm not sure I know exactly what you want, but I'll give it a shot.
>> Each row of a repeat is still in the repeat.  So there is no way to get
>> at anything in a repeat row that is 'outside the repeat'.
>
> Sorry. I meant the display row. Let's see, Dan asked for an illustration so I'll just show exactly what I'm trying to do:
>
> http://sports.yahoo.com/nfl/scoreboard?w=21
>
> A football boxscore. Now take a look at the first row of that scoreboard. That would consist, in one single display row, an ouput (team name -- NY Giants), a repeat producing four inputs (period subscores) and an input (total score). All displayed in a single row!
>
> Here's the xml I would use for that:
>
> http://showcase.xmlteam.com/index.php/documents/fetch/doc-ids/xt.6539341-box/stylesheet
_______________________________________________
dev-tech-xforms mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-xforms
Reply | Threaded
Open this post in threaded view
|

Re: examples wanted

Paul Kelly-5
At 11:14 AM -0600 2/21/08, Aaron Reed wrote:
>Ok, so given that example, what part are you having trouble doing?
>Displaying all of that in a line?

Yup. All this in one line:

  NY Giants   3 0 0 14 17   Final  

With the period scores produced by a repeat.
--
--paul

Paul Kelly
Dir. of Operations
XML Team: http://xmlteam.com
_______________________________________________
dev-tech-xforms mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-xforms
Reply | Threaded
Open this post in threaded view
|

Re: examples wanted

Aaron Reed
In reply to this post by Aaron Reed
Hey Paul,

This does what you want.  You might be able to make it cleaner/more
efficient, but this is what I quickly put together off of the top of my
head:

<?xml version="1.0" encoding="UTF-8"?>
<!-- basic FO page definition stuff -->
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xforms="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:xsd="http://www.w3.org/2001/XMLSchema" >
   <head>
     <title>compact repeat testcase</title>
     <style>
       @namespace xf url("http://www.w3.org/2002/xforms");

       xf|repeat {
         display: inline;
       }
       xf|repeat div{
         display: inline;
       }
       xf|repeat.outer > .xf-repeat-item{
         display: table-row;
       }
       xf|repeat.outer > div > .xf-repeat-item > xf|output > .xf-value{
         display: table-cell;
         width: 200px;
       }
       xf|repeat.inner .xf-repeat-item{
         display: table-cell;
         width: 50px;
       }
     </style>
     <xforms:model>
       <xforms:instance id="instdata" xmlns="">
         <scores>
           <team>
             <name>New York Giants</name>
             <quarter>3</quarter>
             <quarter>0</quarter>
             <quarter>0</quarter>
             <quarter>14</quarter>
           </team>
           <team>
             <name>New England Patriots</name>
             <quarter>0</quarter>
             <quarter>7</quarter>
             <quarter>0</quarter>
             <quarter>7</quarter>
           </team>
         </scores>
       </xforms:instance>
     </xforms:model>
   </head>
   <body>
     <h2>Should show a line of data like a NFL box score</h2>
     <h3>Uses repeat element</h3>
     <br/>

     <xforms:repeat class="outer" nodeset="team">
       <xforms:output ref="name"/>
       <xforms:repeat class="inner" nodeset="quarter" appearance="compact">
         <xforms:output value="."/>
       </xforms:repeat>
       <xforms:output value="sum(quarter)"/>
     </xforms:repeat>
   </body>
</html>

I hope that this helps,
--Aaron
_______________________________________________
dev-tech-xforms mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-xforms
Reply | Threaded
Open this post in threaded view
|

RE: examples wanted

Klotz, Leigh
In reply to this post by Paul Kelly-5
Sebastian Schnitzenbaumer and I did a mail reader using XForms.  I did
the basic markup and Sebastian did the CSS.
See http://xformstest.org/2007/03/xmlmail/
<blocked::http://xformstest.org/2007/03/xmlmail/>
 
Leigh.

________________________________

From: [hidden email]
[mailto:[hidden email]] On Behalf Of Paul
Kelly
Sent: Friday, February 15, 2008 8:25 AM
To: [hidden email]
Cc: [hidden email]
Subject: examples wanted



Hi everyone. I'm having a tough time styling xforms on the client side
and was wondering if there were any good examples of complex,
good-looking forms done this way (I'm using the mozilla plugin). I'm
hoping the problem is just my own ineptitude with css.

By complex I mean things like nested repeats, repeats kept in the same
row as other inputs/outputs, many-columned headers that line up with the
rows. Am I sounding inept? :)

Thanks you and apologies to those who are getting the twice. Sent to
www-forms @w3.org and to [hidden email]

--
--paul

Paul Kelly
Dir. of Operations
XML Team: http://xmlteam.com <blocked::http://xmlteam.com/>  
_______________________________________________
dev-tech-xforms mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-xforms
<blocked::https://lists.mozilla.org/listinfo/dev-tech-xforms>  

_______________________________________________
dev-tech-xforms mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-xforms
Reply | Threaded
Open this post in threaded view
|

Re: examples wanted

Paul Kelly-5
In reply to this post by Aaron Reed
Hi, just a belated note of thanks. I'm reviving this project now and the css here really helped. Now I have another problem: turning an inline group into a box.

I've attached a sample of this. Look at the list of players. I've grouped the values of first and last names and I'd like to have the full name appear in a box or column of set width so that all the stat entry boxes line up.

Any help would be much appreciated!


At 12:14 PM -0600 2/21/08, Aaron Reed wrote:

>Hey Paul,
>
>This does what you want.  You might be able to make it cleaner/more
>efficient, but this is what I quickly put together off of the top of my
>head:
>
><?xml version="1.0" encoding="UTF-8"?>
><!-- basic FO page definition stuff -->
><html xmlns="http://www.w3.org/1999/xhtml"
>xmlns:xforms="http://www.w3.org/2002/xforms"
>xmlns:ev="http://www.w3.org/2001/xml-events"
>xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
>xmlns:xsd="http://www.w3.org/2001/XMLSchema" >
>   <head>
>     <title>compact repeat testcase</title>
>     <style>
>       @namespace xf url("http://www.w3.org/2002/xforms");
>
>       xf|repeat {
>         display: inline;
>       }
>       xf|repeat div{
>         display: inline;
>       }
>       xf|repeat.outer > .xf-repeat-item{
>         display: table-row;
>       }
>       xf|repeat.outer > div > .xf-repeat-item > xf|output > .xf-value{
>         display: table-cell;
>         width: 200px;
>       }
>       xf|repeat.inner .xf-repeat-item{
>         display: table-cell;
>         width: 50px;
>       }
>     </style>
>     <xforms:model>
>       <xforms:instance id="instdata" xmlns="">
>         <scores>
>           <team>
>             <name>New York Giants</name>
>             <quarter>3</quarter>
>             <quarter>0</quarter>
>             <quarter>0</quarter>
>             <quarter>14</quarter>
>           </team>
>           <team>
>             <name>New England Patriots</name>
>             <quarter>0</quarter>
>             <quarter>7</quarter>
>             <quarter>0</quarter>
>             <quarter>7</quarter>
>           </team>
>         </scores>
>       </xforms:instance>
>     </xforms:model>
>   </head>
>   <body>
>     <h2>Should show a line of data like a NFL box score</h2>
>     <h3>Uses repeat element</h3>
>     <br/>
>
>     <xforms:repeat class="outer" nodeset="team">
>       <xforms:output ref="name"/>
>       <xforms:repeat class="inner" nodeset="quarter" appearance="compact">
>         <xforms:output value="."/>
>       </xforms:repeat>
>       <xforms:output value="sum(quarter)"/>
>     </xforms:repeat>
>   </body>
></html>
>
>I hope that this helps,
>--Aaron
>_______________________________________________
>dev-tech-xforms mailing list
>[hidden email]
>https://lists.mozilla.org/listinfo/dev-tech-xforms

--
--paul

Paul Kelly
Dir. of Operations
XML Team: http://xmlteam.com
_______________________________________________
dev-tech-xforms mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-xforms