I am painfully making the adjustment to web based business applictions and have completed the various tutotials. I now wish to create a complex web input form that employs the metaphor of an existing government document in rails and I am unsure as to how to proceed due to my profound ignorance as to what CSS is capable of. Taking the most brute force approach, if I were to create a pdf input document with field what is available in rails to get the text from the form, and to display errors? If I go the CSS route, which frankly I favour as more flexible, is there a good place to go and see a sample of a complex form layout? I really need to see working layout code for a multi-field data input form based on a paper document to get an idea of what limitations I am going to face and how I need to adjust my design strategies to cope. Many of my questions will no doubt appear naive because of a lack of experice with Rails and with this particular mode of system design in general, but I hope to overcome that with help. Regards, Jim -- Posted via http://www.ruby-forum.com/. --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk -~----------~----~----~----~------~----~------~--~---
While I would normally recommend CSS for all site layouts, a complex form layout like this would probably warrant the need for a layout based on tables. If you go the CSS route, you''ll need to do a lot of floating, absolute/relative positioning, tweaking <label> tags, and cross-browser testing. -- Posted via http://www.ruby-forum.com/. --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk -~----------~----~----~----~------~----~------~--~---
Jon Collier wrote:> While I would normally recommend CSS for all site layouts, a complex > form layout like this would probably warrant the need for a layout based > on tables. > > If you go the CSS route, you''ll need to do a lot of floating, > absolute/relative positioning, tweaking <label> tags, and cross-browser > testing.Do you have a recommended site where I can look at such layouts. I am really searching for a sample upon which to pattern further investigation. I find that having a concrete example in front of me is ever so helpful. Thank you for the information. Regard, Jim -- Posted via http://www.ruby-forum.com/. --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk -~----------~----~----~----~------~----~------~--~---
Why not include with your message a link to the kind of form you''re
talking about, so we have a better idea of what you need?
It''s pretty simple to do stuff with tables. The easiest form is just
one that marches down the screen, one field per line. Remember, there
is no restriction on screen height for web forms.
This is what a one-field form with tables looks like:
<table>
<tr>
<td>Label</td>
<td><%= text_field(:table_name, :field_name) %></td>
</tr>
</table>
For more fields, just repeat the <tr> ... </tr> pattern as many
times
as you want.
Where it gets tricky is if you want to have more than one field on a
line. That can create messy table structures.
As the other respondant said, under no circumstances would I recommend
CSS positioning for something that naturally falls into a table. CSS
positioning is extremely difficult to get working properly. However,
you may want to style table cells with CSS, which is easy. Just say
<style type = ''text/css''>
td {
color: black;
background-color: #ffffcc;
border: black solid 1px;
padding: 3px;
}
</style>
<table class = ''myform''>
<tr> (example as I''ve given earlier) </tr>
</table>
You can, of course, substitute whatever you like for the style.
Complex table layouts tend to be easier to design than they are to
read. Note that you can have as many table cells in a rows as you want
(and as can fix on the screen). So you could say:
<table>
<tr>
<td>Name:</td>
<td><%= text_field :people, :first %> <%= text_field :people,
:last
%></td>
<td>Sex</td>
<td>(radio buttons for male/female)</td>
(etc)
if you wanted the next line to be the whole width of the table, you
would say
<tr>
<td colspan = 4>This is the whoel width of the line</td>
</td>
</tr>
Remember that you don''t want to reproduce the paper form as it looks on
paper. That will confuse people used to how web forms work. For
instance, I would strongly recommend that you stick to one field per
line, except for fields like first/last name and city/state/zip that
are traditionally grouped together. An example like what I have above,
with the sex to the right, is likely to confuse people because they
will be moving down the fields and are likely to miss the age entirely.
You may want to read Jakob Neilsen on web usability at
http://www.useit.com/ before designing your form. It has a lot of
information on making web sites and forms easier to use, and a lot of
research about how users really see things.
Hope that helps.
D
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk
-~----------~----~----~----~------~----~------~--~---
I am in a similar position. I am building an intranet app and so have control over my choice of browser (Firefox). For initial development, I have used tables and this seems to be the most common and quickest way to get a consistent layout working. But in Erb terms, it can get messy, getting the tags right. I havnt tried it yet, but I suspect the best approach would be to create the main table layout and then build the cells with helper functions or partial renders. I am playing around with CSS and floated divs too. I have a display that lists fields in divs of about 5 fields each field being followed by a br tag. One div holds the field names, and the next div the field values. The field names div is slightly shaded so that the values stand out. Put borders and padding in appropriate places, and you can get quite a nice effect. (Set each div to float left). The nice thing about this approach is that the columns stretch to hold the content. I havnt completely solved what to do when the divs are too wide for the window. It would be ok for the right hand divs to float down the page as long as the name and value divs stay together. If I achieve a good solution for this I will post it. I have also discovered that Firefox has implemented the CSS3 columns proposal, and am planning to play with that. It seems to me that it would be fairly easy to list the fields in a column similar to the way scaffold does it, and then using a two column div, Firefox would automatically balance the fields between the two columns. I have stumbled upon this post because I am looking around to see if anyone has created an auto-form generator, that would build a form using css and absolute positioning. I would have thought such a thing is possible and could nicely integrate into rails. If anyone knows of such a thing it would be nice to know. If I cant find anything out there, I am going to have a go at creating something myself. The tedious part of building forms is dealing with field sizes, names and positions etc. to get a precise layout. Surely if you start with a fixed size wrapper, and build up a list of field names, values and sizes etc. (some fo this could come from the model, and some could be held in a properties hash.) it should be possible to create a drag and drop editor to allow the user to create a form interactively. And then end up with teh Erb code and stylesheet that can be dropped into the app. Surely someone has already done this ??? --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk -~----------~----~----~----~------~----~------~--~---
Here is a good article on A List Apart if you are interested in not using tables for form layout... <http://www.alistapart.com/articles/prettyaccessibleforms/> -Sean tonypm wrote:> I am in a similar position. I am building an intranet app and so have > control over my choice of browser (Firefox). > > For initial development, I have used tables and this seems to be the > most common and quickest way to get a consistent layout working. But > in Erb terms, it can get messy, getting the tags right. I havnt tried > it yet, but I suspect the best approach would be to create the main > table layout and then build the cells with helper functions or partial > renders. > > I am playing around with CSS and floated divs too. I have a display > that lists fields in divs of about 5 fields each field being followed > by a br tag. One div holds the field names, and the next div the field > values. The field names div is slightly shaded so that the values > stand out. Put borders and padding in appropriate places, and you can > get quite a nice effect. (Set each div to float left). The nice thing > about this approach is that the columns stretch to hold the content. I > havnt completely solved what to do when the divs are too wide for the > window. It would be ok for the right hand divs to float down the page > as long as the name and value divs stay together. If I achieve a good > solution for this I will post it. > > I have also discovered that Firefox has implemented the CSS3 columns > proposal, and am planning to play with that. It seems to me that it > would be fairly easy to list the fields in a column similar to the way > scaffold does it, and then using a two column div, > Firefox would automatically balance the fields between the two > columns. > > I have stumbled upon this post because I am looking around to see if > anyone has created an auto-form generator, that would build a form > using css and absolute positioning. I would have thought such a thing > is possible and could nicely integrate into rails. If anyone knows of > such a thing it would be nice to know. If I cant find anything out > there, I am going to have a go at creating something myself. > > The tedious part of building forms is dealing with field sizes, names > and positions etc. to get a precise layout. > Surely if you start with a fixed size wrapper, and build up a list of > field names, values and sizes etc. (some fo this could come from the > model, and some could be held in a properties hash.) it should be > possible to create a drag and drop editor to allow the user to create a > form interactively. And then end up with teh Erb code and stylesheet > that can be dropped into the app. Surely someone has already done this > ??? >--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk -~----------~----~----~----~------~----~------~--~---
On Saturday 16 September 2006 17:50, Sean Stephens wrote:> Here is a good article on A List Apart if you are interested in not > using tables for form layout... > > <http://www.alistapart.com/articles/prettyaccessibleforms/>The problem with this article as with others I''ve seen on the web is that they produce forms that are pretty, but utterly simplistic. For one thing, they only show how to a linear top down flow of labels and inputs elements. In effect there''s only a single column, even if it contains a label on the left and an input element on the right. Forms like that are entirely appropriate for a large fraction of applications where most users encounter those forms only occasionally or just one time. Now contrast these with in-house applications where people deal with the same forms multiple times a day and where these forms may contain a large amount of data. Put everything in a single column and have users scroll down and up again all the time? Not a good idea. Putting everything in two or three columns appears more sensible. Using a table that''s actually pretty easy. Everything is nicely aligned horizontally and vertically. The form behaves well when the window is resized. Anyone show me how the same can be robustly and intuitively achieved with CSS and I''ll be a convert. For the time being I stick to my impression that CSS mostly caters to designers of beautiful web pages and ignores the needs of (web) application designers. Yes, I do my best to be a good boy and use CSS wherever I can, but my abilities and CSS''s offerrings are limited. Even more limited is my willingness to go through an inordinate amount of CSS gymnastics to achieve a result that''s easy and intuitive with tables. </rant> Michael -- Michael Schuerig mailto:michael-q5aiKMLteq4b1SvskN2V4Q@public.gmane.org http://www.schuerig.de/michael/ --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk -~----------~----~----~----~------~----~------~--~---
On 17 Sep 2006, at 01:07, Michael Schuerig wrote:> Yes, I do my best to be a good boy and use CSS wherever I can, but my > abilities and CSS''s offerrings are limited. Even more limited is my > willingness to go through an inordinate amount of CSS gymnastics to > achieve a result that''s easy and intuitive with tables.I think it''s ok at this time to use tables for multi-column forms, but about everything else can be easily done using CSS. Using CSS has several advantages: smaller HTML files (compare a tablebased layout to a cssbased layout, on large pages you can get between 20-70% less characters), much more readable HTML code, both in Rails'' views and in the actual output, snappier javascript on some browsers (mainly Internet Exploder), … Layouts that are totally tablebased are actually a lot less intuitive than a sematic layout if you''re handcoding your layouts. Best regards Peter De Berdt --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk-unsubscribe@googlegroups.com For more options, visit this group at http://groups.google.com/group/rubyonrails-talk -~----------~----~----~----~------~----~------~--~---
On Sunday 17 September 2006 18:05, Peter De Berdt wrote:> On 17 Sep 2006, at 01:07, Michael Schuerig wrote: > > Yes, I do my best to be a good boy and use CSS wherever I can, but > > my abilities and CSS''s offerrings are limited. Even more limited is > > my willingness to go through an inordinate amount of CSS gymnastics > > to achieve a result that''s easy and intuitive with tables. > > I think it''s ok at this time to use tables for multi-column forms, > but about everything else can be easily done using CSS.Yes, I agree, but for me forms are a big part of layout. Michael -- Michael Schuerig mailto:michael-q5aiKMLteq4b1SvskN2V4Q@public.gmane.org http://www.schuerig.de/michael/ --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk -~----------~----~----~----~------~----~------~--~---
On 17 Sep 2006, at 18:35, Michael Schuerig wrote:> On Sunday 17 September 2006 18:05, Peter De Berdt wrote: >> On 17 Sep 2006, at 01:07, Michael Schuerig wrote: >>> Yes, I do my best to be a good boy and use CSS wherever I can, but >>> my abilities and CSS''s offerrings are limited. Even more limited is >>> my willingness to go through an inordinate amount of CSS gymnastics >>> to achieve a result that''s easy and intuitive with tables. >> >> I think it''s ok at this time to use tables for multi-column forms, >> but about everything else can be easily done using CSS. > > Yes, I agree, but for me forms are a big part of layout.As for me, I just try to keep my tables as clean as possible (because the ratio tag<->content with tables is quite large) and am eagerly awaiting all browsers to implement the CSS3 multicolumn features :-) Best regards Peter De Berdt --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk -~----------~----~----~----~------~----~------~--~---