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.

Mashiane · May 26, 2017

Download MyMaterialShow

On the custom chart control, added functionality to rotate the labels and color color a single series to different colors. ABMShared was updated to have some color constants...

B4X:

Sub ABMColorMapInitialize()
    ColorMap.Initialize
    ColorMap.put("red", "#f44336")
    ColorMap.put("pink", "#e91e63")
    ColorMap.put("purple", "#9c27b0")
    ColorMap.put("deep-purple", "#673ab7")
    ColorMap.put("indigo", "#3f51b5")
    ColorMap.put("blue", "#2196f3")
    ColorMap.put("teal", "#009688")
    ColorMap.put("light-blue", "#03a9f4")
    ColorMap.put("cyan", "#00bcd4")
    ColorMap.put("green", "#4caf50")
    ColorMap.put("light-green", "#8bc34a")
    ColorMap.put("lime", "#cddc39")
    ColorMap.put("yellow", "#ffeb3b")
    ColorMap.put("amber", "#ffc107")
    ColorMap.put("orange", "#ff9800")
    ColorMap.put("deep-orange", "#ff5722")
    ColorMap.put("brown", "#795548")
    ColorMap.put("grey", "#9e9e9e")
    ColorMap.put("blue-grey", "#607d8b")
    ColorMap.put("black", "#000000")
    ColorMap.put("white", "#ffffff")
    ColorMap.Put("aqua", "#00ffff")
    ColorMap.Put("fuchsia", "#ff00ff")
    ColorMap.Put("green", "#008000")
    ColorMap.Put("maroon","#800000")
    ColorMap.put("navy", "#000080")
    ColorMap.put("olive", "#808000")
    ColorMap.Put("silver", "#c0c0c0")
    ColorMap.Put("aquamarine", "#7fffd4")
    ColorMap.Put("blueviolet", "#8a2be2")
    ColorMap.Put("burlywood", "#deb887")
    ColorMap.Put("cadetblue","#5f9ea0")
    ColorMap.Put("chartreuse", "#7fff00")
    ColorMap.Put("chocolate", "#d2691e")
    ColorMap.Put("coral","#ff7f50")
    ColorMap.Put("cornflowerblue","#6495ed")
    ColorMap.Put("forestgreen","#228b22")
    ColorMap.put("gold","#ffd700")
    ColorMap.Put("goldenrod","#daa520")
    ColorMap.Put("khaki","#f0e68c")
    ColorMap.Put("lavendar", "#e6e6fa")
    ColorMap.Put("lightcoral","#f08080")
    ColorMap.put("lightseagreen","#20b2aa")
    ColorMap.put("rosybrown","#bc8f8f")
    ColorMap.Put("steelblue","#4682b4")
    ColorMap.Put("yellowgreen","#9acd32")

An example chart with labels rotated 90 degrees with different colors in a single series.

Mashiane · Aug 4, 2017

To avoid any confusion with ABMaterial and have its own identity, MyMaterial.Show has now been renamed to Pen&Paper. Pen&Paper is not affiliated nor is supported by ABMaterial (see disclaimer above) and will continue to be a code generator for ABMaterial components and simple basic webapps. I will however continue sharing my experiences using the ABMaterial framework based on what I build around Pen&Paper and the various component plugins I have found useful.

Enjoy

BillMeyer · Aug 5, 2017

Mashiane said:
To avoid any confusion with ABMaterial and have its own identity, MyMaterial.Show has now been renamed to Pen&Paper. Pen&Paper is not affiliated nor is supported by ABMaterial (see disclaimer above) and will continue to be a code generator for ABMaterial components and simple basic webapps. I will however continue sharing my experiences using the ABMaterial framework based on what I build around Pen&Paper and the various component plugins I have found useful.

Enjoy

Indoda yami ubatshele - It's a South African thing !!

JakeBullet70 · Aug 6, 2017

Mashiane said:
Pen&Paper

i like it!

Molchyn · Sep 8, 2017

Unfortunately, when I start to creating a new project for a few seconds crash.
The previous version creates a new project, but if I try to open in new version it's crash too ..

Mashiane · Sep 9, 2017

Molchyn said:
Unfortunately, when I start to creating a new project for a few seconds crash.
The previous version creates a new project, but if I try to open in new version it's crash too ..

I will check and post an updated version after I establish the error.

Mashiane · Sep 10, 2017

Pen & Paper Update:

As you might be aware, I have not been on this for a while now, the version here is compatible with 3.50 projects meaning that you need ABMaterial 3.50 after your code generation with Pen&Paper to compile your projects. Download the PenNPaper.jar and run it.

Dropbox

Molchyn · Sep 12, 2017

Mashiane said:
you need ABMaterial 3.50

OK,I have 3.50 installed but same result crash..
BR

B4X:

