Wednesday 29 April 2009

Flex PHP Debugging... Thankyou PDT!!!

I've been looking into the perfect workflow setup for me, a Flex developer who is sick of the divide between his server side debugging and his client side debugging.... and now i finally have it. The perfect workflow.

A combination of tools and all because some lovely fella here : http://www.themidnightcoders.com/forum/default.aspx?g=posts&t=452

layed it all out in english for me. In case this ever goes down here is his post in full with only one gotchya , which i try to explain below.

I finally got debugging to work (I actually ate dirt until now).
If you want to debug server side php classes with weborb inside flex-builder then here's one way to do it:

The configuration I used is xampp 1.6.6a (apache+mysql) on windows XP

You need some tools to make it happen:

A.
xampp for windows
B.
xdebug (for php 5.2.5) - when using xampp, don't forget to comment out zend_optimizer.
C.
XDebug Helper addon (version 0.2 or higher) for Firefox . This is a must so your flex app will include XDebug info in the HTTP headers
D.
Flex-Builder-3
E. PDT plugin for eclipse (I will explain the easiest way to install it).
F. Weborb for PHP ofcourse

What is PDT? : It's a plug-in for eclipse IDE to support PHP development.
Flex-Builder is based on eclipse so with PDT installed, you can debug client-side (Flex) and server-side (php) in the same IDE.

1.
Install xampp and XDebug
I won't elborate on installing xampp since there is enough info out there.
To install XDebug in xampp you just need to download the appropriate extension module from XDebug site,
and configure the php.ini with a few lines as shown below.
Make sure that XDebug is installed correctly using phpinfo() - You should see a XDebug section.
my c:\xampp\apache\bin\php.ini includes the following:
Code:
[XDebug]
;; Only Zend OR (!) XDebug
zend_extension_ts="C:\xampp\php\ext\php_xdebug.dll"
xdebug.remote_enable=true

And I commented out the [Zend] section.

2.
Installing PDT plug-in in Flex-Builder-3

- Open Flex-Builder and choose from the menu Help->Software Updates->Find and Install.
- Select "Search for new features to install" and click Next.
- Click on "New Remote Site", enter a name (e.g. PDT) and paste, in the URL section, the following address:
http://download.eclipse.org/tools/pdt/updates .

- Select two checkboxes:
* Europa Discovery Site and
* PDT
we added the europa site so that required plugins which PDT depends on can also be downloaded.

- Click Finish, choose a mirror site and wait for the search results.
- In the search results:
* Select the PDT checkbox
* expand the Europa Discovery Site
* click on "Select Required" button.
Now all required features should be automatically selected.


- Click Next, Select "I accept...", click Next and at last click Finish.
To see if it's installed OK, you can try File->New->Other.. and look for PHP project under PHP section,


3.
Installing and Configuring XDebug Helper
OK, This step is easy.
- Follow the link above and install the addon into Firefox
- From the Firefox menu, choose Tools->Add-ons
- Choose XDebug Helper and click the "Options" button
- In the Settings section down below, where it says "Xdebug.idekey value", change the default string to "
ECLIPSE_DBGP"
I know it says to use ECLIPSE_XDEBUG value but that's a mistake. Trust me!
- After the add-on is installed, you should see a small green XDebug icon on your Firefox status bar (bottom right corner).
This green icon is a toggle button to start and stop debugging. When it's on, every http packet sent through the browser will include in its header the Xdebug.idekey value you entered. So
don't forget to turn it on while debugging.



