Oui… Ce soir !
En effet, la version 0.2.0 de bivouac est disponible !
Pour fêter cela, je vous propose de voir comment créer une application pour iPhone avec le plugin iui_s_tent.
Commencez par créer une nouvelle application :
create /Users/greg/temp/iui_test
…
create /Users/greg/temp/iui_test/app/controllers/index.rb
$
Ajoutez ensuite le plugin iui_s_tent à votre nouvelle application :
$ ruby script/plugin install iui_s_tent
A iui_s_tent/LICENCE
…
A iui_s_tent/README
Checked out revision 59.
$
Installez le plugin :
(in /Users/greg/temp/iui_test)
Install /Users/greg/temp/iui_test/public/images/backButton.png
…
Install /Users/greg/temp/iui_test/public/stylesheets/iui_extension.css
$
Vous avez maintenant deux nouveaux générateurs disponibles :
Usage: script/generate generator [options] [args]
Generators
Builtin: controller, model, migration, view, test
Plugins: iphone_view, iphone_controller
Commun options:
-h, –help Show general help message
$
Nous allons donc créer un contrôleur pour iPhone :
create /Users/greg/temp/iui_test/app/controllers/iphone_test.rb
create /Users/greg/temp/iui_test/app/views/iphone_test.rb
$
Voici le code de la vue app/views/iphone_test.rb que nous obtenons :
-
#
-
# Project IuiTest
-
#
-
# Created using bivouac on Mon Mar 31 23:36:03 +0200 2008.
-
# Copyright (c) 2008 __My__. All rights reserved.
-
#
-
-
module IuiTest::Views
-
def iphone_test
-
iphone( :title => "My iPhone App" ) do
-
navigation_bar( )
-
panel( :title => "Home", :selected => "true" ) do
-
span "See iUI’s Tent documentation…"
-
end
-
end
-
end
-
end
Si vous démarrez tout de suite votre application, voici ce que vous devez obtenir :
Nous allons modifier le code de la vue de façon à lui ajouter un texte un peu plus joli ainsi qu’un formulaire de recherche. Modifiez donc le code de app/views/iphone_test.rb comme ceci :
-
#
-
# Project IuiTest
-
#
-
# Created using bivouac on Mon Mar 31 23:36:03 +0200 2008.
-
# Copyright (c) 2008 __My__. All rights reserved.
-
#
-
-
module IuiTest::Views
-
def iphone_test
-
iphone( ) do
-
navigation_bar( :search_form => "my_search_id" )
-
-
panel( :selected => "true" ) do
-
h2 "My iPhone App"
-
ul {
-
li {
-
text "Version 1.0.0"; br
-
small "© 2008, Gregoire Lejeune"
-
}
-
li { label "I love bivouac!" }
-
}
-
end
-
-
search_form( "Search User", R(Search), "my_search_id", :submit_label => "Ok" ) do
-
label "User"
-
input :id => "user", :type => "text", :name => "user"
-
end
-
end
-
end
-
end
Notre formulaire de recherche envoie les données vers un nouveau contrôleur Search. Nous devons donc le créer. A la différence de tout à l’heure, nous allons demander à créer un contrôleur avec une vue vide en utilisant l’option -e ou –empty :
create /Users/greg/temp/iui_test/app/controllers/iphone_search.rb
create /Users/greg/temp/iui_test/app/views/iphone_search.rb
$
Comme vous pouvez le constater, dans ce cas, la vue (views/iphone_search.rb) créée est bien vide :
-
#
-
# Project IuiTest
-
#
-
# Created using bivouac on Mon Mar 31 23:48:16 +0200 2008.
-
# Copyright (c) 2008 __My__. All rights reserved.
-
#
-
-
module IuiTest::Views
-
def iphone_search
-
# …
-
end
-
end
Avant de modifier cette vue, nous allons modifier son contrôleur de façon à récupérer le contenu du champ user du formulaire. Il suffit pour cela, simplement d’ajouter la ligne suivante dans controllers/iphone_search.rb :
-
@search_term = input.user
Terminez en modifiant le code de la vue view/iphone_search.rb :
-
#
-
# Project IuiTest
-
#
-
# Created using bivouac on Mon Mar 31 23:48:16 +0200 2008.
-
# Copyright (c) 2008 __My__. All rights reserved.
-
#
-
-
module IuiTest::Views
-
def iphone_search
-
list( :title => "Results", :selected => "true" ) do
-
item @search_term, :href => "#my_pan"
-
item @search_term, :href => "#my_pan"
-
item @search_term, :href => "#my_pan"
-
item @search_term, :href => "#my_pan"
-
end
-
-
panel( :id => "my_pan", :title => "#{@search_term}" ) do
-
text "About #{@search_term}"
-
end
-
end
-
end
Faite maintenant pointer votre iPhone ou votre iPod Touch sur l’adresse http://votreserveur:3301/iphone_test :
Si vous cliquez sur le bouton Search en haut à droite, vous verrez apparaître le formulaire :
Saisissez en texte quelconque en cliquez sur Ok. Vous arrivez sur une liste de résultats :
En cliquant sur un résultat, vous arrivez sur un panel d’information :