c:\work\B4J Samples\2017\mymaterial.show - create abmaterial apps>java -jar
PenNPaper.jar
Class not found: b4j.Mashy.ETV.editabletv, trying: b4j.Mashy.PenNPaper.editablet
v
SQLiteResetCounter: (SQLException) java.sql.SQLException: [SQLITE_ERROR] SQL err
or or missing database (no such column: id)
modabmaterial._preparedatabase (java line: 41636)
java.io.FileNotFoundException: c:\Val work\B4J Samples\2017\mymaterial.show - cr
eate abmaterial apps\ThemeDefinitions.json (The system cannot find the file spec
ified)
        at java.io.FileInputStream.open0(Native Method)
        at java.io.FileInputStream.open(Unknown Source)
        at java.io.FileInputStream.<init>(Unknown Source)
        at anywheresoftware.b4a.objects.streams.File.OpenInput(File.java:225)
        at anywheresoftware.b4a.objects.streams.File.ReadString(File.java:279)
        at b4j.Mashy.PenNPaper.modabmaterial._preparedatabase(modabmaterial.java
:41636)
        at b4j.Mashy.PenNPaper.main._project_open(main.java:38347)
        at b4j.Mashy.PenNPaper.main._getfile(main.java:28218)
        at b4j.Mashy.PenNPaper.main._mnufilenew_action(main.java:35159)
        at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
        at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source)
        at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
        at java.lang.reflect.Method.invoke(Unknown Source)
        at anywheresoftware.b4a.BA.raiseEvent2(BA.java:90)
        at anywheresoftware.b4a.BA$1.run(BA.java:215)
        at com.sun.javafx.application.PlatformImpl.lambda$null$173(PlatformImpl.
java:295)
        at java.security.AccessController.doPrivileged(Native Method)
        at com.sun.javafx.application.PlatformImpl.lambda$runLater$174(PlatformI
mpl.java:294)
        at com.sun.glass.ui.InvokeLaterDispatcher$Future.run(InvokeLaterDispatch
er.java:95)
        at com.sun.glass.ui.win.WinApplication._runLoop(Native Method)
        at com.sun.glass.ui.win.WinApplication.lambda$null$148(WinApplication.ja
va:191)
        at java.lang.Thread.run(Unknown Source)

OK I found Solution just unpack from jar file ThemeDefinitions.json file in main directory

next step add manually in created project sourcefile from
Code Beautifier/Formatter

Mashiane · Sep 13, 2017

Mashiane said:
Pen & Paper Update:

As you might be aware, I have not been on this for a while now, the version here is compatible with 3.50 projects meaning that you need ABMaterial 3.50 after your code generation with Pen&Paper to compile your projects. Download the PenNPaper.jar and run it.

Dropbox

The bug with the crash has been fixed and a new download is available at the same location. Ta!

Molchyn · Sep 15, 2017

Mashiane said:
The bug

Very good!
Just few remarks
Net library need to change jNet

ABMShared
MyTheme.DateTimePicker("dp").zdepth = ABM.ZDEPTH_DEFAULT Unknoun member: zdepth
need change to InputZDepth ?
Dim clsCM As clsCodeModule Unknoun type clsCodeModule Are you missing library refrence?
clsCM Undeclared variable 'clsCM' is used befor it was assigned any value

frmImport
page.ShowToast("toast" & myToastId, "toastgreen", "Procurement Plan data imported successfully!", 3000) Missing parameter
page.ShowToast("toast" & myToastId, "toastred", "The Procurement Plan could not be read, please correct this!", 3000) Missing parameter
page.ShowToast("toast" & myToastId, "toastred", "The Procurement Plan should be selected first!", 3000) Missing parameter
mstblImportClear Undeclared variable 'mstblImportClear' is used befor it was assigned any value
ProcessSummaryWorkSheet Undeclared variable 'ProcessSummaryWorkSheet' is used befor it was assigned any value

BR

Mashiane · Sep 15, 2017

Molchyn said:
Very good!
Just few remarks
Net library need to change jNet

ABMShared
MyTheme.DateTimePicker("dp").zdepth = ABM.ZDEPTH_DEFAULT Unknoun member: zdepth
need change to InputZDepth ?
Dim clsCM As clsCodeModule Unknoun type clsCodeModule Are you missing library refrence?
clsCM Undeclared variable 'clsCM' is used befor it was assigned any value

frmImport
page.ShowToast("toast" & myToastId, "toastgreen", "Procurement Plan data imported successfully!", 3000) Missing parameter
page.ShowToast("toast" & myToastId, "toastred", "The Procurement Plan could not be read, please correct this!", 3000) Missing parameter
page.ShowToast("toast" & myToastId, "toastred", "The Procurement Plan should be selected first!", 3000) Missing parameter
mstblImportClear Undeclared variable 'mstblImportClear' is used befor it was assigned any value
ProcessSummaryWorkSheet Undeclared variable 'ProcessSummaryWorkSheet' is used befor it was assigned any value

BR

