Temel JavaFX Bileşenleri (1) Labeled, Label, Button, ToggleButton, RadioButton, ToggleGroup, CheckBox, ComboBox, Slider, ListView ve SelectionModel

Transkript

1 Temel JavaFX Bileşenleri (1) Labeled, Label, Button, ToggleButton, RadioButton, ToggleGroup, CheckBox, ComboBox, Slider, ListView ve SelectionModel

2 JavaFX Nodları javafx.scene.node: sahneye eklenebilen grafiksel bileşenlerdir javafx.scene.parent: çocukları (alt nodları) olabilen nodlardır javafx.scene.layout.region: ek özellikleri bulunan Parent nodlardır Arka plan (background), kenar (border), şekil Çocuklar (alt nodlar) arka plan üzerine çizilirler Kontrollerin ve panoların (panes) temel sınıfı javafx.scene.control.control: kullanıcı tarafından kullanılabilen (durumu değiştirilebilen) nodlardır javafx.scene.layout.pane: çocuk nodlarının yerleştirilmesinden sorumlu panoların temel sınıfıdır

3 javafx.scene.control.labeled Metin (text), grafik (graphics), veya ikisini birden içerebilen elemandır Soyut sınıf Control sınıfından türetilmiştir settext(string text) setgraphic(node graphic) setcontentdisplay(contentdisplay value) ContentDisplay.TOP, ContentDisplay.RIGHT, vs. Grafiğin metine göre bağıl pozisyonunu belirler ContentDisplay.GRAPHIC_ONLY, ContentDisplay.TEXT_ONLY

4 javafx.scene.control.label Etiket (Label): Kullanıcı arayüzünde bir mesaj göstermek için kullanılan görsel bileşendir Düzenlenemeyen (non-editable) kontrol Labeled sınıfından türetilmiştir Normal şartlarda girdi giriş odağı (input focus) olmazlar Varsayılan davranış üzerine yazılabilir Label(): boş etiket Label(String text): sadece metin içeren etiket Label(String text, Node graphic)

