120 likes | 211 Views
Views. Carol Wolf Computer Science. Extended Ruby . Views files are written in extended Ruby, erb. They end in .html.erb. Ruby code is intermixed with html. It is enclosed by <% … %> Some code adds and ‘=‘ sign, as in <%= … %>. This guards against a sequel injection attack.
E N D
Views Carol Wolf Computer Science
Extended Ruby • Views files are written in extended Ruby, erb. • They end in .html.erb. • Ruby code is intermixed with html. • It is enclosed by <% … %> • Some code adds and ‘=‘ sign, as in <%= … %>. • This guards against a sequel injection attack. • Ruby control blocks require the keyword, end. • Lining up control statements with corresponding ends is tricky.
Forms • Forms have been part of html for a long time. • They are used to send parameters to the server. <form method = "post" action="http://localhost:3000/store "> <p><input type = "text" name = "size" value = "" size = 10 />Size </p> <p><input type = "text" name = "color" value = "" size = 20 />Color</p> <p><input type = "submit" value = "Send" /></p> </form> • Forms have a method, action, text input and a submit button.
Methods • Get – Used for moving from one page to another • Parameters are sent in the URL string • Rails uses get for path changes • Post – Used in forms • Parameters are sent in the packets • Rails requires post when using forms • Head, Put, Delete, Trace and Connect • See http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html • Of these, Rails uses Put and Delete.
Actions • The action tells the server which controller method should be executed. • Example: action="http://localhost:3000/store "> • Example from Pace Portal <form name="cplogin" action="https://portal8.pace.edu/cp/home/login" onSubmit="login(); return false;" method="post"> • Example from schedule <%= form_for :course, :url => {:action => :list_courses} do |form| %>
Text Fields • Text fields are used to collect information. <p><input type = "text" name = “color" value = "" size = 20 />Color</p> • In extended Ruby we would write: <p><label for=“color "> Color:</label> <%= form.text_field : color, :size => 20 %> </p> • The label is used to tell the client what to enter. • The size attribute determines how many characters are to be allowed. • The value attribute is empty in the html and doesn’t even appear in the extended Ruby.
Buttons • The submit button is standard for forms. <p><input type = "submit" value = "Send" /></p> • In Rails this becomes <p><%= submit_tag "Send" %></p></h3> • The value attribute in the first example determines what will be displayed on the button. • In Rails, all you have to do is put the value in quotes, "Send“. • In Rails you can have other buttons as well; we use button_to and have to detail the value and action.
The Resulting Code <h3><form accept-charset="UTF-8" action="/store/find_item" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /> <input name="authenticity_token" type="hidden" value="FDuUCyP4UxnTpRTjrRLX0cZav01MTJIe6n73ES0CrfQ=" /></div> <p> <label for="size">Size:</label> <input id="size" name="item[size]" size="10" type="text" /> </p> <p> <label for="color">Color:</label> <input id="color" name="item[color]" size="20" type="text" /> </p> <p><input name="commit" type="submit" value="Send" /></p> </form> </h3>
Layouts Rails supplies a layout for every application. <!DOCTYPE html> <html> <head> <title>Testapp</title> <%= stylesheet_link_tag :all %> <%= javascript_include_tag :defaults %> <%= csrf_meta_tag %> </head> <body> <%= yield %> </body> </html>
Layouts • The application layout is added to the application, with the code that comes before the <%= yield %> listed first. • The Ruby command, yield, tells the application to add in the code in the ERB file. • The last two lines are then added to the end. • The result is a complete html page with a header and footer.
Cascading Style Sheets • Styles such as B for bold can be added directly into the html code. Any in the code are always done first. • Styles can also be added into the head of the page in a specific style section. Styles in the body of the html have precedence over these. • Finally styles can be incorporated into a style sheet with extension .css. This is strongly recommended by developers. • The format is very simple. The html tag comes first followed by curly braces. The styles are listed inside the braces, separated by semicolons. And each style is separated from its value by a colon. • Style sheets can be added to the public/stylesheets folder. They will all be added in by Rails.
A sample style sheet for tables table{ border: 1; border-style: solid; border-width: thin; cellpadding: 10; } td { border-style: solid; border-width: thin; padding-right: 0.5cm; }