B4J Tutorial [Pen&Paper] How I created my first ABMaterial WebApp without writing any code

A couple of days ago I posted an article, Android2ABMaterial: A Personal Experiment. This article is about how I created that ABMaterial WebApp using MyMaterial.Show, a code generator I have been working on, FOR PERSONAL ENJOYMENT and thus MY APPROACH. You might do things differently.

Some silly assumptions:

  • You have a working version of ABMaterial Framework 1.22
  • You have studied the ins and outs of the ABMaterial Framework
  • You understand how to create ABMaterial Framework Apps
Preparations

1. Get your version of ABMaterial Framework from here. MyMaterial.Show does not come bundled with the ABMaterial Libraries.
2. Get your own free version of MyMaterial.Show from here.
3. Use the database scripts in LFJSS folder to create a MySQL database with named tables. This is for this example purposes only.
4. Open the lfjss.db project using MyMaterial.Show, this is inside the LFJSS folder
5. Update your Project Definition for database connection settings and also smtp details. Apply.
6. Project > Compile to generate the LFJSS ABMaterial Project
7. Reference the generated LFJSS project to the ABMaterial Libraries
8. Run the generated B4J LFJSS project
9. Refresh the opened web browser page. Firefox seems to work best with this.
10. You can go through the post to see how the ABMaterial Project was created.

The main features of this post are:
  • ABMList (Static / Dynamic Loading)
  • ABMCombo (Static Loading)
  • ABMInput (Text, Area)
  • ABMDateTimePicker
  • ABMTheme
  • ABMPage
  • ABMApplication
  • ABMShared
  • MySQL database connectivity (Creating, Reading, Updating & Deleting Records)
  • ABMFooter
  • ABMSocialShare
  • ABMButton + ABMActionButtons
  • ABMNavigationBar
  • ABMSideBar
  • ABMTopItem (NavBar Buttons)

Good luck!

This has been the journey...

1. Start MyMaterial.Show
2. Goto File > New, type in your database name, in this case lfss. This creates a SQL database file for your project. You can create different projects using this method. This will open up the Project Design page. Use the attached lfjss.pdf file and change the details appropriately. In the pdf there is a row with Description***, after that row the details are the meanings of each of the properties. You can type in your donation key, your database credentials, smtp details for your project to send emails using smtp, the left and right footers etc. Click Apply.

ProjectDesign.png

3. Next you will need project resources, e.g. audio, images or referenced pdf files.
4. Goto Resources > Audio (select folder with your audio files, these will be copied to your project folder), do Images and PDFs if available. You can then update your referenced images on the Project Design Screen.
5. Create the MySQL database whether locally or remotely, after that, you need to link it with MyMaterial.Show project. Currently MyMaterial.Show has been set up for MySQL databases ONLY. SQLite will be covered soon and SQL server. I use Database.Net for my database management.

These are my table creation scripts for this project (only those I will explain here, others are similar)

Users table

