Trung Tâm Đào Tạo Mạng Máy Tính Nhất Nghệ   Trung Tâm Đào Tạo Mạng Máy Tính Nhất Nghệ
Trang Chủ Giới Thiệu Chương Trình Học Tài Liệu Lịch Khai Giảng Học Phí Việc Làm Lộ trình học

Go Back   Trung Tâm Đào Tạo Mạng Máy Tính Nhất Nghệ > WEB - ĐỒ HỌA - LẬP TRÌNH > Web Development > FLEX
Đăng Ký Thành Viên Thành Viên Lịch Ðánh Dấu Ðã Ðọc


Vui lòng gõ từ khóa liên quan đến vấn đề bạn quan tâm vào khung dưới , trước khi đặt câu hỏi mới.


Trả lời
 
Ðiều Chỉnh
  #1  
Old 03-07-2011, 23:41
clh clh vẫn chưa có mặt trong diễn đàn
Đam Mê
 
Tham gia ngày: Aug 2009
Bài gởi: 321
Thanks: 8
Thanked 213 Times in 93 Posts
Lấy dữ liệu từ Component

LẤY DỮ LIỆU TỪ COMPONENT

LIVE DEMO / SOURCE DOWNLOAD

I. Giới thiệu

1. Application : Trang index.mxml (Application) nhận nhiệm vụ chuyển tải nội dung trang web cho người dùng xem kết quả. Vì vậy để đơn giản cho trang chủ nên ở trang index.mxml chúng ta chỉ thiết kế các khung chứa dữ liệu đổ vào được lấy từ các trang Component.
2. Component : Tang Component khong show nội dung cho người dung xem được mà chỉ có chức năng chứa nội dung trang web, và được các trang Application gọi đến để lấy dữ liệu.
3. Khái quát chức năng lấy dữ liệu từ các trang Component.
- Trang index.mxml gọi từng trang Component và đổ dữ liệu vào khung chứa mà trang index.mxml thiết kế.
- Tại trang index.mxml :
. Trên thanh nenu nhấn vào products thì gọi trang product.mxml = main.mxml + right.mxml(Xóa hai trang này thay thế bằng product.mxml)
. Trên thanh nenu nhấn vào contact thì gọi trang contact.mxml = contact.mxml + right.mxml
4. Cấu trúc cây thư mục



II. VIẾT CODE LẤY DỮ LIỆU TỪ CÁC COMPONENT

1. Trang Application index.mxml
Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 layout="vertical" creationComplete="init1()" xmlns:compo="compo.*">
	<mx:Script>
		<![CDATA[
			import compo.*;
			var t1:banner = new banner();
			var t3:left = new left();
			var t4:main = new main();
			var t5:right = new right();
			var t6:footer = new footer();
			var t7:products = new products();
			var t8:contact = new contact();
			
			function init1()
			{
				b1.addChild(t1);
				b3.addChild(t3);
				b4.addChild(t4);
				b4.addChild(t5);
				b6.addChild(t6);
			}
			function sp()
			{
				b4.removeAllChildren();
		 		b4.addChild(t7);
		 	}	 	
		 	function home()
		 	{
		 		b4.removeAllChildren();
		 		b4.addChild(t4);
		 		b4.addChild(t5);
		 	}
		 	
		 	function lh()
		 	{
		 		b4.removeAllChildren();
		 		b4.addChild(t8);
		 		b4.addChild(t5);
		 	}
		]]>
	</mx:Script>
