When I first installed Flash Builder 4, it was like coming back to an old friend. Well, that old friend that you had a falling out with and it’s been a while and you don’t really remember why, but you know it was something and you’re still a little annoyed. I say this because this was my exact experience last fall. I was a longtime Eclipse user – easily going on 7 or 8 years – when I tried to upgrade to a newer version of PDT. To make a long story short, I quickly became a Netbeans user.

After my presentations on Flex development using Flash Builder 4 last week, I decided to give Eclipse another shot. Imagine my surprise when once I configured  the update sites, it all just worked! In fact, since that time, I’ve been working on web2project and the web2project-air client almost seamlessly across Windows 7 and Ubunutu 9.10. To make your life easier, here’s the process:

To get started, install Flash Builder 4. Once you’ve completed the installation and registration process, close it, and then restart it by right-clicking and selecting “Run as administrator”. That will let the system make changes to the underlying system like installing plugins. This is basically a “sudo” for the Windows world. And just like “sudo”, you don’t want to run Flash Builder like this normally.

Next, under the Help Menu, go to “Install New Software…” At the time of this writing, Flash Builder 4 is built on Eclipse 3.5.1 called “Galileo“. Click “Add”, fill in an update site name and the update location. For this release of Eclipse, we want to use:

http://download.eclipse.org/releases/galileo/

Finding the proper URL for this step was the hardest part but once you see the pattern, it’s actually quite simple. Even better, the Eclipse group is consistent in their naming, so guessing the URLs for other versions is simple. After you save, Eclipse will automatically check the update site for additional plugins to install. CVS and Subversion are in the “Collaboration” group while PDT is under the “Programming Languages” group. Select it, let Eclipse determine the dependencies, and hit “Next” a few times until it’s ready.

Finally, restart Flash Builder in normal (non-Administrator) mode and you’ll have all the Views and Perspectives from both toolsets available. You can create new PHP projects, import existing ones, and explore all of your projects as you see fit. In fact, if you install SVN or even the EGit plugin, you’ll have complete access to all of your repositories. The most important part is that all of your existing refactoring tools and build scripts will immediately be available to you.

From here, you can get creative. If you want to attach XDebug to Apache to Eclipse to analyze your PHP and use Flash Builder’s Network Monitor to log your applications. With this configuration, you end up getting a full trace of all requests and processes from both the client and server end. While this is powerful, it consumes a ridiculous amount of memory, so be selective in how you apply it.

Disclosure: Through Blue Parabola, LLC, I’m working with Adobe and a number of their tools and technologies to see what I might be able to use where. I’m under no obligation to be positive or negative with respect to any particular product or person.

Well the sessions are over, the goodbye’s said, and the projectors packed back away. Another PHP conference goes into the history books. Looking around the web, I am already beginning to see posts, pictures, and tweets from attendees talking about what they learned and showcasing new friendships. From the looks of it, everyone had a great time, made new friends, and learned something new.

All of us at php|architect want to say thank you to the sponsors, speakers, and attendees for helping make this years TEK·X great.

Help us do better

All attendees should have received an email by now with a link to a survey. Thank you to all of you who have already filled it out. We have read and discussed every comment so far and will do so with any new ones that come in. We appreciate those who give us glowing reports as much as those who show us where we can do better.

For those of you who haven’t filed it out yet, please take 2 minutes and help us make next year’s conference even better.

Thanks again for making this year great, we hope to see you in Chicago again next year.

Google recently released a new microblogging tool called Jarlsberg. Ordinarily, Google’s stuff is software par excellence, but in this case, Jarlsberg, like its namesake cheese, is full of holes—in this case, security holes.

And Google’s done this on purpose.

