Today, we launched an update of Edge Reflow. We recently took a step back and analyzed some of the problems that our users were facing. We found that it was really tough to use Reflow, at the beginning. Once you overcame some of the learning hurdles, you saw the value of creating responsive designs in this environment. But, honestly, a lot of people were just never passing the initial learning obstacles. In the our current release, we hope that a couple of things will ease learning to use the tool. First, we added a sample project that opens with your initial launch of Edge Reflow.
This sample project allows you to explore the various media query breakpoints at 480px, 768px and 960px by clicking on them. The project uses most of the functionality that Reflow has to offer including background images, different types of positioning (fixed and static), borders, text styles, form elements, linking etc. I think the only thing it doesn’t have is multiple pages. Maybe we’ll add this in a future release.
The project also acts as a place to find new content to help you learn, outside of the software itself. If you view the project in the browser, or preview it, by pressing the TAB key, you will be able to click on external links that go to places like tutorials, issue lists, Twitter and Facebook pages. The links don’t work while you are in “design” mode for your project.
This project will not open the second time you open Reflow, so, if you would like to see it again, go to your Help menu and find “Open Welcome Project”.
While working on a responsive design in Reflow. You may find yourself styling an element while you are in one of your breakpoints. For example, you may have added a background color and image to a box while in your 350px breakpoint like this:
However, you actually want all of these styles on the default breakpoint. To push these styles to the default breakpoint, hover over the right edge of each style. You should see a button show up looking like this: . Pushing this button next to a style will push that region specific style to all breakpoints.
Some things are not obvious in Edge Reflow. I’ve always found that modifying breakpoints that you have created is one of those things. By default, Reflow using max media queries. If you want to change your project to use min media queries, do the following:
1. At the very top right of the application long press on the down arrow (to the right of the plus symbol).
This will bring up the orientation dialog.
Here, you can change your project to use min media queries, update breakpoint labels or change the value of each breakpoint.
Simple… but, honestly, hard to find.
Kids spend most of their awake hours just playing. This helps them to understand the world and figure out how things work. In fact, here is a picture of my son playing with paint and learning about colors.
With Edge Reflow’s latest public release, we are giving you the opportunity to play, learn, and use an emerging css feature, CSS Regions. CSS Regions will allow your content to flow through different containers on your web site. This enables you to build more magazine style layouts. As of this month, CSS regions are supported in Safari in iOS7. You can also view CSS Regions in Chrome by enabling the experimental WebKit features flag.
Edge Reflow is the first tool that will allow you to see CSS regions in action without writing any code. Then, after drawing a few regions, you can view the HTML/CSS output to see how the magic happened.
Let’s get started. The first thing you will need is Edge Reflow CC which you can download from here.
I will take you through a simple CSS region example and I hope you will continue to play with the feature and use it in the future.
Step #1: Turn on CSS Regions support in Reflow by going to the menu item View -> Shiny Web Features
This will bring up a dialog box describing some new CSS features including CSS filters and regions which are not supported in all browsers. You will need to ensure that CSS Regions is on. Press OK and dismiss the dialog.
Step #2: Draw a text element on the canvas. Copy and Paste a lot of text in it. I’ve copied my text from “The Atlantic” which always promises a good, but, long read.
Step #3: Right-click on the text element and choose the menu item “Create Region Container”.
Step #4 In the flow container, look for the + icon on the bottom right. Click on this and then draw out other flow containers.
Play with resizing the various containers and notice that all of your text content will flow from one of these containers to another. Also play with the size of your canvas by dragging the canvas handle right and left.
Note, when the + icon is red, this means that there is more content overflowing the current container.
Step #5: Edit your content.
If you want to edit the original content that you are having flow through the various flow containers, double click on any of the containers. From this “content editing mode”, you can add images, more text, add boxes, and change styles as you sit fit. All of the content will flow through the containers that your drew previous.
Step #6: Exit content editing mode by clicking on the left arrow in the status bar. (or press ESC, or double click on the checkered portion of the editing area)
Step #7: See the CSS code written out for the container that you drew.
To do this, ensure that the container is selected. Then, click the <> icon in the bottom status bar.
Step #8 Preview in Chrome or Safari.
From Reflow, you can preview your design in the browser. This can be done from the View menu. If you don’t have the correct version of Safari or Chrome, you will get a warning.
Step #9 View all the HTML and CSS code.
In step #8, you viewed the design in the browser, so, there must be HTML and CSS, right? Of course there is. You can find the CSS and HTML that Edge Reflow creates for your design inside the assets directory of your project.
Regions have the opportunity to really change the way web sites lay out their content. What I’ve built above is not beautiful, but, its just a sample of how your content can flow through any part of your page you choose.
To download the simple Reflow project I talked about above, you can find it here.
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.
Coming from Flex 3, if I wanted to set the size of my DataGrid columns to ensure that all of my data was displayed correctly, I would either set column widths with explicit values or percentages. In Flex 4, explicit width columns is no longer the recommended way of figuring out the size of columns according to Spark DataGrid’s architect Hans Muller who schooled me when I mentioned the need to fix a bug that involved explicit width columns.
By default, a DataGrid will use the first item in its dataProvider to determine the size of each column. This may not be what you want. If you specify a typicalItem on the DataGrid, the columns will be large enough to fit this item. This item does not need to be a part of your dataProvider.
Specifying explicit column widths can be problematic because the width can be invalidated by a host of factors: implicit renderer changes, e.g. due to inherited styles, explicit renderer changes, margin/padding and other layout configuration changes, as well as text and text format localizations. For all of these reasons, using the typicalItem is better.
In the following example, I have two DataGrids with the same data and columns. The first one specifies a typicalItem where the data includes the longest strings that I want to display in my columns. The second DataGrid uses no typicalItem and therefore sizes its columns using the first item of the dataProvider.
Sample application: TypicalItem_DataGrid_Example.swf
Sample MXML: TypicalItem_DataGrid_Example.mxml
If you change your typicalItem, you will need to call invalidateTypicalItem() notifying the DataGrid of this change.
Note, almost all of this information was compiled from picking the brain of Hans Muller, I hope I’ve accurately represented his thinking.
Today, we just posted a new stable build of the Flex 4.5 SDK on our opensource site. This is build 19786 and it includes a lot of improvements in our Spark DataGrid from the last stable build from November. Since the APIs for the DataGrid will likely not change between now and our release, I thought I’d start posting some simple DataGrid tutorials.
First up, this example shows how to use a CheckBox as an itemRenderer in a Spark DataGrid. Coming from Flex 3, you will notice that the syntax for the Spark DataGrid is slightly different.
Sample Code: DataGrid_CheckBoxExample.mxml
Run Sample: DataGrid_CheckBoxExample.swf
Adobe MAX was last week and you may still be glowing from the scores of information that you absorbed (not to mention the free phone and Google TV!). But, maybe you didn’t get to go to MAX and you still want to get your RIA building skills a little boost or you just can’t get enough of the conference excitement. Well… RIA Unleashed is coming to Boston, very soon. It is a two day conference in Boston on November 11 and 12.
The focus of the conference is AIR, Flex, Coldfusion and Flash. Registration is currently just $200 for both days–that includes the hands-on training, conference day, the Thursday night party, and lunch on both days. You can also just attend the conference day sessions for only $75.
Here are a few more details about each day:
“Day one is devoted to your choice of hands-on training in areas such as Flex, Flash, AIR, AIR for Android, and ColdFusion. Some highlights of day one include Scott Janousek covering AIR for Android, Mike Labriola teaching component development in Flex 4, and Bob Silverberg on ColdFusion 9 ORM.
Day 2 is the conference day, featuring 4 tracks and over 20 sessions on Adobe technologies and development. This is the best event to get all the scoop on the announcements and releases from Adobe MAX. Speakers from Adobe include Ryan Stewart, Adam Lehman, James Ward, Greg Wilson, Christophe Coenraets, and Terrence Ryan. RIA Unleashed also features some of the most well known and respected members of the Flash, Flex, and ColdFusion developer communities including Jesse Warden, Jesse Freeman, Raymond Camden, Charles Schulze, Brian Diette, Jeff Tapper, and Chuck Freedman among others.”
By the way, I was not at MAX this year and I won’t be at RIA Unleashed, but, I truly believe conferences are fantastic ways to meet people trying to solve the same problems as you. While you are having fun, I’ll go back to my cubicle where we are trying to push out these “Hero” features. Lastly, thanks to Brian Rinaldi for providing me with all this information. Cheers!
Adobe finally did the upgrade to JIRA 4. Because we had so many customizations and teams using the same bug database, this upgrade took us a while. However, as of today, our instance of JIRA is now JIRA 4.
I have to say, the performance seems a lot faster. I hope you have the same experience!