<mx:Canvas id="b1" />
<compo:menu width="760" change_home="home()"
change_lh="lh()" change_sp="sp()" id="menu"/>
<mx:HBox width="760">
<mx:Canvas id="b3" />
<mx:HBox id="b4" />
</mx:HBox>
<mx:Canvas id="b6" />
</mx:Application>
Hướng dẫn code trang index.mxml
a. Lấy trang component từ thư mục compo
<mx:Application…xmlns:compo="compo.*">
Gọi tất cả những trang trong thư mục compo chuẩn bị đổ vào trang index.mxml.
Lấy trang Component(menu.mxml) từ thư mục compo đổ vào trang index.mxml tại vị trí có id=”menu”.
<compo:menu width="760" id="menu” />
b. Lấy trang component từ thư mục compo thông qua Script
<mx:Script>
import compo.*;
var t1:banner = new banner();
//Lấy trang banner.mxml trang thư mục compo đổ vào biến t1.
//Tương tự cho những trang còn lại.
</mx:Script>
c. Function đổ dữ liệu vào các vị trí trên trang index.mxml
function init1()
{
b1.addChild(t1);
//Lấy dữ liệu từ biến t1(banner.mxml) đổ vào vị trí <mx:Canvas id="b1"/>
}
d. creationComplete="init1()"
Thực thi hàm init1() khi trang web mới load lên(Banner được gọi ra khi trang web vừa chạy).
e. Xóa tất cả những trang component cũ và đổ những componrnt mới vào vị trí có id chỉ định
function sp()
{
b4.removeAllChildren();
//Xóa tất cả những trang component được chứa tại vị trí b4
(Tại vị trí b4 xóa trang main và trang right -> trả về vị trí rỗng)
b4.addChild(t7);
//Lấy dữ liệu từ biến t7(product.mxml) đổ vào vị trí b4.
}
f. <compo:menu width="760" change_home="home()" change_lh="lh()" change_sp="sp()" id="menu"/>
Tại trang index.mxml.mxml gọi các tên change_home, change_lh, change_sp được truyền từ trang menu.mxml sang đó là:
[Event(name="change_home", type="flash.events:Event")]
[Event(name="change_sp", type="flash.events:Event")]
[Event(name="change_lh", type="flash.events:Event")]
Tại trang index.mxml.mxml gọi các hàm tương ứng có tên home(),lh(),sp() được gọi từ function home(),lh(),sp()tại trang index nhằm thay đổi trang Component vào các vị trí có id chỉ định.

2. Trang Component banner.mxml



Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="760" height="95" backgroundImage="images/header01.jpg">
<mx:Canvas x="0" y="0" width="410" height="95">
</mx:Canvas>
<mx:VBox x="410" y="0" height="95" width="350">
<mx:SWFLoader source="flash/qc1.swf" width="350" height="65"/>
<mx:Text text="Trung tâm đào tạo mạng máy tính NHẤT NGHỆ&#xa;" 
id="t1" fontFamily="Times New Roman" fontSize="15" 
color="#F0B606" fontWeight="bold"/>
</mx:VBox>	
</mx:Canvas>
3. Trang Component menu.mxml



Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="760">
<mx:Metadata>
	[Event(name="change_home", type="flash.events:Event")]
	[Event(name="change_sp", type="flash.events:Event")]
	[Event(name="change_lh", type="flash.events:Event")]	
</mx:Metadata>
<mx:Script>
function home(){
dispatchEvent(new Event("change_home"));
		}
function sp(){
dispatchEvent(new Event("change_sp"));
	}
function lh(){
dispatchEvent(new Event("change_lh"));
	}
</mx:Script>
<mx:ApplicationControlBar width="760" 
cornerRadius="0" fillAlphas="[1.0, 1.0]" 
fillColors="[#0f03fb, #0f03fb]" color="#fcfefe">
<mx:LinkButton label="Home" click="home()"/>
<mx:LinkButton label="Products" click="sp()"/>
<mx:LinkButton label="Contact" click="lh()"/>
<mx:Spacer width="70%"/>
<mx:Label text="User"/>
<mx:TextInput width="70" color="#000000"/>
<mx:Label text="Password"/>
<mx:TextInput width="70" color="#000000"/>
<mx:Button label="Login"/>	
</mx:ApplicationControlBar>		
</mx:Canvas>
a. dispatchEvent (Truyền giá trị ẩn, Trang cần lấy thông tin sẽ bắt lại dữ liệu và sử lý)
Khi click="home()" thì dữ liệu sẽ được thuyền ẩn sang trang index.mxml thông qua function sau.
function home(){
dispatchEvent(new Event("change_home"));}
// Tương tự cho dispatchEvent(new Event("change_sp"));
// Tương tự cho dispatchEvent(new Event("change_lh "));

