0 Replies Latest reply on Mar 11, 2008 1:37 AM by rvdurm

    DateChooser with hour and minutes

    rvdurm
      Calendar.as > custom calendar widget

      package org.uzleuven.widget {
      import flash.events.Event;

      import mx.containers.HBox;
      import mx.containers.VBox;
      import mx.controls.Alert;
      import mx.controls.ComboBox;
      import mx.controls.DateChooser;
      import mx.controls.Label;

      [Event(name="change", type="flash.events.Event")]

      public class Calendar extends VBox {
      private var chooser:DateChooser;
      private var hours:ComboBox;
      private var minutes:ComboBox;

      public function Calendar() {
      super();
      }

      private function provide(max:Number):Array {
      var list:Array = [];
      for (var i:int=0; i<max; i++) list.push(i);
      return list;
      }

      override protected function createChildren():void {
      super.createChildren();
      chooser = new DateChooser();
      chooser.addEventListener("change", change);
      addChild(chooser);
      var box:HBox = new HBox();
      hours = new ComboBox();
      hours.dataProvider = provide(24);
      hours.addEventListener("change", change);
      box.addChild(hours);
      var label:Label = new Label();
      label.width = 1;
      box.addChild(label);
      minutes = new ComboBox();
      minutes.dataProvider = provide(59);
      minutes.addEventListener("change", change);
      box.addChild(minutes);
      addChild(box);
      }

      private function read():Date {
      var date:Date = chooser.selectedDate;
      date.setHours(Number(hours.selectedItem));
      date.setMinutes(Number(minutes.selectedItem));
      return date;
      }

      private function change(event:Event):void {
      selectedDate = read();
      }

      public function set selectedDate(date:Date):void {
      chooser.selectedDate = date;
      hours.selectedItem = date.hours;
      minutes.selectedItem = date.minutes;
      dispatchEvent(new Event("change"));
      }

      [Bindable(event="change")]
      public function get selectedDate():Date {
      Alert.show(read().toString());
      return read();
      }
      }
      }

      Text.mxml > works fine

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="vertical" xmlns:widget="org.uzleuven.widget.*">
      <mx:Date id="date"/>
      <mx:TextInput text="{date.toString()}"/>
      <mx:Binding source="calendar.selectedDate" destination="date"/>
      <widget:Calendar id="calendar" selectedDate="{date}"/>
      </mx:Application>

      Absence.as > managed class

      package org.uzleuven.absence {
      [Managed]
      [RemoteClass(alias="org.uzleuven.absence.Absence")]
      public class Absence {
      public var id:Number;
      public var username:String;
      public var description:String;
      public var from:Date;
      public var till:Date;
      public function Absence() {}
      }
      }

      Main.mxml > no detection of hours/minutes updates (why ?!)

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="vertical" xmlns:absence="org.uzleuven.absence.*" creationComplete="init()" xmlns:widget="org.uzleuven.widget.*">
      <absence:Absence id="absence"/>
      <mx:ArrayCollection id="absences"/>
      <mx:DataService id="service" destination="uz-absence" autoCommit="false"/>
      <mx:Script>
      <![CDATA[
      private function init():void {
      service.fill(absences);
      }
      private function select():void {
      if (grid.selectedIndex > -1 && absence != absences.getItemAt(grid.selectedIndex)) {
      absence = absences.getItemAt(grid.selectedIndex) as Absence;
      }
      }
      ]]>
      </mx:Script>
      <mx:DataGrid id="grid" dataProvider="{absences}" change="select()">
      <mx:columns>
      <mx:DataGridColumn dataField="description" headerText="Description"/>
      <mx:DataGridColumn dataField="from" headerText="From"/>
      <mx:DataGridColumn dataField="till" headerText="Till"/>
      </mx:columns>
      </mx:DataGrid>
      <mx:Binding source="description.text" destination="absence.description"/>
      <mx:Binding source="from.selectedDate" destination="absence.from"/>
      <mx:Binding source="till.selectedDate" destination="absence.till"/>
      <mx:Form>
      <mx:FormItem label="Description" required="true">
      <mx:TextInput id="description" text="{absence.description}"/>
      </mx:FormItem>
      <mx:FormItem label="From/Till" required="true">
      <mx:HBox>
      <widget:Calendar id="from" selectedDate="{absence.from}"/>
      <widget:Calendar id="till" selectedDate="{absence.till}"/>
      </mx:HBox>
      </mx:FormItem>
      </mx:Form>
      <mx:Button label="Save" click="service.commit()" enabled="{service.commitRequired}"/>
      </mx:Application>