4.
Creating a PHP project
The simplest way for creating a php project with PDT is to put it under your webserver root directory (e.g. c:/xampp/htdocs/
/Services/ or c:/inetpub/wwwroot//Services for IIS).
This saves you the hassle of synchronizing your files on each change.
But for those that prefer synchronizing, it's not that difficult (maybe in another post).

So assuming you'll create all your projects on the webserver root directory here's what should be done:
- From Flex-Builder menu, choose File->Switch Workspace.->Other..
- click browse and choose the web-server root dir.
This will reopen Flex-Builder in an empty environment.

Every new project will create a new directory (with the same name) under the root of your webserver.
- Import or Create a Flex Project that uses RemoteObject.
A nice test example by Jens Krause can be found
here.
- To create a PHP project goto File->New->Other.. and look for PHP project under PHP section
Since we want our php code to reside under
/Services, we'll name our new php project as our weborb_install_dir.
If you've installed weborb in the root of your web-server, then name your PHP project "Services".
- create or copy your PHP class files under Services.

5.
Creating a Debug Configuration
- From FlexBuilder menu choose Run->Debug->Other... The configuration dialog opens..
- From the tree view on the left, double-click PHP web-page. A new empty php configuration is created.
- In the Name field type your app-name
- Choose XDebug in the Server Debugger combo-box
- Click on "Configuration.." button next to the "PHP Server" field.
- Select the "Path Mapping" tab and add a path mapping to Services directory in the server. Click OK.

- In the File section Click "Browse" and select a class file. (doesn't really matter which).
- Disable the "Break at First Line" check-box
- Click Apply.



6.
Debugging
- Place a breakpoint somewhere in your PHP code.
- Open the Debug view if it's not already open (Window->OtherViews... and type Debug)
- To select Firefox as the browser then goto Window->Preferences->Genral->Web Browser
- Launch the debug configuration created in the previous step.
Ignore or close the launched Firefox (can't find how to turn this browser launch off).
Now you should see as in the image below that PDT is waiting for a signal: The bottom right corner shows: "Launching
..%"

- Launch your Flex app. Firefox should be launched.
- In Firefox bottom right corner,
Turn the XDebug Helper ON
- Send something from your Flex app to the server.
- Go back to Flex-Builder. You should notice now that the waiting status has stopped.
This means XDebug sent Flex-Builder PDT a signal.
- In the Debug view, select "PHP Application" and
click the disconnect button.
That's it... you've stopped at the breakpoint.
In case the waiting status stopped but it didn't stop at your breakpoint, recheck your Path Mapping,
To run between breakpoint press F8(Resume).
When you want the php code to continue running and return values to the flash player, click disconnect again.




I noticed that when flex connects to weborb, there are actually two AMF messages to
/index.php.
Only the second call reaches our PHP classes and stops at our breakoint.
In the first call we press the disconnect button which lets the PHP continue running and return to the flash player which then sends the second message.
It would be much more intuitive if F8 (Resume) would also cause a disconnect if there are no more breakpoints to stop at.
Perhaps this behavior is more suitable to the standard PHP debug scenario (no flash-player).


Hope I helped...
Nadav Parag
nadavpa@gmail.com

I can say wholeheartedly that you helped. I was already halfway myself with XDebug and the Firefox addon but i was using Netbeans and EasyPHP. However when you want to break out during a client to server it wasnt obvious how i was supposed to catch anything serverside.

My only addition that wasnt obvious to me was that. If like me you had a folder in your server for your PHP's and then you had a folder locally for your flex application. You should make sure you flex project includes the source folder of your PHP's so that after you run the debugger for your PDT (PHP Development Tools) Project and THEN your flex project, the flex project has some sort of scope to break out on your behalf. Otherwise it just carries on regardless of any breakpoints you think you have set.

Bottom line, the PHP project is simply to et the remote debugger going, after that its job is done, all your break points should be set via which ever Flex project you are working on.

Monday 20 April 2009

A cheap IMAP solution.. thankyou google :)

I fixed my pop3 woes by changing to IMAP!

Okay this is the first of a two part blog to share my experiences with my work email. I've put it for so long now and well i have no body to blame except myself for the troubles I've had. This blog will talk you through how i turned my run of the mill POP mail server into a more flexible IMAP server.

So whats bad about POP?

Before i tell you how, here is a little 'why bother' salt for you. Up until now i have only really been accessing my emails via my work laptop and work PC. Anyone who uses a POP3 mail server (the kind you get when you buy some web hosting for example) will know that if you want to keep your mails backed up on the server then you need to download each mail on each device. Each time it downloads it , it thinks its unread and you end up with an annoying (albeit mostly painless) step and waiting for a chunk of mails to download and then 'marking as read' for those you know about. 

So why not carry on if its painless?

Well apart from the obvious - there is a better way I'm sure, I recently i joined the technical gadgets groupie club by buying an iTouch, but then i also bought myself a 5800 because i liked all the cool features and it pretty much made my iTouch obsolete...doh. However it son became apparent that even on my Orange unlimited (but what they really mean is 500MB) internet allowance on my contract, downloading every mail was going to get  little silly.....

Solution = IMAP not POP

Enter my solution... finally... IMAP. Okay so my knowledge on IMAP was accidental, i was poking around my google mail account and read this page - "What is IMAP".

Well if you cannot by bothered reading it you can take my one line explanation : "IMAP connects all the time to the server (as opposed to once every few minute) and will send back which emails you have read to the server". So okay its more than that but to you here and myself that's all that matters right now. 

But my email client doesn't support IMAP?

Neither did mine so i decided on using googlemail. And so far its working a charm. So okay i will keep this brief but helpful i hope. Generally speaking the process will go like this :

The Basics...
  1. Create a google mail account  and sign in ( I made a new one for this)
  2. In settings go to the Forwarding and POP/IMAP section. 
  3. Turn off POP and Turn on IMAP (read the help links for more back ground reading)
  4. In your email control panel (mine is cpanel via my websites admin area) turn on forwarding for your email account and send all your incoming mails to your new google account
  5. Get someone to send you a test email. It should now be in your google inbox.

Set up Outlook 2007 to connect to you IMAP google connection according to this [pick your browser]. Once you have done this you will, by Google's setup be able to send emails via Googlemail. This will even show you the rather crappy "onbehalf of" for the receiver if you setup the Googlemail reply address in the google settings menu.

TIP : You now can sync to your google account. A good tip is to know that in Googlemail, labels are like your outlook folders. If you now create a folder in your IMAP email via outlook you will see a label created in google mail. 

TIP : Google uses VERY fast database queries to search mails so if your trying to find something in your emails and you have A LOT like me that you need to keep active its faster to use Google's search than to look via outlook.

From @googlemail.com... that's not very professional looking??!

I want to maintain a professional image so its important that i keep my outgoing mails via my work email address. This is the only step you can't find online (or i counldn't so I'm putting it there). You need to change your outgoing email server back to your work email and change the login to your  outgoing mail server to the correct one. Outlook will let you set different incoming and outgoing mail servers and logins.

  1. In outlook 2007 go to the menu Tools and select Account Settings
  2. Click on your IMAP account and select change
  3. Make sure "Your email address" is set to your work email address
  4. Set the outgoing mail server to your outgoing mail server on your POP account
  5. Click on "More Settings" and click on "Outgoing Server" 
  6. Select "Log on using" and enter your POP user name and password.
Now Press okay and return to the previous window. If you have done this correctly then testing your email account will succeed on both receiving via your google IMAP and sending via your original email account. Remembering that anyone is still sending to your old email its just bouncing via google to you.

Summary..

Now i can connect to IMAP via my phone, it will only get NEW emails i haven't read if i wish and if i want i can get more but they won't be unread.. happy days.  I can send emails as before and hey will appear no different to my clients. As a bonus, i have a very fast database of my emails to search through so finding any old details doesn't take away precious minutes of my busy day.

I'm happy to help anyone who struggles with this. If i find time i might come and add images in to help people along. My next blog will show you how to beat a pesky firewall that keeps your SMTP blocked, this stops you from sending emails vi outlook, by using SSL to tunnel through it. A specific problem for me, but perhaps I'm not alone. Perhaps it will help someone save a couple of hours stitching together the information i did this evening getting it figured out.

Thanks for reading.... sorry it was so long... comments welcome. Other than that, have a nice day and say hey once in a while. 

Wednesday 15 April 2009

Technical Samurai...Error 404!?

Okay so, three select all and deletes later I'm going to just let this flow, and see what comes out. I have some simple sins to confess to right now. Firstly, my grammar and spelling are world famous, somehow i manage to write things down wrong all the time. Secondly I'm not a samurai... i sometimes like to think could be ... i wanted to ... but i also like to think that one day i might have a six pack... its a few pints off.

So I'm going to keep this first post short-ish and just say what will here over the next six months at least. I was educated as a game developer, i learnt alot of C/C++ and other handy scripts but they weren't interesting back then. Then bright spark that i was i decided to start my own business www.twisted-studio.com  . We went through a few different hats in the last two years, experimenting with various technologies and creative suites. During this time I've done alot of everything from a little PHP to a little Lingo, some Nintendo DS development mixed in with some LUA. But sadly i feel i've started to run into a little snag... im a jack of all trades but a master of none.... 

So as a personal quest, i am going to set to it that i become an expert at my favoured technologies. Coming from my graphical programming background i always loved flash from the moment i dropped my first circle on the canvas and added a motion tween. Ten seconds to get to visual feedback... 

Now i need to fill in all those gaps in between me and the Flex 3 and AIR ACE exam and maybe throw some other known requirements to round me off as a developer.

So if asked i would say that according to this i am good to near expert on my interface developing but its when someone tells me to create them a REST web service or crack out a bar of beloved SOAP that I've been picking the nearest person to do that for me.... delegation....great for running a business, bad if you want to pass your exam.... booo.  So my journey is going to focus on looking into the likes of PHP, REST, SOAP, AJAX, Blaze. However its also going to look into design patterns for Flex, new Adobe Labs news and technologies and anything else i feel like.

So i salute you for reading on through this garbage, i can only hope that this helps someone who is like me trying to better themselves.