229-511 Web Application Development Technology เทคโนโลยีสำหรับการพัฒนาโปรแกรม ประยุกต์เว็บ Suntorn

229-511 Web Application Development Technology

เทคโนโลยี�สำ�หรั�บก�รัพั�ฒน�โปรัแกรัมปรัะยี�กต์�เว็�บ

Suntorn Witosurapot

Phone: 074 287369 or Email: [email protected]

November 2009


Agile Programming, MVC Architecture & the practice with RoR 2

Lecture 3

Free CSS Templates and Rails



Preview

• So far, we quite learned many useful topics about building web applications using Rails– Scaffold for building CRUD operations– Active Records for handling records in databases

• Here, we will learned how to make a better presentation (V in MVC) in our application by– the use of ready-made CSS template

• This will also be shorten the development time for our web applications greatly



Outline

• Benefits of Firefox for web app. dev.• Review

– Rails directory for the view operation– Layout Basics in Rails– Applying CSS to Rails

• Free CSS template• Blueprint CSS Examples



Recall: Firefox Browser with Web dev. tools

• Compliance with W3C web standards, e.g HTML, XML, XHTML, CSS, ECMAScript (JavaScript), …

http://www.mozilla.com/en-US/firefox/

• Small Add-ons (called extensions) can be added, so new features can be added and activated from toolbar buttons



Recall: Useful Extensions in Firefox

• Html Validator adds HTML validation inside Firefox• The number of errors of a HTML page is seen on

the form of an icon in the status bar when browsing.

https://addons.mozilla.org/firefox/249/



Recall: Useful Add-ons in Firefox (cont.)

• Web Developer Toolbar adds a menu and a toolbar to the browser with various web developer tools.

https://addons.mozilla.org/firefox/60/



Some usage scenarios



Some usage scenarios (cont.)









Outline

• Benefits of Firefox for web app. dev. • Review





MVC in the Rails Way

• Rails implements the concept that models, views, & controllers should be kept separate by storing the code for each of these elements as separate files, in separate directories.

Ex: The app subdirectory



Rails & URL Breakdown

• Rails uses the path to determine the name of the controller to use and the name of the action to invoke on that controller

• 1st part of the path: the name of the controller, and• 2nd part is the name of the action



Hello, Rails! : Create View

• For a controller named say, the views will be in the directory app/views/say that means we need to create a file called hello.rhtml in the directory app/views/say.



Ex: A Simple App: Hello, Rails!



Outline






Rails Default Page Assembly

• app/views/layouts/application.html.rb



Common header & footer in app.: the User viewpoint



Common header & footer in app.:the programmer viewpoint



Common header & footer in app.: the programmer viewpoint (cont.)



In essence: Layout basics

• In Rails, layouts occur at 2 levels (applciation-wide or controller-wide) by default:

• The entire Rails application (all views of all controllers) will use this layout:

views/layouts/application.html.erb

• All views within a single controller will use this layout. Ex: the layout for weclome_controller.rb will use this layout. Notice, the ‘_controller’ is left off for the layout:

views/layouts/welcome.html.erb



In essence: Layout basics (cont.)

views/layouts/application.html.erb

views/layouts/welcome.html.erb

The .html page that is rendered in your browser



Outline



• Blueprint CSS template– Examples– Note on the id and class of CSS styles



Ex: Application from Tutorial

• This is the what we done in our blog tutorial.



Steps

• All scaffold-generated applications use the stylesheet scaffold.css in the public/stylesheets

• If you plan to make your own stylesheet, e.g. blog.css, it will be put in this directory as well.

• Next, we need to link these stylesheets into our HTML page for all post pages. (i.e. all of the .html.erb files in views/layouts subdirectory).



Our CSS style definitions• Add the blog.css in /app/views/layouts/post.html.erb



Our CSS style definitions

• Now that we have the stylesheet all in place, we’ll use a simple table-based template.

• Editing the file index.html.erb in app/views/posts, to replace with the dynamic column display.

• Rows in the listing have alternating background colors. – This is done by setting the CSS class of each row to either list-line-even or list-line-odd.

• The Rails helper method called cycle does this, automatically toggling between the two style names on successive lines.

<tr valign="top" class="<%= cycle('list-line-odd', 'list-line-even') %>" >





Results:

