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

Mashiane · Aug 22, 2016

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)

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.

hibrid0 · Sep 8, 2016

can you share the libraries I need to this?
I see a folder called libraries but is just .jar and my B4J dont show this libraries I cant run the examples.

Private Toast As ToastMessageShow

B4X:

Private Toast As ToastMessageShow
Unknown type: toastmessagesshow.

If I add this library https://www.b4x.com/android/forum/threads/toastmessageshow-library.36086/#content I get more error like this:

B4J version: 4.50
Parsing code. (0.12s)
Compiling code. Error
Error compiling program.
Error description: Unknown member: toasticonsize32x32
Occurred on line: 303
Toast.ToastIconSize32x32
Word: toasticonsize32x32

alwaysbusy · Sep 8, 2016

Noticed this too. They are in the 'libraries' folder, but are missing the .xml files. I think it would be better if in the first post the links to the needed B4J libraries were added. It will also give credit to the ones who made them.

As for now, just do a search on the forum and download them (there are three libs, see 'libraries' folder)

hibrid0 · Sep 8, 2016

Yes I found the library, but the library show an error. I see the images and is too amazing!.
That's because I want to test.
But was my mistake, because the toast has version 1.0 and 1.1 on the same post and I dont see it.

Just a new search the error and I found my mistake.

Thanks a lot, now I'm testing this new tool.

hibrid0 · Sep 8, 2016

I know this is a new borning tool, error reported.

Problem:
When Apply delete the last object I create.

Steps.
1. Add Page.
2. Fill Date.
3. Apply
4. Add button
5. Fill data
6. Apply.
7. The last order not create button, just delete the last object created on steps 1,2,3.

Or I'dont know how can I use. XD

Mashiane · Sep 8, 2016

alwaysbusy said:
Noticed this too. They are in the 'libraries' folder, but are missing the .xml files. I think it would be better if in the first post the links to the needed B4J libraries were added. It will also give credit to the ones who made them.

As for now, just do a search on the forum and download them (there are three libs, see 'libraries' folder)

Thanks, I have done just that, good shot!

Mashiane · Sep 8, 2016

hibrid0 said:
I know this is a new borning tool, error reported.

Problem:
When Apply delete the last object I create.

Steps.
1. Add Page.
2. Fill Date.
3. Apply
4. Add button
5. Fill data
6. Apply.
7. The last order not create button, just delete the last object created on steps 1,2,3.

Or I'dont know how can I use. XD

Hi, please note that each time you add a component e.g. a button, you first need to SELECT THE PAGE that you want to add the component to, so that ABMaterial.Show knows where you want to add the component.

So, after your Step 3, select the page you added on the treeview, a new page always defaults to 'newpage' until you rename it. After you rename it it will be saved with the new name.

So after selecting the page on the treeview, select Component > ABMButton, please also see post #2 above. I will however start working on a pdf user manual for ABMaterial.Show. Hope this helps...

hibrid0 · Sep 8, 2016

Mashiane said:
Hi, please note that each time you add a component e.g. a button, you first need to SELECT THE PAGE that you want to add the component to, so that ABMaterial.Show knows where you want to add the component.

So, after your Step 3, select the page you added on the treeview, a new page always defaults to 'newpage' until you rename it. After you rename it it will be saved with the new name.

So after selecting the page on the treeview, select Component > ABMButton, please also see post #2 above. I will however start working on a pdf user manual for ABMaterial.Show. Hope this helps...

Dont worry after some test and error I get my first 2 pages working and I'm so happy with the result, save a time with this.
Continue building you nice tool!

Mashiane · Sep 8, 2016

hibrid0 said:
Dont worry after some test and error I get my first 2 pages working and I'm so happy with the result, save a time with this.
Continue building you nice tool!

Mashiane · Sep 8, 2016

ABMaterial.Show: ABMActionButton & ABMButton update.

What's New

1. The ABMAction button (wow) has now been added.
2. When adding an ABMbutton, you can also select from a dropbox as to which ABMActionButton it belongs to.

I have also updated my Project Distribution App, jMashProjectProfile to include the library xml files when distributing apps. Thanks to alwaysbusy and hibrid0 for pointing the missing xml files issue.

Mashiane · Sep 12, 2016

ABMaterial.Show: ABMCard

What's New

1. The ABMCard component is now complete. You need to copy the referenced images to the /images folder. You will also need to set up your grid first for the proper positioning of your ABMCards.

I still need to sort the taborder of these screen controls and also master the grid. It would be nice if one could see how the grid would look like before they put components on it. Perhaps a grid designer that will show the borders and sizes and locations of each of the Row Cell cordinates.

Enjoy...

hibrid0 · Sep 12, 2016

So great!
This tool is so useful!

alwaysbusy · Sep 13, 2016

Be careful, as I was afraid of, you are starting to make an "ABMaterial Demo App' builder. Making such a tool demands an extensive knowledge of the library and requires you having manually written a lot of webapps with the library yourself before attempting this. You should study it for many hundreds of hours. E.g. I wrote many webapps in css, html, javascript, php and java manually until I knew the languages by hart before I wrote the very first line on ABMaterial.