It’s all part of how Google Labs and Google Code University are educating Web developers on how to make their Web applications more secure. Jarlsberg is much more than a buggy microblogging tool; it’s an entire lesson on what Web developers, no matter their level of security skill, need to look out for when writing code. Google provides developers with the Jarlsberg code, and has a step-by-step walkthrough on security issues present in the system: everything from cross-site scripting (XSS) attacks to client-state manipulation (e.g. elevation of privilege), to denial of service and AJAX vulnerabilities. When going through the walkthrough, you’ll see white or black “cheese” icons, indicating whether you’re putting on your white hat (actually looking at the code in question) or your black one (poking and prodding, experimenting to see what happens) to test the vulnerabilities of Jarlsberg.

The code is written in Python, but for us PHP programmers, it’s not hard to see what’s going on even if you don’t have much familiarity with Python. What’s important, in any event, is the lesson—not the programming language it was written in.

And indeed, the lessons that Jarlsberg teaches are exceedingly important. Many of the issues are cleared up by extending the code just a bit; for example, instead of creating a black list of disallowed HTML tags for posts, it might be better to create a white list to better catch malicious behavior. As my fellow blogger Keith Casey reminded us, less code isn’t always better—and when it comes to security, that notion is quite important.

I highly encourage you to go through the entire walkthrough; it might take you a while to do so, but it’s well-written and, frankly, rather engaging. I have little to no experience in the realm of Web security, and I learned a lot about how simple mistakes can be easily exploited—and this in just the first few pages of the lesson.

After you’ve finished the walkthrough, let us know (in the comments) what you got out of it, and how you’re applying those lessons to your own PHP software projects.

Last year in the thick of web2project development, we realized something obvious: The vast majority of people don’t need the full system, they just need a way to see their information – and just their information – in a useful way. Towards that goal, we started shopping around for options to simplify and an Adobe AIR app quickly became a leading candidate. Fast forward a few months and I finally had the time to try out Flash Builder 4.

For context: Prior to starting this exercise, I had zero experience in Flash, Flex, and everything similar. I’ve caught a few of Ed Finkler’s presentations on RIA but I’m definitely not a desktop developer.

First, getting setup was ridiculously easy. I downloaded the 60 day trial of Flash Builder 4 and registered to get a full license as a user group member. After a quick activation, I was setup on Windows 7 in a matter of minutes. Of course, that’s where the first oddity creeps in. I’ve used Eclipse for 7 years on both Windows XP and Ubuntu but Flash Builder 4 only works on Windows. It seems like they’re missing one of the best parts of Eclipse as a platform. Regardless, getting started on my first project was identical to starting any Eclipse project.

Next, I had to choose where to start. Since we use iCal for broadcasting Task/Todo information, it was the obvious and easiest place to start. I envisioned a simple list of tasks, a textarea to add a comment, and finally a timer to create a complete tasklog. To do this one, I switched into Design Mode and browsed the components. If you’ve ever worked in a visual editor – such as Dreamweaver or with Visual Basic – the options and configuration is pretty much what you’d expect. You get standard components such as TextArea and DateChooser that you’d expect, but you also get a ProgressBar, ColorPicker, and RichEditableText box. While I won’t use them this time around, it opens some options for later.

Of course, this is where I learned a useful little trick. Unlike PHP where you might echo (or print_r) your value, Flex doesn’t work the same way. You can’t just tell it to echo things without errors and other things appearing. Therefore, I added a TextArea named txtJunk and added this:

txtJunk.text += “my debug message \n”;

where I wanted to know what was happening. There are certainly more advanced and efficient ways of debugging but we’ll cover that another time.

Next, before I can log any time against a Task, I need to get the list of Tasks. The Data Connection Wizard – covered in depth by Cal – seemed like the best place to start. I started up the Wizard, selected HTTPService, configured the URL, and everything worked beautifully and everyone lived happily ever after.

No wait, it didn’t.

If you look closely at the HTTPService in the Wizard, you’ll see that it’s specifically for XML or JSON. Since iCal is a glorified text file, it doesn’t fit into either of these and it failed spectacularly. On the positive side, since the Wizard immediately attempts to validate the data returned, I found out pretty quickly. After a few failed trials to do some form of useful validation, I realized the solution was much simpler than I thought. By setting String as the return type, the DCW allows for literally anything to come back. While this worked, I should obviously look into some JSON or XML structure to take advantage of the validation.