B4X:
CREATE TABLE `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `firstname` varchar(50) DEFAULT NULL,
  `lastname` varchar(50) DEFAULT NULL,
  `fullname` varchar(200) DEFAULT NULL,
  `email` varchar(200) DEFAULT NULL,
  `password` varchar(100) DEFAULT NULL,
  `city` varchar(100) DEFAULT NULL,
  `province` varchar(100) DEFAULT NULL,
  `mobilephone` varchar(20) DEFAULT NULL,
  `graduationyear` varchar(10) DEFAULT NULL,
  `birthday` varchar(20) DEFAULT NULL,
  `gender` varchar(10) DEFAULT NULL,
  `ismissing` varchar(10) DEFAULT NULL,
  `inmemory` varchar(10) DEFAULT NULL,
  `agenow` varchar(10) DEFAULT NULL,
  `latitude` varchar(20) DEFAULT NULL,
  `longitude` varchar(20) DEFAULT NULL,
  `yearjoined` varchar(10) DEFAULT NULL,
  `grade` varchar(10) DEFAULT NULL,
  `isadmin` varchar(10) DEFAULT NULL,
  `profession` varchar(255) DEFAULT NULL,
  `institution` varchar(255) DEFAULT NULL,
  `isactive` varchar(10) DEFAULT NULL,
  PRIMARY KEY (`id`),
  KEY `idxusers_inmemory` (`inmemory`),
  KEY `idxusers_isactive` (`isactive`),
  KEY `idxusers_ismissing` (`ismissing`),
  KEY `idxusers_graduationyear` (`graduationyear`),
  KEY `idxusers_email` (`email`)
) ENGINE=InnoDB AUTO_INCREMENT=429 DEFAULT CHARSET=utf8;

Donation Projects

B4X:
CREATE TABLE `projects` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `project` varchar(50) DEFAULT NULL,
  `target` varchar(50) DEFAULT NULL,
  `received` varchar(50) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8;

Announcements / News

B4X:
CREATE TABLE `news` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `datepublished` varchar(20) DEFAULT NULL,
  `title` varchar(255) DEFAULT NULL,
  `content` text,
  `writtenby` varchar(50) DEFAULT NULL,
  `mediafile` varchar(255) DEFAULT NULL,
  `newsdate` varchar(20) DEFAULT NULL,
  PRIMARY KEY (`id`),
  KEY `idxnews_newsdate` (`newsdate`),
  KEY `idxnews_datepublished` (`datepublished`)
) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=utf8;

6. Ensure you have specified the correct connection details in your Project Design.
7. Goto Database > Test Connection, if successful, you will be informed. The next prompt will ask you if you want to document your database. Confirm with a yes. This just ensures that your database schema is properly documented for referencing purposes when creating components. You should see something like this..

DatabaseLink.png
 

Attachments

  • lfjss.pdf
    48.1 KB · Views: 397
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Designing the Sign In Page

The code for the sign in page was touched upon in the personal experiment. You have created your database, linked the database to MyMaterial.Show and now you can start using it when creating pages and components.

For this to work, ensure that you have created your themes first as these will be referenced in your component creation process. You can use the quick reference on how to create themes.

To create a theme with MyMaterial.Show, goto Designers > Themes and select the theme type to create. On the screen that appears type in the theme name and select the theme properties that you want to change and click Apply.

I created an input theme by only changing these properties...

B4X:
MyTheme.AddInputTheme("inputtheme")
MyTheme.Input("inputtheme").inputcolor = ABM.COLOR_ORANGE
MyTheme.Input("inputtheme").forecolor = ABM.COLOR_ORANGE
MyTheme.Input("inputtheme").forecolorintensity = ABM.INTENSITY_LIGHTEN1
MyTheme.Input("inputtheme").inputcolorintensity = ABM.INTENSITY_LIGHTEN1
MyTheme.Input("inputtheme").focusforecolor = ABM.COLOR_ORANGE
MyTheme.Input("inputtheme").focusforecolorintensity = ABM.INTENSITY_LIGHTEN1

To create the Sign In Page, i went to Page > New Page. A newpage was created for my project. Change the page name to be frmSignIn. Use the attached frmSignIn.pdf and change the properties accordingly. By deafult, all checkbox values for each component created with MyMaterial.Show are False.

To note about the page definition for the Sign In page are the following:

DB Table: linked to the 'users' table
Primary Key Field:
Manage CRUD : False (the page does not have any CRUD functionality. When selected to be ON, MyMaterial will generate the CRUD code as discussed in my experiment project.
Add NavBar: True, we want the page to have a navbar. A navbar component will be created by MyMaterial for this page and we dont have to add it again. Etc etc. See the bottom section of the pdf file of what each option does.

The Goto and Process buttons are the same and you should have either and not both on the page. As an example, you can have Goto Sign In and not Process Sign in. This is because the icons are the same on the NavBar.

As soon as you click Apply after updating the page properties, all the respective components for the navbar, action buttons, sub action buttons will be created for you. All you need to do is to create the input components for sign in.

Before you do that though, you need to indicate the grid. By default, on the page properties, there is a No of Rows. Depending on the number of pages you specify, a 'row1' component will be created on the page with..

B4X:
page.AddRows(10, True, "").AddCells12(1, "")

By default, the CenterOnPage is True. You will have to edit the component to change that property to false.

You will note that in my experiment, on the SideBar, there is a link to this page. On the attached frmSignIn.pdf page, that was achieved by turning On Side Bar Menu to on, specifying the Side Menu Icon. As we wanted the global side bar menu to appear on this page too, Show Side Bar Menu was also turned on.

Select the frmSignIn page on the tree, goto Designers > Components and select ABMInput. Use the attached frmSignIn.txtEmail.pdf file to configure the component. You can after when finished with it, (click Apply), select the newly added component, goto Maintain > Copy, then select the frmSignIn page and select Paste on the Maintain menu.

Use the attached frmSignIn.txtPassword.pdf file to create the password text component.

After you have created the sign in components, you are done. To view your page code, select the frmSignIn page and select the 'Create' tab, your page code has been generated automatically. You should see something like this...

frmSignInCode.png


NB: Please study the code, compare to the Demo app too, see the relations and what works for you and does not too. This for me is evolving as it has been.
 

Attachments

  • frmSignIn.pdf
    11.7 KB · Views: 389
  • frmSignIn.txtEmail.pdf
    6.6 KB · Views: 355
  • frmSignIn.txtPassword.pdf
    6.5 KB · Views: 380
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Designing the Sign Up Page

Use the attached designer scripts to create the sign up form. Follow the same approach used above, create the page first, use the page script, add the input components.

You should note the grid definition for this page..

B4X:
page.AddRows(1, True, "").AddCells12(1, "")
    page.AddRows(10, True, "").AddCellsOS(2, 0, 0, 0, 12, 6, 6, "")
    page.BuildGrid 'IMPORTANT once you loaded the complete grid AND before you start adding components

Please note the options for the Sign Up page, e.g. Sign Up functionality, the fields from the users table to be used etc. If all goes well, you should have your Sign Up page done and created.

frmSignUp.row1.png frmSignUp.row2.png

The sign up screen here has a lot of details required from the user. This is meant for the user to ensure that their profile details are updated first time. This screen only has Create functionality as only the user details are added to the database. For deleting, updating other details another screen will be required.

You will note that with the Missing, In Memory functionality where Missing users are listed and those who passed on are listed. A system admin will maintain those details using a similar page but with additional functionality.

For the gender combo, you will need to add the comboitems on that component designer, see image below for reference.

frmSignUp.cboGender.png
 

Attachments

  • frmSignUp.pdf
    11.7 KB · Views: 391
  • frmSignUp.Components.zip
    59.7 KB · Views: 349
Last edited:

Mashiane

Expert
Licensed User
Longtime User
The Main Page

After a user signs in, they are taken to the main screen to access the rest of the functionalities for the app. This is basically a static list of choices that a user selects and the app navigates to the appropriate page.

After using the page designer, the only item I added to this page was the ABMList only. As this is a static list, within the list component, you will need to create the items for the list.

frmMain.lst271.png
 

Attachments

  • frmMain.pdf
    11.7 KB · Views: 346
  • frmMain.lst271.pdf
    5.9 KB · Views: 320
Last edited:

Mashiane

Expert
Licensed User
Longtime User
CRUD Design: Project Donations

As the rest of the pages will have almost the same functionality, i.e. loading dynamic lists and CRUD functionality, we will look at just one of these. However as list contents are different, we will also explore the other lists for Announcements, Project Donations, In Memory etc. For this post, we will look at CRUD functionality of Project Donations.

1. Create a page with the specs as defined in frmDonationProject.pdf
2. Create the input components as defined in frmDonationProject.Components.zip

You are done, the data will be linked to the 'projects' table. Anytime to create similar pages, you will follow the same approach. Its the same approach I followed for my bank form, classmates etc.
 

Attachments

  • frmDonationProject.pdf
    11.7 KB · Views: 370
  • frmDonationProject.Components.zip
    16.5 KB · Views: 358

Mashiane

Expert
Licensed User
Longtime User
Dynamic ABMList Loading: Project Donations

The above post dealt with how I created my CRUD code for adding, deleting, updating project donations. When a user select donations from the menu, a list of available donations should be listed.

1. Add a new page and define it as provided in frmDonations.pdf
2. Create the ABMList on the page, this being the only component on the page.
 

Attachments

  • frmDonationProjects.pdf
    11.7 KB · Views: 363
  • frmDonationProjects.lstDonationProjects.pdf
    6 KB · Views: 351

Mashiane

Expert
Licensed User
Longtime User
Rest of the components

Here is the rest of the components definitions... You can also run the attached project for more details.

It is however better to create a project yourself and test your understanding of the ABMaterial Framework via the available Demo apps.

The tool in itself is not a replacement of the many posibilities of the framework and what it can do as it is limited to what I have managed to learn and pick up.

I am looking forward and excited about the new ABMAD tool and what it will do. All the best with your ABMaterial en devours.
 

Attachments

  • lfjss.zip
    297.9 KB · Views: 367
Last edited:
Top