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:
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.
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.
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.
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.
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.
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.