overview-page

Home / User Interface and Page

User Interface and Page

In Elements, your application user interface that you see on the browser is called a page. A page usually consists of 2 files, an interface PHP (.php) file that you put the interface layouts in, and its corresponding event handler in form of a Javascript (.js) file with a same name. However, only the interface file is mandatory.

All the files that define pages, must be stored on the app/gui directory. To easily categorize pages, you may create subdirectories under the app/gui directory.

A page is mostly created from 2 files, a page called hello created by writing a hello.php and its event handler hello.js in the app/gui directory, depends on your need, the event handler file can be ignored.

The PHP file that forms a page is called the page interface while the corresponding Javascript file is called the event handler.

---

Acessing Page From Web Browser

Elements uses hash to determine which page to load. This will make you able to use the browser's back and forward button, just like regular non AJAX based web applications.

For example, you installed Elements on http://localhost/elements, and you have created a page called welcome by creating welcome.php and its corresponding event handler welcome.js on the app/gui directory.

Then you can simply access that page from the browser using URL: http://localhost/elements/#welcome

This also works with subdirectories, for example, if you create a sales directory inside the app/gui, and then create a page called report inside it, then it will be acessible by using URL: http://localhost/elements/#sales/report.

---

Layouting Your Interface

Just as regular website, you can use HTML to layout your interface, write your interface inside the page's PHP file. All PHP's powerful functionality is available, additionally also Elements' built-in objects such as $_APP, $_DB, and $_ACL.

However, the most powerful feature is, you also can use Elements' built-in components, to create a rich internet application, faster.