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]

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...

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]

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]

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]

Pen&Paper

i like it!

 

[Molchyn]

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]

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]

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]

you need ABMaterial 3.50

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

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]

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]

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]

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]

frmImport

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

 

[Mashiane]

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]

Animation...

AudioPlayer...

 

[Mashiane]

ABMChart - code generator completed.



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

 

[Mashiane]

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]

the new ABMaterial IDE

Where is this mentioned?

 

[Mashiane]

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]

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]

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).