Next, I had to do something with this long iCal string. For this, I dropped out of Design Mode and went directly to the source. At first glance the source looked a little odd compared to PHP. The syntax itself is OO and the naming is consistent and mostly predictable, but it’s the little things that make all the difference. ActionScript is strongly typed so at initialization you have to declare a variable’s datatype. At first pass, this seemed excessive and a little annoying to have to match return types, but there is a huge benefit gained as a result: code completion. And this is one of the places Flex Builder shines. Not only does it have the functions themselves but it includes some basic documentation, the return types, and related details that you’d expect. I had forgotten how helpful code completion is when you’re not familiar with the language.

From here, it became a simple matter of parsing the big string into a series of smaller strings. First, I split it into individual event listings, then into the individual lines of information for each event. Coming from a PHP background, it was ridiculously simple. Granted, some of the syntax and specific method names were a little obtuse at first, but code completion got me 95% of the way with almost no effort.

Finally, I had to wire the whole thing together and this is another place where Flex development is completely different than PHP development. Flex doesn’t use the request/response model unless it’s interacting with external sites or services. Instead, Flex – like all desktop development – is event-driven.

It’s a shift to wrap your mind around writing code triggered from and waiting for events as opposed to responding to requests. Even more odd was the sense that I had lost control over the flow of the application. In PHP development, the code executes from top to bottom, so it’s easy to know what has executed previously and what will happen next. In Event-driven Programming, the Events can happen independent of one another. For example, you can type (an event) in your browser’s address bar even while a site is loading (another event). These events come from all over the place, whether its from a user (typing or selecting an element), a Response from a previous Request, a notification from another Event, or a variety of other things. Therefore, your components have to execute (or fire) independent of one another.

That said, the visual editor handles the basics for you. In Design Mode, right-click on any element and you can interact with the relevant handlers for things like creationComplete, click, change, and a select. If you’re familiar with Javascript development, you’ll notice there parallel with onLoad, onClick, onChange, and similar events.

At present, this code doesn’t do much of value but the next phases will be more interesting and complex. I have to work through what to cache locally and since assigned tasks change frequently, it has to be checked frequently. More importantly, for this client to be useful, it should be able to work offline and not require connectivity immediately at startup. Therefore, we’ll need persistent storage like SQLite and a way to synchronize with the central server.

If you’d like to follow the continuing adventures, the entire source will be available here: http://github.com/caseysoftware/web2project-air and I’ll continue documenting the progress in this space.

Disclosure: Through Blue Parabola, LLC, I’m working with Adobe and a number of their tools and technologies to see what I might be able to use where. I’m under no obligation to be positive or negative with respect to any particular product or person.

Friday 15th has been the central part of the phpDay Italian conference, and the most intensive one, in which the international speakers made their long awaited talks (and whose videos are available online).

In the morning, Dustin Whittle from Yahoo! presented YQL, a SQL-derived language that can be used to access hundreds of web services. The Yahoo! platform translates SQL-like queries (such as SELECT, UPDATE and DELETE) into requests, eliminating the need to learn a new API for every different service to integrate in the PHP application. Whittle also talked about the open source platform the teams at Yahoo built, which includes PHP in the front end.

Meanwhile, Daniele Teti explained the process of Continuos Integration for PHP applications in one of the most crowded sessions here at Corropoli. This year’s topic, quality, has influenced the choice of talks which have been widely considered interesting.

Fabien Potencier also gave his talk on Dependency Injection in the last morning session. The symfony project leader built from scratch a Dependency Injection container using PHP 5.3, while at the same time demonstrating anonymous functions and closures. He said he wants to bring PHP to the next level, and he now preaches Dependency Injection as he was pitching the use of frameworks and the adoption of testing in the last years.