4. Trang left.mxml



Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="160">
<mx:Accordion width="95%" height="200">
<mx:Canvas label="1" width="100%" height="100%">
<mx:LinkButton x="0" y="0" label="Product"/>
<mx:LinkButton x="0" y="20" label="Contact"/>
</mx:Canvas>
<mx:Canvas label="2" width="100%" height="100%">
<mx:LinkButton x="0" y="0" label="Product"/>
<mx:LinkButton x="0" y="20" label="Contact"/>
</mx:Canvas>
<mx:Canvas label="3" width="100%" height="100%">
</mx:Canvas>
</mx:Accordion>
<mx:SWFLoader source="flash/clock12.swf" width="150" height="150"/>
<mx:SWFLoader source="flash/qc3.swf" width="150" height="150"/>	
</mx:VBox>
5. Trang right.mxml



Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="160">
<mx:DateChooser width="160"/>	
<mx:Panel width="160" title="Bình Chọn" layout="absolute">
<mx:RadioButtonGroup id="poll"/>
<mx:RadioButton label="Rất hay." groupName="poll" x="6" y="2"/>
<mx:RadioButton label="Hay." groupName="poll" x="6" y="28"/>
<mx:RadioButton label="Bình Thường." groupName="poll" x="6" y="54"/>
</mx:Panel>
<mx:SWFLoader source="flash/qc5.swf" width="160" height="160"/>	
</mx:VBox>
6. Trang main.mxml



Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400">
<mx:Text text="TIN NỔI BẬT&#xa;" fontSize="15" fontWeight="bold"/>
<mx:Panel width="400" title="Video">
<mx:VideoDisplay x="0" y="0" 
source="flash/MuaRoiBangTay.flv" width="380" height="250"/>
<mx:HBox width="100%" horizontalAlign="right">
<mx:Button label="Play"/>
<mx:Button label="Pause"/>
<mx:Button label="Stop"/>
</mx:HBox>
</mx:Panel>
<mx:TabNavigator width="100%" height="200">
<mx:Canvas label="Tin xã hội" width="100%">
<mx:Text width="100%">
<mx:htmlText>
<![CDATA[
<p align="center"><img src="images/newsthumb.jpg" width="100" height="100" align="left" /><b>Bộ Xây dựng đồng ý tách Đà Lạt khỏi Lâm Đồng</b></p>
<p>TTO - “Bộ Xây dựng đồng ý với đề nghị lập Đề án mở rộng, thành lập thành phố Đà Lạt trực thuộc Trung ương và thành lập tỉnh Lâm Đồng mới của UBND tỉnh Lâm Đồng”.</p>							
]]>
</mx:htmlText>
</mx:Text>				
</mx:Canvas>
<mx:Canvas label="Tin thế giới" width="100%" height="100%">
</mx:Canvas>
<mx:Canvas label="Tin thể thao" width="100%" height="100%">
</mx:Canvas>
</mx:TabNavigator>
</mx:VBox>
7. Trang product.mxml

Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400">
<mx:Text text="Sản Phẩm"/>
<mx:DataGrid width="391" height="133">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="col1"/>
<mx:DataGridColumn headerText="Column 2" dataField="col2"/>
<mx:DataGridColumn headerText="Column 3" dataField="col3"/>
</mx:columns>
</mx:DataGrid>	
</mx:VBox>
8. Trang footer.mxml



Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="760"  horizontalAlign="center" backgroundColor="#4E4E4E">
		<mx:LinkButton label="Home" color="#FFFFFF"/>
		<mx:LinkButton label="About Us" color="#FFFFFF"/>
		<mx:LinkButton label="Contact Us" color="#FFFFFF"/>
