TourDeFlex/TourDeFlex_content/AIR-for-Android/srcview/src/RunTracker.mxml - flex-utilities - Git at Google

 <?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:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
 			   xmlns:s="library://ns.adobe.com/flex/spark"
 			   xmlns:mx="library://ns.adobe.com/flex/mx" backgroundColor="0x000000"
 			   width="100%" height="100%" frameRate="60" applicationComplete="appCompleteHandler(event)" viewSourceURL="srcview/index.html">


 	<fx:Script>
 		<![CDATA[
 			import com.devgirl.runtracker.events.RunListResultEvent;
 			import com.devgirl.runtracker.service.DBService;
 			import com.devgirl.runtracker.vo.RunVO;

 			import mx.charts.HitData;
 			import mx.charts.chartClasses.IAxis;
 			import mx.charts.chartClasses.Series;
 			import mx.controls.Alert;
 			import mx.events.CalendarLayoutChangeEvent;
 			import mx.events.DataGridEvent;
 			import mx.events.FlexEvent;
 			import mx.events.IndexChangedEvent;

 			private var dbService:DBService;
 			private var userPace:String;

 			private function btnCalc_clickHandler():void
 			{
 				if (numMiles.text == null || (hrsVal.value==0 && minsVal.value==0 && secsVal.value==0))
 				{
 					Alert.show("Please enter both miles and time for pace calculation.","Required Values Error");
 					return;
 				}

 				var totalSeconds:Number = ((hrsVal.value*3600)+(minsVal.value*60)+secsVal.value)/parseFloat(numMiles.text);
 				userPace = this.convertTime(totalSeconds);
 				lblPace.text = userPace + " mins/mile";
 				grpPace.visible=true;
 			}

 			private function convertTime(timeInSecs:int):String
 			{
 				var hours:int = timeInSecs / 3600;
 				var mins:int  = timeInSecs / 60 - (hours * 60);
 				var secs:int  = timeInSecs - (hours * 3600) - (mins * 60);
 				trace(hours + ":" + mins + ":" + secs);
 				var d:Date = new Date(null,null,null,hours,mins,secs,null);
 				timeFormatter.format(d);
 				return timeFormatter.format(d);
 			}

 			private function appCompleteHandler(event:FlexEvent):void
 			{
 				dbService = new DBService();
 				dbService.addEventListener(RunListResultEvent.RUN_LIST_EVENT,handleRunList);
 			}

 			private function handleRunList(event:RunListResultEvent):void
 			{
 				runsAC = event.runEntries;
 			}

 			private function saveBtn_clickHandler(event:MouseEvent):void
 			{
 				var run:RunVO = new RunVO();
 				run.runDate = dateFormatter.format(this.date.text);
 				run.miles = parseFloat(numMiles.text);
 				run.pace = userPace;
 				run.notes = notes.text;
 				dbService.addRun(run);
 				lbl.text = "Run data saved successfully";
 				resetFields();
 			}

 			private function resetFields():void
 			{
 				// clear fields for more input
 				this.date.text = '';
 				this.numMiles.text = '';
 				this.hrsVal.value = 0;
 				this.minsVal.value = 0;
 				this.secsVal.value = 0;
 				this.notes.text = '';
 				this.lblPace.text = '';
 			}

 			private function tabChangeHandler(event:IndexChangedEvent):void
 			{
 				dbService.getRuns();
 				if (event.newIndex==1)
 				{
 					dg.dispatchEvent(new DataGridEvent(DataGridEvent.HEADER_RELEASE,false,true,0,null,0,null,null,0));
 				}
 			}


 			private function dateFunction(s:String):Date
 			{
 				var newDate:Date = DateField.stringToDate(s,"YYYY-MM-DD");
 				return newDate;
 			}

 			private function paceFunction(s:String):Date
 			{
 				if (s!=null)
 				{
 					var idx:int = s.indexOf(':');
 					// Create a new date object with just the time values parsed from the String
 					var newDate:Date = new Date(null,null,null,"00",s.substring(0,idx),s.substring(idx+1,s.length),null);
 					return newDate;
 				}
 				else return null;
 			}

 			private function dataTipFunction(hitData:HitData):String
 			{
 				var tip:String;
 				var run:RunVO = hitData.item as RunVO;
 				tip = run.miles + " miles on " + run.runDate+"\n";
 				tip += " at " + run.pace;
 				return tip;
 			}

 			private function paceLblFunc(labelValue:Date, previousValue:Object, axis:IAxis):String
 			{
 				return timeFormatter.format(labelValue);
 			}

 			private function dateLblFunc(labelValue:Date, previousValue:Object, axis:IAxis):String
 			{
 				return dateFormatter.format(labelValue.toDateString());
 			}

 			private function date_changeHandler(event:CalendarLayoutChangeEvent):void
 			{
 				// A new date is being entered, clear saved label
 				lbl.text = '';
 			}

 		]]>
 	</fx:Script>

 	<fx:Declarations>
 		<s:ArrayCollection id="runsAC"/>
 		<mx:DateFormatter id="timeFormatter" formatString="NN:SS" />
 		<mx:DateFormatter id="dateFormatter" formatString="YYYY-MM-DD"/>
 	</fx:Declarations>

 	<s:layout>
 		<s:VerticalLayout gap="8" paddingLeft="50" paddingTop="10" paddingRight="20" paddingBottom="20" horizontalAlign="left"
 						  verticalAlign="middle"/>
 	</s:layout>

 	<mx:TabNavigator width="100%" height="100%" fontSize="26" backgroundColor="0x000000" color="0x323232" change="tabChangeHandler(event)">
 		<s:NavigatorContent label="Miles" width="100%" height="100%" backgroundColor="0x000000" color="0xFFFFFF">
 			<s:layout>
 				<s:VerticalLayout gap="8" paddingTop="8" paddingLeft="8" paddingRight="8" paddingBottom="8"/>
 			</s:layout>

 			<s:HGroup horizontalAlign="center" verticalAlign="middle">
 				<s:Label text="Date:" fontSize="26"/>
 				<mx:DateField id="date" color="0x000000" showToday="true" selectedDate="{new Date()}" change="date_changeHandler(event)"/>
 			</s:HGroup>

 			<s:HGroup horizontalAlign="center" verticalAlign="middle">
 				<s:Label text="Miles:" fontSize="26"/>
 				<s:TextInput id="numMiles" fontSize="26" color="0x000000" widthInChars="3" restrict="0-9." text="0"/>
 				<mx:Spacer width="25"/>
 				<mx:Image source="@Embed(source='assets/runner3.jpg')" width="100" height="100"/>
 			</s:HGroup>

 			<s:VGroup horizontalAlign="center" verticalAlign="middle" gap="15">
 				<s:HGroup horizontalAlign="center" verticalAlign="middle" paddingTop="8">
 					<s:VGroup >
 						<s:Label text="Hours" fontSize="18"/>
 						<s:NumericStepper id="hrsVal" maximum="99" maxChars="2" fontSize="26"
 										  skinClass="com.devgirl.runtracker.skins.MyNumericStepperSkin"/>
 					</s:VGroup>
 					<s:VGroup>
 						<s:Label text="Mins" fontSize="18"/>
 						<s:NumericStepper id="minsVal" maxChars="2" maximum="59" fontSize="26"
 										  skinClass="com.devgirl.runtracker.skins.MyNumericStepperSkin"/>
 					</s:VGroup>
 					<s:VGroup>
 						<s:Label text="Secs" fontSize="18"/>
 						<s:NumericStepper id="secsVal" maxChars="2" maximum="59" fontSize="26"
 										  skinClass="com.devgirl.runtracker.skins.MyNumericStepperSkin"/>
 					</s:VGroup>
 				</s:HGroup>
 				<s:Button id="btnCalc" label="Calculate Pace" fontSize="24" left="200" height="40" click="btnCalc_clickHandler()"
 						   color="0x000000"/>
 			</s:VGroup>

 			<s:HGroup horizontalAlign="center" verticalAlign="middle" visible="false" id="grpPace" >
 				<s:Label text="Pace:" fontSize="28"/>
 				<s:Label id="lblPace" color="0x336699" fontSize="26"/>
 			</s:HGroup>

 			<s:Label text="Notes:" fontSize="26" color="0xFFFFFF"/>
 			<s:TextArea id="notes" width="90%" height="100" fontSize="26" color="0x000000"/>
 			<s:Button id="saveBtn" label="Save Run" click="saveBtn_clickHandler(event)" color="0x000000"/>
 			<s:Label id="lbl"/>
 		</s:NavigatorContent>

 		<s:NavigatorContent label="History" height="100%" width="100%" backgroundColor="0x000000">
 			<s:layout>
 				<s:VerticalLayout gap="8" paddingTop="8" paddingLeft="8" paddingRight="8" paddingBottom="8" horizontalAlign="center"
 								  verticalAlign="middle"/>
 			</s:layout>
 			<mx:DataGrid id="dg" width="90%" height="90%" dataProvider="{runsAC}" color="0x000000" fontSize="18">
 				<mx:columns>
 					<mx:DataGridColumn dataField="runDate" headerText="Date" width="120"/>
 					<mx:DataGridColumn dataField="miles" headerText="Miles" width="50"/>
 					<mx:DataGridColumn dataField="pace" headerText="Pace" width="60"/>
 					<mx:DataGridColumn dataField="notes" headerText="Notes" width="140"/>
 				</mx:columns>
 			</mx:DataGrid>
 		</s:NavigatorContent>

 		<s:NavigatorContent label="Trends" color="0xFFFFFF" width="100%" height="100%">
 			<s:VGroup>
 				<mx:Legend dataProvider="{mychart}"/>
 				<mx:LineChart id="mychart" height="100%" width="100%"
 							  paddingRight="5" paddingLeft="5"
 							  showDataTips="true" dataTipFunction="dataTipFunction" dataProvider="{runsAC}">

 					<mx:horizontalAxis>
 						<mx:DateTimeAxis parseFunction="dateFunction" labelFunction="dateLblFunc" dataUnits="days"/>
 					</mx:horizontalAxis>

 					<mx:verticalAxis>
 						<mx:DateTimeAxis baseAtZero="true" parseFunction="paceFunction" labelFunction="paceLblFunc" dataUnits="seconds" />
 					</mx:verticalAxis>

 					<mx:series>
 						<mx:LineSeries xField="runDate" yField="pace" displayName="Pace Trend" sortOnXField="true"/>
 					</mx:series>
 				</mx:LineChart>
 			</s:VGroup>
 		</s:NavigatorContent>
 	</mx:TabNavigator>

 </s:Application>
	<?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:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:mx="library://ns.adobe.com/flex/mx" backgroundColor="0x000000"
	width="100%" height="100%" frameRate="60" applicationComplete="appCompleteHandler(event)" viewSourceURL="srcview/index.html">


	<fx:Script>
	<![CDATA[
	import com.devgirl.runtracker.events.RunListResultEvent;
	import com.devgirl.runtracker.service.DBService;
	import com.devgirl.runtracker.vo.RunVO;

	import mx.charts.HitData;
	import mx.charts.chartClasses.IAxis;
	import mx.charts.chartClasses.Series;
	import mx.controls.Alert;
	import mx.events.CalendarLayoutChangeEvent;
	import mx.events.DataGridEvent;
	import mx.events.FlexEvent;
	import mx.events.IndexChangedEvent;

	private var dbService:DBService;
	private var userPace:String;

	private function btnCalc_clickHandler():void
	{
	if (numMiles.text == null \|\| (hrsVal.value==0 && minsVal.value==0 && secsVal.value==0))
	{
	Alert.show("Please enter both miles and time for pace calculation.","Required Values Error");
	return;
	}

	var totalSeconds:Number = ((hrsVal.value3600)+(minsVal.value60)+secsVal.value)/parseFloat(numMiles.text);
	userPace = this.convertTime(totalSeconds);
	lblPace.text = userPace + " mins/mile";
	grpPace.visible=true;
	}

	private function convertTime(timeInSecs:int):String
	{
	var hours:int = timeInSecs / 3600;
	var mins:int = timeInSecs / 60 - (hours * 60);
	var secs:int = timeInSecs - (hours * 3600) - (mins * 60);
	trace(hours + ":" + mins + ":" + secs);
	var d:Date = new Date(null,null,null,hours,mins,secs,null);
	timeFormatter.format(d);
	return timeFormatter.format(d);
	}

	private function appCompleteHandler(event:FlexEvent):void
	{
	dbService = new DBService();
	dbService.addEventListener(RunListResultEvent.RUN_LIST_EVENT,handleRunList);
	}

	private function handleRunList(event:RunListResultEvent):void
	{
	runsAC = event.runEntries;
	}

	private function saveBtn_clickHandler(event:MouseEvent):void
	{
	var run:RunVO = new RunVO();
	run.runDate = dateFormatter.format(this.date.text);
	run.miles = parseFloat(numMiles.text);
	run.pace = userPace;
	run.notes = notes.text;
	dbService.addRun(run);
	lbl.text = "Run data saved successfully";
	resetFields();
	}

	private function resetFields():void
	{
	// clear fields for more input
	this.date.text = '';
	this.numMiles.text = '';
	this.hrsVal.value = 0;
	this.minsVal.value = 0;
	this.secsVal.value = 0;
	this.notes.text = '';
	this.lblPace.text = '';
	}

	private function tabChangeHandler(event:IndexChangedEvent):void
	{
	dbService.getRuns();
	if (event.newIndex==1)
	{
	dg.dispatchEvent(new DataGridEvent(DataGridEvent.HEADER_RELEASE,false,true,0,null,0,null,null,0));
	}
	}


	private function dateFunction(s:String):Date
	{
	var newDate:Date = DateField.stringToDate(s,"YYYY-MM-DD");
	return newDate;
	}

	private function paceFunction(s:String):Date
	{
	if (s!=null)
	{
	var idx:int = s.indexOf(':');
	// Create a new date object with just the time values parsed from the String
	var newDate:Date = new Date(null,null,null,"00",s.substring(0,idx),s.substring(idx+1,s.length),null);
	return newDate;
	}
	else return null;
	}

	private function dataTipFunction(hitData:HitData):String
	{
	var tip:String;
	var run:RunVO = hitData.item as RunVO;
	tip = run.miles + " miles on " + run.runDate+"\n";
	tip += " at " + run.pace;
	return tip;
	}

	private function paceLblFunc(labelValue:Date, previousValue:Object, axis:IAxis):String
	{
	return timeFormatter.format(labelValue);
	}

	private function dateLblFunc(labelValue:Date, previousValue:Object, axis:IAxis):String
	{
	return dateFormatter.format(labelValue.toDateString());
	}

	private function date_changeHandler(event:CalendarLayoutChangeEvent):void
	{
	// A new date is being entered, clear saved label
	lbl.text = '';
	}

	]]>
	</fx:Script>

	<fx:Declarations>
	<s:ArrayCollection id="runsAC"/>
	<mx:DateFormatter id="timeFormatter" formatString="NN:SS" />
	<mx:DateFormatter id="dateFormatter" formatString="YYYY-MM-DD"/>
	</fx:Declarations>

	<s:layout>
	<s:VerticalLayout gap="8" paddingLeft="50" paddingTop="10" paddingRight="20" paddingBottom="20" horizontalAlign="left"
	verticalAlign="middle"/>
	</s:layout>

	<mx:TabNavigator width="100%" height="100%" fontSize="26" backgroundColor="0x000000" color="0x323232" change="tabChangeHandler(event)">
	<s:NavigatorContent label="Miles" width="100%" height="100%" backgroundColor="0x000000" color="0xFFFFFF">
	<s:layout>
	<s:VerticalLayout gap="8" paddingTop="8" paddingLeft="8" paddingRight="8" paddingBottom="8"/>
	</s:layout>

	<s:HGroup horizontalAlign="center" verticalAlign="middle">
	<s:Label text="Date:" fontSize="26"/>
	<mx:DateField id="date" color="0x000000" showToday="true" selectedDate="{new Date()}" change="date_changeHandler(event)"/>
	</s:HGroup>

	<s:HGroup horizontalAlign="center" verticalAlign="middle">
	<s:Label text="Miles:" fontSize="26"/>
	<s:TextInput id="numMiles" fontSize="26" color="0x000000" widthInChars="3" restrict="0-9." text="0"/>
	<mx:Spacer width="25"/>
	<mx:Image source="@Embed(source='assets/runner3.jpg')" width="100" height="100"/>
	</s:HGroup>

	<s:VGroup horizontalAlign="center" verticalAlign="middle" gap="15">
	<s:HGroup horizontalAlign="center" verticalAlign="middle" paddingTop="8">
	<s:VGroup >
	<s:Label text="Hours" fontSize="18"/>
	<s:NumericStepper id="hrsVal" maximum="99" maxChars="2" fontSize="26"
	skinClass="com.devgirl.runtracker.skins.MyNumericStepperSkin"/>
	</s:VGroup>
	<s:VGroup>
	<s:Label text="Mins" fontSize="18"/>
	<s:NumericStepper id="minsVal" maxChars="2" maximum="59" fontSize="26"
	skinClass="com.devgirl.runtracker.skins.MyNumericStepperSkin"/>
	</s:VGroup>
	<s:VGroup>
	<s:Label text="Secs" fontSize="18"/>
	<s:NumericStepper id="secsVal" maxChars="2" maximum="59" fontSize="26"
	skinClass="com.devgirl.runtracker.skins.MyNumericStepperSkin"/>
	</s:VGroup>
	</s:HGroup>
	<s:Button id="btnCalc" label="Calculate Pace" fontSize="24" left="200" height="40" click="btnCalc_clickHandler()"
	color="0x000000"/>
	</s:VGroup>

	<s:HGroup horizontalAlign="center" verticalAlign="middle" visible="false" id="grpPace" >
	<s:Label text="Pace:" fontSize="28"/>
	<s:Label id="lblPace" color="0x336699" fontSize="26"/>
	</s:HGroup>

	<s:Label text="Notes:" fontSize="26" color="0xFFFFFF"/>
	<s:TextArea id="notes" width="90%" height="100" fontSize="26" color="0x000000"/>
	<s:Button id="saveBtn" label="Save Run" click="saveBtn_clickHandler(event)" color="0x000000"/>
	<s:Label id="lbl"/>
	</s:NavigatorContent>

	<s:NavigatorContent label="History" height="100%" width="100%" backgroundColor="0x000000">
	<s:layout>
	<s:VerticalLayout gap="8" paddingTop="8" paddingLeft="8" paddingRight="8" paddingBottom="8" horizontalAlign="center"
	verticalAlign="middle"/>
	</s:layout>
	<mx:DataGrid id="dg" width="90%" height="90%" dataProvider="{runsAC}" color="0x000000" fontSize="18">
	<mx:columns>
	<mx:DataGridColumn dataField="runDate" headerText="Date" width="120"/>
	<mx:DataGridColumn dataField="miles" headerText="Miles" width="50"/>
	<mx:DataGridColumn dataField="pace" headerText="Pace" width="60"/>
	<mx:DataGridColumn dataField="notes" headerText="Notes" width="140"/>
	</mx:columns>
	</mx:DataGrid>
	</s:NavigatorContent>

	<s:NavigatorContent label="Trends" color="0xFFFFFF" width="100%" height="100%">
	<s:VGroup>
	<mx:Legend dataProvider="{mychart}"/>
	<mx:LineChart id="mychart" height="100%" width="100%"
	paddingRight="5" paddingLeft="5"
	showDataTips="true" dataTipFunction="dataTipFunction" dataProvider="{runsAC}">

	<mx:horizontalAxis>
	<mx:DateTimeAxis parseFunction="dateFunction" labelFunction="dateLblFunc" dataUnits="days"/>
	</mx:horizontalAxis>

	<mx:verticalAxis>
	<mx:DateTimeAxis baseAtZero="true" parseFunction="paceFunction" labelFunction="paceLblFunc" dataUnits="seconds" />
	</mx:verticalAxis>

	<mx:series>
	<mx:LineSeries xField="runDate" yField="pace" displayName="Pace Trend" sortOnXField="true"/>
	</mx:series>
	</mx:LineChart>
	</s:VGroup>
	</s:NavigatorContent>
	</mx:TabNavigator>

	</s:Application>