The three tracks of the conference are loosely connected, so that talks from different tracks usually do not overlap the same development field (for example Windows-related talks are grouped in the same track every day.) Though, lots of people would have split in two to follow both Fabien Potencier and Dustin Whittle and their absorbing sessions.

About the PHP on Windows track, the Microsoft guys have done a good job in showing how the attitude of their company towards PHP has radically changed. PHP is now seen as an empowering tool instead of a menace to .NET, and Microsoft demonstrates his support for PHP on Windows Server with WinCache (the equivalent of Apc) and the SQL Server driver for PDO. The evangelist of Microsoft Italia Pietro Brambati has also announced the creation of an Italian user group dedicated to support PHP applications on IIS.

One of the most eye-opening talks was held by Felix De Vliegher (from iBuildings), who showed a set of use cases and PHP client code for Gearman. Gearman is an open source daemon to dispatch processing requests to a list of nodes (workers), and it is supported in PHP both as an PECL extension and as a PEAR client library. The use of Gearman can aid PHP scripts in dealing with intensive tasks which should be offsourced to other machines to offer a prompt response to the user.

Remember that all the slides from the conference will be available on SlideShare in the next days, as the speakers get the time to upload them. Furthermore, the majority the videos of the talks have been recorded on ustream and can be viewed at any time even if you did not participate to phpDay.

05-20-2010 – Fixed spelling of Felix’s name.

In this session Mark Brown and Ruslan Yakushev will talk about the work being done at Microsoft to increase the performance of PHP applications on Windows and IIS. This includes some recent advancements with the FastCGI module that enables PHP to run on Windows and IIS as well as soon to be released WinCache 1.1 that is going even further to provide PHP applications exceptional performance on the Windows and IIS platform.

This is part of the spring TEK·X webcast series and is sponsored by Microsoft and hosted by php|architect.

Podcast: Play in new window | Download

The FTW! Competition (Canadian PHP on Windows Contest) deadline is May 17th 8am. If you have a PHP application running on Windows and IIS, submit your app to this competition today at www.webnotwar.ca/ftw. They are giving away $15,000 worth Dell hardware in prizes, every finalist gets a prize and bonus prizes are giving to PHP apps, Open Data apps, apps that use MS SQL Server and apps that use Windows Azure.

The support of object-oriented programming in PHP 5 opened the field for new kinds of general-purpose libraries, and in particular for object-relational mappers used to persist the objects used throughout a PHP application in a classic relational database such as MySQL or PostgreSQL.

Metadata specification

For an ORM to work, there are different data models that has to be kept in sync: the object model defined in the PHP source code, the relational model represented by the database schema, and the mapping metadata which configures the ORM to translate between the two.

As with all duplication problems, some of this models may be derived from their equivalents. For example, the simplest ORMs infer the object model from the list of tables in the specified database. There are more sophisticated approaches, like defining at least the metadata to configure the ORM and generate the object and relational model from these mapping configuration. Doctrine 1 and other ORMs makes wide use of this technique.

An even more resilient approach is to define explicitly an object model and its metadata in the form of annotations embedded in PHP code or XML documents, and to generate only the relational schema (as Doctrine 2 does.)

Visual design of metadata

The application reviewed in this article, ORM Designer, is a visual design tool for PHP object-relational mappers. Developers can define an unified model via a graphical interface, and derive the ORM configuration (object and relational model plus the mapping metadata) automatically from the unified model.

Visual designing tools have to be taken with a grain of salt, as there is no fine control over their results when used for code generation. Furthermore, the generated products have to be kept in sync with the evolving unified model via regeneration, and this raises issues with further editing.

ORM Designer pays particular attention to these issues. The unified model is stored in human readable XML, and it is the source of all the generated code. The advantage of XML over a binary format resides in the possibility of diffing different versions of the model and storing it efficiently in source control systems. Of course this unified model can be exported in a format thatcan be understood by the ORM. In the case of Doctrine, which is the primary target of this designing tool, Yaml would be the format of choice.

