Updates for examples to sync them with changes to SDK projects.
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/fa9e0448 Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/fa9e0448 Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/fa9e0448 Branch: refs/heads/dual Commit: fa9e0448b0e50569a9923bb61d06652ce463c04d Parents: 28150c4 Author: Peter Ent <[email protected]> Authored: Mon Apr 10 14:23:57 2017 -0400 Committer: Peter Ent <[email protected]> Committed: Mon Apr 10 14:23:57 2017 -0400 ---------------------------------------------------------------------- .../src/main/flex/MyInitialView.as | 52 ++++++++++---------- .../src/main/flex/MyInitialView.mxml | 45 +++++++++++------ .../src/main/flex/MyInitialView.mxml | 13 ++--- .../src/main/flex/MyInitialView.mxml | 3 ++ .../src/main/flex/MemberItemRenderer.mxml | 2 +- .../sample/todo/renderers/TodoItemRenderer.as | 35 ++++++------- .../flex/sample/todo/views/TodoListView.mxml | 11 +++++ .../HTML/src/main/resources/defaults.css | 2 + 8 files changed, 99 insertions(+), 64 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/fa9e0448/examples/flexjs/DataBindingExample_as/src/main/flex/MyInitialView.as ---------------------------------------------------------------------- diff --git a/examples/flexjs/DataBindingExample_as/src/main/flex/MyInitialView.as b/examples/flexjs/DataBindingExample_as/src/main/flex/MyInitialView.as index 135cb61..c3982b8 100644 --- a/examples/flexjs/DataBindingExample_as/src/main/flex/MyInitialView.as +++ b/examples/flexjs/DataBindingExample_as/src/main/flex/MyInitialView.as @@ -16,8 +16,8 @@ See the License for the specific language governing permissions and limitations under the License. */ -package -{ +package +{ //import mx.states.State; @@ -27,7 +27,7 @@ import org.apache.flex.binding.ConstantBinding; import org.apache.flex.binding.SimpleBinding; import org.apache.flex.core.SimpleCSSValuesImpl; import org.apache.flex.core.ValuesManager; -import org.apache.flex.core.ViewBase; +import org.apache.flex.core.View; import org.apache.flex.events.CustomEvent; import org.apache.flex.events.Event; import org.apache.flex.html.CheckBox; @@ -41,7 +41,7 @@ import org.apache.flex.html.TextInput; import org.apache.flex.html.beads.layouts.HorizontalLayout; import org.apache.flex.html.beads.layouts.VerticalLayout; -public class MyInitialView extends ViewBase +public class MyInitialView extends View { public function MyInitialView() @@ -61,55 +61,55 @@ public class MyInitialView extends ViewBase vi.addRule(".output", { "font-size": 20 }); - + vi.addRule(".topContainer", { "padding": 10 }); - + vi.addRule(".leftSide", { "vertical-align": "top", "margin-right": 10 }); - + vi.addRule(".rightSide", { "vertical-align": "top", "margin-left": 10, "padding-left": 10 }); - + vi.addRule(".quoteButton", { "margin-top": 10, "margin-bottom": 10 }); - + } - + private function initCompleteHandler(event:Event):void { initControls(); } - + private var _symbol:String; - + public function get symbol():String { return _symbol; } - + public function get requestedField():String { return radio1.selectedValue as String; } - + [Bindable] public var fieldText:String; - + private function radioChanged(e:org.apache.flex.events.Event):void { dispatchEvent(new CustomEvent("radioClicked")); fieldText = RadioButton(e.target).text; } - + private function initControls():void { list.selectedItem = MyModel(applicationModel).stockSymbol; @@ -122,14 +122,14 @@ public class MyInitialView extends ViewBase fieldText = radio3.text; else if (radio4.selected) fieldText = radio4.text; - + } - + private function setState():void { - currentState = showAllData.selected ? "showAll" : "hideAll"; + currentState = showAllData.selected ? "showAll" : "hideAll"; } - + override public function get MXMLDescriptor():Array { var c:Container = new Container(); @@ -186,7 +186,7 @@ public class MyInitialView extends ViewBase addBead(sb); c3.addElement(output); c3.childrenAdded(); - + c3 = new Container(); c3.className="rightSide"; c3.addBead(new VerticalLayout()); @@ -246,11 +246,11 @@ public class MyInitialView extends ViewBase c.addElement(ta); c2.childrenAdded(); c.childrenAdded(); - + return super.MXMLDescriptor; } - + public var symbolTI:TextInput; public var output:Label; public var field:Label; @@ -261,19 +261,19 @@ public class MyInitialView extends ViewBase public var radio4:RadioButton; public var showAllData:CheckBox; public var ta:TextArea; - + private function tb_clickHandler(event:Event):void { _symbol = symbolTI.text; dispatchEvent(new CustomEvent('buttonClicked')); } - + private function list_changeHandler(event:Event):void { _symbol = list.selectedItem as String; dispatchEvent(new CustomEvent('listChanged')); } - + private function showAllData_changeHandler(event:Event):void { setState(); http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/fa9e0448/examples/flexjs/DataGridExample/src/main/flex/MyInitialView.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/DataGridExample/src/main/flex/MyInitialView.mxml b/examples/flexjs/DataGridExample/src/main/flex/MyInitialView.mxml index 8ac036d..3e4b3a9 100644 --- a/examples/flexjs/DataGridExample/src/main/flex/MyInitialView.mxml +++ b/examples/flexjs/DataGridExample/src/main/flex/MyInitialView.mxml @@ -21,39 +21,47 @@ limitations under the License. xmlns:js="library://ns.apache.org/flexjs/basic"> <fx:Script> <![CDATA[ - private function dataGridChange() : void + import org.apache.flex.html.DataGrid; + + private function dataGridChange(grid:DataGrid) : void { - output.text = "Clicked on row "+dataGrid.selectedIndex; - trace("Click on row "+dataGrid.selectedIndex); + output.text = "Clicked on row "+grid.selectedIndex; + trace("Click on row "+grid.selectedIndex); } ]]> </fx:Script> + <fx:Style> + @namespace js "library://ns.apache.org/flexjs/basic"; + + /* These border lines currently show only on HTML */ + .DataGridListArea .middle { + border-left: solid 1px #333333; + border-right: solid 1px #333333; + } + + </fx:Style> + <js:Label id="output" x="450" y="30"/> - <js:DataGrid id="dataGrid" x="20" y="30" width="400" height="200" change="dataGridChange()" rowHeight="40"> + <js:DataGrid id="dataGrid" x="20" y="30" width="400" height="150" change="dataGridChange(dataGrid)" rowHeight="40"> <js:beads> - <!--<js:DataGridPercentageLayout />--> + <js:DataGridPercentageView /> <js:ConstantBinding sourceID="applicationModel" sourcePropertyName="productList" destinationPropertyName="dataProvider" /> </js:beads> <js:columns> - <js:DataGridColumn label="Image" dataField="image" columnWidth="100" itemRenderer="products.ProductItemRenderer" /> - <js:DataGridColumn label="Title" dataField="title" columnWidth="200" /> - <js:DataGridColumn label="Sales" dataField="sales" columnWidth="100" /> + <js:DataGridColumn label="Image" dataField="image" columnWidth="15" itemRenderer="products.ProductItemRenderer" /> + <js:DataGridColumn label="Title" dataField="title" columnWidth="60" /> + <js:DataGridColumn label="Sales" dataField="sales" columnWidth="25" /> </js:columns> </js:DataGrid> - <js:DataGrid id="dataGrid2" x="20" y="300" width="400" height="245" change="dataGridChange()" rowHeight="40"> + <js:DataGrid id="dataGrid2" x="20" y="300" width="400" height="150" change="dataGridChange(dataGrid2)" rowHeight="40"> <js:beads> - <!--<js:DataGridLinesBead> - <js:stroke> - <js:SolidColorStroke color="#FF8800" weight="2" /> - </js:stroke> - </js:DataGridLinesBead>--> <js:ConstantBinding sourceID="applicationModel" sourcePropertyName="productList" @@ -65,5 +73,14 @@ limitations under the License. <js:DataGridColumn label="Sales" dataField="sales" columnWidth="100" /> </js:columns> </js:DataGrid> + + + <!-- + This bead is not working yet. It can be added to either DataGrid when it works. + <js:DataGridLinesBead> + <js:stroke> + <js:SolidColorStroke color="#FF8800" weight="2" /> + </js:stroke> + </js:DataGridLinesBead>--> </js:View> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/fa9e0448/examples/flexjs/DateControlsExample/src/main/flex/MyInitialView.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/DateControlsExample/src/main/flex/MyInitialView.mxml b/examples/flexjs/DateControlsExample/src/main/flex/MyInitialView.mxml index fbdfacc..68a29f4 100644 --- a/examples/flexjs/DateControlsExample/src/main/flex/MyInitialView.mxml +++ b/examples/flexjs/DateControlsExample/src/main/flex/MyInitialView.mxml @@ -20,13 +20,11 @@ limitations under the License. <js:View xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:js="library://ns.apache.org/flexjs/basic" xmlns:local="*" - xmlns:models="models.*" className="MyDates"> + xmlns:models="models.*"> <fx:Style> @namespace js "library://ns.apache.org/flexjs/basic"; - .MyDates { - background-color: #FFFFFF; - } + </fx:Style> <fx:Script> <![CDATA[ @@ -52,12 +50,15 @@ limitations under the License. <js:DateChooser id="dateChooser" x="20" y="30" width="280" height="240" change="dateChanged()" /> - <js:VContainer x="400" y="35" width="300" height="200" className="Container1"> + <js:Group x="400" y="35" width="300" height="200" className="Container1"> + <js:beads> + <js:VerticalLayout /> + </js:beads> <js:Label id="output" text="Selected dates appear here" /> <js:Spacer height="20" /> <js:DateField id="dateField" change="dateChanged2()" /> <js:Spacer height="20" /> <js:TextButton text="Today!" click="toToday()" /> - </js:VContainer> + </js:Group> </js:View> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/fa9e0448/examples/flexjs/ListExample/src/main/flex/MyInitialView.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/ListExample/src/main/flex/MyInitialView.mxml b/examples/flexjs/ListExample/src/main/flex/MyInitialView.mxml index 09543ae..bb05be8 100644 --- a/examples/flexjs/ListExample/src/main/flex/MyInitialView.mxml +++ b/examples/flexjs/ListExample/src/main/flex/MyInitialView.mxml @@ -31,6 +31,9 @@ limitations under the License. IDataProviderItemRendererMapper: ClassReference("simple.IRFactoryForArrayData"); IItemRendererClassFactory: ClassReference("org.apache.flex.core.ItemRendererClassFactory"); IItemRenderer: ClassReference("org.apache.flex.html.supportClasses.StringItemRenderer"); + + overflow: auto; + border: 1px solid #CCCCCC; } </fx:Style> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/fa9e0448/examples/flexjs/TeamPage/src/main/flex/MemberItemRenderer.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/TeamPage/src/main/flex/MemberItemRenderer.mxml b/examples/flexjs/TeamPage/src/main/flex/MemberItemRenderer.mxml index 8ec2534..c5cece0 100644 --- a/examples/flexjs/TeamPage/src/main/flex/MemberItemRenderer.mxml +++ b/examples/flexjs/TeamPage/src/main/flex/MemberItemRenderer.mxml @@ -69,7 +69,7 @@ limitations under the License. <js:Image id="memberPhoto" width="128" height="128" /> <js:Spacer width="10" /> - <js:VContainer id="contentArea" > + <js:VContainer id="contentArea" width="100%" > <js:style> <js:SimpleCSSStyles verticalAlign="top" /> </js:style> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/fa9e0448/examples/flexjs/TodoListSampleApp/src/main/flex/sample/todo/renderers/TodoItemRenderer.as ---------------------------------------------------------------------- diff --git a/examples/flexjs/TodoListSampleApp/src/main/flex/sample/todo/renderers/TodoItemRenderer.as b/examples/flexjs/TodoListSampleApp/src/main/flex/sample/todo/renderers/TodoItemRenderer.as index 7a0d6e3..f13c054 100644 --- a/examples/flexjs/TodoListSampleApp/src/main/flex/sample/todo/renderers/TodoItemRenderer.as +++ b/examples/flexjs/TodoListSampleApp/src/main/flex/sample/todo/renderers/TodoItemRenderer.as @@ -18,23 +18,28 @@ //////////////////////////////////////////////////////////////////////////////// package sample.todo.renderers { + import org.apache.flex.core.SimpleCSSStyles; import org.apache.flex.events.Event; import org.apache.flex.events.MouseEvent; import org.apache.flex.html.Button; import org.apache.flex.html.CheckBox; + import org.apache.flex.html.Group; import org.apache.flex.html.Label; + import org.apache.flex.html.beads.layouts.HorizontalFlexLayout; import org.apache.flex.html.supportClasses.DataItemRenderer; - + [Event("checkChanged","org.apache.flex.events.Event")] [Event("removeRequest","org.apache.flex.events.Event")] public class TodoItemRenderer extends DataItemRenderer { - + public function TodoItemRenderer() { super(); className = "TodoItemRenderer"; } + private var group:Group; + private var checkbox:CheckBox; private var title:Label; private var removeButton:Button; @@ -42,15 +47,23 @@ package sample.todo.renderers { override public function addedToParent():void { super.addedToParent(); + group = new Group(); + group.percentWidth = 100; + group.percentHeight = 100; + group.addBead(new HorizontalFlexLayout()); + addElement(group); + checkbox = new CheckBox(); - addElement(checkbox); + group.addElement(checkbox); checkbox.addEventListener("change", checkBoxChange); title = new Label(); - addElement(title); + title.className = "RendererText"; + group.addElement(title); removeButton = new Button(); - addElement(removeButton); + removeButton.className = "RemoveButton"; + group.addElement(removeButton); removeButton.addEventListener("click", removeClick); } @@ -62,18 +75,6 @@ package sample.todo.renderers { } override public function adjustSize():void { - var hgt:Number = this.height; - var cy:Number = this.height / 2; - - checkbox.x = 10; - checkbox.y = cy; - - title.x = 60; - title.y = cy; - - removeButton.x = 300; - removeButton.y = cy; - updateRenderer(); } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/fa9e0448/examples/flexjs/TodoListSampleApp/src/main/flex/sample/todo/views/TodoListView.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/TodoListSampleApp/src/main/flex/sample/todo/views/TodoListView.mxml b/examples/flexjs/TodoListSampleApp/src/main/flex/sample/todo/views/TodoListView.mxml index 9ddf675..967fd32 100644 --- a/examples/flexjs/TodoListSampleApp/src/main/flex/sample/todo/views/TodoListView.mxml +++ b/examples/flexjs/TodoListSampleApp/src/main/flex/sample/todo/views/TodoListView.mxml @@ -165,8 +165,19 @@ limitations under the License. renderers|TodoItemRenderer { backgroundColor: #FFFFFF; height: 40px; + padding: 4px; IBeadController: ClassReference("org.apache.flex.html.beads.controllers.ItemRendererMouseController"); } + + .RendererText { + flex-grow: 1; + } + + .RemoveButton { + width: 16px; + height: 16px; + border: solid 1px red; + } </fx:Style> </js:View> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/fa9e0448/frameworks/projects/HTML/src/main/resources/defaults.css ---------------------------------------------------------------------- diff --git a/frameworks/projects/HTML/src/main/resources/defaults.css b/frameworks/projects/HTML/src/main/resources/defaults.css index 640dda2..88d24c5 100644 --- a/frameworks/projects/HTML/src/main/resources/defaults.css +++ b/frameworks/projects/HTML/src/main/resources/defaults.css @@ -631,6 +631,8 @@ global } DataContainer { + IBackgroundBead: ClassReference("org.apache.flex.html.beads.SolidBackgroundBead"); + IBorderBead: ClassReference("org.apache.flex.html.beads.SingleLineBorderBead"); IContentView: ClassReference("org.apache.flex.html.supportClasses.DataGroup"); }
