Simple PHP Web App in HTML5 Builder

The first application I'll create will be similar to sample ones I had tried in RadPHP. They were simple PHP tutorials and they worked--somewhat. I had some issues, but don't remember whether it was getting all the right libraries in the right place or whether it worked from some locations or browsers or what. In any case, I'm hoping HTML5 Builder will make the process a little smoother.

The IDE

Starting up the HTML5 Builder IDE is different from other IDEs in RAD Studio. The default theme is black with white text (no other themes are available yet), there is no menu bar, the toolbar icons change with the context as do the panels. I like it--it looks nice and clean!

Selecting New gives me four options, displayed in the right-hand pane instead of a pop-up modal dialog: 1) Client Mobile, 2) Client Web, 3) Server Mobile, and 4) Server Web. (Interesting how the only carry-over from RadPHP is now in last place.) As you single-click on each application type, the bottom half of the panel gives a description; the two server types also provide links to more information and to Embarcadero's tutorials.

When I double-click on the Server Web Application icon, the PHP engine, the RPCL, and various other things needed to aid in the development of server web apps written in PHP is loaded. If I close that project and create a different PHP server application, that stuff does not need to be reloaded until I restart HTML5 Builder.

Once all the libraries are loaded, the context changes and I'm in design mode. It's interesting to watch things change between contexts, toolbar buttons are visibly removed and added and panels change size and content. The context can easily be changed by clicking on one of the following links, displayed to the right of the toolbar icons: "Home | Code | Design | History | Debug". The current context link is a different color than the others. Home takes me back to the screen I saw when HTML5 Builder first started, or what you might think of as the Welcome screen in Delphi. The Code and Design links switch between the code editor and the visual component screen, just like Delpi (and F12 is the familiar hot key for that). History will show changes in the code over time. And Debug is setup with debugging panels for watching variables, tracing code execution and so forth. So it's mostly familiar and nicely organized. Good!

Hello World!

It's always best to start with the simplest of projects when learning a new system. Get your feet wet in the new environment before cranking up the complexity of an intricate set of logic and controls. So I'll start with the ubiquitous Hello World. The documentation for HTML5 Builder is an order of magnitude better than it's predecessor (RadPHP). In fact, there's no need to repeat it here. Instead, this is more of my impression or review of the product and, perhaps, some filling in the gaps where I think the documentation may not be clear or complete.

Placing controls on the page is very similar to using Delphi or C++ in design mode. Choose from the tool palette, drag and drop, resize, etc. But since this is PHP, the code is quite a bit different from Delphi, of course. Curly braces replace begin/end pairs, there are no interface/implementation sections, variables start with $, strings are concatenated with periods, and the "this" object is not assumed in classes. But following the tutorial and hitting F9 quickly produces the simple page in my default web browser and typing in a name and hitting the button shows the message.

Cool!

Next up--creating your own RPCL components in HTML5 Builder.