Ubuntu Software Center: BlueFish Editor

Recently, I’ve realized that I boot into my Windows just to get on Dreamweaver to do some coding. There are lots of code-editors out there, available for Linux but what I really needed was a “web editor” that would support FTP uploads, PHP, CSS, and Javascript coding and everything else. I also wanted a sleek interface.
Now, Ubuntu provides several packages available for KDE but only one good web-editor for GNOME. It’s called BlueFish Editor. It is in the Ubuntu Software Center and it is under Developer Tools and Web Development.

Let’s look at what USC tells us about this application:

It says “HTML” but the screenshot shows PHP. Here is the into video from their website:

Features:

• lightweight enough to work on netbooks
• WYSIWYG (what you see is what you get)
• cleanly keep open several files through a tabbed inteface
• Snippet sidebar that includes custom dialogs, forms, etc.
• custom programming support so you can include C, C++, CSS, and many other languages
• toolbars that include HTML codes etc

Let’s install this application then. Click on install, as usual, authenticate the install with your password, and let’s get on with this.

When you start up the application, that’s what you get. You see that custom menu? Here, you can select between several different languages and paste in commonly used code-snippets. Under PHP, for example, you can connect to a database, set cookies, and do all kinds of things, automatically.
Right above the custom menu is a tabbed code menu. Here, you can automatically add more code. You can add tables, change the text orientation, include forms, well, do just about almost everything. If you use several pieces of code frequently from the tabbed menus, you can add them to the quick bar for easier use (it’s akin to the dreamweaver favorites bar).
On the left there, you can browse through your computer to open or add different files. The tabs below the file browser lets you switch between the browser, function references, and bookmarks.
The tab(s) below the main text screen let you switch between files.
Again, this is as close to dreamweaver as you can get, and it even has some features that are BETTER than dreamweaver’s.

How to do some basic things

I talked about the custom menu, here it is:

I opened one of my sample programming documents that uses a lot of PHP. In it, I manually specified a “connect” function to a database. It’s a fairly easy process once you get the hang of it but bluefish makes it even easier. Let me show you how. Here is the original (highlighted by Bluefish):

I want to see how it will be match up. Of course, some of these things are fairly custom for my own uses (global variable declaration, function etc). I decided to delete all that was inside and use the custom menu in bluefish to add a connection to the database.

• First, click on “PHP” in the custom menu
• Second, choose “MySQL” and then “Connect” from the menu and you’ll get a dialog box:

Fill in the information needed, press enter, and here is the output:

Fairly simple, even if TOO simple. However, this is a good start and it will save you a lot of time when creating applications. There are tons more different code snippets you can use.

DIVs

Let me show you how to add a <div> to your page with all the specifications you require.

• First, get to the bar ABOVE the custom menu
• Click on “CSS”
• Click on the far right icon that shows “Div…” when you hover over it
• get a nice dialog box

• Fill in all the information, you can add styles by clicking on the “Style…” button:

• Fill in the rest:

• Click okay, and here is the output:
• 

As you can see, Bluefish is easy to use and very intuitive. There’s a ton more things you can do with Bluefish and it’s a lot of fun using it. Remember that it’s FREE and it’s on par with DreamWeaver (NOT FREE) so long live Linux, GNU, and free software!