| <?xml version="1.0" encoding="utf-8"?> |
| <!-- |
| |
| Licensed to the Apache Software Foundation (ASF) under one or more |
| contributor license agreements. See the NOTICE file distributed with |
| this work for additional information regarding copyright ownership. |
| The ASF licenses this file to You under the Apache License, Version 2.0 |
| (the "License"); you may not use this file except in compliance with |
| the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| |
| --> |
| <s:Module xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*"> |
| |
| <fx:Script> |
| <![CDATA[ |
| import mx.events.ListEvent; |
| |
| [Bindable] |
| private var contact:Contact = new Contact(); |
| |
| protected function submitBtn_clickHandler(event:MouseEvent):void |
| { |
| // Note: this sample uses bidirectional data binding, so we do not have to |
| // explicitly set the contact fields to save them! |
| if (!contacts.contains(contact)) |
| contacts.addItem(contact); |
| contact = new Contact(); |
| } |
| |
| protected function dg_itemClickHandler(event:ListEvent):void |
| { |
| contact = dg.selectedItem as Contact; |
| } |
| |
| ]]> |
| </fx:Script> |
| |
| <fx:Declarations> |
| <s:ArrayCollection id="contacts"/> |
| </fx:Declarations> |
| |
| <s:Panel title="TabBar Sample with Custom Skin and Bidirectional Binding" width="100%" height="100%"> |
| <s:TabBar id="tabs" left="8" y="2" dataProvider="{vs}" skinClass="skins.CustomTabBarSkin" cornerRadius="4"/> |
| <mx:ViewStack id="vs" width="95%" height="85%" left="8" y="23"> |
| <s:NavigatorContent label="Contact Info" width="100%" height="100%"> |
| <s:BorderContainer borderColor="0xCC0000" width="100%" height="100%" borderWeight="2" cornerRadius="3" |
| dropShadowVisible="true"> |
| <!-- This background fill could also be specified in a custom skin to apply to other containers as well --> |
| <s:backgroundFill> |
| <s:LinearGradient rotation="90"> |
| <s:GradientEntry color="0xE2E2E2"/> |
| <s:GradientEntry color="0xCC0000" alpha=".5" /> |
| </s:LinearGradient> |
| </s:backgroundFill> |
| <mx:Form id="contactForm" defaultButton="{submitBtn}" width="100%" height="100%"> |
| <mx:FormItem label="Name:"> |
| <s:TextInput id="nameTxt" text="@{contact.name}"/> |
| </mx:FormItem> |
| <mx:FormItem label="Address:"> |
| <s:TextInput id="address" text="@{contact.address}"/> |
| </mx:FormItem> |
| <mx:FormItem label="City:"> |
| <s:TextInput id="city" text="@{contact.city}"/> |
| </mx:FormItem> |
| <mx:FormItem label="State:"> |
| <s:TextInput id="state" text="@{contact.state}"/> |
| </mx:FormItem> |
| <mx:FormItem label="Zip:"> |
| <s:TextInput id="zip" text="@{contact.zip}" maxChars="5"/> |
| </mx:FormItem> |
| <mx:FormItem> |
| <s:Button id="submitBtn" label="Submit" click="submitBtn_clickHandler(event)"/> |
| </mx:FormItem> |
| </mx:Form> |
| </s:BorderContainer> |
| </s:NavigatorContent> |
| <s:NavigatorContent label="Contact List" width="100%" height="100%" > |
| <s:BorderContainer borderColor="0xCC0000" width="100%" height="100%" borderWeight="2" cornerRadius="3" |
| dropShadowVisible="true"> |
| <s:backgroundFill> |
| <s:LinearGradient rotation="90"> |
| <s:GradientEntry color="0xCC0000" /> |
| <s:GradientEntry color="0xE2E2E2" /> |
| </s:LinearGradient> |
| </s:backgroundFill> |
| <mx:DataGrid id="dg" dataProvider="{contacts}" x="5" y="5" doubleClickEnabled="true" |
| doubleClick="{tabs.selectedIndex=0}" itemClick="dg_itemClickHandler(event)"> |
| <mx:columns> |
| <mx:DataGridColumn headerText="Name" dataField="name"/> |
| <mx:DataGridColumn headerText="Address" dataField="address"/> |
| <mx:DataGridColumn headerText="City" dataField="city"/> |
| <mx:DataGridColumn headerText="State" dataField="state"/> |
| <mx:DataGridColumn headerText="Zip" dataField="zip"/> |
| </mx:columns> |
| </mx:DataGrid> |
| </s:BorderContainer> |
| </s:NavigatorContent> |
| </mx:ViewStack> |
| </s:Panel> |
| </s:Module> |