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

Pen&Paper Explained.png



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

Attachments

  • abmaterial.gif
    abmaterial.gif
    53.1 KB · Views: 13,423
  • MyMaterialLibraries.png
    MyMaterialLibraries.png
    16.4 KB · Views: 1,174
Last edited:
Click to expand...
Mashiane

Mashiane

Expert
Licensed User
Longtime User
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.
ChartThings.png
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
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

BillMeyer

Well-Known Member
Licensed User
Longtime User
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
Click to expand...

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

Molchyn

Member
Licensed User
Longtime User
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 ..
 
M

Molchyn

Member
Licensed User
Longtime User
Mashiane said:
you need ABMaterial 3.50
Click to expand...
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
 
Last edited:
Mashiane

Mashiane

Expert
Licensed User
Longtime User
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
Click to expand...
The bug with the crash has been fixed and a new download is available at the same location. Ta!
 
M

Molchyn

Member
Licensed User
Longtime User
Mashiane said:
The bug
Click to expand...
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

Mashiane

Expert
Licensed User
Longtime User
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
Click to expand...
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!
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
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 o_O. 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.

ABMActionButton.png


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

CodeRefresh2Clipboard.png


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

ABMCard.png


Canvas...


ABMCanvas.png


Calendar Event
ABMCalendarEvent.png

Badge

ABMBadge.png
 

Attachments

  • ABMActionButtonItems.png
    ABMActionButtonItems.png
    10.8 KB · Views: 361
  • ABMCanvas.png
    ABMCanvas.png
    25.7 KB · Views: 374
Mashiane

Mashiane

Expert
Licensed User
Longtime User
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...:mad:

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.

CompareLibraries.png


2. This compared content is drawn as a dashboard.

Dashboard1.png


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

HelpnDocABMaterial.png


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

PocketReference.png


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

Attachments

  • Dashboard2.png
    Dashboard2.png
    32.5 KB · Views: 332
LWGShane

LWGShane

Well-Known Member
Licensed User
Longtime User
alwaysbusy

alwaysbusy

Expert
Licensed User
Longtime User
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).
 
You must log in or register to reply here.

Similar Threads

D
  • Question
B4J Question Pen & Paper
Replies
1
Views
955
Mashiane
Mashiane
Mashiane
  • Article
B4J Tutorial [Pen & Paper]: Create a simple 'Contacts' ABMaterial WebApp - Part 3
Replies
3
Views
3K
Mashiane
Mashiane
Mashiane
  • Article
B4J Tutorial [Pen & Paper]: Create a simple 'Contacts' ABMaterial WebApp - Part 1
Replies
9
Views
5K
Harris
Harris
Mashiane
  • Article
B4J Tutorial [Pen&Paper]: ABMaterial Stats
Replies
3
Views
4K
Mashiane
Mashiane
Mashiane
  • Article
B4J Tutorial [Pen&Paper] Create & Run a simple 'Hello ABMaterial' WebApp
Replies
5
Views
6K
Mashiane
Mashiane
Top