• Open browser with http://localhost:3000/posts, and the resulting product listing might look something like the following.



Add a page layout

• The pages in a web site often share a similar layout, the designer should create a standard template that is used when placing content.

• Our job is to add this page decoration to each of the application pages.

• Fortunately, in Rails we can define layouts. A layout is a template into which we can flow additional content. – In our example, we show how to define a single

layout for all the blog pages



Add a page layout (cont.)

• If you create a template file in the app/views/layouts directory with the same name as a controller, all views rendered by that controller will use that layout by default. – Ex: for a post controller, it will call the

layout posts.html.erb





Test page layout!

Q: Why the logo does not appear, even though we put it the html script of the layout posts.html.erb?



Note: For using the given Blog App.

• For building the blog application, I strongly encourage students to follow the instructions given in the file “sbs_RoR_ex_part2.pdf”

• In case you want to do a shortcut way, let use the given zip file “blog_sw_v1.zip”

• In order to use this zipped-blog file, – just unzip it and move the /blog folder

inside into your /rails_apps folder– Start the web server for this app.– Use web brower to open this app.



Note: For using the given Blog App.

• just unzip it and move the /blog folder inside into your /rails_apps folder

• Start the web server for this app.

• Use web brower to open this app.



Bang! What the …is it!

Q: How do I know what’s happening?



Let explorethe log file

• Locate the development.log in /rail_apps/blog/log

Q: Can you tell me what is the cause of problem?



Solve it then!

• What we do above is to create a database and insert table(s) that are in the rails_apps/blog/db/migrate



That’s it!



Outline






Free CSS Template

• You’ve seen how easy to change the style of web applications through the use of CSS (or blog.css in our exercise)

• Creating your own CSS file from zero may become hard, hence using free CSS template would be handy

• Lots of free CSS templates are available on the Internet, e.g.

– http://www.freecsstemplates.org/

– http://www.blueprintcss.org/



freecsstemplates.org

• Download template (an HTML file, a CSS file, and a bunch of image files)– Copied images into the application ’ s public/images directory, – Copied the CSS file entries into the preexisting public/scaffold.cs

s file.



Outline






BlueprintCSS template

• Main page: http://www.blueprintcss.org/



Blueprint CSS Files

The given files will help you a lot for many web styles, e.g. form input or typical main page.

• reset.css: Reset CSS values that browsers tend to set for you.

• print.css: Set some default print rules, so that printed versions of your site looks better than they usually would

• ie.css: Includes every hack for our beloved IE6 & 7



Sample Print of Web Page



Blueprint CSS Files (cont.)

typography.css: Set some default typography, and a few methods for some really fancy stuff for your text.



Blueprint CSS Files

forms.css: Includes some minimal styling of forms



In essence: Blueprint core features

1. It sets up sensible defaults for typography, including font families, header sizes, paragraph styles, list styles, a baseline grid, and more. It does all of this with relative sizes, so that it scales well in any browser.

2. It gives you a methodology to use for customizable layout grids. Any number of columns and widths you can dream up is easily achievable.

3. It provides a sensible default print stylesheet.4. It does all of these things in ways that work elegantly

in most browsers your visitors are likely to be using, including Internet Explorer 6 and 7.



How to use the grid layout• The grid-building tools is handy to support our web

page layout for most of our needs.– The grid is fully customizable. If you need more or less

columns or a wider or narrower total width

• By default, Blueprint’s grids.css file sets up a 950px wide grid of 24 columns, each 30 pixels wide with 10 pixel gutters.



Grid layout: Example

• In the code, the CSS classes from Blueprint are container, span-4, span-24, last, span-8, span-16

• It will look like this in the browser



Grid layout: Example (cont.)

HeaderLeft sidebar

Box1 Box2 Box3

Main content

Right sidebar

Footer

The result layout



How to use with Rails• Just copy all CSS files into the apps/pubic/stylesheets



How to use with Rails (cont.)• Copy heading code to the webpage heading at

apps/views/layouts/application.html.erb



More information• Blueprint Wiki

http://github.com/joshuaclayton/blueprint-css/wikis/home



Hint on how to use Blueprint

• Run the provided index.html program in the test directory of the download file

229-511 Web Application Development Technology เทคโนโลยีสำหรับการพัฒนาโปรแกรม ประยุกต์เว็บ Suntorn

Documents