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:
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:
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.
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
Donation Projects
Announcements / News
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..
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
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.
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..
Attachments
Last edited: