Shiny Paketi - II


Shiny paketi derslerine kaldığımız yerden devam edelim. Önceki dersimizde paketin R programı içerisine nasıl kurulacağı, ui ve server scriptlerinin ne işe yaradığı hakkında bilgiler vedik ve birkaç küçük uygulamayla konuyu pekiştirmiştik. Bu dersimizde shiny paketi ile kullanıcı arayüzüne resim nasıl ekleyeceğimizi ve kontroller üzerinde duracağız.

İmage Nesnesi

İmage nesnesi kontrolü html den de bildiğimiz “img” komutu ile oluşturulmaktadır. Bu komutun içerisine argüman olarak width (genişlik) ve height(yükseklik) tanımlanabilmektedir. Örnek bir kullanım aşağıdaki gibidir.

img(src="1.jpg", width="150", height="150")

Yukarıda görüldüğü gibi html ile arasındaki fark argümanlar virgül ile ayrılmaktadır. Diğer önemli bir husus resim klasörü default olarak “www” olarak isimlendirilmeli ve resim bu klasörün içerisine atılmalıdır. Bir diğer husus ise eğer resmin otomatik boyutlanmasını istiyorsak yükseklik ve genişlik alanlarına pixel değeri vermek yerine yüzde değeri verilmelidir.

img(src="1.jpg", width="100%", height="100%")

Yukarıdaki komut uygulandığı zaman eklenen resmin pencereye otomatik olarak sığdığı görülmektedir.

Diğer Nesne Elemanları

actionButton                                    Buton

checkboxGroupInput                    Onay Kutusu Grubu

checkboxInput                                Tekli Onay Kutusu

dateInput                                          Tarih Seçici

dateRangeInput                              Tarih Aralığı

fileInput                                             Dosya Yükleme

helpText                                            Yardım Texti

numericInput                                   Sayı Giriş Alanı

radioButtons                                    Radio Butonu

selectInput                                       Açılır Menü

sliderInput                                        Slider Çubuğu

submitButton                                  Onay Butonu

textInput                                            Yazı Girişi

 

Yukarıda shiny kodları ve bunların açıklamaları verilmiştir. Şimdi birkaç örnek yapalım.

Öncelikle sayfamıza  daha güzel bir görünüm vermek için Layout ekleyelim.

shinyUI(fluidPage(

// Kodları bu alana yazacağız

))

İlk adımda bir başlık ekleyelim. Daha önceden söylediğim gibi string değerler Türkçe karakter içermemelidir.

shinyUI(fluidPage(

  titlePanel("Baslik Burada")

))

Sayfa tasarımımız için senaryo şu şekilde olsun. sayfa 3 satır ve 4 sütundan oluşsun. Bunun için “fluidRow” komutu ile satır,  “column” komutu ile sütun oluşturacağız.

shinyUI(fluidPage(

  titlePanel("Basic widgets"),

 

  fluidRow(

   

    column(3,

           h3("Buttons"),

           actionButton("action", label = "Buton"),

           br(),

           br(),

           submitButton("Onay")),

   

    column(3,

           h3("Tekli Onay Kutusu"),

           checkboxInput("checkbox", label = "Secenek A", value = TRUE)),

   

    column(3,

           checkboxGroupInput("checkGroup",

                              label = h3("Onay Grubu"),

                              choices = list("Secim 1" = 1,

                                             "Secim 2" = 2, "Secim 3" = 3),

                              selected = 1)),

   

    column(3,

           dateInput("date",

                     label = h3("Tarih Girisi"),

                     value = "2014-01-01"))  

  )))

Yukarıdaki komutlara dikkat ederseniz Türkçe olarak verdiğim kısımlar elemanlara ait açıklama yada başlıkları temsil etmektedir ki Türkçe karakter kullanmadık. Bu komutun sonucunda bir satır ve 4 sütundan oluşan bir yapı karşımıza çıkar. Birde “column” komutunun yanındaki “3” rakamı ne işe yaradığını anlatayım. Bootstrap yapı itibariyle tek satırı “12” birimden oluşturmaktadır. Burada da sütunları eşit şekilde dağıtmak için 4 sütun için 3 birimlik uzunluk değeri atanmıştır. Aşağıdaki kodlarda örnek biraz daha geliştirilmiştir.

shinyUI(fluidPage(

  titlePanel("Ornek Form"),

 

  fluidRow(

   

    column(3,

           h3("Butonlar"),

           actionButton("action", label = "Buton"),

           br(),

           br(),

           submitButton("Onay")),

   

    column(3,

           h3("Tekli Onay Kutusu"),

           checkboxInput("checkbox", label = "Secim A", value = TRUE)),

   

    column(3,

           checkboxGroupInput("checkGroup",

                              label = h3("Onay Kutusu Grubu"),

                              choices = list("Secim 1" = 1,

                                             "Secim 2" = 2, "Secim 3" = 3),

                              selected = 1)),

   

    column(3,

           dateInput("date",

                     label = h3("Tarih Girisi"),

                     value = "2014-01-01"))  

  ),

 

  fluidRow(

   

    column(3,

           dateRangeInput("dates", label = h3("Tarih Araligi"))),

   

    column(3,

           fileInput("file", label = h3("Dosya Yukleme"))),

   

    column(3,

           h3("Yardim Metni"),

           helpText("Note: help text isn't a true widget,",

                    "but it provides an easy way to add text to",

                    "accompany other widgets.")),

   

    column(3,

           numericInput("num",

                        label = h3("Sayi Girisi"),

                        value = 1))  

  ),

 

  fluidRow(

   

    column(3,

           radioButtons("radio", label = h3("Radio Butonlar"),

                        choices = list("Secim 1" = 1, "Secim 2" = 2,

                                       "Secim 3" = 3),selected = 1)),

   

    column(3,

           selectInput("select", label = h3("Secim Kutusu"),

                       choices = list("Secim 1" = 1, "Secim 2" = 2,

                                      "Secim 3" = 3), selected = 1)),

   

    column(3,

           sliderInput("slider1", label = h3("Sliderlar"),

                       min = 0, max = 100, value = 50),

           sliderInput("slider2", "",

                       min = 0, max = 100, value = c(25, 75))

    ),

   

    column(3,

           textInput("text", label = h3("Metin Girisi"),

                     value = "Metin Giriniz"))  

  )

 

))

Önümüzdeki derste bu nesneleri “server” taraflı nasıl kontrol edeceğimizi öğreneceğiz. Konuyla ilgili Soru ve önerileriniz için bizimle facebook sayfamızdan irtibata geçebilirsiniz. İyi çalışmalar…

 

Yazar Kimdir?

Sıtkı Cansu, 19 Ekim 1985 yilinda Konya-Beyşehir'de dogmustur.İlk, orta ve liseyi Beyşehir'de bitirmis olup Konya-Ereğli Selçuk MYO Bilgisayar programcılığı ve Mugla Sıtkı Koçman Üniversitesi İstatistik bölümünden mezun olmustur. Çesitli yerlerde web tasarımcı ve veri tabani yöneticisi olarak çalışan yazar, son üç senedir ingilizce öğretmenliği yapmaktadir. Şu anda yüksek lisansını tamamlamak üzere Mugla Üniversitesinde öğrenim görmektedir.