Share My Creation Pen&Paper: PWCT for Basic ABMaterial WebApps

The intension of Pen & Paper is the creation of ABMaterial WebApps as depicted in the drawing above. This was developed as a pet project out of a personal need to create ABMaterial WebApps. So far everything has gone well with the outputs.

1. The ABMaterial Library comes out with an XML file that has vast information about the components (depicted as classed) including their properties (attributes), events and methods. Any Library viewer is able to access these too.
2. These classes are represented as property bags in Pen & Paper so that I can create any component by just changing the various attributes, whether true/false, specifying text etc. The way the components are built, initialized and added to pages/containers/modal sheets has been explained in detail in the ABMaterial Demo, where all of this started.
3&4. On creating an ABM project with Pen & Paper, two databases are created, one to store the project definition (pages and component structures i.e. propertybags) and the other a production one that the data will be stored in. These are both in SQLite. Pen & Paper has functionality to perform a DAO (Data Access Object) link for each backend table and fields you want to link a component to. This is essence creates a CRUD code base. This was inspired by the ABMCRUD generator that produces a structure of ones ABMTable and ABMModal sheet with the specific input components.
5. On Project Build, Pen & Paper produces a complete B4J application including the source code that can be compiled to generate a working version of an ABM Web Application.
6. Pen & Paper does not come bundled with ABMaterial, is not affiliated with ABMaterial and to compile any Pen & Paper project to a fully fledged working ABM Webapp, you need the ABM Libraries. It is just a helper tool to elimitate the repetitive nature of creating projects, pages, containers, modalsheets, etc, in a programming without coding technology fashion. It does NOT in anyway replace ABM or intends to replicate its functionality as it just generates B4J code for your ABM application, this being achieved by use of property bags to create your components and generate the respective source code based on your options, eliminating the need to type code and what anyone gets out is the basic stuff to make ones project work. Not everything ABM is here anyway.

As everything that has a beginning has an end. This personal enjoyment project will stop being maintained as other things will evolve. As on 31 March 2018, there is no intention to advance this any further than what it is. Thanks for B4J this project was possible.

Steps in using Pen & Paper

• Get everything related to Pen&Paper from this DropBox Link. Get executable from jar folder.
• See videos below on usage and related articles
• Please note that not all ABM components are covered with Pen&Paper as yet.

2018 Tutorials

Creating a Sign In Modal Dialog with Options

Interesting Tutorials 2017-12-20

Creating a simple 'Contacts' ABMaterial WebApp - Part 1
Creating a simple 'Contacts' ABMaterial WebApp - Part 2
Creating a simple 'Contacts' ABMaterial WebApp - Part 3

Below are some of the articles touching on code generated by Pen&Paper.

• ABMaterial Pocket Reference (225 page PDF on ABMaterial 3.75 for your pleasure)
• ABMaterial Stats (3.50 vs 3.75)

• Pen & Paper: Create & Run a-simple hello ABMaterial Webapp
• Android2ABMaterial: A Personal Experiment
• JustGage
• My take on the Grid
• Dashboard Creation with JustGage
• How I created my first ABMaterial WebApp without writing any line of code
• Advay: An ABMaterial WebApp with source code
• Themes Quick Reference
• ABMTable - DrillDown and Cloning Records
• Creating Dynamic Legend Specific Calendar Events
• Gantt Chart: (work in progress)
• Using MS Excel as a reporting Engine for DB Records
• Creating dynamic charts from DB Records
• Creating dynamic ABMSideBarItems from DB Records
• Introducing SourceCode Preview of MyMaterial
• Automating ABMTable CRUD functionality
• Publishing ABMaterial WebApps to VPS

ABMaterial WebApps created with Pen&Paper

Bible.Show

CodeProject Article

Creating the Bible.Show WebApp with ABMaterial

Some YouTube Links


Pen&Paper is built using B4J and distributed with jMashProjectProfile.

NB: You will need the ABMaterial Framework to compile the generated source code.

 

[Mashiane]

MyMaterial.Show: A Play With Icons

What's New

1. Wow, I'm very much enjoying this tool. The latest example is the inclusion of the FontAwesome icons to the tool.
2. The ABMLabel component designer has been added a combobox with all the FontAwesome fonts and those fonts built into ABMaterial Framework.

