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 22-07-2011, 11:36
suonheo suonheo vẫn chưa có mặt trong diễn đàn
Mới Đăng Ký
 
Tham gia ngày: Jul 2011
Bài gởi: 6
Thanks: 0
Thanked 9 Times in 4 Posts
Tạo Menu Bar dạng chiều dọc (vertical) trong Flex lấy dữ liệu xml hoặc php/mysql

Chào Các bạn,

Menu Bar trong Flex thông thường chỉ tạo theo chiều ngang (horizontal) bằng cách là chúng ta sử dụng thẻ:
<mx:MenuBar ... />

Bài viết này hướng dẫn tạo Menu Bar theo dạng chiều dọc (vertical)

1. Bước 1 (các bạn cần component bên ngoài)

- Các bạn vào đây để download file com.rar về

http://flex.webdoanhnghiep.org/libs/com.rar

sau đó các bạn giải nén và chép thư mục 'com' vào thư mục 'source' trong project của các bạn

2. Bước 2 (tạo application)

- Các bạn tạo Application như sau:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:com="com.dougmccune.controls.*" creationComplete="initCollections();" >

<mx:Style>
Panel {
headerHeight: 17;
borderThickness: 0;
roundedBottomCorners: true;
backgroundAlpha: 1;
borderAlpha: 1;
highlightAlphas: 0.73, 0;

headerColors: #000000, #000000;
footerColors: #000000, #000000;
borderColor: #000000;
titleStyleName: "myTitleStyle";
}

.myTitleStyle {
color: #ffffff;
}
</mx:Style>

<mx:Script>
<![CDATA[
import mx.events.ItemClickEvent;

import mx.events.MenuEvent;
import mx.controls.Alert;
import mx.collections.*;

[Bindable]
public var menuBarCollection:XMLListCollection;

// Đây là dữ liệu của menu dạng XML
private var menubarXML:XMLList =
<>
<menuitem label="Menu1">
<menuitem label="MenuItem 1-A" data="1A"/>
<menuitem label="MenuItem 1-B" data="1B"/>
</menuitem>
<menuitem label="Menu2">
<menuitem label="MenuItem 2-A" type="check" data="2A"/>
<menuitem type="separator" />
<menuitem label="MenuItem 2-B" >
<menuitem label="SubMenuItem 2-B-A" type="radio"
groupName="2one" data="2-B-A"/>
<menuitem label="SubMenuItem 2-B-B" type="radio"
groupName="2one" data="2-B-B"/>
</menuitem>
</menuitem>
<menuitem label="Menu3">
<menuitem label="MenuItem 3-A" type="check" data="3A"/>
<menuitem type="separator" />
<menuitem label="MenuItem 3-B" >
<menuitem label="SubMenuItem 3-B-A" type="radio"
groupName="3one" data="3-B-A"/>
<menuitem label="SubMenuItem 3-B-B" type="radio"
groupName="3one" data="3-B-B"/>
</menuitem>
</menuitem>
</>;

// Đây là function được thực hiện khi bạn chọn một item trên menu
private function menuHandler(event:MenuEvent):void {
Alert.show("Bạn chon label: " + event.item.@label + "\n" +
"và Data tương ứng là: " + event.item.@data, "Item được chọn");
}

// Đây là function được thực hiện khi khởi động Application
private function initCollections():void {
menuBarCollection = new XMLListCollection(menubarXML);
}


]]>
</mx:Script>

<mx:VBox width="90%" height="90%">

<mx:Panel title="Đây là Menu dạng chuẩn trong Flex" width="100%" height="200"
paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0">
<mx:MenuBar labelField="@label" itemClick="menuHandler(event);"
dataProvider="{menuBarCollection}" width="100%" />
</mx:Panel>

<mx:Panel title="Đây là Menu theo dạng vertical" width="100%" height="100%">

<mx:HBox width="100%" height="100%">

<com:VerticalMenuBar height="100%" direction="right" labelField="@label" itemClick="menuHandler(event);"
dataProvider="{menuBarCollection}" />

<mx:Spacer width="100%" />

<com:VerticalMenuBar height="100%" direction="left" labelField="@label" itemClick="menuHandler(event);"
dataProvider="{menuBarCollection}" />

</mx:HBox>

</mx:Panel>

</mx:VBox>
</mx:Application>

- Các bạn chú ý đến các nơi màu đỏ nhe, những nơi ấy giúp các bạn biết cách đưa menu này vào project lớn của các bạn

- Menu này lấy dữ liệu từ XML, các bạn có thể tạo file XML bên ngoài cũng được hoặc lấy dữ liệu từ php/mysql đổ vào XMLListCollection hay ArrayColletion để làm dữ liệu cho Menu cũng đươc

Chúc các bạn thực hiện thành công!
Trả Lời Với Trích Dẫn
Đã có 2 người gửi lời cảm ơn suonheo vì bài viết hữu ích này:
  #2  
Old 22-07-2011, 17:55
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
DEMO / DOWNLOAD bài viết trên.

Bài viết rất hay. Thanks suonheo.
__________________
[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]
Trả Lời Với Trích Dẫn
  #3  
Old 29-08-2013, 10:54
khangspkt khangspkt vẫn chưa có mặt trong diễn đàn
Mới Đăng Ký
 
Tham gia ngày: Jul 2009
Tuổi: 33
Bài gởi: 2
Thanks: 0
Thanked 0 Times in 0 Posts
ai giúp dùm mình viết function này với :
khi thực hiện click lên một menu item, sẽ hiển thị mxml component của menuitem đó.
Cảm ơn mọi người nhiều.
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ướng dẩn làm trang cho User góp ý kiến cho tin tức hoặc sản phẩm. ldkhanhit Lớp Web Doanh Nghiệp 11 19-07-2013 10:07
Lấy Dữ Liệu Từ DATA PROVIDER clh FLEX 1 14-07-2011 14:47
Dùng LDAP chứng thực Internet User trong ISA Server 2006 Stand Alone baohp KHO LAB NHẤT NGHỆ 7 16-03-2011 21:47
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



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