An example of what is happening shows already in your ABMCard. You only can add two buttons, while this is not a library limit. Be aware that the demo is just what it says: a demo. It only shows a fraction of what ABMaterial can do. Once you get to the more advanced Components like GoogleMaps or Charts for example, and the programmer can only do what is in the demo, he will be missing out on a lot ABMaterial can do. And stuff will change. ABMaterial is a living library. Things like the button.size change will happen to other components as well if they are needed. Be prepared to adept.

As for the visible grid, take in mind you'll need to do this for the three type devices: phone, tablet, desktop. Otherwise you will only take advantage of 33% of the capabilities of ABMaterial.

I don't want to discourage you, but I don't want you to be dissapointed either when you are half-way and reach the hard stuff. I do like it you make this open source in B4J! As I told some other forum members before who wanted to write such a tool, the simple components like a single button are very easy, but take into account even then, the user may want to add them as an Array component for example. Then the setup is quite different.

After I finished the Basic4JavaScript engine in ABMaterial (which will take many months), I may attempt to write a designer myself as I had some ideas on a tool myself.
I don't know if you've seen my proof of concept: https://www.b4x.com/android/forum/threads/abmaterial-grid-builder-proof-of-concept.64721/ .Please do not recreate mine. Think of something yourself. It may be better .

My steps will be:

1. Grid Builder for the ABMPage + Footer
2. Grid Builder for the ABMContainer (normal and collapsable)
3. GridBuilder for the ABMModalSheet

Once this framework is set for all three type devices, I'll write the stuff for the other helpers: Table, TableMutable, FlexWall etc... After that a NavigationBar builder. Only when all this stuff is working properly, I may start on the other components. This is almost the same order I used when I wrote the library. The foundation of the grid is very important if you want to succeed. The thing people struggle with the most in the beginning when they discover ABMaterial is just that. I have a feeling you do not really grasp the grid concept yourself yet, and this may give you a hard time later on. The grid is the most important part of what ABMaterial is: a responsive web framework.

What I do like very much in your tool is the 'Theme' builder! This is a very abstract concept and most people do not want (or have the time) to create their own theme so all the apps end up looking the same. If this could be worked out (maybe even with a preview?), this could be a powerful asset!

As I said, I don't want to discourage you, but please keep my advice in mind if you do not want to hit a wall further on.

Good luck!

Mashiane · Sep 13, 2016

alwaysbusy said:
Be careful, as I was afraid of, you are starting to make an "ABMaterial Demo App' builder. Making such a tool demands an extensive knowledge of the library and requires you having manually written a lot of webapps with the library yourself before attempting this. You should study it for many hundreds of hours. E.g. I wrote many webapps in css, html, javascript, php and java manually until I knew the languages by hart before I wrote the very first line on ABMaterial.

An example of what is happening shows already in your ABMCard. You only can add two buttons, while this is not a library limit. Be aware that the demo is just what it says: a demo. It only shows a fraction of what ABMaterial can do. Once you get to the more advanced Components like GoogleMaps or Charts for example, and the programmer can only do what is in the demo, he will be missing out on a lot ABMaterial can do. And stuff will change. ABMaterial is a living library. Things like the button.size change will happen to other components as well if they are needed. Be prepared to adept.

As for the visible grid, take in mind you'll need to do this for the three type devices: phone, tablet, desktop. Otherwise you will only take advantage of 33% of the capabilities of ABMaterial.

I don't want to discourage you, but I don't want you to be dissapointed either when you are half-way and reach the hard stuff. I do like it you make this open source in B4J! As I told some other forum members before who wanted to write such a tool, the simple components like a single button are very easy, but take into account even then, the user may want to add them as an Array component for example. Then the setup is quite different.

After I finished the Basic4JavaScript engine in ABMaterial (which will take many months), I may attempt to write a designer myself as I had some ideas on a tool myself.
I don't know if you've seen my proof of concept: https://www.b4x.com/android/forum/threads/abmaterial-grid-builder-proof-of-concept.64721/ .Please do not recreate mine. Think of something yourself. It may be better .

My steps will be:

1. Grid Builder for the ABMPage + Footer
2. Grid Builder for the ABMContainer (normal and collapsable)
3. GridBuilder for the ABMModalSheet

Once this framework is set for all three type devices, I'll write the stuff for the other helpers: Table, TableMutable, FlexWall etc... After that a NavigationBar builder. Only when all this stuff is working properly, I may start on the other components. This is almost the same order I used when I wrote the library. The foundation of the grid is very important if you want to succeed. The thing people struggle with the most in the beginning when they discover ABMaterial is just that. I have a feeling you do not really grasp the grid concept yourself yet, and this may give you a hard time later on. The grid is the most important part of what ABMaterial is: a responsive web framework.

