Flex 4 Custom Layout

Lately I have been playing a lot with Flex 4. There are so many new great features and I hope to talk about them more in the future. Today I want to talk about layouts and more specifically creating your own custom layouts. Layouts are now separated from the components themselves which not only makes the components lighter but gives us more granular control over our layout. We can control the layout of our application <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:layout> <s:VerticalLayout paddingTop="50" paddingLeft="50"/> </s:layout> </s:Application> Or for a container <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:Group> <s:layout> <s:VerticalLayout paddingTop="50" paddingLeft="50"/> </s:layout> <s:Button label="Button 1"/> <s:Button label="Button 2"/> </s:Group> </s:Application>

When using layouts in Flex 4 you will basically be working with the 4 built in layouts.

• BasicLayout
• HorizontalLayout
• VerticalLayout
• TileLayout

[More]

EntityNew properties argument

This is a going to be a real short post but I think its a great little time saver. In ColdFusion 9.0.1 they added a second argument for the entityNew function. Now you can pass in a structure of properties and the setters will be called when the entity is instantiated. So before we had to write code that looked like this. <cfset user = entityNew("User")> <cfset user.setFirst("Dan")> <cfset user.setLast("Vega")> <cfset user.setSex("M")> And now we can write code that looks like this. user = entityNew("User",{first="Dan",last="Vega",sex="M"});

Hibernate Statistics in ColdFusion

One way to debug Hibernate is to log the generated sql, another way is by enabling live statistics. By default ColdFusion has live statistics disabled and for good reason. This is not something you want running in production and its only meant for development. The easiest way to get statistics out of the Hibernate engine at runtime is the Session Factory. Fortunately for us ColdFusion has exposed this to us by using the ormGetSessionFactory() method.

If you run the following code you will see all of the different statistics methods exposed to you. stats = ormGetSessionFactory().getStatistics(); writeDump(stats);

There are statistics for things like

• Global Statistics
• Entity Statistics for a particular entity
• Collection Statistics for a particular collection role
• Query Statistics for SQL & HQL queries
• Second Level Cache Statistics for detail runtime information about a particular region in the optional second-level cache

Finally we could take this and add some debugging output to application by using the on request end method in our application. The hibernate_stats.cfm could have some output with any or all of the statistics methods. public any function onRequestEnd(){ var stats = ormGetSessionFactory().getStatistics(); stats.setStatisticsEnabled(true); if(stats.isStatisticsEnabled()){ include "hibernate_stats.cfm"; } }

Starting ColdFusion Builder on Windows 7

This is just a quick tip I thought I would pass on. If you are running Windows 7 and launch ColdFusion Builder normal mode you will not be able to start/stop your servers from the servers tab. To use this functionality you will need to run ColdFusion Builder in Administrator mode. To do this I was always right clicking on the shortcut and selecting Run As Administrator. My buddy Todd Sharp pointed out that you can have it always run as administrator. Right click on the shortcut and go to properties. On the compatibility tab at the bottom there is a checkbox to run as administrator.

ColdFusion ORM Naming Strategy

In a perfect world of software development where a database is involved the naming conventions for tables and columns are standard. As you are aware that is not always the case. Sometimes we deal with really long or unconventional naming strategies. Fortunately for us hibernate has a way of dealing with this and ColdFusion, like everything else it does has made this really for us to use.

Let's pretend for our demo here that we are doing some work for ABC Company and that have this weird naming strategy where all of there table names are prefixed with tbl_ and all of their column names are prefixed with col_. tbl_Person col_firstname col_lastname col_email col_dob col_sex I think you get the idea. If we were to create an entity based off of this table we would end up writing code that looked like this. person = new Person(); person.setCol_FirstName("Dan"); person.setCol_LastName("Vega"); person.setCol_Sex("M");

[More]

Flex 4 & Flash Builder 4 Presentation

I am giving a presentation on Flex 4 + Flash Builder 4 to the Cleveland Adobe User Group on Tuesday Aug 17th. Here are the details for the meeting. If you think you can attend I would love to see you come out so please use the link below to register for the event.

The Cleveland Adobe User Group will meet August 17, 2010 at 6:30 p.m. at New Horizons in Garfield Heights. The topic for the evening is an introduction Flex 4 and Flash Builder 4. Our presenter for the evening will be Dan Vega of http://www.danvega.org. Dan is an expert developer, Adobe Community Professional (ACP) and the Co-Manager of Cleveland ColdFusion User Group

In this introduction, we will explore the free and open source Flex 4 framework. We will also take a look at the Flash builder IDE that was built on Eclipse. Armed with these two amazing tools in your tool belt, you will be able to build expressive web applications that deploy consistently on all major browsers, desktops and operating systems.

We will begin the presentation by looking at some of the new features in Flex 4. Along the trip down new feature row, we will look at some of the differences between 3 and 4. We will also look at Flash Builder 4, which will help you rapidly develop cross-platform rich Internet applications. In the end the presentation will be informative, full of code samples and a great introduction to the Flash family of products.

http://www.meetup.com/Cleveland-Adobe-User-Group/calendar/14317142/

Create SQL Insert statements from a spreadsheet

I know this is probably old news to most but I was helping a friend out yesterday who didn't know this little trick so I thought I would share it. While some of you may have access to production databases its pretty common that these servers are guarded by a DBA. If I get a huge spread sheet of data I can't really import the data I need to send the sql statements to the dba and the script is run against the production database.