</mx:HBox>
Chúc bạn thành công.
__________________
[URL="http://img213.imageshack.us/img213/8903/avatam.jpg"][IMG]http://img862.imageshack.us/img862/461/avata.png[/IMG][/URL]
[URL="http://nhatnghe.com/forum/showthread.php?t=176927"]LAB MCSA 2K8 step by step[/URL]
[URL="http://www.virtuatopia.com/index.php/VMware_Server_2.0_Essentials"]Vmware Sevver[/URL]
[SIZE=2][SIZE=2][URL="http://www.nhatnghe.com/forum/showthread.php?t=72525"]C[/URL][SIZE=2][URL="http://www.nhatnghe.com/forum/showthread.php?t=72525"]ấu h[/URL][SIZE=2][URL="http://www.nhatnghe.com/forum/showthread.php?t=72525"]ình File Sevver[/URL] - [URL="http://www.nhatnghe.com/forum/showthread.php?t=104887"]L[SIZE=2]ý Thuy[SIZE=2]ết Ph[SIZE=2]ân Quy[SIZE=2]ền[/SIZE][/SIZE][/SIZE][/SIZE][/URL][/SIZE][/SIZE][/SIZE][/SIZE]
[URL="https://access.redhat.com/site/documentation/"][LEFT][FONT=Liberation Sans]Red Hat Linux[/FONT]Step By Step[/LEFT]
[/URL][URL="http://www.linuxtopia.org/online_books/centos_linux_guides/centos_linux_step_by_step_guide/"][COLOR=Blue]Cenos Step by Step[/COLOR][/URL]
[URL="http://www.tecmint.com/centos-6-3-step-by-step-installation-guide-with-screenshots/"][COLOR=Blue]LAB Cenos 6.3 Step By Step[/COLOR][/URL]
[URL="http://linux.die.net/abs-guide/"]LEARN LINUX ADVANCE[/URL]
[URL="http://install.lon-capa.org/"][COLOR=Blue]Isnttallll Linux[/COLOR][/URL]
[URL="http://perldoc.perl.org/index-tutorials.html"]Linux tutorial[/URL]
[URL="http://www.linux.org/tutorial/view/advanced-level-course"]LUNUX ADVANCED[/URL]
[URL="http://www.hyper-v-mart.com/Howto/Install_CentOS_5_VM_Step_by_Step.aspx"][SIZE=2]Install CentOS Linux Virtual Machine in Windows Hyper-V Server[/SIZE][/URL]
[URL="http://content.digiex.net/Cisco/Network_Visualizer_6/labs/whnjs.htm"][SIZE=2]LAB CCNA STEP BY STEP[/SIZE][/URL]
[URL="http://www.freeccnaworkbook.com/workbooks/ccna"][SIZE=2]Learn CCNA Step by Step[/SIZE][/URL]
[URL="http://www.mtsac.edu/%7Ejgau/P@ssw0rd/CISN51/labs/whnjs.htm"][SIZE=2]CCNA Tutorial[/SIZE][/URL]
[URL="http://www.chinaitlab.com/www/school/ccnp-lab.htm"][SIZE=2]CCNA LAB Demo[/SIZE][/URL][SIZE=2][SIZE=2][SIZE=2][SIZE=2]
[URL="http://itdaddy.wordpress.com/category/home-lab-setup-topology/"][SIZE=2]CCNA - LEARN[/SIZE][/URL]
[/SIZE][/SIZE][/SIZE][/SIZE]

[B][URL="http://www.thegeekstuff.com/2010/06/vmware-esxi-installation-guide/"]VMware[/URL] [URL="http://cloudstack.apache.org/docs/en-US/Apache_CloudStack/4.0.0-incubating/html/Installation_Guide/vmware-install.html"]vSphere[/URL] [URL="http://teknoteknik.wordpress.com/2011/03/28/15-steps-to-create-your-own-vmware-vsphere-lab-on-your-home-computer/"]Installation[/URL] [URL="http://en.community.dell.com/techcenter/virtualization/w/wiki/vmware-vsphere-ft-step-by-step-example.aspx"]and Configuration[/URL]
[URL="http://www.sysadmintutorials.com/tutorials/vmware-vsphere-4/esx-4/installing-vmware-esx-4/"]vSphere-4 [/URL]
[URL="http://blogs.vmware.com/thinapp/2012/06/step-by-step-setup-of-thinapp-factory-in-vsphere-using-the-executable.html"]VMWare[/URL] [URL="http://www.virtualizationadmin.com/articles-tutorials/vmware-esx-and-vsphere-articles/installation-and-deployment/10-steps-install-use-free-vmware-esxi-4.html"]vSphere [/URL][/B]
[B][SIZE=3][URL="http://technet.microsoft.com/en-us/library/dd548350%28v=ws.10%29.aspx"]Security[/URL] [URL="http://social.technet.microsoft.com/wiki/contents/articles/14715.test-lab-guide-mini-module-cross-forest-certificate-enrollment-using-certificate-enrollment-web-services.aspx"]in[/URL] [URL="http://social.technet.microsoft.com/wiki/contents/articles/default.aspx?PageIndex=3"]Windows Server 2008[/URL][/SIZE][/B]

