 |
FLEX HSlider VSlider
4 Ekim 2008
FLEX HSlider VSliderBuradaki açıklamalar http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=controls_059_16.html adresindedir.HSlider ve VSlider Kontrolları slider kontrollarıa kayma göstergesinin iki uç arasındakini yerini belirtmekte kullanılabilir. Kayma göstergesinin yerine göreceli olarak slider değeri belirlenir. Varsayılan olarak slider için en alt değer 0 olur ve en büyük değer de 10 olur. kayma göstergesinin yeri en alt ve en üst değerler arasında o anki değeridir. ya da kontrolu nasıl ayarladıysanız ona bağımlı olarak aldığı değerlerdir. Flex iki kayma destekler: HSlider (Yatay kayma) kontrolu, yatay kayma olarak yaratılır ve diğeri de VSlider (Düşey kayma) kontrolu, düşey kayma olarak yaratılır. Aşağıdaki örnek HSlider ve VSlider kontrollarını gösterir. 
HSlider and VSlider controlsBu örnek veri dokunmalarını, kayma göstergesini, izlemeyi, çentikleri ve etiketleri içerir. SAeçmeli olarak bunları gösterip saklayabilirsiniz de.
<?xml version="1.0"?>
<!-- controls\slider\HSliderSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:HBox>
<mx:VBox>
<mx:HSlider
tickInterval="2"
labels="['min', 'max']" height="150"/>
<mx:HSlider/>
</mx:VBox>
<mx:VSlider
tickInterval="2"
labels="['min', 'max']"/>
</mx:HBox>
</mx:Application>
HSlider ve VSlider kontrolları aşağıdaki varsayılan özellikleri içerir:
Slider Kontrol YaratmaHSlider kontrol mxml içinde <mx:HSlider> biçimi kullanılarak tanımlanır. VSlider ise <mx:VSlider> biçimiyle gösterilir. Parçalara başka yerlerde de erişebilmek için bir "id" (tanıtım kodu) belirmeniz gerekir. Aşağıdaki kodlama örneği 4 HSlider kontrolu yaratır:
<?xml version="1.0"?>
<!-- controls\slider\HSliderSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:VBox>
<mx:HSlider
maximum="100"/>
<mx:HSlider
maximum="100"
snapInterval="5"/>
<mx:HSlider
maximum="100"
snapInterval="5"
tickInterval="25"/>
<mx:HSlider
maximum="100"
snapInterval="5"
tickInterval="25"
labels="[0,25,50,75,100]"/>
</mx:VBox>
</mx:Application>
snapInterval ile HSlider kontrollarıAynı şeyleri VSlider kontrolları için de yapabilirsiniz.
<?xml version="1.0"?>
<!-- controls\slider\VSliderSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:HBox>
<mx:VSlider
maximum="100"/>
<mx:VSlider
maximum="100"
snapInterval="5"/>
<mx:VSlider
maximum="100"
snapInterval="5"
tickInterval="25"/>
<mx:VSlider
maximum="100"
snapInterval="5"
tickInterval="25"
labels="[0,25,50,75,100]"/>
</mx:HBox>
</mx:Application>
snapInterval ile VSlider kontrollarıkayma özelliklerini başka bir kontrola bağlayabilirsiniz. Aşağıdaki örnek value özelliğini Text kontroluna bağlar:
<?xml version="1.0"?>
<!-- controls\slider\HSliderBinding.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:HSlider id="mySlider" maximum="100"/>
<mx:Text text="{mySlider.value}"/>
</mx:Application>
Bu kod aşağıdaki görüntüyü verir:
kayma olaylarını kullanmaKayma kontrolları en alt ve en üst değerler arasında kayma göstergesinin yerini belirlemekte kullanılır. Kaymaya bağlı bir olay tanımlanırsa kullanıcının kayma göstergesinin yerini değiştirmesiyle olay işleme girer. Kayma kontrolları aşağıdaki olayları anlayabilir:
<?xml version="1.0"?>
<!-- controls\slider\HSliderEvent.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.events.SliderEvent;
import mx.controls.sliderClasses.Slider;
private function sliderChange(event:SliderEvent):void {
var currentSlider:Slider=Slider(event.currentTarget);
thumb.text=String(currentSlider.value);
}
]]>
</mx:Script>
<mx:HSlider change="sliderChange(event);"/>
<mx:TextArea id="thumb"/>
</mx:Application>
Varsayılan olarak kayma kontrolunun liveDragging özelliği "false" olur. Bunun anlamı, kullanıcının kayma göstergesini bıraktığında olayın tetiklenmesidir. Eğer değeri true yaparsanız kullanıcı kayma göstergesini hareket ettirirken sürekli "change" olayı tetiklenmiş olur. Aşağıdaki örnekte bu gösterilmiştir.
<?xml version="1.0"?>
<!-- controls\slider\HSliderEventLiveDrag.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.events.SliderEvent;
import mx.controls.sliderClasses.Slider;
private function sliderChangeLive(event:SliderEvent):void {
var currentSlider:Slider=Slider(event.currentTarget);
thumbLive.text=String(currentSlider.value);
}
]]>
</mx:Script>
<mx:HSlider
liveDragging="true"
change="sliderChangeLive(event);"/>
<mx:TextArea id="thumbLive"/>
</mx:Application>
Çoklu gösterge kullanmaBir kayma için bir ya da iki gösterge kullanabilirsiniz. Eğer kayam tek gösterge kullanacak biçimde ayarlanırsa, göstergeyi başlangıçla bitiş arasında herhangi bir yere yerleştirebilirsiniz. Eğer iki tane gösterge tanımlanırsa birini diğerinin üzerinden sürükleyemezsiniz.Eğer iki tane gösterge kullanılıyorsa kontrolu value özelliğini kullanarak göstergelerin değerlerine erişebilirsiniz. value özelliği iki öğeli bir dizidir ve her öğe göstergelerin o anki değerini gösterir.
<?xml version="1.0"?>
<!-- controls\slider\HSliderMultThumb.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.events.SliderEvent;
import mx.controls.sliderClasses.Slider;
private function sliderChangeTwo(event:SliderEvent):void {
var ct:Slider=Slider(event.currentTarget);
thumbTwoA.text=String(ct.values[0]);
thumbTwoB.text=String(ct.values[1]);
thumbIndex.text=String(event.thumbIndex);
}
]]>
</mx:Script>
<mx:HSlider thumbCount="2"
change="sliderChangeTwo(event);"/>
<mx:TextArea id="thumbTwoA"/>
<mx:TextArea id="thumbTwoB"/>
<mx:TextArea id="thumbIndex"/>
</mx:Application>
Bu örnek event nesnesinin thumbIndex özelliğini de kullanır. Bu özelliğin değeri sıfır olursa kullanıcı ilk göstergenin değerini değiştirmiştir. Eğer değer 1 ise ikinci göstergenin değeri değişmiştir.
Veri kutucuklarını kullanmaVarsayılan olarak, kayma göstergesini seçtiğinizde "data tip" (veri kutucuğu) görünür. İçinde kaymanın o anki değeri vardır. showDataTip özelliğini "false" yaparak görünmesi engellenir.dataTipFormatFunction özelliğini kullanarak çağrılan işlevin veri kutucuğu değerini kalıplaması sağlanır. Bu işlev veri kutucuğu değerini alır ve kalıplanmış değerini döndürür. Aşağıdaki örnekte kullanım anlatılmıştır:
<?xml version="1.0"?>
<!-- controls\slider\HSliderDataTip -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
private function myDataTipFunc(val:String):String {
return "Current value: " + String(val);
}
]]>
</mx:Script>
<mx:HSlider
height="80"
dataTipFormatFunction="myDataTipFunc"/>
</mx:Application>
Bu kodlama aşağıdaki resmi görüntüler:
Bu örnekte veri kutucuğu işlevi veri kutucuğu değerinin önüne "Current value: " sözcüklerini ekler. Örneği değerin önüne dolar işareti koyacak biçimde değiştirebilirsiniz. Tuş takımını dolaştırmaHSlider ve VSlider kontrollarına odaklandığında aşağıdaki tuş takımı kontrolları kullanılabilir.
|
|