Building a Flickr Slideshow with NetBeans IDE 6.5
In this screencast, Justin Bolter, Technology Evangelist at Sun Microsystems, shows you how to build a PHP Flickr slideshow using NetBeans IDE 6.5 . Bolter walks through the various ways in which NetBeans IDE 6.5 supports PHP development, including project support, run configurations, code completion, syntax highlighting, documentation, refactoring and debugging. The complete transcript of the presentation has been provided below.
Justin Bolter: Hello, this is Justin Bolter, technology evangelist for Sun Microsystems and I'm here today to demonstrate the new PHP features in the NetBean 6.5 IDE. Some of the features that we're going to look at today are the new project support, different run configurations, code completion and syntax highlighting, PHP dock support, some refactoring and also the PHP debugger.
We are going to do this by building a PHP Flickr application. We're going to look at the PHP editor and debugger. We're also going to see NetBeans' CSS and Java support as well. Let's go ahead and get started.
We're going to open up NetBean 6.5 here and create a new PHP project. We also have the option to create a PHP application with existing source files. If we have an open source project or some of our projects we want to bring them into NetBeans we can do that as well.
I'm going to create a new PHP application. I'm going to give it a name, Flickr PHP and I'm going to put this in a different location just to demonstrate another feature or NetBeans. We also have the option to keep the NetBeans meta data separate so if you want to keep your project meta data separate than your source files you can. What I'm doing is keeping all my project files separate from what's actually going to be in my web server directory.
We have our run configurations here and this is where we can choose if we want to run it on a local server, run it on a remote server through FTP or run it through a PHP command line script. I'm going to run it on a local server and also choose to copy my files to another location. In this case I'm copying them to my Apache root directory.
I'm going to click finish to create my project. Here I have default project with an index PHP page and the first thing I'm going to do is copy the PHP Flickr library from my favorites to my project.
I've gone to php.flickr.com and downloaded this library. It works in PHP four and five and you can see at the end I have a resource slide that has a link to it where you can download it. When I click this PHP Flickr new file that I have in my project, I can see all the different variables and functions that are contained there right in this navigator window. This can help you move within a file or you can jump to a specific place. Like if you double click this function I can jump to the photo search function right in the file. That can be really helpful for navigating around your project.
Now if I come back to the editor window, what I'm going to do is start writing some PHP code. If I type RE and bring up code completion, I can see all these different PHP core functions. RE I'm going to require and then I press control/space again to bring up code completion and its shows me the possible files that I can require, only one in this project.
I have my PHP Flickr file and now I want to create a new PHP object. Bring up code completion again, it shows me the different things that I can create. My new object [inaudible 03:07] and for this I want to create PHP Flickr and this takes one argument, my API key. I'm going to go ahead and paste in my API key. You can get an API key at flickr.com. They're free and anyone who signs up can get one.
If we also notice as I type one quote or one parenthesis, NetBeans' completes it for me so that can also be a helpful timesaving feature. I'm going to go ahead and search Flickr. If I call up code completion on the Flickr object, I see all the PHP Flickr functions prioritized above the core PHP functions.
I'm going to use the photo search and this has associated documentation with it so let me do that again and bring up photo search. We can see the documentation here as well as examples and arguments that it takes. Any functions or classes that have PHP dots or variables you can see that withe .NetBeans' code completion.
I'm going to use photo search and I'm going to put in one argument an array of tags. I'm just going to put in one tag in NetBeans and I'm also going to limit this to 12 per page so that's the other argument of this array. I'm going to enter and I'm going press enter when I'm done filling in the argument and NetBeans moves me to the end of the line. I just have to fix my little syntax error here. See NetBeans highlights them when you have a syntax error, just puts a little red squiggly under there, so I was missing that arrow from my array.
Now I have this array of results that should be returned from my Flickr photo search and what I'm going to do is loop through them. I can use another feature of NetBeans here called code templates. I type 4E and press tab and that brings, expands that into a 4H loop for me. You can see the different code templates that are available in NetBeans' options and you can actually define your own code templates as well.
I'm going to type RE and press code completion, control/space again and it fills in the variable for me. Once I'm done with this argument I press enter and NetBeans moves me to the next argument in the 4H loops. Code templates can be a really helpful thing, a really quick way to write little chunks of code.
Now that I'm in my loop here, I want to actually just echo out an image tag and I'm going to use another function here from the PHP Flickr library called build photo URL. Again we have associated documentation and arguments there. Use this, our variable is already called photo so we'll leave that alone but we'll enter size, small. Then we'll just go ahead and finish this tag here. I just need a width and a height. I need to close my, finish my string. Oops. I'm all set.
Now if I go ahead and run my application, I should 12 different Flickr images across the screen. I'm going to set this as my main project. I right click my file project to set as main so then I can use these short cut buttons on the toolbar.
I'm going to run my main project and bring up Internet Explorer and then I have 12 images from Flickr related to NetBeans, OK. Let's go back to the editor. OK, so I'm going to show you now, if you select this variable F and put your cursor on it, it actually highlights it throughout your code. Then you can press control R and this will allow you to instantly rename a variable.
This is a great way to save from using find and replace. You can do this with any variable in your code. I'll rename my Flickr and my results to photos and you can see it changed throughout my code.
Another cool feature is, especially when you're working with code that you aren't familiar with the source, if I right click this build photo URL function and go to navigate I can go to declaration. I can actually jump to the definition and its function. That can be great when you're working with source files that you aren't familiar with, open source projects, etc.
Now if I go to the IE window here I can see the execution is paused and if I come back to NetBeans, the debugger has kicked in. We see down here that the connection is made to NetBeans xdebug and now I can do different things, like step over, step into, step out of functions. I can also set break points. If I just come over here and set a break point by clicking the line number. Then I go ahead and step over the first couple of lines of my PHP code, what I can then do is when I get to this photo search, I want to show the call stack here.
As I step into it, I can see that now I'm in the photo search function. If I step in again, I can see I'm now in a request function and step in again and we see that the actual HTTP request is made.
Now if I step back out, although I'm back to my forward each loop and continue to my break point, I'm now inside the loop. If I look at my local variables, I can see my Flickr object here with PIP, the request object. I can see my super globals such as my get and post or service variables. I can also see my photos array and because I'm inside the look I have this photo variable as well. This is the photo each time through the loop, so if we watch the title here as I step over and loop through, we'll see that the title will change.
We can also do things like set watch statements. Here I have the photo ID, I could do the photo title and we can set this for any variable and it will tell us the value as we're executing through the code. As I step over we can watch these two values change. This can be great help when you're debugging code that either you haven't written or remote calls or even your own code. This can be used all the time.
I'm going to go ahead and stop the debugger now. The next thing I'm going to do is add some Java script and some CSS to create our slide show. I'm going to put an H1 tag in here and we see that NetBean's [inaudible] now the HTML section does HTML code completion for me. I'm going to call this my Flickr slide show and I'm going to put one DIV in. We see again, code completion and documentation and this is going to be my slideshow DIV. We also see if I click a tag, like the end of this DIV tag, it shows me the opening tag and the same with the H1.
Another thing that's cool that we can do is we have code folding. If I wanted to get rid of this whole section of code, keep it out of my way, I can fold it up. That can be helpful organizing your classes or different sections of your code.
Now let me go ahead and add the Java script library, the J query library to my project. Right click my project, go to properties and open the Java script libraries to add a new one to my project. I'll choose the J query library. We have several different libraries that are included withe .NetBeans. You can always add your own but if you add these to your project, NetBeans will actually copy the file to your project for you as well.
Now I see these resources directory with my new J query file and my J query JS file in there. If I click it, again the navigator window will show me all the different functions there. Let me go back into my code and I'm going to also add a CSS file. I'm going to do a link and again I have documentation, code completion, syntax highlighting for the HTML when I'm in the HTML section of the code. I'm going to put a style sheet here and this is going to be type, text and CSS. We're going to call it style.
Now I need to do is go ahead and right click my source files and create a new cascading style sheet. We'll give it a name, net beans will add the CSS extension and now I have this cool CSS preview window. If I get rid of this root element and define my H1 tag I can see also I have the CSS code completion and documentation. I want to do the font family and let me change that to Sans Serif and as I do that I see the preview window's updated. Same if I change the font size.
We're going to add just a couple more CSS classes here. First I'm going to define from my slideshow DIV for it to be in a relative position. Let me get us a little more space here. Position and this is really fast with code completion and I'm going to give it a height. Let's call it 200 pixels and now for all the images under my slide show data, I'm going to set them to an absolute position so that they're all in the top left, stacked on top of one another and all have the Z index of eight.
Now I'm going to add two more classes and what's a great feature in NetBeans is being able to select a chunk of code, hold control shift and press down and I can see this code is duplicated for me. It saves you from having to copy/paste, especially useful if you want to do one line or one little section of code. I'm going to make this the active class, give it a Z index of ten and create a last active class with a Z index of nine.
I can see the Java script code if I come into the Java scripts section of my file and I do active in bringing up code completion I can see all these different J query functions. When they're crossed out here that means that they're not supported by this particular browser which is what I defined in my NetBeans preferences saying I want to support Internet Explorer 5.5 or higher. These particular functions aren't supported there, so NetBeans shows me that.
We also have, not only the J query library but all the of course the core Java script functions. If I type set I and bring it up, we see the set interval functions, we see the different browsers that are supported and we see all the associated documentation.
Just a quick explanation of what this code does; we look for the image with an active class. If we don't find that, we take the last image in the DOM Tree under the slide show DIV and then we also find the next image after that. We give the active class the last act; we give the active element the last active class, CSS class. This gives it a Z index of nine, then we make the next image go past these zeros so it's hidden. Make it active, which puts it on top of Z index ten and then we animate it in. This is all done with the J query library. We can chain functions together.
Then at last we just remove the last active in active class from the active element. Let's go ahead and give this a try. Our function's calls slide switch every four seconds with a set interval function. If I run this we should see our images fading in and out.
OK, now I'm going to go ahead and run my project and pull up Internet Explorer. We see our slide show images are all stacked on top of one another and now we see they're fading in every four seconds. Let me go back to NetBeans and actually I'm going to show one more slide and this is going to be our resources slide.
Thank you all for watching. I hope you enjoyed it, learned about NetBeans and the cool new PHP features and here are some resources to help you with this project or to get started withe .NetBeans. You can download it, you can find more information and you can find more videos and screen casts to help you learn more about it and be more productive.
Thank you again and enjoy.
(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)