Framework de Programmation des Serveurs Web

Initiation à Ruby on Rails (RoR)

Olivier Dalle (@unice.fr)

Université de Nice Sophia Antipolis

Etoffons la mise en page


Mockup


Une pré-version de la page pour se faire une idée:

Mockup


Une pré-version de la page pour se faire une idée:

Commencons par …

Commencons par …

Faire une branche Git:

Commencons par …

Faire une branche Git:

$ git checkout -b filling-in-layout

La navigation du site


Mise-à-jour du fichier
app/views/layouts/application.html.erb

La navigation du site

h1. La navigation du site


Mise-à-jour du fichier
app/views/layouts/application.html.erb:

La navigation du site


Mise-à-jour du fichier
app/views/layouts/application.html.erb:

La navigation du site


Mise-à-jour du fichier
app/views/layouts/application.html.erb:

Commentaire conditionnel supporté par IE…

En-tête de page (header)


En-tête de page (header)


 <header class="navbar navbar-fixed-top"> 

Désigne la partie qui s’affiche en haut de la page.
class= or id= ?

En-tête de page (header)


 <header class="navbar navbar-fixed-top"> 

Désigne la partie qui s’affiche en haut de la page.
class= or id= ?

En-tête de page (header)


 <header class="navbar navbar-fixed-top"> 

Désigne la partie qui s’affiche en haut de la page.
class= or id= ?

navbar et navbar-fixed-top ont le même effet avec le framework Bootstrap.

En-tête de page (header)


Les balises header, nav, section sont nouvelles dans HTML5.

→ Similaire à div

En-tête de page (header)


En-tête de page (header)


Le helper link_to crée des liens:

En-tête de page (header)


Le helper link_to crée des liens.
Equivalent à:

 <nav>
  <ul class="nav pull-right">
    <li><a href="#">Home</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Sign in</a></li>
  </ul>
</nav> 

Corps de page


La mise en page du corps obtenue avec:

Corps de page


La mise en page du corps obtenue avec:

“Container” a une signification spéciale pour le framework “Bootstrap”.

Une page d’accueil …


… Avec un lien vers la (future) page d’inscription:

Voyons le résultat

On ajoute Bootstrap


Un framework de mise en page:

http://twitter.github.com/bootstrap/

On ajoute Bootstrap


Un framework de mise en page:

http://twitter.github.com/bootstrap/

On ajoute Bootstrap


Un framework de mise en page:

(Gemfile) gem 'bootstrap-sass', '2.0.4'

puis

$ bundle install

On configure Bootstrap


Ajout d’une feuille de style spécifique à notre app:

app/assets/stylesheets/custom.css.scss

On configure Bootstrap


Ajout d’une feuille de style spécifique à notre app:

app/assets/stylesheets/custom.css.scss

On ajoute simplement la ligne suivante:

@import "bootstrap";

On configure Bootstrap


Et le tour est (presque) joué!

On configure Bootstrap


On ajoute aussi quelques directives communes pour toutes les pages:


	@import "bootstrap";

	/* universal */

	html {
	  overflow-y: scroll;
	}

	body {
	  padding-top: 60px;
	}

	section {
	  overflow: auto;
	} 

	textarea {
	  resize: vertical;
	}

	.center {
	  text-align: center;
	}

	.center h1 {
	  margin-bottom: 10px;
	} 

On configure Bootstrap


Et aussi quelques directives de typographie:


	/* typography */

	h1, h2, h3, h4, h5, h6 {
	  line-height: 1;
	}

	h1 {
	  font-size: 3em;
	  letter-spacing: -2px;
	  margin-bottom: 30px;
	  text-align: center;
	}
	
	h2 {
	  font-size: 1.7em;
	  letter-spacing: -1px;
	  margin-bottom: 30px;
	  text-align: center;
	  font-weight: normal;
	  color: #999;
	}

	p {
	  font-size: 1.1em;
	  line-height: 1.7em;
	}
	

On configure Bootstrap


Et une touche pour le logo:


/* header */

#logo {
	  float: left;
	  margin-right: 10px;
	  font-size: 1.7em;
	  color: #fff;
	  text-transform: uppercase;
	  letter-spacing: -1px;
	  padding-top: 9px;
	  font-weight: bold;
	  line-height: 1;
}

#logo:hover {
	  color: #fff;
	  text-decoration: none;
}

Ajoutons des partials (parties)


Permet de séparer des bout de html qui forment des parties cohérentes:

render 'layouts/shim'

Ajoutons des partials (parties)


Permet de séparer des bout de html qui forment des parties cohérentes:

render 'layouts/header'

Ajoutons des partials (parties)


Ajoutons des partials (parties)


Les partials sont placés dans des fichiers avec des noms spécifiques:

Ajoutons des partials (parties)


Et bien sûr, le fichier du partial contient le code initial:

Ici app/views/layouts/_header.html.erb

Ajoutons des partials (parties)


On peut aussi ajouter un pied de page: (app/views/layouts/_footer.html.erb)

Ajoutons des partials (parties)


On peut aussi ajouter un pied de page: (app/views/layouts/_footer.html.erb)

Il faut aussi l’ajouter dans application.html.erb

Ajoutons des partials (parties)


Il faut aussi l’ajouter dans application.html.erb

… Et modifer la feuille de style:


	/* footer */

	footer {
	  margin-top: 45px;
	  padding-top: 5px;
	  border-top: 1px solid #eaeaea;
	  color: #999;
	}

	footer a {
	  color: #555;
	}  

	footer a:hover { 
	  color: #222;
	}

	footer small {
	  float: left;
	}

	footer ul {
	  float: right;
	  list-style: none;
	}

	footer ul li {
	  float: left;
	  margin-left: 10px;
	}

