Database Related Comboboxes

Database Related Comboboxes

by Özlem YAVUZ

Adobe Flex Combobox Bileşeni Nedir ?

Kullanıcının birçok değer içerisinden rahatlıkla bir seçim yapmasına olanak sağlayan bir bileşendir.

Kullanıcının hatasız veri girişine olanak sağlar.

Combobox

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="vertical"verticalAlign="top"backgroundColor="white" width="374" height="204">

<mx:XMLList id="projeGrubuXMLList"><kisi abbrev="CBS Yüksek Lisans" name="Özlem YAVUZ " /><kisi abbrev="CBS Yüksek Lisans" name="Can AYDIN " /><kisi abbrev="Ekonometri Doktora" name="Ömür Deniz DALAN " /><kisi abbrev="Ekonometri Yüksek Lisans" name="Lütfiye Özge ORAL " />

</mx:XMLList><mx:ComboBox id="comboBox"

prompt="Bir Kişi Seçiniz..."dataProvider="{projeGrubuXMLList}"labelField="@name"/>

</mx:Application>

Combobox

Çok Basit Bir Combobox Örneği

Gölgelendirme Efekti Verilerek Yazı Karakteri Değiştirilmiş Combobox Örneği

Combobox


layout="vertical"verticalAlign="top"backgroundColor="white" width="392" height="240">

<mx:Style> .myComboBoxDropdown { dropShadowEnabled: true; shadowDistance: 3; shadowDirection: "right"; cornerRadius: 5; } </mx:Style> <mx:ComboBox dropdownStyleName="myComboBoxDropdown" prompt="Kişi Seçiniz..."> <mx:dataProvider> <mx:String>Özlem YAVUZ</mx:String> <mx:String>Can AYDIN</mx:String> <mx:String>Ömür Deniz DALAN</mx:String> <mx:String>Lüftiye Özge ORAL</mx:String> </mx:dataProvider> </mx:ComboBox></mx:Application>

Liste İçerisindeki Öğelerde Açıklama Bulunduran Combobox Örneği

Combobox


layout="vertical"verticalAlign="top"backgroundColor="white" >

<mx:Script> <![CDATA[ import mx.utils.StringUtil; private function comboBox_labelFunc(item:Object):String {

return StringUtil.substitute("{0} ({1})", item.@name, item.@abbrev); } ]]> </mx:Script> <mx:XMLList id="projeGrubuXMLList"> <kisi abbrev="CBS Yüksek Lisans" name="Özlem YAVUZ " /> <kisi abbrev="CBS Yüksek Lisans" name="Can AYDIN " /> <kisi abbrev="Ekonometri Doktora" name="Ömür Deniz DALAN " /> <kisi abbrev="Ekonometri Yüksek Lisans" name="Lütfiye Özge ORAL”/> </mx:XMLList> <mx:ComboBox id="comboBox“ prompt="Bir Kişi Seçiniz“ dataProvider="{projeGrubuXMLList}“ labelFunction="comboBox_labelFunc" />

</mx:Application>Parantez İçerisindeki Öğeler Veritabanında Yer Almaz.

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white" width="414" height="278"> <mx:ApplicationControlBar dock="true"> <mx:Label text="Combobox Genişliği:" /> <mx:HSlider id="ayarCubugu" minimum="50" maximum="200" value="80" liveDragging="true" labels="[50,200]" tickInterval="25" snapInterval="10" /> </mx:ApplicationControlBar> <mx:ComboBox id="comboBox" width="{ayarCubugu.value}" itemRenderer="mx.controls.Label"> <mx:dataProvider> <mx:Array> <mx:Object label="Tepki" /> <mx:Object label="Şu Çılgın Türkler" /> <mx:Object label="Da Vinci Şifresi" /> <mx:Object label="Kanlı Kartal" /> <mx:Object label="Melekler ve Şeytanlar" /> </mx:Array> </mx:dataProvider> </mx:ComboBox></mx:Application>

Combobox

Manual Olarak Combobox Genişliğini Ayarlama Örneği

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical“ verticalAlign="top“ backgroundColor="white“ width="354“ height="230"> <mx:Script> <![CDATA[ private function combobox_change():void {

comboBox.setStyle("textAlign", comboBox.selectedItem.alignment); } ]]> </mx:Script> <mx:ComboBox id="comboBox“; width="250" change="combobox_change()"> <mx:dataProvider> <mx:Array> <mx:Object label="Sola Yasla" alignment="left" />

<mx:Object label="Ortala" alignment="center"/><mx:Object label="Sağa Yasla“ alignment="right"/>

</mx:Array> </mx:dataProvider> </mx:ComboBox></mx:Application>

Combobox

Listedeki Öğelerin Konumlandırılmaları Örneği

Combobox

Liste İçerisine İcon Yerleştirme Örneği<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white" width="352" height="244"> <mx:Script> <![CDATA[ import mx.events.FlexEvent; private function init():void { comboBox.dropdown.iconField = "icon"; } ]]> </mx:Script> <mx:ComboBox id="comboBox" rowCount="4" width="200" themeColor="haloSilver" textIndent="5" prompt="Seçiniz..." creationComplete="init()"> <mx:dataProvider> <mx:Array> <mx:Object label="Çıkar" icon="@Embed(source='images/remove.png')" /> <mx:Object label="Ekle" icon="@Embed(source='images/add.png')" /> <mx:Object label="Ara" icon="@Embed(source='images/search.png')" /> </mx:Array> </mx:dataProvider> </mx:ComboBox>

</mx:Application>

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical“ verticalAlign="top“ backgroundColor="white“ width="356“ height="276"> <mx:Script> <![CDATA[ import mx.effects.easing.*; ]]> </mx:Script> <mx:ComboBox id="comboBox“ prompt="Meslek Seçiniz...“ dropdownWidth="150" alternatingItemColors="[0xDFDFDF, 0xEEEEEE]"> <mx:dataProvider> <mx:Array>

