Hazırladığım bir projede Symfony2 formlarını özelleştirerek
Bootstrap CSS ile entegre etmek istedim. Bunu başarmak için tabii ki Symfony2'de bir formül var: Form Themes. Symfony2 ile oluşturulan formlardaki tüm elemanların formatlarının tutulduğu bir dosya bulunuyor. Bu formatlarda istediğimiz gibi değişiklik yaparak, örneğin <div> tag'leri ekleyerek ve ya sınıflar atayarak Bootstrap ile uyumlu hale getirebiliyoruz. Bu yazıda Bootstrap CSS'in detayından bahsetmeyeceğim, fakat genel olarak ön yüz tasarımcılarının işini kolaylaştıran, daha da önemlisi yazılım geliştiricileri tasarım yapmaktan kurtaran bir CSS framework'u olduğunu söyleyebiliriz. Twitter tarafından tasarlanan bu framework, kullanım kolaylığı, tarayıcılarla uyumu ve estetik güzellik gibi çok iyi özelliklere sahip.
Boostrap Kurulumu
Öncelikle Bootstrap CSS indirip uygulamamıza dahil edelim.
Şu adresten Bootstrap için gerekli dosyaları indirdikten sonra web klasörü altına açıyoruz. Daha sonra kullandığımız layout içerisinde bootstrap için gerekli dosyaları dahil ediyoruz.
# app/Resources/views/base.html.twig
<head><link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet"></head> <body>
<script type="text/javascript" src="{{ asset('js/bootstrap.min.js') }}"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script></body>
Bootstrap ile birlikte kullanabileceğiniz bazı javascript eklentileri de bulunuyor, bunlar jQuery gerektirdiğinden bu kütüphaneyi de dahil ediyoruz.
Symfony2 Formlarını Özelleştirmek
Symfony2'de oluşturduğumuz formları sayfada gösterirken bazı fonksiyonlar kullanıyoruz. Örneğin integer tipinde bir alanı
integer_widget metodundan faydalanıyoruz. Fakat oluşan çıktının formatını değiştirmek istersek, iki yöntem kullanabiliriz. Birisi sadece ilgili fom için bu metodun çıktısını değiştirmek. Bu her ne kadar daha basit gibi görünse de, aynı işleme başka yerde ihtiyacımız olduğunda eziyet olacaktır. Bu yüzden bu yönteme ek olarak tüm formlarda bir metodun çıktısını değiştirmek için de bir yöntem bulunuyor. Önce sadece ilgili formda
form_widget metodunu değiştirelim:
#src\Dubluve\NewBundle\Default\new.html.twig
{% extends '::base.html.twig' %} {% form_theme form _self %} {% block form_row %} {% spaceless %} <div class="control-group"> {{ form_label(form) }} {{ form_errors(form) }} <div class="controls">{{ form_widget(form) }}</div> </div> {% endspaceless %} {% endblock form_row %} {% block content %} {{ form_row(form.email) }} {% endblock %} Bu sayfada kullanılan form için form_row metodu farklı bir çıktı oluşturacak, fakat diğer sayfalardaki formlar için çıktı aynı olacaktır. Eğer bu değişikliğin tüm formlar için geçerli olmasını istiyorsak kendi formatlarımızın bulunduğu bir dosya oluşturmamız gerekiyor. Yeni dosyada çıktısını değiştirmek istediğimiz metodlar olacak, diğerleri ise eskisi gibi çıktı oluşturmaya devam edecek. Yeni dosyayı proje klasörü içerisinde
src\Dubluve\NewBundle\Resources\views\Form\bootstrap.html.twig dosyasını yaratıyoruz.
#src\Dubluve\NewBundle\Resources\views\Form\bootstrap.html.twig
{% extends 'form_div_layout.html.twig' %} {% block form_row %} {% spaceless %} <div> {{ form_label(form) }} {{ form_errors(form) }} <div>{{ form_widget(form) }}</div> </div> {% endspaceless %} {% endblock form_row %} Dosyadaki extends ifadesi, değiştirilmeyen form elemanlarının eskisi gibi kalacağını ifade ediyor. Dosyayı oluşturduktan sonra config.yml dosyasını da aşağıdaki şekilde güncelliyoruz ve yeni dosyamızın global olarak kullanılacağını belirtiyoruz.
# Twig Configuration twig: form: resources: - 'DubluveNewBundle:Form:bootstrap.html.twig'
Bootstrap İle Entegrasyon
Yukarıdaki yöntemleri anlattıktan sonra aslında sadece bootstrap ile değil herhangi bir CSS framework ile entegrasyon oldukça basit. Aslında sadece bootstrap dosyalarını sisteme entegre etmek bile güzel bir görünüm sağlıyor :) Hazırladığım projede tüm formların bootstrap dokümantasyonunda anlatılan
horizontal-form formatında olmasını ve hata mesajlarının bootstrap formatında çıkmasını istemiş ve dosyayı buna göre düzenlemiştim. Aşağıda kullandığım dosyayı görebilirsiniz.
#src\Dubluve\NewBundle\Resources\views\Form\bootstrap.html.twig
{% extends 'form_div_layout.html.twig' %} {% block form_row %} {% spaceless %} {% if not form.children %} <div class="control-group"> {{ form_label(form) }} {{ form_errors(form) }} <div class="controls">{{ form_widget(form) }}</div> </div> {% else %} {{ form_errors(form) }} {{ form_widget(form) }} {% endif %} {% endspaceless %} {% endblock form_row %} {% block form_label %} {% spaceless %} {% if not compound %} {% set label_attr = label_attr|merge({'for': id}) %} {% endif %} {% if required %} {% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' required control-label')|trim}) %} {% endif %} {% if label is empty %} {% set label = name|humanize %} {% endif %} <label {% for attrname, attrvalue in label_attr %} {{ attrname }}="{{ attrvalue }}"{% endfor %} >{{ label|trans({}, translation_domain) }}</label> {% endspaceless %} {% endblock form_label %} {% block form_errors %} {% spaceless %} {% if errors|length > 0 %} {% for error in errors %} <div class="alert alert-error">{{ error.messagePluralization is null ? error.messageTemplate|trans(error.messageParameters, 'validators') : error.messageTemplate|transchoice(error.messagePluralization, error.messageParameters, 'validators') }}</div> {% endfor %} {% endif %} {% endspaceless %} {% endblock form_errors %} Devamı için :
Symfony2 Formlarini Ozellestirmek ve Bootstrap CSS
Hiç yorum yok:
Yorum Gönder
Yorumunuzu esirgemeyiniz..