Ajoutons des partials (parties)

Le matériel statique (static assets)


Avant Rails 3.0, un seul endroit pour les resources statiques (css, html, images): public/

Le matériel statique (static assets)


Avant Rails 3.0, un seul endroit pour les resources statiques (css, html, images): public/

Apres 3.0, 3 répertoire dédiés:

Le matériel statique (static assets)


Avant Rails 3.0, un seul endroit pour les resources statiques (css, html, images): public/

Apres 3.0, 3 répertoire dédiés:

Chaque répertoire contient des sous-rép. spécifiques:

Le matériel statique (static assets)


Une fois en place, un fichie manifest permet de grouper des assets en fichier unique

Le matériel statique (static assets)


Une fois en place, un fichie manifest permet de grouper des assets en fichier unique
→ Chargement plus rapide

Le matériel statique (static assets)


Une fois en place, un fichie manifest permet de grouper des assets en fichier unique
→ Chargement plus rapide

Le matériel statique (static assets)


Une fois en place, un fichier manifest permet de grouper des assets en fichier unique
→ Chargement plus rapide

Le matériel statique (static assets)


Le fichier manifest:
app/assets/stylesheets/application.css

	/*
	 * This is a manifest file that'll automatically include all the stylesheets
	 * available in this directory and any sub-directories. You're free to add
	 * application-wide styles to this file and they'll appear at the top of the
	 * compiled file, but it's generally better to create a new file per style 
	 * scope.
	 *= require_self
	 *= require_tree . 
	*/

Le matériel statique (static assets)


Le fichier manifest:
app/assets/stylesheets/application.css

	/*
	 * .
	 * .
	 * .
	 * . 
	 * .
	 *= require_self
	 *= require_tree . 
	*/

Le matériel statique (static assets)


Le fichier manifest:
app/assets/stylesheets/application.css

	 *= require_self

Requiert le fichier application.css lui-même

Le matériel statique (static assets)


Le fichier manifest:
app/assets/stylesheets/application.css

	 *= require_tree .

Requiert tous les fichiers du repertoire et de ses sous-répertoires.

Le matériel statique (static assets)


Les processeurs de pré-traitement:

Le matériel statique (static assets)


Les processeurs de pré-traitement:

Peuvent être chaînés:

foobar.js.erb.coffee traité par CoffeScript puis ERB.

Les liens


Liens classiques:
<a href="/static_pages/about">About</a>

Les liens


Liens classiques:
<a href="/static_pages/about">About</a>

Liens à la rails:
<%= link_to "About", about_path %>

Les liens


Liens classiques:
<a href="/static_pages/about">About</a>

Liens à la rails:
<%= link_to "About", about_path %>

Plus facile de changer la valeur du lien sans chercher dans les pages.

Les liens


Page  URI  Named route
Home / root_path
About /about about_path
Help /help help_path
Contact /contact contact_path
Sign up /signup signup_path
Sign in /signin signin_path

Au fait


Comment ajouter une page contact?

Au fait


Comment ajouter une page contact?

Au fait


Comment ajouter une page contact?

Au fait


Comment ajouter une page contact?

Routes nommées


Puique l’on va utiliser des routes nommées, pour les tests il suffit de changer visit '/static_pages/about'

Routes nommées


Puique l’on va utiliser des routes nommées, pour les tests il suffit de changer visit '/static_pages/about'

Remplacer par
visit about_path

Routes nommées


Puique l’on va utiliser des routes nommées, pour les tests il suffit de changer visit '/static_pages/about'

Remplacer par
visit about_path

Les tests doivent échouer…

Routes nommées


On change les routes dans le fichier config/routes.rb

Routes nommées


On change les routes dans le fichier config/routes.rb

On remplace get 'static_pages/help'
Par match '/help', to: 'static_pages#help'

Routes nommées


On change les routes dans le fichier config/routes.rb

On remplace get 'static_pages/help'
Par match '/help', to: 'static_pages#help'

Routes nommées


Fichier config/routes.rb:

 SampleApp::Application.routes.draw do
  match '/help',    to: 'static_pages#help'
  match '/about',   to: 'static_pages#about'
  match '/contact', to: 'static_pages#contact'
  .
  .
  .
end

Route par défaut


Commentée dans config/routes.rb

SampleApp::Application.routes.draw do
  .
  .
  .
  # You can have the root of your site routed with "root"
  # just remember to delete public/index.html.
  # root :to => "welcome#index"
  .
  .
  .
end

Route par défaut


On fait le lien avec home:

SampleApp::Application.routes.draw do
  root to: 'static_pages#home'

match ‘/help’, to: ‘static_pages#help’ match ‘/about’, to: ‘static_pages#about’ match ‘/contact’, to: ‘static_pages#contact’ . . .

end

Des test plus beaux


On remplace :

	describe "Home page" do

	  it "should have the h1 'Sample App'" do
	    visit root_path
	    page.should have_selector('h1', text: 'Sample App')
	  end

	  it "should have the base title" do
	    visit root_path
	    page.should have_selector('title',
	                      text: "Ruby on Rails Tutorial Sample App")
	  end

	  it "should not have a custom page title" do
	    visit root_path
	    page.should_not have_selector('title', text: '| Home')
	  end
	end

Des test plus beaux


Par :

	subject { page }

	  describe "Home page" do
	    before { visit root_path } 

	    it { should have_selector('h1', text: 'Sample App') }
	    it { should have_selector 'title',
	                        text: "Ruby on Rails Tutorial Sample App" }
	    it { should_not have_selector 'title', text: '| Home' }
	  end