5 Etiket Örneği Image image = new Image(" Label textlabel = new Label("text label"); Label graphiclabel = new Label(null, new ImageView(image)); Label mixedlabel = new Label("text and graphics", new ImageView(image)); rootnode.addall(textlabel, graphiclabel, mixedlabel); LabelExample Projesi

6 javafx.scene.control.button Düğme (Button): Üzerine tıklandığında bir tıklama efekti oluşturan görsel bileşenlerdir Labeled sınıfının alt sınıfı Button(): boş etiketli bir düğme Button(String text) Button(String text, Node graphic) javafx.event.actionevent: düğmeye basıldığında ortaya çıkan olay setonaction(eventhandler<actionevent> handler) handle(actionevent event) Düğmeye basılmayı simüle etmek için: fire()

7 Düğme Örneği Button button1 = new Button("button 1"); Button button2 = new Button("button 2", new ImageView( " be_dan_gerhrads_01.svg.thumb.png")); final Label label = new Label("no button pressed"); button1.setonaction(new EventHandler<ActionEvent>() { public void handle(actionevent event) { label.settext("button 1 pressed"); }}); button2.setonaction(new EventHandler<ActionEvent>() { public void handle(actionevent event) { label.settext("button 2 pressed"); }}); ButtonExample Projesi

8 javafx.scene.control.togglebutton İki durum: basılı(pressed) ve bırakılmış (released) javafx.scene.control.toggle arayüzünü gerçekleştirir Seçili ve seçili olmama durumları arasında geçisi sağlayan anahtar kontrolü setselected(boolean selected) boolean isselected() Labeled sınıfının alt sınıfı Metin, grafik veya ikisini birden içerebiliyor Durumu değiştiğinde ActionEvent olayını oluşturuyor Bu olayı program aracılığıyla yapay olarak oluşturmak için: fire()

9 ToggleButton Örneği ToggleButton button1 = new ToggleButton("button1"); ToggleButton button2 = new ToggleButton("button2"); Image selectedimage = new Image( " h_kon_l_vdal_02.svg.thumb.png"); EventHandler<ActionEvent> handler = new EventHandler<ActionEvent>() { public void handle(actionevent event) { ToggleButton btn = (ToggleButton) event.gettarget(); if (btn.isselected()) btn.setgraphic(new ImageView(selectedImage)); else btn.setgraphic(null); }}; button1.setonaction(handler); button2.setonaction(handler); ToggleButtonExample Projesi

10 javafx.scene.control.radiobutton Seçenek düğmesi (radio button): Genellikle birbirini dışlayan düğmeler için kullanılır ToggleButton sınıfından türetilmiştir Durumu değiştiğinde ActionEvent olayını oluşturur RadioButton(String text) Birbirini dışlama davranışını elde etmek için bir anahtar grubuna (toggle group) eklenirler javafx.scene.control.togglegroup settogglegroup(togglegroup group) fire() bir anahtar grubundaki bir seçenek düğmesinin başlangıç değeri olarak seçilmesi için kullanılabilir

11 Toggle ve ToggleGroup Bir anahtar (toggle) nesnesi bir anahtar grubu (toggle group) ile ilişkilendirilebilir settogglegroup(togglegroup group) ToggleGroup ta selectedtoggle özelliği tanımlıdır: gözlenebilir değer Seçili anahtar olası değişiklikler için gözlemlenebilir Tüm anahtar grubu için tek bir değişim dinleyicisi kullanılır Gruptaki her bir butonu ActionEvent olayları için dinlemek yerine Değişim dinleyicisi ChangeListener<Toggle> arayüzünü gerçekleştirir Bir gruptaki seçili anahtarı almak veya seçili anahtarı değiştirmek için: Toggle getselectedtoggle() selecttoggle(toggle value)

12 Seçenek Düğmesi Örneği RadioButton oddbutton = new RadioButton("odd"); RadioButton evenbutton = new RadioButton("even"); final Label label = new Label(); ToggleGroup group = new ToggleGroup(); oddbutton.settogglegroup(group); evenbutton.settogglegroup(group); group.selectedtoggleproperty().addlistener( new ChangeListener<Toggle>() { public void changed(observablevalue v, Toggle oldvalue, Toggle newvalue) { label.settext("selected button is " + ((RadioButton) newvalue).gettext()); } }); RadioButtonExample Projesi

13 javafx.scene.control.checkbox (1/2) Onay kutusu Varsayılan durumlar: onaylı (checked) ve onaylı değil (unchecked) Opsiyonel üçüncü durum: belirsiz (indeterminate) Durum değeri belirlenmediğinde veya alakasız bir durum oldupunda kullanılır Açık bir şekilde kullanılmak istendiği belirtilmelidir: setallowindeterminate(boolean enable)

14 javafx.scene.control.checkbox (2/2) Tıklandığında: Durumlar arasında döngüsel şekilde ilerlenir {checked, unchecked} veya {indeterminate, checked, unchecked} durumları Bir ActionEvent olayı oluşturulur boolean isselected() boolean isindeterminate()

15 Onay Kutusu Örneği final CheckBox checkbox = new CheckBox("my checkbox"); checkbox.setallowindeterminate(true); final Label label = new Label(); checkbox.setonaction(new EventHandler<ActionEvent>() { public void handle(actionevent event) { String state = checkbox.isindeterminate()? "indeterminate" : (checkbox.isselected()? "checked" : "unchecked"); label.settext("checkbox state is " + state); } }); CheckBoxExample Projesi

16 javafx.scene.control.combobox<t> Açılır kutu (Combo Box): Bir liste elemanlarından seçili bir tanesini gösterir Tıklandığında tüm listeyi gösterir T: liste elemanlarının tipi ComboBox(): boş liste ComboBox(ObservableList<T> items) O an seçili olan elemanı almak için: T getvalue() Seçili olan elemanı kod ile değiştirmek için: setvalue(t value) Seçili eleman değiştiğinde ActionEvent olayı oluşturulur

17 Açılır Kutu Örneği ArrayList<String> list = new ArrayList(); ObservableList<String> olist = FXCollections.observableList(list); olist.addall("sun", "mon", "tue", "wed", "thu", "fri", "sat"); final ComboBox<String> combobox = new ComboBox(oList); final Label label = new Label(); combobox.setonaction(new EventHandler<ActionEvent>() { public void handle(actionevent e) { label.settext("selected item: " + combobox.getvalue()); } }); ComboBoxExample Projesi

18 javafx.scene.control.slider Kaydırıcı (Slider): Belirli bir aralıktaki sayısal değerin seçilmesini sağlar Belirli bir yol üzerinde hareket eden topuz (knob) şeklinde gösterilir Opsiyonel özellikleris: İm işaretleri (tick marks): setshowtickmarks(boolean enabled) İm etiketleri: setshowticklabels(boolean enabled) Slider(double min, double max, double value) min ve max kabul edilebilir aralığı tnaımlar value: başlangıç değeri Slider değeri: JavaFX özelliği Değiştirilebilir, elde edilebilir ve gözlemlenebilir

19 Kaydırıcı Örneği Slider slider = new Slider(-10, 40, 3); slider.setshowtickmarks(true); slider.setshowticklabels(true); final Label label = new Label(); slider.valueproperty().addlistener(new ChangeListener<Number>() { public void changed(observablevalue<? extends Number> observable, Number oldvalue, Number newvalue) { label.settext("slider value: " + newvalue); } }); VBox rootnode = new VBox(slider, label); SliderExample Projesi

20 javafx.scene.control.listview<t> Seçilebilir elemanların bir listesini gösterir Varsayılan davranış: tek eleman seçimi Opsiyonel olarak çoklu seçim aktive edilebilir T: liste elemanlarının tipi Kaydırma çubukları (scrollbars)gerektiğinde otomatik olarak gösterilir ListView(): boş liste ListView(ObservableList<T> items) setorientation(orientation value) Orientation.VERTICAL, Orientation.HORIZONTAL

21 ListView Örneği ArrayList<String> list = new ArrayList(); ObservableList<String> olist = FXCollections.observableList(list); olist.addall("one", "two", "three", "four", "five"); ListView<String> vlist = new ListView(oList); ListView<String> hlist = new ListView(oList); hlist.setorientation(orientation.horizontal); ListViewExamples Projesi

22 javafx.scene.control.selectionmodel<t> Bir grup eleman içirisinde seçili elemanı ifade eder T: elemanların tipi int getselectedindex() T getselecteditem() select(int index) select(t item) ReadOnlyIntegerProperty selectedindexproperty() ReadOnlyObjectProperty<T> selecteditemproperty()

23 Çoklu Seçim Modeli Bir küme eleman içerisinden birden fazlasının seçilmesini sağlar javafx.scene.control.multipleselectionmodel<t> extends SelectionModel<T> ObservableList<Integer> getselectedindices() ObservableList<T> getselecteditems() Varsayılan davranış: tek eleman seçimine izin verilir Tekli ve çoklu seçim arasında geç,ş yapmak için: setselectionmode(selectionmode mode) SelectionMode.SINGLE, SelectionMode.MULTIPLE

24 ListView Seçim Modeli (1/2) Çoklu seçim modeli: MultipleSelectionModel<T> getselectionmodel() Eğer aktive edilmişse, çoklu seçim CTRL ve SHIFT tuşları ile yapılır Kullanıcı seçimindeki değişiklikler gözlemlenebilir: Seçim modelini elde et

25 ListView Seçim Modeli (2/2) Eğer tek seçim modu ise: Seçim modeli üzerinden selecteditem (veya selectedindex ) özelliğini elde et selecteditem (or selectedindex ) özelliği üzerine bir değişim dinleyicisi kaydet Eğer çoklu seçim modu ise: Seçim modeli üzerinden selecteditems (veya selectedindices ) gözlemlenebilir listesini elde et selecteditems (veya selectedindices ) gözlemlenebilir listesi üzerine bir InvalidationListener nesnesi kaydet

26 ListView Seçim Dinleyicisi Örneği (1/2) ArrayList<Character> list = new ArrayList(); ObservableList<Character> olist = FXCollections.observableList(list); olist.addall('a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'); ListView listview = new ListView(oList); final Label label = new Label(); MultipleSelectionModel<Character> model = listview.getselectionmodel(); ReadOnlyObjectProperty<Character> sip = model.selecteditemproperty();... ListViewExamples Projesi

27 ListView Seçim Dinleyicisi Örneği (2/2)... sip.addlistener( new ChangeListener<Character> () { public void changed( ObservableValue<? extends Character> o, Character oldvalue, Character newvalue) { label.settext("selected item: " + ((newvalue!= null)? newvalue : "<none>")); } }); ListViewExamples Projesi

28 ListView Seçim Dinleyicisi Alıştırması Bir önceki örnekteki ListView için çoklu seçimi aktive edin Liste seçimi değişikliklerinden haberdar olmak için bir dinleyici tanımlayın Etiket üzerinde seçili olan elemanların listesini gösterin Etiketi listedeki seçim her değiştiğinde güncelleyin

29 ListView Seçim Dinleyicisi Alıştırması Çözümü model.setselectionmode( SelectionMode.MULTIPLE); model.getselecteditems().addlistener( new InvalidationListener() { public void invalidated( Observable observable) { label.settext("selected items: " + observable); } }); ListViewExamples Projesi