The color of the icon depends on the LabelTheme used, so I decided to check the RGB colors. Awesome!!!

 

[Mashiane]

MyMaterial.Show: ABMTabs

What's New

I have been trying the ABMTabs component for the better part of the day. So far so good, at least I get to generate the source code for the component. I still need to master the ABMContainer though for a better experience. For now its passed as a Null.

For ease of reference, the design screens now show which component you are working on, Label at the top.

More work is coming here.

1. Define the ABMTab
2. Define the ABMTab(Panel) that sits inside the ABMTabs added with .AddTab method.

Next Steps, Define ABMContainer for each tab.

 

[Mashiane]

MyMaterial.Show: ABMSocialShare

I found a page with some nice social sharing on the demo, so i built along. They are nice buttons, this is so cool. You can specify your own URL here!!!

I have however excluded the AddFaceBookExtended method in my code designer. I was also trying to use different button types for them

 

[Mashiane]

MyMaterial.Show : ABMCalendar & ABMCalendarEvent

Whooa!!! This is another interesting component added to this Designer. The nice part about this is I got introduced into events, specifically the FetchData event of the calendar.

 

[Mashiane]

MyMaterial.Show: ABMDateTimeScroller & ABMDateTimePicker

Wow, other additional controls added. These two controls have a lot more properties than defined here.

I'm in a process of adding scrollers to my pages so that one can add more properties to the Components. For the DateScroller, the properties defined by arrays are hard coded.

Ta!

 

[Mashiane]

MyMaterial.Show : ABMInput

Almost there, my aim is to try and create a WebApp version of my android app using ABMaterial. So far so close. Just finalized the input controls and will start working on the screen designs. I still need to master the grid either way. I will also have to add setting and getting the screen component values.

For some reason the AutoComplete works well on google chrome, firefox didnt display it.

 

[JakeBullet70]

Love it!

 

[Mashiane]

I have started a thread on my experiences on creating an ABMaterial WebApp based on an android app I developed.

Check it out here.

 

[Mashiane]

MyMaterial.Show : ABMNavigationBar

Part of the ABMNavigationBar has been completed and it displays nicely. To add is a designer for the top, side buttons and also sub side buttons.

 

[Mashiane]

MyMaterial.Show: NavigationBar (TopItem & TopSubItems)

Well, this has been going smoothly more than I have expected. I have been able to add the ABMTopItem and ABMTopSubItems in the NavigationBar. Yes, I will soon be adding the events handling to these components, but I have been wanting to see if I can design something first.

 

[Mashiane]

MyMaterial.Show: What's Coming...

Please Note: So far, this tool is based on the ABMaterial Demo Example

1. Done - ConnectPage builds your component during runtime and thus makes your page dynamic. At times you dont want your components dynamic, so with the coming version of MyMaterial.Show, you can indicate that you want a component "Static" by just checking a checkbox. This will create your component in the BuildPage sub routine, thus inserting that component as part of the generated HTML of that page.
2. When defining a page, you can indicate if it will require Social Media Authorization and then can add the components for that page for Social Media auth.
3. Done - Each component now has a "DB Field" property, with this property you specify the name of the field in the database to save the component contents to. This is used when reading component text to a map variable.
4. Done - Each page definition will have a "DB Table" property to indicate the table name the contents of that page will be saved to.
5. I have added a method to the page called ...GetComponents. This returns a Map of the component contents linked to the "DB Field" property. You can use this map in whatever way you see fit. I will add another Method to assign a map contents from the map to the page components.
6. I have added ShowGridInfo on the Page definition so that you can see your grid, this was interesting. It's important to go through the READMEs done by alwaysbusy, got that there.
7. I have also added all events per each of the components that I have created designers for so far. You can add your code there for the methods.
8. Some tests to be done to see how ABMaterial plays with php. The app I want to concert to a webapp already uses PHP to speak to the MySQL backend.

'Get the contents of the page input components and save to a map
Sub frmRegisterGetContents() As Map
    Dim pMap As Map
    pMap.Initialize
    DateTime.DateFormat = "dd/MM/yyyy"
    DateTime.TimeFormat = "HH:mm"
