How to render choice fields individually with Symfony2 Forms

By Trak April 12th, 2012, under Symfony

Hi there again.  I wanted to share a little trick I found by chance using Symfony2.  But first a little story behind it.

I built a Symfon2 site using the BETA version about a year ago.  Some forms had very specific code to display checkboxes and radio buttons.  At that time you could simply render them yourself by hand putting the right html and names. Everything worked like a sharm.  Yesterday I decided it was time to update that old instalation into the latest 2.0.12 version.  The update wasn’t hard, but once I got into the forms one thing came up.  The form_rest tag was now aware of all the fields that weren’t rendered using form_widget and so it printed them all at the end.  So I ended up with two of each of those fields. The pretty stylish and well-positioned ones and the ugly ones at the end of the form.  So it became time to do it the right way using the form_widget. But when I got to the choice field I noticed it would be very hard to re-style everything using Symfony’s markup. So I wondered… could I just render each radiobutton independently?  And to my surprise the answer is YES!!!!! Here’s how:

{{ form_widget( form.mychoicefield.value1 ) }}

For each value you have, you can just append it to the first parameter of form_widget and it will render ONLY that value.  Notice that in order for this to work you need to add the expaded option when building the form.   I guess this works because inside it creates every value as a subfield of the choice.

How to customize the id of a field in Symfony2 Forms

By Trak April 12th, 2012, under Symfony

It’s been a while since I updated this blog, but lately I’ve been having some small issues with Symfony2 forms so I would like to give my 2 cents to other people having the same problems.

One thing you find in the documentation of form_widget is that you can customize the HTML attributes using the attr option like this:

{{ form_widget(myform.fieldx, { ‘attr': { ‘class’ : ‘custom-class’ } } ) }}

I thought that was a very cool feature and when I decided to use it my problem was that I needed to customize the id attribute.  Curiously id, is not an allowed value in the attr option. It has it’s own property, so if you need to set a custom id for a field widget in Symfony2 here’s how it should be done:

{{ form_widget(myform.fieldx, { ‘id': ‘my_own_id’,  ‘attr': { ‘class’ : ‘custom-class’ } } ) }}

Looks silly but I couldn’t find it anywhere in the documentation or with a simple Google Search. I hope this post saves somene valuable minutes or hours trying to find it.

Flex transparency with PNG on mouse over and mouse click

By Trak September 20th, 2009, under Flex

If you have tried using a PNG image in Flex and getting the transparency to work with on RollOver or Click events you might have noticed the transparency IS recognized as a valid mouse area. Therefore your rollOver or click events get called even when the user click on the transparent area of the image.

Well this happened to me in a project and was very frustrating. Here you can see a more detailed explanation of what’s going on with the hitTest in PNGs.  The ideal solution would be to have the image vectorized. This could be accomplished using Flash’s Trace Bitmap feature. However sometimes this method ends with a very heavy shape that it’s hard to render and to drag around the screen.   The good thing about it is that you can scale it as far as you want without loosing too much quality depending on how good your tracing was.

Here I leave a little guile of how it could be accomplished without vectorizing the image, just removing the transparency. Here I assume you already know how to embed flash symbols in Flex converting them in ActionScrip exportable components. If you don’t know how to then Adobe has great documentation on it.

  • First put your PNG image in Flash
  • Right click on it and select Break Appart
  • Select the Magic Wand (you have to select the lazo first) and then select all the transparent area of your image
  • Delete the selected area and repeat until all the transparent areas are deleted
  • Convert your image to a new actionscript exportable symbol (and all the rest to make it available in Flex)
  • Use the new symbol in Flex as an image source.

After doing it I reazlied the process isn’t a big deal, anyone could have done it but well for us it took  us a while to think about it so I’m posting it here hoping someone could save some time or get more ideas.  Feel free to comment and tell me what you think, or even better tell me if there is a better way to do it :D

My First Blog Post

By Trak September 13th, 2009, under About Me, Uncategorized

So after a few new followers on my tweeter account (@ivanmreys) and some thoughts about sharing some of my ideas I decided to start my own blog. This blog will be about coding standards, tricks, methods, solutions, and anything else I can think that would be useful for somebody somewhere.  If something here helps you save a couple of mins or hours with some problem then please leave a comment and if it doesn’t then also please leave a comment.

I’m an engineer and as most of them my aesthetic sense is screwed up. If anyone can help with some logo then please leave me a comment or contact me on tweeter.

So far this is all I have to say, but hopefully pretty soon I’ll start posting more info in here. Oh I almost forgot… my name is Ivan Rey but I’ll post here under my favorite nickname Trak :D