What I do like very much in your tool is the 'Theme' builder! This is a very abstract concept and most people do not want (or have the time) to create their own theme so all the apps end up looking the same. If this could be worked out (maybe even with a preview?), this could be a powerful asset!

As I said, I don't want to discourage you, but please keep my advice in mind if you do not want to hit a wall further on.

Good luck!

Wow, thank you so much. I really appreciate your advice and your interest in this baby of mine. I have been learning a lot from your ABMaterial concept and its a 'do as you go approach' for me currently. I learn about each component then design the builder based on what I understood and learned. I anticipated the flexibility as I was skimming through the components and saw similaries here and there and tried to adopt what I learned. As an example, the button builder, at first it was just a normal button, then a later had to link it to an actionbutton, so I chop and change as I go along. This is good, more specifically because the database structure that stores the component definitions is flexible. I dont have column names for each property, I store all the properties in a JSON string and read those back, making my backend flexible. I only store what's crucial out of that JSON. The attached image details the current design of my components table for example.

At the moment, I am basing my learning based on your demo example and I do understand it will take months and months to master your concept and I will always request help from you to understand the rest of the concepts. I'm happy that you are indicating that your approach is a limitless one because I was weary and thought the ABMCard only took two buttons.

The sad reality is that there is no in depth user manual for ABMaterial and anyone who wants to learn it, has to start with the demo and then increase their knowledge through the forum and through asking questions. Yes, I am currently clueless about the grid, that's why i hard coded it to 12 rows and I said to myself, 'one day I will figure you out', thanks too for the provided example, it will be very valuable in my learning curve. And ABMaterial.Show is based on my learning curve and I'm not really expecting myself to do the whole shabang either and I will not re-invent the wheel at all. At some stage I will go through each and every example in the forum to learn more about it and perhaps tweak ABMaterial.Show, your concept is brilliant, I want to use it and I want to use it now.

PLEASE PLEASE PLEASE. Continue pointing me to the right direction. It's such an honour for me.

Just to disgress, at some stage I wrote an article on CodeProject called Software Developers are Lazy, but smart, that's why we RAD: The Php.Show Concept.

alwaysbusy · Sep 13, 2016

@Mashiane Very interesting and informative article you wrote! And I know documentation is not my strong point

Mashiane · Sep 13, 2016

ABMaterial.Show: ABMChip

What's New

The ABMChip component has now been added. This is an interesting component as it became my first introduction to AddArrayComponent.

Just like the ABMCard component, one will have to copy the images used to the /images folder.

I cant wait to develop my first app using this helper tool.

Mashiane · Sep 13, 2016

ABMaterial.Show : ABMDivider

The ABMDivider component has now been added.

Ta!

Mashiane · Sep 13, 2016

ABMaterial.Show: ABMPagination

What's New

The ABMPagination component has now been added to this tool.

Gabino A. de la Gala · Sep 13, 2016

I've downloaded the ABMaterialShow.b4j.zip and when I open ABMaterialShow.b4j file, I got the error: file www.zip not found.

Am I doing anything wrong?

Thanks.

hibrid0 · Sep 13, 2016

Gabino A. de la Gala said:
I've downloaded the ABMaterialShow.b4j.zip and when I open ABMaterialShow.b4j file, I got the error: file www.zip not found.

Am I doing anything wrong?

Thanks.

The instructions are on the first post.
You need abmaterial framework on zip.

Original steps

Steps to re-create

1. Download the attached zip file and extract it to your folder of choice.
2. Copy the Libraries from the zip file to your external Libraries folder.
3. Open ABMaterialShow using B4J and reference the libraries (see attached libraries screen)
4. From the ABMaterial Demo App (link on second line), compress the www folder with winzip, remove the demo folder inside it and all the compressed files in it. This should be about 5MB when done. Add the www.zip file to your project files tab, i.e. ABMaterialShow
5. Compile ABMaterialShow.
6. Go to File > Open and select MyMaterial.db that you extracted. You can view the definition of each page and component and theme by selecting it.
7. Go to File > Compile (this generated the MyMaterial.b4j project and opens the web browser for your project. Your project skeleton should be about 680+ files. This project will be saved under Objects\Projects\<projectname> folder
8. Compile and run MyMaterial.b4j
9. Refresh your webbrowser to open the resulting output.
10. You can also create your own project and add your own components and themes.
11. A page / component / theme when "active" means it gets generated.

Mashiane · Sep 13, 2016

ABMaterial.Show: PDFViewer

What's New

The PDFViewer Component has now been added. Wow, I can see a lot of things I will do with this...

This example points to a pdf document in the pdf folder of your app. You will need to create the folder manually and add the 1.pdf file from the ABMaterial Framework.

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

Attachments

Active Member

Expert

Active Member

Active Member

Expert

Expert

Active Member

Expert

Expert

Attachments

Expert

Attachments

Active Member

Expert

Expert

Attachments

Expert

Expert

Attachments

Expert

Attachments

Expert

Attachments

Active Member

Active Member

Expert

Attachments

Similar Threads

Privacy & Transparency

Privacy & Transparency