Dim txtFirstName As ABMInput = page.Component("txtFirstName")
pMap.put("firstname", txtFirstName.Text)
Dim txtLastName As ABMInput = page.Component("txtLastName")
pMap.put("lastname", txtLastName.Text)
Dim txtYearJoined As ABMInput = page.Component("txtYearJoined")
pMap.put("yearjoined", txtYearJoined.Text)
Dim txtYearLeft As ABMInput = page.Component("txtYearLeft")
pMap.put("yearleft", txtYearLeft.Text)
Dim txtGradeCompleted As ABMInput = page.Component("txtGradeCompleted")
pMap.put("grade", txtGradeCompleted.Text)
Dim txtEmail As ABMInput = page.Component("txtEmail")
pMap.put("email", txtEmail.Text)
Dim txtMobilePhone As ABMInput = page.Component("txtMobilePhone")
pMap.put("mobilephone", txtMobilePhone.Text)
Dim txtCurrentProfession As ABMInput = page.Component("txtCurrentProfession")
pMap.put("profession", txtCurrentProfession.Text)
Dim txtCurrentInstitution As ABMInput = page.Component("txtCurrentInstitution")
pMap.put("institution", txtCurrentInstitution.Text)
Return pMap
End Sub

 

[Mashiane]

MyMaterial.Show: ItemTheme

Apparently each list item can have its own theme. The ThemeBuilder for MyMaterial.Show has also been added to include this important theme! The list component has not been added yet as part of the designers. This is coming soon...

Lovely!

 

[Mashiane]

MyMaterial.Show

What's New (Some interesting enhancements)

1. The InputTheme for ABMInput has been added to the designer. This changes the IconColor if your ABMInput component has an icon.
2. The ItemTheme has also been added for List Items.
3. Form Validation has also been added for ABMInput, ABMCombo, ABMFileInput Components. I have discussed Form Validation in this post.
4. Form component contents are returnable as a Map variable, this can be passed to the frm... Validate method to validate form input.

 

[Mashiane]

MyMaterial.Show: What's New

I have re-organized the flow with an opening Welcome page. For now that I have not mastered the SideNavigation of the NavigationBar I have used buttons that navigate to the respective pages.

Please Note: Everything that runs on the MyMaterial.b4j project was created by MyMaterial.Show without writing a single line of source code.

Known Issues

• For now the ABMTabs do not load as I have not done a designer for Components and ModalSheet thus I have passed Null there
  
• ABMIcons do not load on the static pages but only load on ConnectPage, I dont know yet if this is by design

Enjoy

PS: Things that I still need to master (no other component will be implemented after this as I believe this tool will have the basic functionality to create simple WebApps)

• List
• GoogleMap
• SideNavigation
• ComboBox
• Table
  
• Thee Grid
• CRUD Generator

 

[Mashiane]

MyMaterial.Show: ABMSocialOAuth

Just finished the ABMSocialOAuth component in the designer. A very simple component. This meant some changes in the page designer were needed.

1. Use Social Auth checkbox was added to the page designer and
2. The RowCell position of where the SocialOAuth component will reside.

You use the More Components > ABMSocialOAuth menu item to add the various SocialOAuth items.

 

[JakeBullet70]

@Mashiane, just REALLY great work! @alwaysbusy , just an incredible framework you put together.

 

[Mashiane]

MyMaterial.Show : ABMSignaturePad

I have just added the ABMSignaturePad to the designer. This is one interesting component. I'm thinking of a lot of usage for this...

Wow @alwaysbusy , thanks for this framework...

 

[Mashiane]

Just created a post on creating an Non Modal Login page with Social authorization...

https://www.b4x.com/android/forum/t...ial-my-personal-experiment.71235/#post-454091

More posts are coming...

 

[Mashiane]

MyMaterial.Show: What's New

1. The ABMInput component has received a 'Match With' component for validation purposes. This is useful where you want to validate the match between two ABMInput components e.g. Password and ConfirmPassword. You select on the latter component which component it should match with. Both the components should be 'Required' / compulsory content.

 

[Mashiane]

MyMaterial.Show: What's New

The ABMTopItem component designer for the ABMNavigator has been blinged with a Navigate To property. This enables one to select from the project pages which page to navigate to when that top navigation button is selected. This then overwrites the URL property of that component.