Hi y'all
For this tutorial you will need
MashPlugIns
Pen & Paper
Related Articles
Creating a simple 'Contacts' ABMaterial WebApp - Part 2
Creating a simple 'Contacts' ABMaterial WebApp - Part 3
Some time ago, I published how one can create a simple 'Hello World' webapp using Pen & Paper for their ABMaterial projects.
This second installment is how one can create a simple Contacts 'addedit' page for their ABMaterial WebApp. In this tutorial of the MVC approach, we will do the first two, the model and the view. Part 2 will deal with the C (controller) in detail. This page will have input controls, a navigation bar, side bar, and later an offset-ted button.
For now this is what you will do by just following easy 'click here', 'type this and that', 'apply', and with the beauty i.e. Pen & Paper, no code writing at all, all done inside Pen & Paper.
Figure 1
One of the most basic things I'm trying to achieve here is the simplicity of how you can create ABMaterial WebApps without lots of sweat. I always ask myself, how can I make this easier for me to use and quick?
Based on the subject matter of this topic, you will be dealing with form controls. As you are aware, Pen & Paper is about writing as minimal code as possible as the RAD tool itself tries its best to do everything for you. I label it 'simple' because for complex ABMComponents and other things, you will need to plan and write beautiful code, yourself.
Please note: I will not provide any source code for this tutorial as I would really like to encourage a hands on approach into the ins and outs of Pen & Paper and how it can help you CREATE ABMaterial WebApps easier and also faster.
If you have never used Pen & Paper before to create your ABMaterial WebApps, you can get your free version here. You will also need the MashPlugs Library. For this exercise this will suffice. Ohh, one last thing, you will need the ABMaterial Framework 4.00.
Please follow the instructions as they are for simplicity. In no time you will be able to do this in your sleep, better yet, copy these to word, print out and then run the tutorial instructions.
1. On your marks
Here we create our project, its database, a table with fields (the underlying SQLite database is created automatically by Pen & Paper)
Assumptions: You got ABMaterial 4.00 & MashPlugsIns installed in B4J External Libraries and Pen & Paper saved on your PC. If so...
Start Pen & Paper, once opened.
1.1 Open Project Menu > New > Type in Contacts. A couple of things will happen...
1.2. On the tree view select and expand Database and click Add Table, a prompt will ask you of the table name, enter Contacts and click Ok.
1.3. Select Database and expand it, then select Table.Contacts (this is the new table you have created)
1.4. In the property bag (right section of the screen), select Fields tab, we need to add some fields to the table. The id field (autoincrement) has already been added by default when you created the table.
1.5. For each field click the + button in the sub property bag (far right of the screen), type in the fieldname FirstName (This should be text and also check Is Indexed), click Check button to save the field. See image below where these are.
Figure 2
The Contacts table will now have an additional field called FirstName. Add the following fields LastName, Street, StreetNumber, City, Country, ZipCode and Cellphone, all being Text the same way. Now you have a table with some fields in it. For each field, click Add, then specify the details and click Save.
Congratulations, you have created your first Pen & Paper project including its underlying database, a contacts table with fields that you will link to 1. page / 2. container / 3. table. For now we are doing 1. Page.
2. Get Set
Here we create our Contacts page through click and entry methodology. We are not going to write any code for this, yippiee!!!
Now that your database and contacts table are created, its time to link these to the page as they form the model of what we will be doing first, a contacts database. Let's now create the view.
1.6. In the tree view expand Pages and select Add Page, in the prompt type in addeditcontact. The page will be opened for updating its properties.
1.7. Change the Page Title and NavBar Title properties = Contacts, Is Initial Page=True, click the Apply button at the bottom of the property bag. Dont worry about the prompt about Sign Out functionality, click Ok there. The navbar and row components will be added to the tree.
1.8. There is a child item on the tree for this page called addeditcontact.addeditcontact, select it, this is where we will 'define' our view/page.
1.9. In the property bag, on ABMPage tab, set Table Name=Contacts and the Primary Key=id. When done click 'Save' at bottom right of Pen & Paper to save the component.
Figure 3
1.10. Go back to addeditcontact.addeditcontact, in ABMPage tab, select Refresh Fields button, we need to create table linked components for the page. This process refreshes the Field Selector that we will use.
1.11. On the tabs, select Field Selector, this enables us to select the fields to be processed in the database table for this page.
1.12. Here you need to select the fields in sequence of appearance on your page, 1. select id and > to choose it, do the same for 2. firstname, 3. lastname, 4. street, 5. streetnumber, 6. city, 7. country, 8. zipcode and 9. cellnumber. Click Apply at the bottom of the Field Selector. Please note, the information selected with the field selector is temporal and is never saved.
1.13. In the tabs, select ABMComponents, here for each field selected we will indicate what type of field it is and its location on the page. These are all text inputs but for zipcode and cellphone, we need numeric keypads. We also want proper titles for them as the field names are all lowecase and no spaces inbetween.
1.14. As you might have noticed, we have 8 fields in our table besides the 'id' field. We don't want to see the id field and as we will use both s-mall, m-edium and l-arge devices for this page, we can design our page so that for small devices, the components show one after another and for medium and large devices, they show side by side. See the gif above. Now, this is the interesting part.
2.1 Linking each database field to the page
1.15. In the list of fields in the ABMComponents tab, lets do the following, change each property per field necessary. Select the field in the list, change the properties, select check when done to save the properties. The fields are already added by the field selector, so let's select each field, change the property needed and then save. For each fields in this steps change the properties then save it by clicking APPLY.
With the help of the Field Properties tab, you can now for each field update the properties in a Tabular Fashion as depicted below in Figure 5. To have the first first run the Field Selector step and then click Apply on the field selector, that will update the ABMComponents and the Field Properties tabs.
Figure 4
2017-12-23 Update of Figure 4
The component above was created using the XCustomListView.
For each field, change the respective properties to match above, i.e. Title, Component and the rest
R - Row position
C - Cell Position
OS - Offset on Small Devices
SM - Offset on Medium Devices
SL - Offset on Large Devices
Remember: Offset tell how the component should be moved to the right of the page.
SS - Size on Small Devices
SM - Size on Medium Devices
SL - Side on Large Devices
Remember: Size indicate the space that should be taken by the component in a 12 cell row.
PL - Padding Left
PR - Padding Right
These are just the basic properties needed. There are other properties per component that are also found on the Themes e.g. margins and padding that is additional.
E - Enabled
U - Use in Updates
V - Visible
Turning V to off will hide the component on all devices. This we need for the iD.
Remember to click Apply when done updating each field here. Don't change the field name as these are linked to the underlying database table.
1.16. Steps 1.15 above has just helped us both define the elements that will be on our page and their locations and how the page should display in all our devices, 12 in small and 6 for both medium and large. The ABM.GEN_TEL fields are numeric in nature and will show a numeric keypad for the telephone for us to input our numbers.
Now Select ABMRows tabs and ABMCells tabs and these will show you how the definition of the grid statements will be. There is nothing to do on those tabs, so you can leave them out. These have been generated by just specifying each fields/component properties and Pen & Paper will place them at the right locations for you when creating your page/view.
Figure 5.
Now that you have linked your model to the view, now you need to create the 'actual' controls. This is just another way of saying to Pen & Paper, we exist and for each control you can then change its further properties to whatever you want.
1.17. Click ABMPage on the tabs, and click the 'Create Controls' button. The controls will be created on the tree. Your control definition is saved as part of this page and you can change anything here anytime you want and re-create the controls again.
1.18. We also want our page link to be reflected in the SideBar of the navigation. In Pages, select addeditcontact page and select the NavBar tab.
1.18.1 Set these properties:
Show on Global Side Menu=checked,
Side Bar Title=Add Edit Contact,
Global SideBar Icon - use the icon selector, search for 'user' and select the grouped users, this will be 'fa fa-users'
1.18.2 Show Global Side Menu=checked,
When done, select ABMPage tab and in the property bag set Is Initial Page=checked (THIS IS VERY IMPORTANT), and click Apply to save your page. You are done!!
Congratulations are in order again. You created your model where your Contacts will be stored. The next part was then to create the view i.e the look of your page by specifying where each component will sit, what will be its Title etc and now we need to test everything else.
3. Go
Here we run our Contacts page on the browser. When you have completed all this, its time to compile your project. Remember, you can create as many pages as you want within your app to have components anywhere you define and Pen & Paper will do the magic for you. Remember though gabbage in gabbage out.
1.19 Click Project on the menu > Compile and just follow the prompts. When Pen & Paper has done its intelligence, your default browser will open and also the contacts b4j project opened. Run the contacts b4j project and wait for your browser to heart-beat and update itself. Figure 1 will appear.
Thank you for taking time to read and also go through this exercise. Definately, this provides you the basis on how you can use Pen & Paper to create beautiful ABMaterial WebApps. That is how repititive this will be for your different apps and I wanted to provide exactly some part of elimination of the nature of this process.
The Beauty That Is Pen & Paper.
Enjoy
Related Links:
Pen & Paper
MashPlugIns
PS: The next article on this will via the same process of click here, type this there, link the database table, the page components by creating the underlying source code to glue everything together.
Watch this space!
For this tutorial you will need
MashPlugIns
Pen & Paper
Related Articles
Creating a simple 'Contacts' ABMaterial WebApp - Part 2
Creating a simple 'Contacts' ABMaterial WebApp - Part 3
Some time ago, I published how one can create a simple 'Hello World' webapp using Pen & Paper for their ABMaterial projects.
This second installment is how one can create a simple Contacts 'addedit' page for their ABMaterial WebApp. In this tutorial of the MVC approach, we will do the first two, the model and the view. Part 2 will deal with the C (controller) in detail. This page will have input controls, a navigation bar, side bar, and later an offset-ted button.
For now this is what you will do by just following easy 'click here', 'type this and that', 'apply', and with the beauty i.e. Pen & Paper, no code writing at all, all done inside Pen & Paper.
Figure 1
One of the most basic things I'm trying to achieve here is the simplicity of how you can create ABMaterial WebApps without lots of sweat. I always ask myself, how can I make this easier for me to use and quick?
Based on the subject matter of this topic, you will be dealing with form controls. As you are aware, Pen & Paper is about writing as minimal code as possible as the RAD tool itself tries its best to do everything for you. I label it 'simple' because for complex ABMComponents and other things, you will need to plan and write beautiful code, yourself.
Please note: I will not provide any source code for this tutorial as I would really like to encourage a hands on approach into the ins and outs of Pen & Paper and how it can help you CREATE ABMaterial WebApps easier and also faster.
If you have never used Pen & Paper before to create your ABMaterial WebApps, you can get your free version here. You will also need the MashPlugs Library. For this exercise this will suffice. Ohh, one last thing, you will need the ABMaterial Framework 4.00.
Please follow the instructions as they are for simplicity. In no time you will be able to do this in your sleep, better yet, copy these to word, print out and then run the tutorial instructions.
1. On your marks
Here we create our project, its database, a table with fields (the underlying SQLite database is created automatically by Pen & Paper)
Assumptions: You got ABMaterial 4.00 & MashPlugsIns installed in B4J External Libraries and Pen & Paper saved on your PC. If so...
Start Pen & Paper, once opened.
1.1 Open Project Menu > New > Type in Contacts. A couple of things will happen...
1.2. On the tree view select and expand Database and click Add Table, a prompt will ask you of the table name, enter Contacts and click Ok.
1.3. Select Database and expand it, then select Table.Contacts (this is the new table you have created)
1.4. In the property bag (right section of the screen), select Fields tab, we need to add some fields to the table. The id field (autoincrement) has already been added by default when you created the table.
1.5. For each field click the + button in the sub property bag (far right of the screen), type in the fieldname FirstName (This should be text and also check Is Indexed), click Check button to save the field. See image below where these are.
Figure 2
The Contacts table will now have an additional field called FirstName. Add the following fields LastName, Street, StreetNumber, City, Country, ZipCode and Cellphone, all being Text the same way. Now you have a table with some fields in it. For each field, click Add, then specify the details and click Save.
Congratulations, you have created your first Pen & Paper project including its underlying database, a contacts table with fields that you will link to 1. page / 2. container / 3. table. For now we are doing 1. Page.
2. Get Set
Here we create our Contacts page through click and entry methodology. We are not going to write any code for this, yippiee!!!
Now that your database and contacts table are created, its time to link these to the page as they form the model of what we will be doing first, a contacts database. Let's now create the view.
1.6. In the tree view expand Pages and select Add Page, in the prompt type in addeditcontact. The page will be opened for updating its properties.
1.7. Change the Page Title and NavBar Title properties = Contacts, Is Initial Page=True, click the Apply button at the bottom of the property bag. Dont worry about the prompt about Sign Out functionality, click Ok there. The navbar and row components will be added to the tree.
1.8. There is a child item on the tree for this page called addeditcontact.addeditcontact, select it, this is where we will 'define' our view/page.
1.9. In the property bag, on ABMPage tab, set Table Name=Contacts and the Primary Key=id. When done click 'Save' at bottom right of Pen & Paper to save the component.
Figure 3
1.10. Go back to addeditcontact.addeditcontact, in ABMPage tab, select Refresh Fields button, we need to create table linked components for the page. This process refreshes the Field Selector that we will use.
1.11. On the tabs, select Field Selector, this enables us to select the fields to be processed in the database table for this page.
1.12. Here you need to select the fields in sequence of appearance on your page, 1. select id and > to choose it, do the same for 2. firstname, 3. lastname, 4. street, 5. streetnumber, 6. city, 7. country, 8. zipcode and 9. cellnumber. Click Apply at the bottom of the Field Selector. Please note, the information selected with the field selector is temporal and is never saved.
1.13. In the tabs, select ABMComponents, here for each field selected we will indicate what type of field it is and its location on the page. These are all text inputs but for zipcode and cellphone, we need numeric keypads. We also want proper titles for them as the field names are all lowecase and no spaces inbetween.
1.14. As you might have noticed, we have 8 fields in our table besides the 'id' field. We don't want to see the id field and as we will use both s-mall, m-edium and l-arge devices for this page, we can design our page so that for small devices, the components show one after another and for medium and large devices, they show side by side. See the gif above. Now, this is the interesting part.
2.1 Linking each database field to the page
1.15. In the list of fields in the ABMComponents tab, lets do the following, change each property per field necessary. Select the field in the list, change the properties, select check when done to save the properties. The fields are already added by the field selector, so let's select each field, change the property needed and then save. For each fields in this steps change the properties then save it by clicking APPLY.
With the help of the Field Properties tab, you can now for each field update the properties in a Tabular Fashion as depicted below in Figure 5. To have the first first run the Field Selector step and then click Apply on the field selector, that will update the ABMComponents and the Field Properties tabs.
Figure 4
2017-12-23 Update of Figure 4
The component above was created using the XCustomListView.
For each field, change the respective properties to match above, i.e. Title, Component and the rest
R - Row position
C - Cell Position
OS - Offset on Small Devices
SM - Offset on Medium Devices
SL - Offset on Large Devices
Remember: Offset tell how the component should be moved to the right of the page.
SS - Size on Small Devices
SM - Size on Medium Devices
SL - Side on Large Devices
Remember: Size indicate the space that should be taken by the component in a 12 cell row.
PL - Padding Left
PR - Padding Right
These are just the basic properties needed. There are other properties per component that are also found on the Themes e.g. margins and padding that is additional.
E - Enabled
U - Use in Updates
V - Visible
Turning V to off will hide the component on all devices. This we need for the iD.
Remember to click Apply when done updating each field here. Don't change the field name as these are linked to the underlying database table.
1.16. Steps 1.15 above has just helped us both define the elements that will be on our page and their locations and how the page should display in all our devices, 12 in small and 6 for both medium and large. The ABM.GEN_TEL fields are numeric in nature and will show a numeric keypad for the telephone for us to input our numbers.
Now Select ABMRows tabs and ABMCells tabs and these will show you how the definition of the grid statements will be. There is nothing to do on those tabs, so you can leave them out. These have been generated by just specifying each fields/component properties and Pen & Paper will place them at the right locations for you when creating your page/view.
Figure 5.
Now that you have linked your model to the view, now you need to create the 'actual' controls. This is just another way of saying to Pen & Paper, we exist and for each control you can then change its further properties to whatever you want.
1.17. Click ABMPage on the tabs, and click the 'Create Controls' button. The controls will be created on the tree. Your control definition is saved as part of this page and you can change anything here anytime you want and re-create the controls again.
1.18. We also want our page link to be reflected in the SideBar of the navigation. In Pages, select addeditcontact page and select the NavBar tab.
1.18.1 Set these properties:
Show on Global Side Menu=checked,
Side Bar Title=Add Edit Contact,
Global SideBar Icon - use the icon selector, search for 'user' and select the grouped users, this will be 'fa fa-users'
1.18.2 Show Global Side Menu=checked,
When done, select ABMPage tab and in the property bag set Is Initial Page=checked (THIS IS VERY IMPORTANT), and click Apply to save your page. You are done!!
Congratulations are in order again. You created your model where your Contacts will be stored. The next part was then to create the view i.e the look of your page by specifying where each component will sit, what will be its Title etc and now we need to test everything else.
3. Go
Here we run our Contacts page on the browser. When you have completed all this, its time to compile your project. Remember, you can create as many pages as you want within your app to have components anywhere you define and Pen & Paper will do the magic for you. Remember though gabbage in gabbage out.
1.19 Click Project on the menu > Compile and just follow the prompts. When Pen & Paper has done its intelligence, your default browser will open and also the contacts b4j project opened. Run the contacts b4j project and wait for your browser to heart-beat and update itself. Figure 1 will appear.
Thank you for taking time to read and also go through this exercise. Definately, this provides you the basis on how you can use Pen & Paper to create beautiful ABMaterial WebApps. That is how repititive this will be for your different apps and I wanted to provide exactly some part of elimination of the nature of this process.
The Beauty That Is Pen & Paper.
Enjoy
Related Links:
Pen & Paper
MashPlugIns
PS: The next article on this will via the same process of click here, type this there, link the database table, the page components by creating the underlying source code to glue everything together.
Watch this space!
Last edited:
