Now that we have Divblox configured and we understand the basic concepts, let's create a single-page "Hello World" app.
In this example we will create a simple single-page app that will display the following:
- A logo for our app, using a separate image viewer component
- An input box that we will use to send some text to the server
- A submit button that will trigger the operation to send our input to the server and display a result
Step 1 - A New Component
Let's create a new component that will serve as our app's page.
- Login to the Divblox setup page at /divblox in your project's folder on localhost.
http://localhost/divblox(if you project is in the webserver's root path)
- Open the Component Builder and create a new custom component called "hello world". This component should be placed in the grouping "pages" in order to be used as a page.
Step 2 - Adding Content
Let's open the newly created component to work on it using the Component Builder
- You can click on the link provided when the component is created or you can find your component by searching "hello world" on the default Component Builder page
- Add a container to the page and make it full width
- Add a row with 1 column to the container. This column will serve as the wrapper for our content
- Add the "imageviewer" component as a sub component by clicking "+ Component" and selecting it from the list of available components
- Add a basic input component by clicking "+ Component" and selecting "Basic Component -> Input Types -> Form Control Email"
- Add a basic button component by clicking "+ Component" and selecting "Basic Component -> Buttons -> Simple Primary Button"
Step 3 - Component Customization
Let's do some basic customization on our image to display our logo
- The imageviewer component has a function called
- Add the following code to the bottom of the hello_world component class to override the subComponentLoadedCallBack function to update the image:
Step 4 - Processing Input
Let's now send the input to the server and get a response
- We will adapt the functionality that is currently handling the button click by using Divblox's built in request function to send the data to the server and handle the response
- The code below handles the click action for our button. Right now it simply mimicks that something is happening when you click the button
- Let's change the click handler function to achieve our goal:
- We are currently not getting a successful response from the server because we still need to implement a function on the server to handle our request. We can do this by adding the following as a function to our component's .php file
Step 5 - Finishing Up
Divblox will show a landing page for the anonymous user by default. If we want to rather load our newly created page as the default we need to tell Divblox this by updating our project.js file:
And that's it! We just created a basic app that touches on the core Divblox concepts. We can now view our app at:
http://localhost/ (if you project is in the webserver's root path)