Contexts

One of the biggest changes on HTML5 Builder respect to previous RadPHP versions, it’s the inclusion of the “contexts” concept. What we have tried with this concept it’s to allow the user to focus on what is doing and remove tools that actually are not needed. If you are writing code, you just need to see the structure of your code and nothing else. When you are designing the UI for your application, you don’t need to see the project structure at all times. That is what “contexts” are about, it allows you focus on the task you are doing by modifying the IDE to offer just the tools you need.

Let’s see for example, this shot of RadPHP XE2:

You are writing code, but there are several tools shown that are totally useless at that moment, you don’t need the Object Inspector for anything, nor the Tool Palette, nor the Project Manager. Wouldn’t be great to have all that space available for writing code? This is what we have tried to fix on HTML5 Builder.

To see which contexts are available, always check at the top right of the IDE, you will see something like this:

The contexts available depend on the type of module you have focused. For example, Client Pages have an extra context called Template, and HTML pages have another context called Preview. You can switch from one context to another just clicking on the label for the context you want to switch to. The one that is active will be highlighted. In this shot, these are the context available for a Server Page, let’s take a look at the different contexts:

Home

This is the default context, it’s always available, and shows global options. In this context you can access the Project Manager, Packages, all the wizards for deployment, internationalization, documentation, etc, and the help.

Code

When you switch to this context, the IDE hides the tools that are not needed, like Object Inspector, Tool Palette, Database Explorer, etc, and shows only the Structure, and the code editor, giving you all the space you need to write code comfortably.

If you check at the right and at the bottom of the screen, you will see some arrows, that means there are another tool available there, but are secondary tools which are not actually required to write code. You can click on the arrows and expand them.

You will get the Templates window, and at the bottom, several tools like Breakpoints, Messages, etc.

Design

On this context, the IDE shows the design tools, like Structure, Object Inspector, Tool Palette and Data Explorer. Just remark that we have even hidden the status bar that was available in Code context, so you get more space for the design.

History

This context provides the tools you need to rollback to a previous version of the file or to compare different versions so you can keep track of your changes.

Debug

Switching to this context, makes the IDE show the tools you will be interested when debugging, like Watches, Locals, Globals, Call Stack, Evaluate/Modify, etc.

Secondary Toolbar

Pay attention to the secondary toolbar you get on top of the content you are editing, is smaller than the top toolbar and contain tools specific to the content you are editing. Also that toolbar shows only the options available depending on what can be done, for example, you cannot copy some text if you don’t have something selected, so that option is not shown.

Here are some shots of the secondary toolbar for the different contexts and status:

Code Toolbar – Nothing selected

Code Toolbar – Something selected

 

Design Toolbar – Single component selected

Design Toolbar – Multiple component selected

 

As you can see, the IDE shows the right tools, at the right time, preventing you from having to reorganize the tools to be comfortable when working on your application.