Aug
29
2008
Flex: Making Scaled Images Look Better
0 comments - Posted by David Freerksen at 9:55 AM - Categories: Technical Articles | Adobe AIR | Adobe Flex
0 comments - Posted by David Freerksen at 9:55 AM - Categories: Technical Articles | Adobe AIR | Adobe Flex
Anyone who has built forms in Flex knows the frustration of trying to build a good experience with validation using the default Flex components. Validation is not tied to the field, validation messages only show up when you mouseover the invalid fields and when you want to process the form you essentially have to revalidate all of the data, unless you've written custom methods to handle all of your validation. I've spent a couple of days working through this and I was frustrated, to say the least. I sat down with the rest of the team and said "Hey, how can we make this easier?"
What we came up with was the ValidatingTextInput. True, the first draft we are offering here is a bit rough around the edges, but it works! I am planning to add data binding and other critical features soon, so this is an "alpha" version. Let me show you how simple this is:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:ui="net.sanative.ui.*"
layout="vertical"
width="100%" height="100%"
paddingBottom="9" paddingLeft="9" paddingTop="9" paddingRight="9"
creationComplete="init()">
<mx:Style source="/assets/styles.css"/>
<mx:Script>
<![CDATA[
import mx.validators.EmailValidator;
import mx.validators.StringValidator;
[Bindable]
private var emailValidator:EmailValidator = new EmailValidator();
[Bindable]
private var noBlanksValidator:StringValidator = new StringValidator();
private function init():void
{
noBlanksValidator.required = true;
}
]]>
</mx:Script>
<mx:Form>
<ui:ValidatingTextInput id="ti_FirstName"
label="First Name"
validator="{noBlanksValidator}"
toolTipStyleName="errorTip"
plainTextError="is a required field."/>
<ui:ValidatingTextInput id="ti_Email"
label="Email"
validator="{emailValidator}"
toolTipStyleName="errorTip"
plainTextError="must be a valid email address."/>
</mx:Form>
</mx:Application>
You will notice the ValidatingTextField accepts a few parameters: label, validator, tooltipStyleName and plainTextError. I will describe each of these briefly:
label: This is the text to display the name of the field to the user
validator: this attribute accepts any validator and will check the data in the field against the validator you pass it. Just configure your validator and pass it to the component, it's that simple.
toolTipStyleName: The name of a CSS class to pass to the component for styling the look of the tooltips
plainTextError: This attribute is combined with the label attribute to make up the full text of the tooltip.
We display the tooltip on focusOut so that the user does not have to mouse over the field to determine what the problem is. Additionally, the component has a property named isValid available to you. This property allows you to simply check the value to determine if the field is valid or not, making it much easier to determine if your entire form is ready for processing. Instead of rerunning all your validation again, simply check to ensure all the fields you want to validate have a isValid value of true!
Here's the demo:
There are a ton of possibilities for this component and we also plan on expanding it to other components such as the ComboBox, List, etc. If you have any suggestions, let us know!
Many of the ideas we implemented came from Aral Balkan and his readers, so thanks guys! If you would like the source, right click the example and "View Source".
0 comments - Posted by TJ Downes at 7:52 PM - Categories: Technical Articles | Adobe AIR | Adobe Flex
The other day I was working on an event management for a client. It's a very basic app: a few different "views" to handle the administration of the application. Each view was built using a custom component. I was refactoring code and adding enhancements when I noticed something interesting in all of them. Every component had a reference to the parent application and was calling methods directly. This immediately fired off some big warnings in my mind. What happens if we want to use the component in a different application or the parent application changes? Then we would need to go in and modify every component to be able to work with the parent application. With a larger application this can be time-consuming and expensive to do.
1 comments - Posted by Jeff Anderson at 5:00 PM - Categories: Technical Articles | Adobe Flex
Over the past two months we have been busy collaborating with Cardinal Communications to develop a new conference center search utility for the International Association of Conference Centers. The previous tool utilized image maps in conjunction with JavaScript menus to guide the user to various pages to find the conferences centers they wished to research.
The objective of the new application was to provide an easy way locate a conference center in an intuitive interface that also allowed filtering based upon regions and keywords. Cardinal Communications provided the project management, design and backend database interaction (in addition to the new website and design!). Sanative worked with Cardinal to develop the Flex application, utilizing Google Maps API, which provided a fast an effective way to quickly locate and view details of conference centers without the need for page loads.
One of the significant challenges in developing the solution was loading and displaying over 280 properties in a single interface and still making these properties easy to find. The use of the filtering functions allows the user to filter data in real time according to their needs. Since the data is loaded into the application at initial load, there are no wait times to load the desired properties.
The application also provides the client with the capability to create new content tabs within the Flex application using their content management tools. Delivery of images or Flash content can be pushed to these tabs to highlight information on the website in a flexible and user-friendly manner.
The Flex application interfaces with ColdFusion and Microsoft SQL Server to provide a robust and scalable backend that will be utilized to enhance the application in months to come. The client has already realized the power of the solution and is excited to begin working on Phase 2. We will tell you about that in coming months!
0 comments - Posted by TJ Downes at 5:04 PM - Categories: Site Launches | Cool Stuff | Adobe Flex | Adobe ColdFusion
Recently we moved our Subversion system to VisualSVN Server. The primary purpose for doing this was to provide easier maintenance of our SVN repositories. So far we are really liking the system and the ability to easily manage our version control.
Using Trac was is also a requirement for us. It is a valuable tool for us in managing bugs, issues and tasks. The folks at VisualSVN have made this integration easy with a tutorial and easy install package you can find here. In all, it took about an hour to setup and configure VisualSVN Server with Trac. Moving our repository to VisualSVN Server proved a bit more work. Since we had a single repository for all of our projects we decided that in the process we would also split our repository into a seperate repository for each client. This would allow us to archive more easily, as well as provide a seperate Trac for each client we work with. I followed the instructions on the 2 Tablespoons blog which made the entire thing a simple process, albeit a bit time consuming. If you are doing this on Windows platform keep in mind that the "cat" command can be replaced with "type".
Lastly, and the reason for this post, is we wanted to get Mylyn up and running in our environment. Mylyn is a great plugin for Eclipse that allows you to manage tasks in Trac via your Eclipse IDE. I did a fair bit of research on the tool and found a lot of good feedback, and something we needed desperately in our shop. Unfortunately, it's not as easy to get up and running on VisualSVN Server for a couple of reasons:
Mylyn does not work with Trac 0.11 out of the box. You need to add the XMLRPC components. Stephen Moretti provides a great blog post on how to get around this on his blog.
Due to the way VisualSVN Server is setup, the above method did not work very well. I received errors from the easy_install process and could not continue. Not to be discouraged, I searched around for an easier method. After a bit of toying around, I realized Trac has a built-in plugin instaler in the admin. All it requires is a Python egg to be uploaded and it handles the rest!
You can find out more about the XMLRPC plugin on the Trac Plugin site. I simply downloaded the zipped source and unzipped it on the server. From there, I followed the instructions on the page for installation, which creates an egg:
# python setup.py bdist_egg
# cp dist/*.egg C:\directory\you\copied\XMLRCP\source\to
Once this is complete, you will find a file named TracXMLRPC-1.0.0-py2.5.egg in your {source directory}\trunk\dist folder (where you unzipped the source of the xmlrpc plugin).
Log into Trac, navigate to the admin page, choose the Plugins link and use the Install Plugin form to upload the egg you created. Once the file has uploaded and installed you will now see a plugin in your list named tracxmlrpc 1.0.0. Expand this plugin and check off the following:
Restart VisualSVN Server and you should be good to go!
In the past few days of using Mylyn we have found a much higher level of productivity and we are also finding it much easier to distinguish what change orders are. We have given a couple of our more technical clients direct access to Trac to enter issues into the system and they love it. If you're not using SVN/Trac/Mylyn I definitely recommend spending the time to get setup and learn it. The payoffs are well worth it.
0 comments - Posted by TJ Downes at 5:39 PM - Categories: Technical Articles | Cool Stuff