در ابتدا اينطور فرض کنيم که براي نمايش تعدادي عکس مي خواهيم از يک کنترل TileList استفاده کنيم و در ضمن در نظر داريم هنگام انتخاب يک عکس، محيط گرافيکي که به دور عکس ايجاد مي گردد تا به ما نشان دهد اين عکس در حال حاضر انتخاب شده است (selection indicator) را تغيير شکل دهيم. براي انجام اين کار در وهله ي اول از يک item renderer استفاده مي کنيم که به سادگي تمام کدهاي مورد نياز ما براي انجام اين کار را در اختيارمان قرار مي دهد. تنها چيزي که باقي مي ماند تعويض شکل گرافيکي selection indicator از طريق کنترل TileList مورد نظر است. نکته ي عجيب در اين مورد اين است که Flex هيچ style يا property خاصي براي انجام اين کار ارائه نداده است! البته، حذف نمايشگر (indicator) ويژه ي زماني که موس بر روي کنترل مورد نظر قرار مي گيرد (roll-over) به راحتي از طريق False کردن استايل useRollOver امکان پذير مي باشد، ولي بحث ما براي زماني است که يک شي از طريق کليک موس بر روي آن انتخاب مي شود.
نکته ي شايان ذکر ديگر اين است که بهترين راه از نظر Flex تنها استفاده از يک رنگ solid (و نه عکس و ...) براي نشان دادن ناحيه ي انتخاب شده يک کنترل مي باشد. پس يک راه ساده براي حذف selection indicator همرنگ نمودن آن با رنگ پس زمينه مي باشد. با اينکه اين روش نيز به نوبه ي خود راه حل مفيدي است، ولي نه از نظر تکنيکي مورد قبول است و نه زماني که پس زمينه ما يک عکس و يا حتي gradient مي باشد قابل پياده سازي است.
در نمونه ي زير مي توانيم selection indicator پيش فرض در پروژه هاي Flex را مشاهده کنيم. اگر بر روي هر کدام از عکس هاي زير کليک نمائيد، محيط پشت آن به حالت آبي در آمده و عکس انتخاب شده را به ما نشان مي دهد. اين ناحيه همان ناحيه اي است که در نظر داريم حذف نمائيم.
براي آغاز کار مي توانيم تمام استايل ها و property هايي را که بلديم و مي توانيم تصور کنيم را در پروژه ي خود اعمال نمائيم تا با چشم خود ببينيم که از طريق آنها اين کار امکان پذير نيست. ناگزير مجبور به مراجعه به سورس کد Flex مي شويم براي کشف معما! و در نهايت در فايلي با نام ListBase.as راه حل مورد نظر خود را پيدا مي کنيم. بله، هنگامي که يک آيتم از ليست (list item) انتخاب مي شود، تابعي با نام drawSelectionIndicator فراخواني مي شود:
protected function drawSelectionIndicator(
indicator:Sprite, x:Number, y:Number,
width:Number, height:Number, color:uint,
itemRenderer:IListItemRenderer):void
{
var g:Graphics = Sprite(indicator).graphics;
g.clear();
g.beginFill(color);
g.drawRect(0, 0, width, height);
g.endFill();
indicator.x = x;
indicator.y = y;
}
|
همانطور که در قطعه کد فوق مي بينيم، هيچ راهي براي رسم يک پس زمينه هنگامي که يک آيتم انتخاب مي شود، نمي باشد. تنها کاري که انجام مي شود رسم يک مستطيل و تنظيم خاصيت رنگ آن از طريق استايل selectionColor مي باشد.حال ما براي رسيدن به مقصود خود چه بايد بکنيم؟ بسيار ساده است: تابع فوق را طوري تغيير مي دهيم که کار معمول خود، يعني نمايش ناحيه ي انتخاب شده را انجام ندهد! براي انجام اين کار، يک TileList جديد ايجاد مي نمائيم تا از تابع جديد نشعت گيرد. آن را به عنوان مثال TileListEx مي ناميم:
import flash.display.Sprite;
import mx.controls.TileList;
import mx.controls.listClasses.IListItemRenderer;
public class TileListEx extends TileList
{
override protected function drawSelectionIndicator(
indicator:Sprite, x:Number, y:Number, width:Number,
height:Number, color:uint,
itemRenderer:IListItemRenderer):void
{
return;
}
}
|
از اين به بعد مي توانيم از اين کلاس عينا براي TileList هاي عادي نيز استفاده نمائيم، با اين تفاوت که ديگر selection indicator اي نخواهيم داشت. نمونه ي زير دقيقا همان مثال بالا مي باشد، با اين تفاوت که از TileList جديدي که ما نوشتيم استفاده مي کند:
اين بود راه حل حذف selection indicator، به همين آساني! ولي بد نيست حال که تابع مورد نظر را تغيير داديم، حتي کاري کنيم که selection indicator ما به شکل دلخواه ما نمايش داده شود. نمونه ي زير يک مثال ساده و سريع از ساخت selection indicator پروژه ي ما به صورت يک دايره مي باشد:
و اين هم قطعه کد مربوط به انجام اين کار:
import flash.display.Graphics;
import flash.display.Sprite;
import mx.controls.TileList;
import mx.controls.listClasses.IListItemRenderer;
public class TileListEx extends TileList
{
override protected function drawSelectionIndicator(
indicator:Sprite, x:Number, y:Number, width:Number,
height:Number, color:uint,
itemRenderer:IListItemRenderer):void
{
var g:Graphics = Sprite(indicator).graphics;
g.clear();
g.beginFill(color);
g.drawCircle(width / 2, width / 2, width / 2);
g.endFill();
indicator.x = x;
indicator.y = y;
}
}
|
حال مي توانيد انواع و اقسام selection indicator هاي مختلف براي پروژه هاي خود ايجاد نموده و از آنها لذت ببريد. اميدواريم که در نسخه هاي جديدتر Adobe Flex، استايل "آلفا" (alpha style) مانند ديگر کنترل هاي موجود، براي محيط هاي انتخاب شده نيز در نظر گرفته شود تا ديگر نيازي به تغيير و دست کاري توابع داخل آن نباشد. در هر حال اميدوارم اين مقاله در نوع خود مفيد بوده باشه و در زمان مورد نياز کمک حال همه ي دوستان و برنامه نويسان عزيز.
همگي موفق و مويد باشيد.
:: از آنجائيکه از ترجمه ي دقيق عبارت selection indicator به زبان فارسي مطمئن نبودم، ترجيحاً در اين مقاله عيناً از عبارت انگليسي آن استفاده کردم، تا سهواً مرتکب خطا در تفهيم معناي آن نشم، اما به عقيده ي شخص خودم مي توانيم آن را به زبان فارسي "نمايشگر انتخاب" بناميم...
:: اين مقاله بر پايه ي Adobe Flex نسخه ي 3.0 مي باشد... اطلاعات دقيق تر نسخه ي مورد نظر: Version 3.0 - Milestone 4 Beta 3
:: براي مشاهده ي نمونه پروژه ي مورد نظر، اينــــجا و براي مشاهده ي سورس آن اينـــــجا را کليک نمائيد. در ضمن سورس پروژه ي انجام شده را نيز مي توانيد از طريق لينک "دانلود" در بالاي صفحه، دريافت نمائيد.
:: منبع: متن اصلي از Brandon Cannaday (با نام مستعار Reddest) از وبلاگ Switch On The Code