phpFox v4 introduced a new way to make apps for our system. We focused on making it easier to create and maintain an app, plus keep everything related to that app in one directory. Apps that you will be working with can be found in the folder /PF.Site/Apps/. When you first visit this folder you will notice there are some apps already there. These are some of the core apps provided by phpFox and is a great place to see how apps work.
App File Structure
First, lets look over the file structure of an app:
| Name | Info |
|---|---|
| /assets/ | Store static resources for app: JS, CSS, LESS, images ... |
| /callback/ | Support call callback for app. |
| /hooks/ | Support add hook for app (same as plugin of module). |
| /views/ | HTML files to control the layout of each page. |
| /app.json | Main config file for each app. |
| /app.lock | App is installed when this file exists. |
| /start.php | File is loaded on every page and is designed to be used to create routes. |
Creating a New App
The best way to get things started is to create a small app showing the most common API functions we use.
Creating a New App
To create an app, navigate over to the folder /PF.Site/Apps/. Create a folder called Sample. Navigate into that folder and create a file called app.json and open it up. Place the following content in it.
...
With this CSS in place, if you refresh your app you will find the users name now have a darker background.
And if you want to styling your App with LESS, you can add a file main.less in the folder assets. In this file, you can use all variables of the phpFox core and the current theme. But, note that it requires to rebuild bootstrap core to apply the style. So, you must rebuild bootstrap core after installing the app (which styling in the less file) or changing the less file.
Next, let's create a new file called autoload.js and paste the following
...
Our product requires that you place any of your JavaScript code within our $Ready function.
| Info |
|---|
phpFox uses jQuery as its JavaScript library. |
If you want to styling your App with LESS, you can add a file main.less in the folder assets. In this file, you can use all variables of the phpFox core and the current theme. But, note that it requires to rebuild bootstrap core to apply the style. So, you must rebuild bootstrap core after installing the app (which styling in the less file) or changing the less file.
What's Next?
Congratulations on creating your first app! This was a rather basic app, but it gave you an idea of how easily it is to create apps with phpFox. Next, you might want to check out all the API Functions that you can use in your apps.
...