The ORMs currently supported by ORM designer are Propel and Doctrine, plus the model system of CakePHP (Zend Framework and symfony projects usually employ Doctrine to implement ORM functionalitites). Support for Doctrine 2 is under development, because due to the versatility of the ORM there are some issues in implementing visualization for features like inheritance and annotations.

ORM Designer runs on nearly every platform: Windows, Mac OS X and Linux with wine. I have tried it on Ubuntu 10.04 and there no issues on functionality nor slowness due to the use of wine. The graphical interface is very close to the simplicity of Microsoft Access, but of course the generated source code is much more powerful as it can be used on many different enterprise database vendors.

In part 1 of this article, I showed you how to create a data service using the new Data Service Wizard. While the solution is not ideal for all situations, it is helpful to use when you have the PHP classes already built or use their Sample Class feature for fast prototyping. (Emphasis on the word prototype)

Data services by themselves however aren’t that useful. It is only when you connect one to data enabled components that you really begin to see why the wizard makes life easier. Up to this point it’s been fun to use but not really essential.

Working with our sample database of a WordPress install, I wanted to build a user editor. To make things easy, I’m ignoring inserting and deleting users and just displaying them and allowing them to be edited.

Starting with a blank slate, the first thing we do is add a VGroup to our application.

<s:VGroup width="100%" height="100%">
 
</s:VGroup>

If you are not familiar with VGroup and HGroup then you have not done much with Flash Builder 4 yet. You will quickly learn that they are your best friends when it comes to building UIs. This one takes up the entire design surface so that it will handle layout for any components we drop in there.

Now in the VGroup, drop a Data Grid. Go ahead and set the X and Y to 0 and the height and width to 100%. This will cause the Data Grid to take up all available space but since we are inside of a VGroup, if we drop something else on the VGroup, the grid will make room.

Also, you will want to give the Data Grid an id property so you can address it later. You can name it whatever you want, I named mine dataGrid. (I’m creative like that)

Now for the fun part, let’s wire the Data Grid to the data service we created in the last article.

Right click anywhere on your blank Data Grid and select the “Bind To Data” option.

Figure 1: Bind to Data

Select New service call. From the service dropdown, if it is not already selected, choose the data service we created, in my case, I used the default service name, WpusersService. The operation we want is getAllWp_users.

Up to this point, everything has been pretty mundane. However here is where the data wizard really starts to shine. Remember we discussed that the data wizard uses PHP reflection to inspect the class to which you are talking? Even if it is a prototype class that it generated, it then turns around and inspects the class. It gathers all the parameters necessary to make a call to a method and it gathers the return type data. All of this is in the docBlocks so it is important to properly document your methods. In this case, it recognized that the return value (For some reason called the data provider) will be an array called Wp_users.

Clicking OK will modify your grid giving you one column for each field in the return value array. In most cases, this isn’t want you want in a finished product, however, it is better to get all of them and delete the ones you don’t want.

This is the magic of the data service wizard, because it does the introspection and knows the values coming back,  it can pre-populate all of this for you and save you the hassle of having to type it in manually. For those of you who suffer from a dysfunctional keyboard, like myself, and regularly have misspelled words creep into you code, letting FB4 pre-populate the grid with all of the fields saves a lot of time in debugging as well.

Figure 2: Configure Columns

To modify our columns, add, delete edit and rearrange, we simply right click on the grid and select “Configure Columns”. This screen gives up all of the columns that the wizard just created for us and allows up to manipulate them and their meta data. In my case, I want to delete everything but display_name, user_login, user_nicename and user_email.  Once you have the columns the way you like them go ahead and click OK.

You now have a functioning AIR application that will display the users in your database. Assuming you have more than just the admin account, you should be able to press F11 and get something that resembles this.

Figure 3: Basic data grid AIR application

