Flex Date and Time (datetime) Picker Control
I saw one of these at some point, but couldn't find it when I needed it again. Pretty simple, the control has a property called selectedDate that returns a date object represented by the selected date and time. You can also feed it a Date and it will adjust to that. It is on a 12 hour clock. It dispatches a change event (Event.CHANGE) as a new date/time is selected.
There is an Inspectable property called minuteIncrement to adjust the increment on the minute stepper. I couldn't figure out how to have double digits on the 0-9 minutes. If anybody knows how I might achieve that, please let me know.
Django Authorization from Flex/AIR via PyAMF
Django views serve nicely as service end-points for Flex applications. Here are some notes on maintaining authenticated sessions between a Flex/Air/Flash application and your Django backend.
gateway.py
1 2 3 4 5 6 7 8 | from pyamf.remoting.gateway.django import DjangoGateway import myproject.myapp.views as views gw = DjangoGateway({ 'login' : views.login_user, 'logout' : views.logout_user, }) |
views.py
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | import pyamf from django.contrib import auth from django.contrib.auth import authenticate, login, logout from django.contrib.auth.decorators import login_required from django.contrib.auth.models import User try: pyamf.register_class( User, 'django.contrib.auth.models.User') except ValueError: print "Classes already registered" def logout_user(http_request): logout(http_request) def login_user(http_request, username, password): user = authenticate(username=username, password=password) if user is not None: login(http_request, user) return user return None @login_required def registered_user_protected_function(http_request): return "You are a registered user." @login_required def staff_protected_function(http_request): if http_request.user.is_staff != True: return None return "You are staff." |
from flex
1 2 3 4 | var netConnection:NetConnection = new NetConnection(); netConnection.connect("http://mysite.com/gateway"); var responder:Responder = new Responder(loginResult, handleFault); netConnection.call("login", responder, "username", "password") |
The http_request carries a reference to the currently authenticated user throughout the session. This works for web based Flex application as well as AIR applications on the desktop. Note that I am using a try/except on the pyamf class registration calls. Because this is session based, the classes only need to be registered once. Without the trap, it throws a TypeError letting you know the registration has already taken place.
Django User Authentication Documentation
All of the various things you can do with authentication in Django. It is, of course, based mostly on the use of the very nice Django HTML template system. While those bits aren't handy to the likes of us, it is a good read either way.
pyAMF ByteArray example
This example shows the basic structure for setting up Django/Flex communication. It doesn't cover authentication, but covers a good bit of territory with examples in Flash and Flex.
Complete Flex 3 CSS Style Properties List
I was looking for a list of properties for modal window styles and stumbled across this:
SuperPanelPlus: Resizable Flex Panel Component with Accessible Styling
The SuperPanel is an excellent component created by Wietse Veenstra. The styling is all hard-coded, and I need to be able to change this. It also hard-codes the event that is triggered on close, and I wanted to be able to control this. So I added the appropriate meta-tags and properties to enable these options. Here is the result, link to the source is at the bottom:
Updated: Continuous scrolling image thumbnail and slideshow component for Flex.
I've updated this component to allow for keyboard and forward/back navigation. I'm still improving it, refactoring, but it is almost finished.
Here is the original post.
Continuous scrolling image thumbnail and slideshow component for Flex.
I've been working on improvements for this thumbnail/slideshow component. The way the continuous scroll flows is very nice. It provides a very fluid feel. I have it reading XML from SlideShowPro director. SSPD simply gives a structure of albums and images, so the component should work from essentially any XML source as long as it follows the same schema:
1 2 3 4 5 6 | <gallery> <album id="0" description="DESCRIPTION" title="TITLE" tn="PATH" lgpath="PATH" tnpath="PATH"> <img src="FILENAME" /> ... </album> </gallery> |
There is still a good bit of work to do. Right now the slideshow is coupled with the thumbnail container. I think that should be seperated, because I can see various uses for thumbnails outside of a slideshow. It needs style and event metadata so that it will function as a proper Flex component. I am also going to roll it into mediated PureMVC components for inclusion in VE:Session.
Continuous scrolling image thumbnail component for Flex.
Here is the beginnings of a full featured open-source continuous scroll thumbnail component for Flex. It is rough right now, but I plan to polish it and make it something useful. This format is really appealing, as it gives the user a seamless view of a gallery, without any jumps or aggravating scroll bars. Up until now I have been using H and V Lists in flex for my thumbnailing, but they are ugly and don't provide as rich of an experience.
The Scroll Panel from AFComponents was my first choice. It is a very nice component, well priced, and would be just what I need, if not for the fact that my project is open-source and using a commercial component sorta kills the whole thing. After scouring the internet I finally stumbled upon the work Peter Wright has put in on a perpetual scrolling list.
I've modified it to accept an XML list of image objects, as well as perform horizontally. It is also functioning as a slideshow, and I want to allow it to go either H or V depending on the need. It should shape up to be a nice reusable component. Much thanks to Peter for supplying the code to get me started.
Using the Senocular AS3 TransformTool in Flex
Hey,I am so interested about that you had ever used the ‘TransformTool’ library in your Flex project. But there is little examples showing how to use it in flex, Would you please share some example about how to use ‘TransformTool’ in Flex? I have tried as such a way:
but it failed at line
canvas.addChild(defaultTool);
Can you give any hints? Thanks.
Like most pure AS3 display classes, the TransformTool needs to be added to a UIComponent wrapper to function properly in Flex.
Flex component transformation with ObjectHandles
Rogue Development's ObjectHandles is a great component. It is simple to use and provides all of the functionality that I was looking for in a transformation modifier. Prior to implementing this, I was using the TransformTool from senocular.com's library. This is also a great utility, but it wants to scale my content, and that was a deal breaker in my current project. ObjectHandles does NOT resize the child components. There are use cases for both approaches, but ObjectHandles allows me to decide when to scale.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <?xml version="1.0" encoding="utf-8"?> <objectHandles xmlns="com.roguedevelopment.objecthandles.*" xmlns:mx="http://www.adobe.com/2006/mxml" allowRotate="false" objectMovedEvent="objectUpdatedHandler( event )" width="{image.width}" height="{image.height}" > <mx:Script> <![CDATA[ import com.roguedevelopment.objecthandles.ObjectHandlesMouseCursors; public static const CHANGE:String = "imageBoxChanged"; private function objectUpdatedHandler( event:Event ):void { dispatchEvent( new Event( CHANGE, true ) ); } ]]> </mx:Script> <mx:Image id="image" source="@Embed(source='/assets/cower.png')" /> </objectHandles> |
Accessing a List from its itemRenderer
This was really throwing me off tonight. I could not figure out how to get at the List from its itemRenderer. this.parent... no this.owner... no
So I started The Search™, trying to hunt down The Answer™. This is one of those things that doesn't just jump out of the manual at you. Luckily, Peter Ent is running an extremely informative series on itemRenders. He says to get at the List, we need to simply access the listData property. But there's a catch:
Most controls such as Text, Label, Button, CheckBox, and so forth, implement IDropInListItemRenderer. Most containers, such as HBox, Canvas, etc. do not implement that interface. If you want to use listData in an itemRenderer that extends a Container you will have to implement IDropInListItemRenderer yourself - I'll cover that in the next article.
Luckily for us, it is a simple process:
1 | <mx:hbox xmlns:mx="http://www.adobe.com/2006/mxml" implements="mx.controls.listClasses.IDropInListItemRenderer"></mx:hbox> |
We will need to implement the appropriate methods in the itemRenderer's Script tag also:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | import mx.controls.listClasses.BaseListData; private var _listData:BaseListData; private var list:List; public function get listData() : BaseListData { return _listData; } public function set listData( value:BaseListData ) : void { _listData = value; list = listData.owner as List list.addEventListener( ListEvent.CHANGE, onListChange, false, 0, true ) } |
In my case, I wanted to listen for changes so that I could set one of the itemRenderer sub-component's properties whenever the list had changed. Now to access the List:
if ( list.selectedItem == data ) doSomeStuff();
Easy as that.