[URL="http://www.server-world.info/en/"]Học Linux[/URL]

thay đổi nội dung bởi: clh, 03-07-2011 lúc 23:52
Trả Lời Với Trích Dẫn
Đã có 3 người gửi lời cảm ơn clh vì bài viết hữu ích này:
  #2  
Old 04-07-2011, 14:25
quocviet_nhatnghe quocviet_nhatnghe vẫn chưa có mặt trong diễn đàn
Banned
 
Tham gia ngày: Apr 2010
Tuổi: 31
Bài gởi: 432
Thanks: 25
Thanked 259 Times in 143 Posts

-----------

Đúng là càng làm FLEX CÀNG THẤY THIX ... Hiệu ứng quá hay lại còn có thể lấy du84 liệu động từ Database nữa cơ chứ...

---------------
Trả Lời Với Trích Dẫn
Những người sau đây đã gửi lời cảm ơn quocviet_nhatnghe vì bài viết hữu ích này:
  #3  
Old 18-04-2012, 14:37
huutaisc huutaisc vẫn chưa có mặt trong diễn đàn
Thành Viên Mới
 
Tham gia ngày: Sep 2007
Bài gởi: 75
Thanks: 15
Thanked 1 Time in 1 Post
Bài viết hay quá , bạn clh cho mình xin điện thoại hay yahoo gì đó được không nhỉ . mình có cái project muốn hợp tác cùng bạn
Dt của mình : 0987 64 87 86 ( Gặp Tài )
Yahoo or skype : huutaisc
Trả Lời Với Trích Dẫn
  #4  
Old 28-07-2012, 18:40
tranvu-nn's Avatar
tranvu-nn tranvu-nn vẫn chưa có mặt trong diễn đàn
Moderator
 
Tham gia ngày: Aug 2010
Tuổi: 32
Bài gởi: 763
Thanks: 49
Thanked 490 Times in 215 Posts
Trích:
Nguyên văn bởi huutaisc View Post
Bài viết hay quá , bạn clh cho mình xin điện thoại hay yahoo gì đó được không nhỉ . mình có cái project muốn hợp tác cùng bạn
Dt của mình : 0987 64 87 86 ( Gặp Tài )
Yahoo or skype : huutaisc

Thanks!!! Hay!!!!!!!!!!!11
Trả Lời Với Trích Dẫn
  #5  
Old 28-10-2013, 15:15
thamtutamlong1 thamtutamlong1 vẫn chưa có mặt trong diễn đàn
Khám Phá
 
Tham gia ngày: Aug 2013
Tuổi: 29
Bài gởi: 153
Thanks: 3
Thanked 4 Times in 4 Posts
cảm ơn bạn đã chia sẽ bài viết rất bổ ích.đây là ních y/h của mình có gì liên lạc học hỏi nha: boydeptrai_1m72@yahoo.com.vn..
__________________
p/s: cong ty tham tu| dich vu tham tu
Trả Lời Với Trích Dẫn
Trả lời

Bookmarks

Ðiều Chỉnh

Quyền Sử Dụng Ở Diễn Ðàn
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is Mở
Smilies đang Mở
[IMG] đang Mở
HTML đang Tắt

Chuyển đến

Similar Threads
Ðề tài Người Gởi Chuyên mục Trả lời Bài mới gởi
Hỏi về cách lấy, thêm dữ liệu từ database LMN PHP 4 11-02-2011 08:39
Giới thiệu giao thức TCP vuivemai KHO LAB NHẤT NGHỆ 8 28-11-2010 18:39
Tìm hiểu các số Sequence và số ACK, Destination Port và Source Port trong TCP Header vuivemai KHO LAB NHẤT NGHỆ 5 04-11-2010 06:48
Khôi phục nhanh tài liệu lỡ xóa Bao_ICT Softwares - Tools 1 21-10-2010 16:22
Gửi câu truy vấn từ form hay từ cơ sở dữ liệu moneyken Database 1 29-08-2010 01:29



Múi giờ GMT +7. Hiện tại là 15:40
Powered by: vBulletin Version 3.8.7
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
Ad Management by RedTyger