Assuming you had a functioning WordPress install handy and you already knew your database credentials, working through part 1 and to this point in part 2 should have taken about five minutes. That is the power of data services. You can go from nothing more than a data model to a functional application in very little time.  If all you needed to do was list the data, you would be done now. However, very few applications just list data as their primary function.  So let’s power on and do a little more.

Another great little feature of FB4 is that it will automatically build edit forms for you from a connected Data Grid.  Right click on the Data Grid and select “Generate Details Form”.

Figure 4 Generate Form

There are 3 types of form that you can generate, for our purposes; we will generate a Master-Detail. We of course want our form editable so make sure that box is checked  and since we don’t need to make a detail call in this instance, we will leave that box unchecked. Clicking next will give us a list of the fields that are available for us to edit. Like the Data Grid, I don’t want to deal with most of these but let’s pick a few. You can also change the control that will be used to display/edit the field. In our case, all the fields selected are TextInput fields.

Figure 5 Generate Form – 2  Property Control Mapping

Once you have everything the way you want it, click the Finish button and the wizard will generate your form. Since we have everything wrapped in a VGroup, FB4 puts our form below the grid and resizes the grid for us.

Congratulations, you now have a functional editor for browsing and editing records in a database. Mine looks something like this.

Scrolling up and down in the Data Grid will change the data in the form. Editing the form and clicking Submit will submit the changes back up to the database via the Data Service we created.

There is, however, the matter of the glaring blank space to the right of the form. Not being a designer, white space needs to be filled. So let’s fill it. In the database is a field for the user’s URL. FB4 has an HTML control that will render a site, so let’s fill that space. [Note: this control is only available if you are building an AIR application.]

We’ve done enough with the visual designer; let’s turn our attention to the actual code for this one. The first thing we are going to have to do if we want to display something to the right of the form is to put the form in an HGroup.

<s:HGroup width="100%">

I didn’t set the height because the grid is already set to height=”100%”. Not setting a height will allow it to remain the max height that it needs for the form but no higher.  Now we add our HTML Control.

<mx:HTML width="100%" height="250" location="{wp_users2.user_url}"/>

In this case, we do add a height. If we don’t, since everything else is dynamically sized, the height of the HTML control will vary depending on the web site being displayed. Obviously, this is not a desired behavior.

Location is the property where we store the URL in the HTML control. We set that to the field user_url. This way, as we scroll up and down in the grid, the display will change to the web site specified. Even though we are not displaying the URL in the grid, nor are we editing the URL in the form, the URL,  along with all the rest of the fields in the database row, are still available to us via the wp_users2 object.

Figure 6 Final working application

Once again, clicking F11 will run our application, fetch our data and once a row is selected, fetch the web site associated with that user.  Note: Since the HTML control fetches it each time (we are not implementing caching) there will be a pause while the page is being fetched and rendered. Since ActionScript is an event driven language,  it will allow you to continue to scroll up and down in the list while the HTML is requesting the web site. However, each time you change the record, the current request is abandoned and a new one is made.  Also, because it is making a http request every time the row changes (we are not implementing local caching) there will be a delay between when the record changes and when the site is displayed. The delay will depend on your connection to the Internet.

I hope these two articles have helped you understand the Data Services wizard provided by Flash Builder 4. As I started at the beginning, I normally dislike wizards in programming. However Adobe has done a good job of making sure that their wizards make life easier and the end result is easily read and understood by developers. There is no hidden magic behind what they do.

I still however, dislike Harry Potter.

Hey, our buddies over at Adobe have a series of training classes for PHP developers looking to get into Flash Builder. If you are in Los Angeles, CA , New York, NY, or Atlanta GA, this is your opportunity to get a deeper understanding of this great tool as well as help add a new skill to your resume.

The one day training course is available in the cities below. The registration fee includes over 7 hours of training within a small group (so you get the attention that you need), hands on labs and a printed courseware book that you can take back to work for reference later. Lunch will be provided at the training facility along with beverages and morning and afternoon snack.

For more information and to register, click on over to the Adobe Developer Connection.