در اين مقاله نحوه ي ساخت يک ماژول بسيار ساده ولي پر کاربرد، در پروژه هاي مختلف (اغلب تحت وب) رو براي شما توضيح خواهم داد. ماژولي که اين اواخر با روي کار آمدن مبحث web2 در اغلب پروژه هاي اين نوع تکنولوژي ديده و استفاده ميشود.
يک پنجره ي popup براي تائيد يا عدم تائيد انجام کار خاصي در پروژه ي شما...
حال آنکه، ساخت اين نوع پنجره popup، علاوه بر اين مبحث، کمک بسياري براي ساخت پنجره هاي مشابه ديگر که اعمالي متفاوت انجام مي دهند، مي باشد. اعمالي از قبيل فرم ورود اعضا، فرم جستجوي ساده و .... . پس، بدون هيچ اطلاف وقتي سراغ پياده سازي اين کار برويم:
در ابتدا يک کامپوننت کوچک براي انجام اين کار مي سازيم تا بتوانيم از آن به عنوان يک قالب براي پنجره ي popup پروژه ي خود استفاده کنيم... به اين صورت عمل مي کنيم:
برنامه ي Adobe Flex Builder را اجرا کرده، پروژه ي مورد نظر خود را انتخاب و باز مي کنيم. از منوي file، گزينه new و بعد گزينه ي MXML Component را انتخاب ميکنيم. در پنجره اي که با نام "New MXML Component" ظاهر مي شود، مسير کامپوننت، نام آن، سايز آن و نوع آن (در اينجا از نوع TitleWindow) را انتخاب کرده، دکمه ي Finish را مي زنيم. پنجره ي design کامپوننت مورد نظر با عنوان "ComponentName.mxml" ايجاد شده و آماده ي اعمال کدهاي ما مي باشد. اگر دقت کنيم، مشاهده مي کنيم که در پنل نمايش دهنده ي کامپوننت هاي برنامه Flex Builder، يک شاخه به نام Custom اضافه مي گردد که کامپوننت ما نيز داخل آن قرار دارد... در صفحه ي کامپوننت فوق، کليد Source را مي زنيم تا به بخش کد نويسي آن وارد شويم. حال، قطعه کد زير را در اين بخش وارد مي کنيم:
<?xml version="1.0" encoding="utf-8"?>
// By Mohammad Pourhossein in 30Sharp.com (Persian Developers Resource)
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" title="Confirmation" width="242" height="100" creationComplete="doInit();">
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
private function doInit():void{
PopUpManager.centerPopUp(this);
}
private function confirm(response:String):void{
var event:Event = new Event("selected" + response);
dispatchEvent(event);
PopUpManager.removePopUp(this);
}
]]>
</mx:Script>
<mx:VBox horizontalAlign="center">
<mx:Text text="Are you sure you want to do that?" height="20" width="222" fontSize="12"/>
</mx:VBox>
<mx:ControlBar horizontalAlign="center">
<mx:HBox>
<mx:Button click="confirm('Yes');" label="Yes"/>
<mx:Button click="confirm('No');" label="No"/>
</mx:HBox>
</mx:ControlBar>
</mx:TitleWindow>
|
از صفحه ي کدنويسي کامپوننت خارج شده و وارد صفحه اي از پروژه که مي خواهيم پنجره ي popup در آن ظاهر شود ميشويم. در اين صفحه با استفاده از متد PopUpManager’s و خصيصه ي createPopUp آن، يک پنجره ي popup به شکل قالب کامپوننتي که قبلا ساخته ايم ايجاد ميکنيم و با استفاده از خصيصه ي removePopUp همان متد، آن را از بين مي بريم. با وارد کردن قعه کد زير در قسمت کدنويسي صفحه ي مورد نظر اين کار به آساني امکان پذير است:
<?xml version="1.0" encoding="utf-8"?>
// By Mohammad Pourhossein in 30Sharp.com (Persian Developers Resource)
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:ns1="*" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.containers.TitleWindow;
import mx.managers.PopUpManager;
private function onclick():void
{
var confirmWindow:TitleWindow = TitleWindow(PopUpManager.createPopUp(this, ConfirmWindow, true));
confirmWindow.addEventListener("selectedYes",function():void{
lblResult.text="Yes";
});
confirmWindow.addEventListener("selectedNo",function():void{
lblResult.text="No";
});
}
]]>
</mx:Script>
<mx:Label text="Result" id="lblResult"/>
<mx:Button click="onclick();" label="Show Popup" id="btnShowConfirm"/>
</mx:Application>
|
خوب، مشاهده فرموديد که به چه آساني قادر به ساخت يک صفحه ي popup ساده ولي بسيار پر اهميت و پر کاربرد شديم تا بتوانيم از آن در تمامي پروژه هاي خود استفاده مفيد و به جا بکنيم. در پايان، اميدوارم که از اين مقاله لذت برده باشيد و مهمتر از اون، براتون مفيد واقع شده باشه. در مقاله ي بعد، نحوه ي ساخت يک پنجره ي popup با خصوصيات و امکانات بيشتر را براتون توضيح خواهم داد. پس تا مقاله ي بعد و مقالات ديگر....موفق و مويد باشيد.
در ضمن. من پروژه ي فوق را آپلود کردم تا با مشاهده ي آن به صورت شهودي تر، نحوه ي عملکرد آن رو خودتان دنبال کنيد.
براي مشاهده ي پروژه : اينجا را کليک کنيد
براي مشاهده ي source پروژه : اينجا را کليک کنيد
براي دانلود پروژه ي مربوطه، مي توانيد از طريق لينک "دانلود" در بالاي همين صفحه اين کار را انجام دهيد.
(توجه داشته باشيد که براي ديدن پروژه ي فوق و يا هر نوع پروژ ه ي ديگر تحت Flex، بايد Flash Player نسخه ي 9 و يا بالاتر از آن را، روي دستگاه خود نصب کرده باشيد. اگر احيانا اين Player رو نداريد در همان صفحه ي مرورگر وب خود، قبل از نمايش پروژه، از شما ميخواهد که Player خود را update کنيد. با زدن دکمه ي Yes اين کار را انجام دهيد تا آخرين نسخه ي Flash Player موجود در سايت Adobe به صورت خودکار در دستگاه شما نصب گردد.)
با تشکر بسيار از Rico Zuniga به دليل راهنمائي ها و کمک هاي بي دريغش....