<mx:Object label="Şehir ve Bölge Planlama" /><mx:Object label="Mühendislik" /><mx:Object label="Mimarlık" />

</mx:Array> </mx:dataProvider> </mx:ComboBox></mx:Application>

Combobox

Listedeki Öğelerin Renklendirilmesi Örneği

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white" width="418" height="282"> <mx:ComboBox id="bolum“ dataProvider="{mcs.bolum}" labelField="@label“ width="200“ prompt="Bölüm Seçiniz..."> </mx:ComboBox> <mx:ComboBox id="ogrenci“ dataProvider="{bolum.selectedItem.ogrenci}" labelField="@label“ width="200“ prompt="Öğrenci Seçiniz..."> </mx:ComboBox> <mx:XMLList id="mcs" xmlns=""> <ogrenciler> <bolum label="Coğrafi Bilgi Sistemleri (YL) "> <ogrenci label="Özlem YAVUZ"/> <ogrenci label="Can AYDIN"/> </bolum> <bolum label="Ekonometri (YL) "> <ogrenci label="Lütfiye Özge ORAL"/> </bolum> <bolum label="Ekonometri (DR) "> <ogrenci label="Ömür Deniz DALAN"/> </bolum> </ogrenciler> </mx:XMLList></mx:Application>

Combobox

İki Combobox’ın İlişkili Çalışması Örneği

Combobox Üzerinde Seçili Öğeyi Veritabanında Saklama Teknikleri

• Label• İndex• Kendinizin Belirleyeceği Bir Değişkeni

veritabanında saklayabilirsiniz.

Combobox ve Veritabanı

• Veritabanı Oluşturulur


• Combobox Yaratmak

• Seçili Öğeyi Veritabanına Yazdıracak Komutu Oluşturmak


Combobox Kullanarak Veritabanına Veri Yazmak

Flex İki Çeşit Veritabanı Kullanmaya Olanak Saklamaktadır :

• İnternet Üzerinde (Flex Project)• Bilgisayar Üzerinde (AIR Project)

Bilgisayar üzerinde oluşturulan veritabanına dışarıdan ulaşmak mümkün değildir. Sadece işlem yapılan bilgisayar üzerinde çalışılmaktadır.

Veritabanı İle Çalışmak

• “HTTP.Service” ve “.php” dosyaları (Flex Project)• Script içerisine yazılacak “SqlConnection” ve “SqlStatement” lar (AIR Project)

ile veritabanına bağlantı sağlanır.

Veritabanı İle Çalışmak

Veritabanını Combobox Kullanarak Güncellemek

<?xml version="1.0" encoding="utf-8"?><mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="veriTabaninaBaglan()" height="474" backgroundColor="white" width="559"> <mx:Script> <![CDATA[ private function kaydet():void { var update:SQLStatement = new SQLStatement(); update.sqlConnection = baglanti; update.addEventListener(SQLErrorEvent.ERROR, sqlErrorFH); update.text = "UPDATE universite SET okulAdi='"+degistirOkulCB.selectedLabel+"', okulindex='"+degistirOkulCB.selectedIndex+"', bolumAdi='"+degistirBolumCB.selectedLabel+"', bolumindex='"+degistirBolumCB.selectedIndex+"', ogrenciAdi='"+degisogrenciTI.text+"'WHERE id='"+okulDG.selectedItem.id+"'"; update.execute(); } ]]> </mx:Script> <mx:ComboBox x="178.5" y="206“ id="okulCB“ dataProvider="{mcs.okul}“ labelField="@label“ prompt="Bir Okul Seçiniz“ width="200“/ > <mx:ComboBox x="178.5" y="236“ id="bolumCB“ selectedIndex="-1“ dataProvider="{okulCB.selectedItem.bolum}“ labelField="@label“ prompt="Bir Bölüm Seçiniz“ width="200“/> <mx:TextInput x="178.5" y="266" width="200" id="ogrenciTI"/> <mx:DataGrid x="10" y="40" width="537" id="okulDG" itemClick="degistir()"> <mx:columns> <mx:DataGridColumn headerText="Okul Adı" dataField="okulAdi"/> <mx:DataGridColumn headerText="Bölüm Adı" dataField="bolumAdi"/> <mx:DataGridColumn headerText="Öğrenci Adı" dataField="ogrenciAdi"/> </mx:columns> </mx:DataGrid> <mx:XMLList id="mcs" xmlns=""> <veriler> <okul label="DEÜ"> <bolum label="Coğrafi Bilgi Sistemleri"/> <bolum label="Ekonometri"/> </okul> <okul label="İYTE"> <bolum label="Şehir ve Bölge Planlama"/> <bolum label="Mimarlık"/> </okul> <okul label="EGE"> <bolum label="İnşaat Mühendisliği"/> <bolum label="Jeofizik Mühendisliği"/> </okul> </veriler> </mx:XMLList> <mx:ComboBox x="18" y="316" id="degistirOkulCB“ dataProvider="{mcs.okul}“ labelField="@label“ width="200“/> <mx:ComboBox x="18" y="346" id="degistirBolumCB" dataProvider="{degistirOkulCB.selectedItem.bolum}“ labelField="@label“ width="200“/> <mx:TextInput x="18" y="376" id="degisogrenciTI" text="{okulDG.selectedItem.ogrenciAdi}" width="200"/> <mx:Button x="246" y="376" label="KAYDET" click="kaydet()"/></mx:WindowedApplication>

Combobox İle Güncellemek

Combobox İle Güncellemek

Technology

Database Related Comboboxes