NetBeans Start Screen
Here we are at the NetBeans Start screen and once you have a project started, this will show you your current project or your recent projects, it will tell you what plugins you have installed, it will give you the opportunity to look at some of the documentation and demos which, I warn you, are pretty advanced. So don’t be discouraged if we take a look at them and you find that they’re talking about stuff you don’t understand. And if you don’t want to ever see this start up screen, you can just un-click this if you wish.
Create a Project
First, we’re going to create a project in NetBeans. Using projects as NetBeans expects you to use them is a pretty advanced thing and you’re not going to be doing that at first. There may come a time when we set up WordPress installation on your computer as a NetBeans project. But for the time being, we aren’t going to do that. We are going to start our first project here so that NetBeans has its full functionality because parts of its functionality are dependent upon the project system working.
Come over here, select File New Project. This project is going to be a php application and we’re going to select this php application rather than either of these 2 and select Next. Then we’ll give this project a project name. I’m going to call it “PHP Sample Project”. And it’s going to store it under Rick Documents NetBeans project PHP Sample Project which is fine with me.
We’re going to go ahead and leave these 2 things as they are and I’m going to put a check in “Put NetBeans and meta data into a separate directory”. Say Next and again, this stuff is irrelevant really to you but we’re going to tell it that we’re going to run it as a local website and we’re going to give it this project URL. However, because we don’t have a web server actually running on your system right now, this really won’t be relevant. And then select Next. Under frameworks, we’re going to ignore this entirely and select Finish.
The User Interface in NetBeans
Now you have your php sample project created in NetBeans and it created index php, the first php file. The window, as you see it here, is divided up into 3 sections. It’s divided up into the navigation section and then your work pane and then a tasks and search pane.
Projects shows you all of the projects you have and then the files inside those projects. Files is just like a file manager and it also starts off with a project and then Services is something that you don’t need to worry about or even consider at this time. So we’re going to go ahead and turn off services. There’s no reason for us to look at services.
This Navigator pane we’ll look at for a while. This Navigator pane shows you what you have or the structural elements inside this file. So right now, it’s just showing you that it’s an HTML document, it’s got a head and a body tag, and inside the head tag, there’s a meta and a title and inside the body, there’s essentially nothing. But as you create things inside of here, they would show up in this Navigator and on a large document you can look at your navigator and double click on something and it will take you there. You can see that double clicking on these things highlights this piece of the structure.
Next is the Task pane where it is possible for you to enter your own tasks. So if you’re working on files yourself, remember to do this. You can easily do that here if you want. But for the time being, we’re not going to use that functionality.
This is also though where the Search functions and Code Completion functions happen and you will be using some of those. If you click on that down arrow, it drops down into the bottom bar. If you hover over it, it jumps back up so you could just hover over it to get something and then let it drop away again. The same thing is true with this. If you minimize that window, it comes over to the side and if you minimize the projects window, it does the same thing. And then if you minimize the navigator window then it jumps over like that. You can again, hover over each one of these so that you can get access to that without having it spill into your workspace although you can also double click and have it come back out.
And if you select Pen, it’s going to stand out there. And if you end up losing something, you can always go back to your window and select the part that you may be missing. You can also change how you work by dragging these bars back and forth which gives you a little bit more room as well.
Now that we’ve created this opening project, we don’t really care about it anymore. Go ahead and close that file. Before you have a project, you’d never be able to get a new file because NetBeans doesn’t let you create a new file outside of the context of a project because it is a project-based text editor.
Create a New File
Let’s open a file. I’m at CTLP2 Lesson 2 and WordPress WP Content Themes Thesis 1.8 custom. And so if I open up my custom CSS file, this is a file that we’ll be working on and in fact, you saw me working on in the previous lesson.
Using the NetBeans CSS Style Builder
When you open up a CSS file in NetBeans, what happens down here in the bottom is that the style builder pops up. This style builder is a very handy thing for people who don’t know CSS well because it helps you get the hang of what to enter. You can see that I’ve got a bunch of rules here and each one of those rules is listed alphabetically over here in the navigator. And if you double click on a rule, it takes you directly to that rule. So that’s how the navigator works in the CSS file. You can just double click on a rule name and it will take you directly to that rule. If you’ve got several thousand lines of code like I do on some CSS files, that’s a quite handy little feature to have.
The other thing though is you end up with this style builder down here. You can see that I’ve selected the BYOB box 1 and it’s showing the preview of this background color right here. Now if I wished, I could easily change the background color not by changing a number here but by coming over here and selecting a color from the swatches or by selecting a color from this system or from the RGB system and you can say Okay to that. And now you can see that the color has changed here.
If you don’t like that changing, you can come back over here to the undo and select Undo and now it comes back to green. If you select the selector, you can come over here to Font and you can select the font style. When you select that, you see that it pops up here so now you’ve selected this font style and it says, “Font Family Arial Helvetica Sans Serif”.
If we come over here and pick the font size, now it gives you font size 14 pixels and you can also select for example, the font weight. And so you could say, well let’s do that one as Bold and it will have added that and you’ll have seen that this added on.
And let’s say you are going to have a background color in this section with this kind of text and maybe you want to add some kind of a padding. So you can come over here to the margin and you can add padding to this so let’s say we add 5 pixels of padding. And now you can see it stands off round there and in fact, if you wanted more pixels to the left, you could type more there and it would push itself in so you can see what that’s going to look like.
You can see every time we do that, we end up with a new property and a value for that property being inserted inside of our rule. And the same thing is true with borders or positioning, we can also deal with text blocks and line heights and letter spacing and word spacing.
Most of the CSS rules that you are familiar with or that you will become familiar with are selectable from here and it could be a significant time savings over typing. Most of the time, you’re going to see me type instead but nevertheless, it’s going to be a very useful way for you to learn how to do CSS.
Using NetBeans Commenting Tools
And if we minimize that, you can see that it has added all of this code and if you want to comment out code, you can select the code that you want to comment out and then these are your comment buttons. So this will add comments and you can see that it gives you a slash asterisk which makes that commented or you could select them all and select the other button Uncomment and now it’ll all be wide open. This could be useful for troubleshooting. Just select the whole thing, say comment and it’ll all be commented out.
Use NetBeans Code Completion Features
This also has code completion options. For example, if you’re going to create a new class, let’s say .custom header_area, and then if you hit Enter here and hit the brackets, 2 brackets open up and if you hit Enter again, then that bracket opens up and gives you space and indents over.
Let’s say that we want that header area to float to the left. If you start typing the property, you can see that code completion pops up to give you a suggestion. So this will tell you what the property is and what its potential values are. It tells you what the default position is and it gives you other information.
You can scroll down here and you can find more descriptions about it including rules. This is a very helpful bit information here and while your cursor is there and that float is highlighted, if you press Enter, it will add the float like that. You won’t have to finish typing it out and then if we’re going to say “float left”, you type L and the left float pops up. If you hit Enter again, then it says float left; enter and you’ve already started off at the next line.
So then you type “background’ and now you can see that you got… I’ve typed BAC and it could be background or background attachment or color or image. And so I want to go to background color. If you use your down arrow to go to color and then hit Enter again, background color will pop up. And then if you start typing, you can see that I type an R and it will let you put in red or you could select the color chooser. If you select the color chooser with the Up arrow and hit it, then the color chooser thing comes up. You can pick your color and say “Okay” and now that color is there. So this is a very powerful tool, makes writing your code quite a bit easier.
And that wraps up Part 2 of Lesson 3 of the Customize Thesis Like a Pro tutorial series.