Thanks for this...
1. I will change to the JNet Library...
2. Yes that should be inputZDepth, will fix that
3. clsCodeModule error, this is very odd.

frmImport - I'm assuming you are using ABMaterial 3.5, try and recompile the whole project for your code to be compatible and also do Project > Upgrade for it. If you are using an example from these threads, I have not recompiled the examples to 3.5.

This has been valuable input, ta!

Molchyn · Sep 15, 2017

Mashiane said:
frmImport

Hi,
I just created a few pages from the Page menu in Pen&Paper
BR

Mashiane · Oct 12, 2017

I'm currently in a process of updating my projects to use ABMaterial 3.75. This is a good update I have been waiting for patiently especially the DatePicker control "clearing" feature. Thanks a million for that.

Pen & Paper might come to end of life as soon as the new ABMaterial IDE from its creator comes into fore. I cant wait for that!!! It's going to be an exciting world. I want to learn how to develop IDEs too. I just need to find the right direction though . I just have a lot on my mind.

I took this path because I wanted to prove to myself I could do this and also meet a deadline and ABMaterial seemed the way to go. It has been worth the ride. Above everything else, its such a nice drive when you see your WebApp stable and being used. I have learned a lot about this framework, remember the Grid!!! It's so funny that after it got explained in an easy fashion it became all so clear. Then the Grid Designer came, that was wonderful. It's such a good thing to have the positive spirit behind ABMaterial's creator. Viva!!!

During the next couple of days (when I have time) I will be show casing some snippets on how to create basic crud WebApps with Pen & Paper after the introductory, Hello World example. I have had some delays on some of my releases due to some of the issues that I'm so happy to be addressed by now, but then again, in an imperfect world, the time factor plays a big role.

So far, these are the updates that I decided to look upon and either revamp and or create.

1. ABMButton - added the additional properties for padding and dropdown.
2. ABMAnimation - added code generator. (this would be nice on the Modal Sheets / Pages)
3. ABMAudioPlayer - this has been revamped and also adds songs addition. (Check ABMaterial code to load lyrics)
4. ABMAudioPlayerSong - added code generator.
5. ABMBadge - added code generator.
6. ABMCalendarEvent - this has been revamped.
7. ABMCanvas - added code generator (I still need to explore this myself around a WebApp)
8. ABMCanvasObject - added code generator (I still need to explorer this myself around a WebApp)
9. ABMCard - added missing properties and functionality to add action items.
10. ABMActionButton - added functionality to add MenuButtons in designer.

This after all, is just code generation nothing fancy.

One can copy generated source code to the clipboard for later pasting...

Revamped ABMCard to include the "Actions" - any number of actions can be added...

Canvas...

Calendar Event

Badge

Mashiane · Oct 12, 2017

Animation...

AudioPlayer...

Mashiane · Oct 13, 2017

ABMChart - code generator completed.

Dropbox the latest update with the updated/revamped/created controls as discussed from post #193.

Mashiane · Oct 19, 2017

What's Coming...

Ensuring that Pen&Paper runs smoothly with each ABMaterial update, I need to have my ducks in a row and know up to the littlest details what has changed etc, thus I needed a smooth way of doing that...

1. Be able to compare previous and current versions of ABMaterial framework and provide each detail. This does a detailed comparison based on the library XML files.

2. This compared content is drawn as a dashboard.

3. Later a script to generate a Pocket Reference in PDF is generated for Help n Doc compilation. This is an automated process.

4. The Pocket Reference generated by the script...

See this article about the dashboard and link to download your own 225 paged PDF ABMaterial Pocket Reference.

LWGShane · Oct 26, 2017

Mashiane said:
the new ABMaterial IDE

Where is this mentioned?

Mashiane · Oct 26, 2017

UFOCoder13 said:
Where is this mentioned?

See this post, let me rephrase, "AbstractDesigner", https://www.b4x.com/android/forum/threads/abmaterial-poll-what-to-do-next.71148/#post-454075

Well its something to be patient and excited about.

LWGShane · Oct 26, 2017

Mashiane said:
See this post, let me rephrase, "AbstractDesigner", https://www.b4x.com/android/forum/threads/abmaterial-poll-what-to-do-next.71148/#post-454075

Well its something to be patient and excited about.

Thanks. I was searching all over for it and couldn't find it.

alwaysbusy · Oct 26, 2017

Note that there is no release date yet (is not even in the immidiate planning stage: this lib has so much properties to take care of...) and there is so much more important stuff to do on the lib. The gridbuilder is a great start to design your layout. And once one knows ABMaterial, it is actually not that hard to make apps in code (+ you have much more control over it, e.g. conditional building your layout, something a designer will never be able to do).

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

Attachments

Expert

Expert

Well-Known Member

Well-Known Member

Member

Expert

Expert

Member

Expert

Member

Expert

Member

Expert

Attachments

Expert

Expert

Expert

Attachments

Well-Known Member

Expert

Well-Known Member

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency