4.1- Interface : mises en page et panneaux

4.1.1 Les panels

Les panels permettent de réunir différents éléments (widgets, textes, images…). Les différents types de panels correspondent à différents styles (par exemple, fonds gris pour wellPanel(), caractères colorés pour titlePanel(), etc.)

Il est possible de combiner différents types de panels en les juxtaposant ou en les emboîtant, comme dans l’exemple ci-contre.

Tout ce que je vais vous montrer dans cette partie concerne la partie UI des Shiny Apps!!

fluidPage(
  titlePanel("Ceci est un titlePanel"),
  fluidRow(column(width=6,
                  "Ceci est une première colonne"
                  ),
           column(width=2,
                  "Ceci est une deuxième colonne"
                  ),
           column(width=4,
                  "Ceci est une troisième colonne",
                  wellPanel("Ceci est un wellPanel")
                  )
           )#fluidRow  
)#fluidPage

4.1.2 Les Layouts

On peut par ailleurs utiliser des types de layouts prédéfinis pour organiser son appli…

Vous pouvez tester la différence entre ces types de layout en modifiant la taille de la fenêtre…

• fluidRow() permet de définir précisément l’organisation de l’appli, en lignes et colonnes. Chaque ligne compte 12 unités de largeur au total.
  
• flowLayout() adapte le layout en fonction de la taille totale de l’élément et la taille des éléments qui le composent.

Vous pouvez tester la différence entre ces types de layout en modifiant la taille de la fenêtre…

wellPanel(
  "We want funny cats and dogs!",
  img(src="www/funny_cats.jpg"),
  img(src="www/funny_dogs.jpg"),
  hr(),h2("fluidRow:"),
  fluidRow(
    column(width=2,"We want funny cats and dogs!"),
    column(width=5,img(src="www/funny_cats.jpg")),
    column(width=5,img(src="www/funny_dogs.jpg"))
  ),
  hr(),h2("flowLayout:"),
  flowLayout(
   "We want funny cats and dogs!",
    img(src="www/funny_cats.jpg"),
    img(src="www/funny_dogs.jpg")
  )
)

Les Layouts

On peut par ailleurs utiliser des types de layouts prédéfinis pour organiser son appli…

Vous pouvez tester la différence entre ces types de layout en modifiant la taille de la fenêtre…

• sidebarLayout() permet de diviser la fenêtre en deux éléments: un élément latéral plus étroit (qui contiendra généralement des input widgets) et un élément principal (qui contiendra généralement des outputs).
  
• splitLayout() permet de diviser la fenêtre en éléments de taille égale. Si le contenu des éléments est trop important l’élément devient “scrollable”.
• verticalLayout() dispose les éléments les uns en dessous des autres

wellPanel(
  img(src="www/funny_cats.jpg"),
  img(src="www/funny_dogs.jpg"),
  img(src="www/cute_cats.jpg"),
  hr(),h2("splitLayout:"),
  splitLayout(
    img(src="www/funny_cats.jpg"),
    img(src="www/funny_dogs.jpg"),
    img(src="www/cute_cats.jpg")
  ),
  hr(),h2("verticalLayout:"),
  verticalLayout(
    img(src="www/funny_cats.jpg"),
    img(src="www/funny_dogs.jpg"),
    img(src="www/cute_cats.jpg")
  )  
)

Cas Pratique

1. Beaucoup d’informations sont désormais disponibles sur votre application. Mettez la forme de manière à faciliter la navigation des utilisateurs.

2. En vous inspirant du code disponible https://github.com/aoles/shinypass, ajoutez une fenêtre d’authentification par login/mot de passe à votre application.