Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Using the DateSpinner component

From: Flex 4.6 and AIR 3.0 New Features for Mobile Apps

Video: Using the DateSpinner component

The DateSpinner component allows us to represent and select a date and time through a custom skin set of SpinnerList controls right out of the box in Flex 4.6. And it's made up of a set of SpinnerList controls that can be used to represent these dates and times. Now the displaymode property controls whether we're selecting the date, the time, or both. Let's explore how to use the DateSpinner component. So again, I'm going to go through and I'm going to build a Flex mobile project. Let's call it DateSpinner.

Using the DateSpinner component

The DateSpinner component allows us to represent and select a date and time through a custom skin set of SpinnerList controls right out of the box in Flex 4.6. And it's made up of a set of SpinnerList controls that can be used to represent these dates and times. Now the displaymode property controls whether we're selecting the date, the time, or both. Let's explore how to use the DateSpinner component. So again, I'm going to go through and I'm going to build a Flex mobile project. Let's call it DateSpinner.

I'm going to use the default Flex SDK. We'll build a Blank application, leave all of the defaults, again, leave all of the defaults, and click Finish, just like so. And then what I'm going to do is inside of the Declarations block, let's build a Radio Button group. So I'm just going to say s:RadioButtonGroup. I'm going to give this an id of rg for radio group, like so. Again, so that's non-visual object, so I'm going to declare it in my Declarations block. And then let's define a layout here.

So I'll just say s:layout, and let's create a VerticalLayout here, and I'll just add again some padding. I'll say, we'll add paddingTop. We'll put in 15 pixels here. I'll say paddingBottom="15" pixels, paddingLeft="15" pixels, and then I'll say paddingRight, again, we'll just be consistent and we'll add that in, and then I'll say let's set up a gap of also 15 pixels there.

We'll set up our horizontalAlign, we'll align that to the center, and then we'll align it vertically to the top. So we'll set that up, and we'll close off our VerticalLayout tag there, close off the layout. And then let's add in a spark label control and inside of that label control, I'll just add in some text, and I'll simply say Select Display Mode, just like so. So there's that. And then I will simply say spark HGroup and then inside of the HGroup there, I'll add in a RadioButton control and I'll say the label of the RadioButton control.

I'll set up a binding, and I'll say label, and I'll say DateSelectorDisplaymode. I'll say DATE_AND_TIME. So this just simply means that we'll show how to link this to the SpinnerList component in just a moment, but give the end user this option here inside of the RadioButton control, and let's link it back to the RadioButton group that we created earlier. So I'll say groupName="rg", and then I'll simply say selected="true." Close that.

And then I'll simply add in another RadioButton, same thing. And I'll say label, and in this case, I'll just simply say label and we'll do the same thing. We'll say DateSelectorDisplaymode. And then we'll simply just say, instead and DATE_AND_TIME, we'll say DATE and then again link that back to my RadioButton group, so they'll have the option to select just the date instead of the date and time.

We'll see how the component will display. And then again, I'll create another RadioButton here and I'll say label, and we'll do the same thing but this time just for the TIME. So I'll say DateSelectorDisplaymode.TIME, and again, link it back to the RadioButton group that we created earlier. So then make sure that those radio buttons are inside of the HGroup. And then after the HGroup, let's create another HGroup. So I'll say s:HGroup. I'll say verticalAlign="middle" there, and then let's create a DateSpinner component in here, and I'll give it an id of, let's call it dt, for date and time.

And then I'll just say displaymode, and these are the display modes that you can set for the DateSpinner component, and those are inside of the radio buttons. So we should just be able to say, if we set up a binding here, we'll just say, set up a binding. I'll save my RadioButton group, and I'll just simply say selectedValue and that should be either DATE_AND_TIME DateSelectormode, DATE or just TIME, depending on what the end user has selected. Close that. And then finally, outside of the HGroup, let's just add in a Label control here.

And I'll say the text property of the label control is equal to dt.selectedDate, just like so. And there is my label control where I have dt.selectedDate. I'll hit Save. So you'll see the errors there. The reason those errors occurred is because we have not imported the classes that we need for the DateSelectorDisplaymode. So if I go and add a script block in here, what I can do is I can say fx:Script right up here and I can simply just say import spark.components.calendarClasses.DateSelectorDisplaymode.

Now as long as you import those classes, when you save it, you should see that that actually eliminates those errors. So now if I go back here and I just simply click on Run Configurations and I set up mobile application and I set this to target my Apple iOS platform, I say on desktop, and I say Apple iPad, let's test this actually on the iPad. Great! So here's what my DateSpinner control would look like with both date and the time selected. And of course, you could see the end user can select the different times.

Now if we just want a date, we can just select that, or if we just want the time, we can select that. So this illustrates the power and the flexibility of the DateSpinner component and how we can set that. So again, don't forget to add those import statements. Now we can also stylize the DateSpinner component by adding a style block and referencing the DateSpinner class. So if I just go here and I say fx:Style and I just simply reference my spark namespace, and then I reference the DateSpinner class, just like so, I can add a custom style in here. So let's try that.

I'll say, for example, accentColor. Oh, I'm feeling creative. Let's see how magenta looks. And then I'll say the color is blue, letterSpacing, let's set that to 5 pixels. And then the textIndent, we'll set that to 5 as well, and then the textDecoration--and of course, all of these are listed in the documentation, but then let's try that for underline.

So I hit Save, and let's see how that styling looks. Okay, so maybe I'm not that creative, but you guys can see that you can apply the styling to the Spinner component by utilizing those CSS classes. Very, very powerful.

Show transcript

This video is part of

Image for Flex 4.6 and AIR 3.0 New Features for Mobile Apps
Flex 4.6 and AIR 3.0 New Features for Mobile Apps

21 video lessons · 4199 viewers

James Talbot
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Flex 4.6 and AIR 3.0 New Features for Mobile Apps.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.