Dollar IDE Screenshots

I realised today that I never got round to posting any screenshots of Dollar IDE, the PHP Integrated Development Environment I made for my Final Year Project at The University of Hull, once I’d finished developing the feature complete version for submission. This meant I couldn’t show it to anyone when I was talking about it, so I’ve posted some below.

Dollar IDE Start Screen

Dollar IDE Start Screen

This is the first screen a user sees when opening the Application. They can create a new project or open one from a git repository or the local computer — a recent project list makes it easy to get back into a project you’ve been working on.

When making a new project inputs such as “Project Name” and “Save Location” are validated as-you-type so a user always knows how to resolve any problems (e.g. invalid characters or selected a directory that you don’t have write permissions for).

The “Project Type” drop down allows you to select templates for your project. E.g. A web template which has an index.html and ‘images’, ‘styles’ and ‘js’ folders included. The idea was to allow this to be extended so you that you could select, for example, a CakePHP project type and DollarIDE would download CakePHP and resolve all the dependencies, however this has not yet been implemented.

Dollar IDE Open Project from Github

Dollar IDE Open Project from Github

DollarIDE integrates with any git repository through LibGit2Sharp, but has enhanced integration with Github through their API. When you create a project you can have Dollar IDE automatically make and initialize a repository on Github for you and even set if you want it to be public or private. In the above screenshot you can see how Dollar IDE allows you to log in with you Github credentials (which are stored securely using Windows DPAPI) and then select from a dropdown which repository you wish to open and start editing.

Dollar IDE Syntax Highlighting & Autocomplete

Dollar IDE Syntax Highlighting & Autocomplete

Of course most of a developers time is spent in the code editing window itself. In the screenshot above you can see DollarIDE’s tabs, auto-completion and syntax highlighting.

Dollar IDE Settings

Dollar IDE Settings

Seen as developers spend a lot of time in their IDE I felt it was important to ensure that Dollar IDE could be customized to suit their needs. For example, in the Colour Scheme Settings window shown above the user can change both the accent colours and background colour of Dollar. This includes the obligatory dark theme.

You can also see the project pane on the right hand side of the background window in this screenshot. The project pane allows the developer to manage folders and files, and open them for editing — all from inside the same window as the code itself. Due to PHP often being deployed in a CGI setting, file locations are especially important.

Finally, this screenshot also shows that Dollar IDE currently makes no attempt to syntax highlight HTML, which is a great shame as PHP is often intermixed with HTML. This will be one of the first features I add when I eventually open source the project.

Danny

Advertisements

Tags: , , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.