Transcript L1 Introduction - Share.psu.ac.th

229-511 Web Application Development Technology
เทคโนโลยีสำหรับกำรพัฒนำโปรแกรมประยุกต์เว็บ
Suntorn Witosurapot
Phone: 074 287369 or
Email: [email protected]
November 2009
Lecture 3
Free CSS Templates and Rails
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
2
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
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
3
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
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
4
Recall: Firefox Browser with Web dev. tools
http://www.mozilla.com/en-US/firefox/
• Compliance with W3C web
standards, e.g HTML,
XML, XHTML, CSS,
ECMAScript (JavaScript),
…
• Small Add-ons (called
extensions) can be added,
so new features can be
added and activated from
toolbar buttons
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
5
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/
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
6
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/
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
7
Some usage scenarios
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
8
Some usage scenarios (cont.)
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
9
Some usage scenarios (cont.)
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
10
Some usage scenarios (cont.)
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
11
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
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
12
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
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
13
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
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
14
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.
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
15
Ex: A Simple App: Hello, Rails!
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
16
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
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
17
Rails Default Page Assembly
• app/views/layouts/application.html.rb
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
18
Common header & footer in app.: the
User viewpoint
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
19
Common header & footer in app.:
the programmer viewpoint
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
20
Common header & footer in app.: the
programmer viewpoint (cont.)
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
21
In essence: Layout basics
• In Rails, layouts occur at 2 levels (applciationwide 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
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
22
In essence: Layout basics (cont.)
views/layouts/application.html.erb
The .html page that is
rendered in your browser
views/layouts/welcome.html.erb
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
23
Outline
• Benefits of Firefox for web app. dev.
• Review
– Rails directory for the view operation
– Layout Basics in Rails
– Applying CSS to Rails
• Blueprint CSS template
– Examples
– Note on the id and class of CSS styles
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
24
Ex: Application from Tutorial
• This is the what we done in our blog tutorial.
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
25
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).
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
26
Our CSS style definitions
• Add the blog.css in /app/views/layouts/post.html.erb
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
27
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.
<tr valign="top" class="<%= cycle('list-line-odd', 'list-line-even') %>" >
• 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.
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
28
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
29
Results:
• Open browser with http://localhost:3000/posts,
and the resulting product listing might look
something like the following.
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
30
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
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
31
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
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
32
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
33
Test page layout!
Q: Why the logo does not appear, even though we put it
the html script of the layout posts.html.erb?
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
34
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.
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
35
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.
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
36
Bang! What the …is it!
Q: How do I know what’s happening?
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
37
Let explore
the log file
• Locate the development.log
in /rail_apps/blog/log
Q: Can you tell me what is the
cause of problem?
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
38
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
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
39
That’s it!
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
40
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
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
41
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/
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
42
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.css file.
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
43
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
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
44
BlueprintCSS template
• Main page: http://www.blueprintcss.org/
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
45
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
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
46
Sample Print of Web Page
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
47
Blueprint CSS Files (cont.)
typography.css:
Set some default
typography, and
a few methods
for some really
fancy stuff for
your text.
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
48
Blueprint CSS Files
forms.css: Includes some minimal styling of forms
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
49
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.
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
50
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.
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
51
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
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
52
Grid layout:
Example (cont.)
The result layout
Header
Left
sidebar
Box1
Box2
Box3
Main content
Right
sidebar
Footer
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
53
How to use with Rails
• Just copy all CSS files into the apps/pubic/stylesheets
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
54
How to use with Rails (cont.)
• Copy heading code to the webpage heading at
apps/views/layouts/application.html.erb
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
55
More information
• Blueprint Wiki
http://github.com/joshuaclayton/blueprint-css/wikis/home
229-511 Web Application Development
Technology
Agile Programming, MVC Architecture & the
practice with RoR
56
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
Agile Programming, MVC Architecture & the
practice with RoR
57