Get To Know Adobe Edge Reflow, A Tool For Responsive Designs
We are live! For the past six months I’ve been working on a new product from Adobe’s “Edge” family. This week, my product, Reflow is having its first public preview. Reflow began development less than a year ago, so, this is certainly not a finished product. We are hoping to put it out to the public with frequent updates and get people’s opinions on how the tool can be useful to you.
If you want to check out some intro videos, go here.
Hopefully, you already know a bit about Reflow and just want to know how to get started. Here is a screenshot of what you see when you start up the tool and a description of the various controls available to you.
1) Tools: Reflow offers the selection tool, box, text and image. Click on the box, text or image to add one of these elements to your design in a way similar to Photoshop. You can also your shorts V (selection), M (box), T (text), or I (image) to get into these modes.
2) Properties Panel: This section of Reflow gives you two tabs:Layout and Styling. You should be able to edit any css on a selected item from these panels. The styles available in these panels will change depending on what you have selected. If you have the main “Container” selected, you will see options to edit your Grid in the “Layout” tab.
3) Regions and Ruler: The top of the application will show you a ruler and your regions/breakpoints (if you have added some to your project). To add a breakpoint, you can either double click on a part of the ruler or click on the + button at the far right-top of Reflow.
4) Add/Remove/Edit button: You can add a breakpoint by clicking the + icon. If you have a breakpoint marker selected, the + symbol will turn into a -. If the – symbol is displayed, you can click on it to delete a region. Mousing down on the +/- button for a few seconds will bring up an orientation panel where you can change from using max to min regions, edit your regions, or delete them. Reflow uses max media queries, by default.
5) This mobile device icon will allow you to view your Reflow designs in Edge Inspect. Click on it and follow directions to view your designs live on your device using Edge Inspect.
6) Elements Panel: The icon at the bottom left of the status bar will bring up the “elements panel” in Reflow showing you all the box, text and image items in your project. You can select elements from here and choose to hide/view them. At this time, you cannot re-order elements in the DOM form this panel.
7) Status Bar: When an item is selected, it will show up in the status bar along with all of its parents. You can select items using the status bar. You can also group and un-group boxes using the status bar.
8) CSS Output: Select an element on the canvas, then click on the “<>” icon in the status bar to see all the CSS (for every media query) for that element. The CSS can be copied by clicking on the clipboard icon in a particular region or the clipboard icon at the bottom left of the panel to copy all CSS for the region.
9) Align and Match Size Panel: When you have more than one element on the canvas selected, this icon will be enabled. By clicking it, you will see an align panel to align elements to the right, left, center, middle, top or bottom. You can also “match size” elements by width, height or both.
10) Zoom Indicator: This dropdown on the bottom right of the application will zoom in or out of the canvas.
Updating My Flash Player Causes A Green Bar For Videos!
An update to the Flash Player, version, 11.2.202.228 just shipped a short time ago and when it did, it introduced a nasty bug on my Windows laptop. Exhibit A:
All videos on Hulu, YouTube, ESPN etc seemed to have this green bar. I found that this problem only occured with Flash Player 11.2 and it also only happened when my laptop was not plugged into its power supply. I tried various resolutions on my laptop and none of them seemed to matter. The only factors were:
1) I was using Flash Player 11.2.202.228
2) My laptop was not plugged into a power source
3) I ran 320p or 720p video. 240p and 480p video did not reproduce the problem.
I have a Lenovo W510 laptop with an NVIDIA Quadro FX 880M graphics card.
Per the recommendation of the Flash Runtime video team, the way to fix this problem is to download and install the latest drivers . This problem had been reported before and the Flash Runtime explained that this was a driver issue, not Flash issue. At the time, my driver version was 4/17/2011, 8.17.12.6824.
Here is the first thing to try:
1) Go to your Device Manager. Control Panel -> Device Manager
2) Double click on “Display adapters”
3) Right click on your graphics card and select “Properties”
4) Select the “Driver” tab
5) Click on the button to “Update Driver…”
6) Select “Search automatically for updated driver software”
7) If you got a newer driver installed, you will need to reboot Windows to see if your problem is fixed.
Now, this method of updating my driver did not work for me. Windows came back telling me that I had the latest driver, so, no new drivers were installed. If you get the same response from your system, my next recommendation would be to go to the NVIDIA website to check for drivers.
From the NVIDIA website, select your graphics card and download the driver. I found a newer driver on the NVIDIA site. After downloading it, I was able to run the exe file and complete the installation of the driver.
After rebooting my system, the dreaded green bar was gone.
My new driver information is:
Driver Date: 3/22/2012
Driver Version: 817.12.9635
Now, if you are not seeing this issue on a system that does not use an NVIDIA driver, please leave a comment below. We have only gotten reports that NVIDIA drivers have caused issues, but, maybe the problelm is more widespread.
Also, on some forums, it seems that Linux users are having troubles solving this issue. Sorry, I don’t have information to help Linux users at this time.
If updating a driver doesn’t work, many people have just turned off hardware acceleration and that should work too.
Goodbye to Flex
Today is officially my last day on the Flex SDK team. I have been testing the SDK for over six years. I started on the team when Flex was just finishing up its 1.5 release. Look how far its come! I am not leaving Adobe, however. I am simply switching roles to become a quality engineering manager on the Flash Player team. I thought it was time to try my hand at something a little new. I look forward to the new people and challenges.
I have always been a huge proponent of community feedback on the team and as my last gift to customers, I just finished sending off “Flex Community Hero” mugs to all of the customers who filed a bug and had it fixed in our last Flex 4.5 release. If you filed and SDK bug that was fixed, you probably even got a handwritten letter from our QA team. These contributions from the community are really appreciated.
For now, this blog will likely be pretty quiet with relation to Flex content.
Getting scrolling right in a mobile horizontal list
With the release of Flex 4.5, you can now use Flex to build mobile applications. One of the features added to the Spark List to support mobile was the addition of bounce/pull effects at the beginning and end of a list. You can see this behavior by pulling down on the top of a list or up on the bottom of the list. When you do this, you will get a ‘bounce’ effect from the List’s boundaries.
In the majority of applications, you will choose to use a vertical list. However, occasionally, you may want to use a horizontal list. If you do this, you will get some strange default behavior with regards to scrolling in your horizontal list. In the horizontal direction, scrolling will work as expected. However, in the vertical direction, where there should be no scrolling, you will actual be able to pull up and pull down on the top and bottom boundaries. This is because the bounce and pull effects are actually still on in the vertical direction. To get the expected scrolling behavior for a horizontal list, you will want to turn verticalScrollPolicy=”off” on the List.
<s:List id=”colorList” dataProvider=”{colorsArray}” width=”100%” itemRenderer=”ColorRenderer”
y=”40″ selectedIndex=”0″ verticalScrollPolicy=”off”>
<s:layout>
<s:HorizontalLayout />
</s:layout>
</s:List>
For more information on this, you can check out bug: SDK-28980
Here is an example mobile project that uses a horizontal list of colors to select a frame for an image.
Source: ColorFun.fxp
Flash Camp focused on mobile development this Saturday in SF
Flash Camp is happening in the Adobe SF office this Saturday, April 30. Sign up here.
Adobe Flash Camp is a full day event with sessions and a hands-on coding session that will get you up and running and creating mobile application for Android, iOS, and PlayBook with Adobe’s tools.
Details:
Who: Developers who want to build mobile applications for Android, iOS, and the BlackBerry PlayBook. We’re serving beer, so you must be at least 21 years old to attend!
What: Flash Camp – a morning of sessions and an afternoon of hands on coding. Flex and Flash Builder product team members will be on hands to provide answers to questions. Prizes will be given away for the best mobile applications.
When: Saturday, April 30th, 2010. 9 AM PST – 6:00 PM PST
Where: Adobe San Francisco Office. 601 Townsend St, San Francisco, CA 94103
Why: Three words : code + good beer
How Much: Free and open to the public (limited space and registration required).
What to Bring: Yourself, laptop, ideas for a mobile application. We will provide the beer, lunch, coffee, and snacks.
Agenda (tentative)
10:00 – 10:30 – Keynote
10:30 – 11:00 – Building Mobile Applications: Hands on with Flash Builder and Flex 4.5
11:00 – 11:30 – Customer Showcase
11:30 – 12:00 – Break out sessions
- Flash Builder PHP for Mobile Devices
- Dot Next: Flash Builder and Flex for iOS and the PlayBook
- Designing for Mobile – UX/Tips/Tricks/etc for mobile devices
12:00 – 1:00 – Lunch
1:00 – 5:00 – Hands-on Code Camp
5:00 – 6:00 – Code-Camp Showcase and Prize Giveaway
Using a DateField itemRenderer for a Spark DataGrid
Here is another simple example of using a custom itemRenderer in a Spark DataGrid. In this example, I am using an MX DateField component as an inline itemRenderer.
This DataGrid is also editable. Both columns “In Stock?” and “Availability Date” also have the property rendererIsEditor=”true”. This tells the DataGrid that the component specified as the itemRenderer is also the editor for this column. If you do not specify rendererIsEditor=”true”, then, updating the CheckBox or DateField will not actually affect the data. I am setting the selectedDate on the DateField via 2-way dataBinding:
selectedDate="@{data.availabilityDate}"
Here is the code that defines the column using the DateField itemRenderer:
<s:GridColumn headerText="Availability Date" dataField="availabilityDate"
rendererIsEditable="true">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<mx:DateField selectedDate="@{data.availabilityDate}"
horizontalCenter="0" verticalCenter="0"
width="90%"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
Run the sample: DataGrid_DateFieldExample.swf
Source code: DataGrid_DateFieldExample.mxml
Using a Spark Form with Validators
In this example, I’ve created a very simple registration form using Flex 4.5′s Form component. To validate the form, I am using MX StringValidator and MX EmailValidator. There are no Spark validators available for the fields I have in my form. Validation does not get triggered in this example until you click on the ‘Submit’ button.
By default, the FormItem skin puts the error message to the right of your Form Item. However, this was causing the width of my Form to double. I didn’t want the size of my Form to change significantly, so, I reskinned my FormItem to remove the “indicatorDisplay” and “errorTextDisplay”. Instead, I’ve chosen to show the validation errors for all three fields in a separate Label component that sits at the top of this Form.
In my Style block, I point to this custom FormItem skin:
<fx:Style>
@namespace s “library://ns.adobe.com/flex/spark”;
@namespace mx “library://ns.adobe.com/flex/mx”;
s|FormItem {
skinClass: ClassReference(“FormValidatorItemSkin”)
}
</fx:Style>
Sample SWF: SparkFormValidatorExample.swf
Sample Code: SparkFormValidatorExample.mxml, FormValidatorItemSkin.mxml
Where is drag and drop in the Spark DataGrid?
Before you spend any significant amount of time trying to figure out what APIs are available for enabling drag and drop on the Spark DataGrid, I thought I’d put it out there that it will not be available in the first Hero release of the component. In flash builder, I think you will get code hints for events like dragComplete, dragStart, dragEnter, dragOver, however, you won’t find the properties dragEnabled or dropEnabled.
I believe that the team plans to add drag and drop support in the next big release after Hero, but, features haven’t been set in stone and I certainly can’t promise anything.
For now, if you really need drag and drop in a Spark DataGrid, you are left writing your own. Sorry 
I was disappointed to hear the news too.
