Konuyu Oyla:
  • Derecelendirme: 0/5 - 0 oy
  • 1
  • 2
  • 3
  • 4
  • 5
UniGui Bootstrap ile Buton Tasarımı
#1
Herkese selamlar,

Bugün hava Trabzon'da güneşli, denizde dalgalar büyük büyük geliyor. Bir şeyler yazmaya uygun görünüyor... UniGui ile birkaç gündür haşır neşir oldum. Öğrendiğim bazı güzel olayları anlatmak isterim. Tabi bu konuları tek tek anlatmaya özen göstereceğim. UniGui bilindiği üzere Delphi üzerinde geliştirmiş olduğunuz projeyi web uygulamasına dönüştüren bir bileşen seti. Bu setin standart temaları, bileşenleri mevcut. Web uçsuz bucaksız bir tasarım dünyası olduğu için; eğer web uygulaması yapıyorsanız üstünde çok fazla değişiklik yapabileceğinizi unutmamanız gerekir. Bu yazımda sizlerle UniGui bileşeni içerisinde Bootstrap kullanarak button tasarımı yapmaya çalışacağım. 

İlk olarak bootstrap ürününü indirmemiz gerekir. Korkmayın bu ürün tamamiyle ücretsiz. Linkleri Görebilmeniz İçin Üye Olmanız Gerekiyor. Üye Olabilmek İçin Lütfen Buraya Tıklayınız. hemen sağ üst tarafta bulunan "Download" butonuna basarak indirebilirsiniz. İndirme işlemi tamamlandıktan sonra içerisinde javascript, css ve html dosyaları bulunan bir paket bilgisayarınıza inmiş olacak. Bu paket içerisinde şu anda bizim işimize yarayacak olan bir dosya var. O da css klasörü içerisindeki bootstrap.min.css dosyası. Bu dosyayı uygulamanızın klasöründe bulunan "files" klasörüne atınız. 

Exclamation  Dipnot; bootstrap.min.css dosyasını bulamayanlar için: inen rar dosyasını çıkartınız. "bootstrap-4.0.0\dist\css" yolunu takip edip klasör içerisinde bulabilirsiniz.

Bu dosyayı "files" klasörüne attıktan sonra artık Delphi bölümüne geçebiliriz. 

Idea  ServerModule tarafında yapılacaklar;

a.png



b.png

Bu şekilde attığımız dosya tanımını yapıyoruz. Bunun anlamı artık herhangi bir buton, edit veya farklı bileşen için çağıracağımız CSS sınıfları için referans ortak bir dosya olmuş oluyor. Bunu tanımladıktan sonra buradaki işlemimizi tamamlamış oluyoruz. Bundan sonrası artık "Main" tarafında.


Idea "Main" formunda yapılacaklar;


c.png

Formumuza bir adet UniButton ekledik. Buttonumuzun "ClientEvents" propertiesine ait olan "UniEvents" eventi içerisine ufak bir kod yerleştireceğiz. Bu kod CSS dosyamıza ait olan "btn btn-warning" olacak. Bu sınıf ile butonumuzun turuncu renkte olması gerekiyor. Aynı zamanda oval bir görünüme sahip olması gerekcek. Şimdi lafı uzatmadan fonksiyon kodumuzu yazalım.

d.png

Bu şekilde kodumuzu yazıyoruz. Kodumuzu yazdığımı event "beforeInit" bu event sayesinde daha henüz uygulama başlamadan veya daha doğru bir tabir ile create edilmeden config kodlarının yazıldığı event. Hatta zannedersem bu event ismi; "before-initialization" yani başlatmadan önce anlamına geliyor gibi. Tabi geliştirici böyle mi düşünmüş bilemeyiz... 

Fonksiyon kodu:

function beforeInit(sender, config)
{
 config.baseCls = "btn";
 config.cls = "btn-warning";
}

Idea  Dipnot; Büyük ve küçük harflere duyarlı, sonra hata nerede diye kafa yeme olayı olmasın. Bu konuda ağzım yandı  Blush

Bu şekilde kodumuzu tamamladıktan sonra pencere üstündeki "yeşil tik" butonu ile onaylıyor ve projemizi derliyoruz. Sonuç alt tarafta mevcuttur;

e.png

Güzel sonuç! Bu ve bunun gibi birçok tasarım değişikliği yapılabilir. Bundan sonra elimden geldikçe UniGui hakkında bilgilendirmeler yapacağım. UniGui adamdır ama gelişmesi lazım Big Grin

Herkese hayırlı çalışmalar dilerim.
Linkleri Görebilmeniz İçin Üye Olmanız Gerekiyor. Üye Olabilmek İçin Lütfen Buraya Tıklayınız.
Cevapla
#2
Merhaba,

Buton haricinde bootstrap 'ın hangi özellikleri kullanılabilir?
Bunlarla ilgili örnekler var mı?
Cevapla
#3
Benim gibi konuya "uzaydan gelmiş bir teknoloji mi" acaba? diyerek bakan vardır ümidi ile vkamadan kardeşimizin yazdığı çok güzel bir makalenin linkini burada vermeyi uygun gördüm Smile

Linkleri Görebilmeniz İçin Üye Olmanız Gerekiyor. Üye Olabilmek İçin Lütfen Buraya Tıklayınız.

teşekkürler iki ustayada...
Cevapla
#4
(19-11-2018, Saat: 01:26)selchuk Adlı Kullanıcıdan Alıntı: Linkleri Görebilmeniz İçin Üye Olmanız Gerekiyor. Üye Olabilmek İçin Lütfen Buraya Tıklayınız.Merhaba,

Buton haricinde bootstrap 'ın hangi özellikleri kullanılabilir?
Bunlarla ilgili örnekler var mı?

Merhaba,

Tabi ki form tasarimlarini ve diğer tüm nesnelere ister bootstrap ister diğer CSS kodları ile mudahale edebilirsiniz.

Iyi çalışmalar.
Linkleri Görebilmeniz İçin Üye Olmanız Gerekiyor. Üye Olabilmek İçin Lütfen Buraya Tıklayınız.
Cevapla


Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  UniGUI'ye Genel Bakış vkamadan 51 29.705 15-09-2019, Saat: 22:44
Son Yorum: akuyumcu63
  UniGui stress testi ve anlık bağlantı performansı dervis 13 954 20-07-2019, Saat: 02:17
Son Yorum: bajerli
  Unigui Yeni Bileşenler pro_imaj 5 587 14-06-2019, Saat: 21:34
Son Yorum: Halil Han Badem
  Unigui ile online satış ermanispir@gmail.com 6 787 14-06-2019, Saat: 17:30
Son Yorum: Halil Han Badem
  Unigui runtime font sorunu ermanispir@gmail.com 4 464 10-06-2019, Saat: 19:47
Son Yorum: ermanispir@gmail.com



Konuyu Okuyanlar: 1 Ziyaretçi