간단 한 사용자 인터페이스 구축
13994 단어 데이터 구조Flex360Adobeactionscript
Adobe® Flex™ 모델 – 보기 디자인 모드 에서 사용자 인터페이스 구성 요 소 는 보 기 를 대표 합 니 다.MXML 언어 는 두 가지 사용자 인터페이스 구성 요소 유형 을 지원 합 니 다: 컨트롤 과 용기.용 기 는 컨트롤 과 다른 용 기 를 포함 하 는 화면의 사각형 영역 입 니 다.컨트롤 은 단추, 텍스트 필드, 목록 상자 와 같은 폼 요소 입 니 다.
여러 종류의 Flex 컨트롤 이 존재 할 때 이 QuickStart 는 텍스트 기반 컨트롤, 단추 기반 컨트롤, 목록 기반 컨트롤 세 가 지 를 설명 합 니 다.
Flex 에서 제공 하 는 텍스트 기반 컨트롤 은 Label, Text, TextArea, TextInput 과 RichTextEditor 컨트롤 이 있 습 니 다.TextInput 과 TextArea 구성 요 소 는 텍스트 를 표시 할 수도 있 고 사용자 의 입력 을 받 아들 일 수도 있 으 며, Label 과 Text 컨트롤 은 텍스트 를 표시 하 는 데 만 사 용 됩 니 다.
Text 와 TextArea 컨트롤 은 여러 줄 을 뛰 어 넘 는 텍스트 를 표시 할 수 있 으 며, Label 과 TextInput 컨트롤 은 한 줄 의 텍스트 를 표시 하 는 데 사 용 됩 니 다.
RichTextEditor 컨트롤 을 사용 하면 텍스트 를 입력 하고 텍스트 를 편집 하 며 텍스트 형식 을 설정 할 수 있 습 니 다.사용 자 는 RichTextEditor 컨트롤 의 아래쪽 에 있 는 하위 컨트롤 을 사용 하여 텍스트 형식 과 URL 링크 를 사용 합 니 다.
모든 텍스트 기반 구성 요 소 는 텍스트 속성 을 가지 고 있 으 며 표시 할 텍스트 를 설정 할 수 있 습 니 다.
예시
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/ControlsTextBased/index.html"
layout="horizontal" width="380" height="320"
horizontalAlign="center" verticalAlign="middle"
>
<mx:Panel
title="Leave a comment"
paddingBottom="10" paddingTop="10"
paddingLeft="10" paddingRight="10"
>
<mx:Text
text="Fill out this form to leave us a comment:"
width="100%"
/>
<mx:Label text="Name:" />
<mx:TextInput id="userName" />
<mx:Label text="Email:" />
<mx:TextInput id="userEmail" />
<mx:Label text="Comment:" />
<mx:TextArea id="userComment" width="100%" />
</mx:Panel>
</mx:Application>단추 기반 컨트롤 사용 하기
구성 요소 의 Button 시 리 즈 는 Button, LinkButton, CheckBox, RadioButton 과 PopupButton 컨트롤 을 포함한다.
Button 컨트롤 은 자주 사용 하 는 사각형 단추 입 니 다.Button 컨트롤 은 눌 린 것 처럼 보 입 니 다. 그 위 에 텍스트 탭, 아이콘 또는 둘 다 있 습 니 다.몇 개의 Button 상태의 모든 지정 한 그래 픽 모양 을 선택 할 수 있 습 니 다.일반 Button 컨트롤 이나 전환 Button 컨트롤 을 만 들 수 있 습 니 다.선택 한 후 마우스 단 추 를 누 르 면 일반 Button 컨트롤 은 눌 린 상 태 를 유지 합 니 다.Button 컨트롤 을 다시 선택 한 후에 야 눌 린 상 태 를 유지 할 수 있 습 니 다.
사용자 가 컨트롤 을 선택 할 때 단 추 는 보통 이벤트 모니터 를 사용 합 니 다.사용자 가 Button 컨트롤 에서 마 우 스 를 클릭 하고 Button 컨트롤 이 활성화 되면 click 이벤트 와 buttonDown 이 벤트 를 보 냅 니 다.
LinkButton 컨트롤 은 선택 가능 한 아이콘 을 지원 하 는 단일 줄 하이퍼텍스트 링크 를 만 듭 니 다.그것 은 근본적으로 테두리 가 없 는 Button 컨트롤 이다.LinkButton 컨트롤 을 사용 하여 웹 브 라 우 저 에서 URL 을 열 수 있 습 니 다.
CheckBox 컨트롤 은 체크 표시 나 선택 되 지 않 은 그림 컨트롤 을 포함 할 수 있 습 니 다.서로 배척 하지 않 는 true 나 false 값 을 수집 해 야 하 는 곳 에 서 는 CheckBox 컨트롤 을 사용 할 수 있 습 니 다.CheckBox 컨트롤 에 텍스트 탭 을 추가 하고 체크 상자 의 왼쪽, 오른쪽, 상단 또는 아래쪽 에 텍스트 탭 을 배치 할 수 있 습 니 다.Flex 는 컨트롤 의 경계 에 맞 게 CheckBox 컨트롤 의 탭 을 자 릅 니 다.
RadioButton 컨트롤 을 사용 하면 사용 자 는 서로 배척 하 는 옵션 에서 단일 선택 을 할 수 있 습 니 다.RadioButton Group 컨트롤 은 같은 그룹 이름 을 가 진 두 개 이상 의 RadioButton 컨트롤 로 구성 되 어 있 습 니 다.이 그룹 은 < mx: RadioButtonGroup > 탭 으로 만 든 그룹 을 말 합 니 다.사용 자 는 한 번 에 이 그룹의 한 구성원 만 선택 합 니 다.선택 하지 않 은 그룹 구성원 을 선택 하면 현재 선택 한 RadioButton 컨트롤 을 취소 합 니 다.
PopUpButton 컨트롤 은 Button 컨트롤 에 유연 한 팝 업 컨트롤 인터페이스 를 추가 합 니 다.주 단추 와 보조 단 추 를 포함 합 니 다. 이 보조 단 추 는 팝 업 단추 라 고도 합 니 다. 사용자 가 팝 업 단 추 를 누 르 면 모든 UIComponent 대상 이 팝 업 됩 니 다.팝 업 버튼 컨트롤 의 일반적인 용 도 는 팝 업 단 추 를 List 컨트롤 이나 Menu 컨트롤 을 열 게 하 는 것 입 니 다. 이 두 컨트롤 은 메 인 단추 의 기능 과 탭 을 변경 합 니 다.
예시
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/ControlsButtonBased/index.html"
layout="absolute" width="460" height="400"
>
<mx:Script>
<![CDATA[
import flash.events.MouseEvent;
import mx.controls.Alert;
private const NL:String = "\r";
private function submitButtonClickHandler (event:MouseEvent):void
{
var userDetails:String = "You submitted the following details:" + NL + NL;
userDetails += "Name: " + userName.text + NL;
userDetails += "Email: " + userEmail.text + NL;
userDetails += "Hide email? " + (hideEmail.selected ? "Yes" : "No") + NL + NL;
userDetails += "Comment:" + NL + NL + userComment.text;
Alert.show (userDetails);
}
private function emailButtonClickHandler (event:MouseEvent):void
{
var msg:String = "You can use the navigateToURL() method to open a URL"
msg += " using a call similar to the following:\r\r";
msg += "navigateToURL (new URLRequest ('mailto:[email protected]'));";
Alert.show (msg);
}
]]>
</mx:Script>
<mx:Panel
title="Leave a comment"
left="10" top="10" right="10" bottom="10"
layout="absolute"
>
<mx:Text
text="Fill out this form to leave us a comment:"
width="250" x="10" y="10" fontWeight="bold"
/>
<mx:Label text="Name:" x="10" y="38"/>
<mx:TextInput id="userName" y="36" right="10" left="90"/>
<mx:Label text="Email:" x="10" y="68"/>
<mx:TextInput id="userEmail" y="66" right="10" left="90"/>
<mx:Label text="Comment:" x="10" y="129"/>
<mx:TextArea id="userComment" left="10" right="10" height="109" bottom="40"/>
<mx:CheckBox
id="hideEmail"
y="103" left="90"
label="Hide my email address"
selected="true"
/>
<mx:LinkButton
id="emailButton"
y="272" horizontalCenter="0"
label="Having trouble? Email us!"
click="emailButtonClickHandler(event);"
/>
<mx:ControlBar x="120" y="258" horizontalAlign="center">
<mx:Button
id="submitButton" label="Submit"
click="submitButtonClickHandler(event);"
/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>목록 기반 컨트롤 사용 하기
목록 기반 컨트롤 은 계승 계층 구조 내 일부 점 에서 ListBase 류 를 확장 하 는 컨트롤 입 니 다.이들 은 ComboBox, List, HorizontalList, DataGrid, Tile, Menu 와 Tree 컨트롤 을 포함한다.
몇몇 Flex 프레임 워 크 구성 요소 (목록 기반 컨트롤 포함) 는 특정한 데이터 제공 프로그램의 데 이 터 를 표시 합 니 다. 데이터 제공 프로그램 은 컨트롤 에 필요 한 데 이 터 를 포함 하 는 대상 입 니 다.예 를 들 어 하나의 Tree 컨트롤 의 데이터 제공 자 는 트 리 의 구조 와 각 트 리 노드 에 분 배 된 관련 데 이 터 를 확인 하고 ComboBox 컨트롤 의 데이터 제공 자 는 컨트롤 의 드 롭 다운 목록 에 있 는 항목 을 확인 합 니 다.
메모: 많은 표준 컨트롤 (ColorPicker 와 MenuBar 컨트롤 포함) 도 데이터 제공 프로그램 에서 데 이 터 를 가 져 옵 니 다.응용 프로그램 데 이 터 를 표시 하 는 컨트롤 은 때때로 데이터 제공 프로그램 컨트롤 이 라 고 불 린 다.데이터 제공 프로그램 사용 에 대한 자세 한 정 보 는 Flex 2 개발 자 안내 * 의 '데이터 제공 프로그램 사용 및 집합' 을 참조 하 시기 바 랍 니 다.
구성 요소 의 데이터 제공 프로그램 을 두 가지 방법 으로 설정 할 수 있 습 니 다. 첫 번 째 방법 은 Array 나 Collection 을 데이터 제공 프로그램 을 가 져 오 는 컨트롤 의 하위 탭 으로 정의 하고 온라인 에서 MXML 에서 데이터 제공 프로그램 을 정의 하 는 것 입 니 다.이런 방법 은 실시 가 빠 른 장점 을 가지 고 정적 데이터 와 함께 사용 하고 원형 디자인 에 사용 하기에 적합 하 다.두 번 째 방법 은 데이터 바 인 딩 을 사용 하여 ActionScript 가 정의 하 는 기 존 Array 나 Collection 에 컨트롤 을 연결 하 는 것 입 니 다.이 다음 방법 은 서버 에서 호출 된 데 이 터 를 표시 하고 ActionScript 에 연 결 된 데이터 구 조 를 표시 하 는 데 사 용 됩 니 다.이런 방법 도 이 두 가지 방법 중에서 비교적 신축성 이 있다.
아래 의 예 는 이 두 가지 방법 을 설명 한다.
예시
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/ControlsListBased/index.html"
layout="horizontal" width="460" height="360"
>
<mx:Script>
<![CDATA[
import flash.events.MouseEvent;
import mx.controls.Alert;
import mx.collections.ArrayCollection;
private const NL:String = "\r";
// A data provider created by using ActionScript
[Bindable]
private var subscriptions:ArrayCollection =
new ArrayCollection
(
[
{data:0, label:"Print"},
{data:1, label:"Website"},
{data:2, label:"RSS (text)"},
{data:3, label:"Podcast"}
]
);
private function submitButtonClickHandler(event:MouseEvent):void
{
var userDetails:String = "You submitted the following details:" + NL + NL;
userDetails += "Name: " + userName.text + NL;
userDetails += "Email: " + userEmail.text + NL;
userDetails += "Site rating: " + userRating.selectedItem.label + NL + NL;
userDetails += "Subscriptions:";
var selectedSubscriptionItems:Array = userSubscriptions.selectedItems;
for ( var i:String in selectedSubscriptionItems)
{
// Display the selected subscriptions, separated by commas
userDetails += selectedSubscriptionItems[i].label + ", ";
}
// Remove the last comma and space from the string we're displaying
userDetails = userDetails.substring(0, userDetails.length-2);
Alert.show ( userDetails );
}
]]>
</mx:Script>
<mx:Panel
title="Feedback form" width="99%"
paddingLeft="10" paddingTop="10" paddingRight="10" paddingBottom="10"
layout="vertical"
>
<mx:Text
text="Thank you for giving us feedback:"
width="100%" fontWeight="bold"
/>
<mx:Form width="100%">
<mx:FormItem label="Name:" width="100%">
<mx:TextInput id="userName" />
</mx:FormItem>
<mx:FormItem label="Email:" width="100%">
<mx:TextInput id="userEmail" />
</mx:FormItem>
<mx:FormItem label="Site rating:" width="100%">
<mx:ComboBox id="userRating" width="100%">
<!-- An inline data provider -->
<mx:Array>
<mx:Object data="0" label="Zero" />
<mx:Object data="1" label="One" />
<mx:Object data="2" label="Two" />
<mx:Object data="3" label="Three" />
<mx:Object data="4" label="Four" />
</mx:Array>
</mx:ComboBox>
</mx:FormItem>
<mx:FormItem label="Subscriptions:" width="100%">
<mx:List
id="userSubscriptions" rowCount="3"
allowMultipleSelection="true" width="100%"
dataProvider="{subscriptions}"
/>
</mx:FormItem>
</mx:Form>
<mx:ControlBar x="120" y="258" horizontalAlign="center">
<mx:Button
id="submitButton" label="Submit"
click="submitButtonClickHandler(event);"
/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
정수 반전Udemy 에서 공부 한 것을 중얼거린다 Chapter3【Integer Reversal】 (예) 문자열로 숫자를 반전 (toString, split, reverse, join) 인수의 수치 (n)가 0보다 위 또는 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
