Web Application Development Technology เทคโนโลยีสำหรับการพัฒนาโปรแกรม ประยุกต์เว็บ Suntorn Witosurapot Phone: or November 2009

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 2 Lecture 3 Free CSS Templates and Rails

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 3 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

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 4 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

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 5 Recall: Firefox Browser with Web dev. tools 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

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 6 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.

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 7 Recall: Useful Add-ons in Firefox (cont.) Web Developer Toolbar adds a menu and a toolbar to the browser with various web developer tools.

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 8 Some usage scenarios

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 9 Some usage scenarios (cont.)

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 10 Some usage scenarios (cont.)

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 11 Some usage scenarios (cont.)

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 12 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

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 13 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

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 14 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

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 15 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.

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 16 Ex: A Simple App: Hello, Rails!

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 17 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

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 18 Rails Default Page Assembly app/views/layouts/application.html.rb

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 19 Common header & footer in app.: the User viewpoint

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 20 Common header & footer in app.: the programmer viewpoint

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 21 Common header & footer in app.: the programmer viewpoint (cont.)

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 22 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

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 23 In essence: Layout basics (cont.) views/layouts/application.html.erb views/layouts/welcome.html.erb The.html page that is rendered in your browser

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 24 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

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 25 Ex: Application from Tutorial This is the what we done in our blog tutorial.

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 26 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).

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 27 Our CSS style definitions Add the blog.css in /app/views/layouts/post.html.erb

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 28 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. " >

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 29

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 30 Results: Open browser with and the resulting product listing might look something like the following.

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 31 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

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 32 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

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 33

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 34 Test page layout! Q: Why the logo does not appear, even though we put it the html script of the layout posts.html.erb ?

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 35 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.

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 36 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.

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 37 Bang! What the … is it! Q: How do I know what ’ s happening?

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 38 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?

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 39 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

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 40 That ’ s it!

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 41 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

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 42 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. – –

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 43 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.

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 44 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

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 45 BlueprintCSS template Main page:

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 46 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

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 47 Sample Print of Web Page

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 48 Blueprint CSS Files (cont.) typography.css: Set some default typography, and a few methods for some really fancy stuff for your text.

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 49 Blueprint CSS Files forms.css: Includes some minimal styling of forms

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 50 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.

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 51 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.

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 52 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

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 53 Grid layout: Example (cont.) Header Left sidebar Box1Box2Box3 Main content Right sidebar Footer The result layout

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 54 How to use with Rails Just copy all CSS files into the apps/pubic/stylesheets

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 55 How to use with Rails (cont.) Copy heading code to the webpage heading at apps/views/layouts/application.html.erb

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 56 More information Blueprint Wiki

Web Application Development Technology Agile Programming, MVC Architecture & the practice with RoR 57 Hint on how to use Blueprint Run the provided index.html program in the test directory of the download file