In this example I just got a spread sheet of 5 users that need to be imported into our users table.



Now for 5 users this is not a big deal but what about 100 or even a 1000 users. There is actually an easy way to create your insert statements using excel. First we will mark our D column as SQL. Next place click on the cell D1. What we are going to do is write a sql statement that will grab data from the columns a,b and c. First we write our normal insert statement but for the values we can evaluate the data in a cell using the following formula. The & is just used for concatenating. ="Insert into Users (userid,first,last) VALUES ("& A2 & ","& B2 &", "& C2 &");"

Then we can use that same formula for every row in our sheet. Simply copy and then past that formula all the way down for as many records as you have and you will end up with something like this.

While this is great you should see the issue. The user id field is fine but we have no single quotes around our strings, but we can fix that using the concatenate function. ="Insert into Users (userid,first,last) VALUES ("& A2 & ","& CONCATENATE("'",B2,"'") &", "& CONCATENATE("'",C2,"'") &");" Now our insert statements look a lot better. Again, not the coolest thing in the world but it really helps out nicely in this spot.

NCDEVCON 2010 Recordings online

I realize this is a bit old but there is a purpose to my madness. While I was at cfunited I was talking with Dan Wilson and I told him what a great job they did with posting the video recordings for NCDEVCON 2010. I really hope more conferences can start taking this approach. I don't remember who else was in the conversation but I remember them not knowing these videos were available so I thought I would share the link with anyone who didn't realize they were out there.

http://tinyurl.com/ncdevcon2010

Showing the details of a grid record

Last week while I was at cfunited I got a comment on an old post that went a little something like this.

You were working on an example to show how to click a row and show details. Is there anywhere I might see this example?

The first thing we need to do is create the basic layout for our app. <!doctype html> <html> <head> <title>Details View</title> <link href="stylesheet.css" rel="stylesheet" type="text/css"> </head> <body> <div id="container"> <div id="grid"> </div> <div id="details"> </div> <div class="clear"> </div> </div> </body> </html> For this example we are going to use the art gallery database that ships with ColdFusion. Here we are creating the query and the grid. What's important to note here that even though we are not displaying all of the records they need to be included in the grid. If we did not the columns would not be stored in the underlying ext data store. <cfquery name="getArtists" datasource="cfartgallery"> SELECT artistId, firstname, lastname, address, city, state, postalcode, email FROM Artists </cfquery> <cfset args = structNew()> <cfset args.name = "ArtistGrid"> <cfset args.format = "html"> <cfset args.query = "getArtists"> <cfset args.selectOnLoad = false> <cfform> <cfgrid attributeCollection="#args#"> <cfgridcolumn name="artistid" display="false"> <cfgridcolumn name="firstname" header="First Name"> <cfgridcolumn name="lastname" header="Last Name"> <cfgridcolumn name="email" display="false"> <cfgridcolumn name="address" display="false"> <cfgridcolumn name="city" display="false"> <cfgridcolumn name="state" display="false"> <cfgridcolumn name="postalcode" display="false"> </cfgrid> </cfform>

Next we will create our details area. <div id="details"> <h2>Artist Details</h2> <p> <label for="artistid">Artist Id:</label> <input type="text" id="artistid" name="artistid" value=""> </p> <p> <label for="firstname">First Name:</label> <input type="text" id="firstname" name="firstname" value=""> </p> <p> <label for="lastname">Last Name:</label> <input type="text" id="lastname" name="lastname" value=""> </p> <p> <label for="lastname">Email:</label> <input type="text" id="email" name="email" value=""> </p> <p> <label for="address">Address:</label> <input type="text" id="address" name="address" value=""> </p> <p> <label for="city">City:</label> <input type="text" id="city" name="city" value=""> </p> <p> <label for="state">State:</label> <input type="text" id="state" name="state" value=""> </p> <p> <label for="postalcode">Postal Code:</label> <input type="text" id="postalcode" name="postalcode" value=""> </p> </div> At the end of all of this code we will use ajaxOnLoad to call a javascript method when the page loads. Basically all we are doing here is getting our grid object and adding a row click event listener to it. When we click on a row we are getting the record from the underlying ext data store. That record basically contains a record object. An easy way to see what the record is made up of is to log it to the console. Finally I just wrote a convenient method for setting the value of the input field. <cfset ajaxOnLoad("init")>

So now we have our layout setup we just need to glue everything together. <script> function init(){ var grid = ColdFusion.Grid.getGridObject('ArtistGrid'); grid.on("rowclick",function(grid,index,e){ var record = grid.getStore().getAt(index).data; setValue('artistid',record.ARTISTID); setValue('firstname',record.FIRSTNAME); setValue('lastname',record.LASTNAME); setValue('email',record.EMAIL); setValue('address',record.ADDRESS); setValue('city',record.CITY); setValue('state',record.STATE); setValue('postalcode',record.POSTALCODE); }); } function setValue(id,value){ Ext.get(id).set({value:value}); } </script>

You can check out a working demo by clicking here.

cfmobile application on riaforge

I decided to make the code available for the cfunited mobile application. I will probably setup svn so I can actually update some of the code but for now I just threw up a zip of what I had on my local machine. First off you will need to download Sencha Touch and then adjust the paths to Sencha in the index.html. There are a bunch of bugs still in the software that I will try and get to when I get home. The code is not the greatest but I whipped it together last second and it works. Also If you want to pass along any notes or feedback on the code I always love hearing that.

http://cfumobile.riaforge.org/