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,120
  • MyMaterialLibraries.png
    MyMaterialLibraries.png
    16.4 KB · Views: 844
Last edited:

Cableguy

Expert
Licensed User
I am willing to help you test things out.
Maybe we could create a cooperative team with 1 or 2 developers and a bunch of testers and try to create a WYSIWYG ABMaterial WebApp designer. I believe you already done most of the hard work, the rest should be almost like lego
 

Mashiane

Expert
Licensed User
@Cableguy , wow, thanks. We will perhaps have to ask @alwaysbusy permission to do that (WYSIWYG Designer). I believe he has been working on an Abstract designer though not planned to be released anytime soon, perhaps he can give us some heads up and advise us or perhaps give us the abstract source to try our luck with the designer, I dont want to re-invent the wheel when someone else is doing that and developing ABMaterial WebApps is not as complex as it appears to be.

I dont think he will though, its his IP and ABMaterial is not OpenSource. ABMaterial is extremely complex (ABMaterial Stats) and honesly I don't have any ideas of how I can do that and I am not really inclined to. However, due to the materialcss js and css already available, that should not be complex as the structure already exists for that and also other material based frameworks available.

Thing is, @alwaysbusy is using his own cooked and 'aromatted' version of materialcss, so we will have pros and cons on this. Perhaps approach him and hear what he says because its his baby and he will want to protect it at all costs. I would too, because of the passion that's into this.

About testing Pen & Paper, perfect and thanks, if you know anyone willing let's invite too. I will arrange. We can use Trello.

Ta!
 

alwaysbusy

Expert
Licensed User
In principle, I don't have a problem if someone wants to build a WYSIWYG ABMaterial WebApp designer, under one condition: It has to be 100% free to use and download. It CANNOT be like e.g. MashPlugins, where one cannot use the full version without donating and ergo is already breaking the rules. I have had several private discussions with Mashiane on similar topics in the past but somehow does it anyway. (Future versions of ABMaterial will break such projects permanently).

4. YOU AGREE NOT TO DISTRIBUTE FOR A FEE AN APPLICATION USING THE LIBRARY THAT, AS ITS PRIMARY PURPOSE, IS DESIGNED TO BE AN AID IN THE DEVELOPMENT OF SOFTWARE FOR YOUR APPLICATION'S END USER. SUCH APPLICATION INCLUDES, BUT IS NOT LIMITED TO, A DEVELOPMENT IDE OR A B4J SOURCE CODE GENERATOR.

And my mission statement:
The philosophy of ABMaterial (and myself) is giving anyone the chance to easily build great WebApps without having to spend any money. One of the reasons I picked B4J was because it is free. Those who can spare something, donate to stimulate my continuation on the project and in so help giving other not so fortunate people an equal chance to grow. Any derived development tool or generator that uses ABMaterial must follow this philosophy so the tool must be available with 100% of its features for free (not even a ‘limited’ free version is acceptable).

Pen & Paper is already very borderline too, as I don't seem to find a clear download link for it anymore. For the ABMaterial WebApp designer, this has to be absolutely clear for everyone where to download it. I will not allow any bending of this rule!

So it is very simple: if making this is for personal financial gain, the answer is no, you are not allowed. If you are willing to follow ABMs philosophy, I say go ahead!

ABM does indeed use a customized version of Material CSS (hundreds of bugs in it have been fixed over the years for example) and is not compatible with the current Materialize CSS version anymore. Simplest would be to use the materialize.xxx.min.css and core.xxx.min.js files as they are the versions ABM uses.
 
Last edited:

Cableguy

Expert
Licensed User
I already had this discussion with @Mashiane , and although no formal agreement was done, it was made clear by me that if I was to enter in such an endeavour, it had to be to create a free tool.

I understand your point, @alwaysbusy , and agree with it at about 95%. The other 5% concerns projects like @Mashiane's plugins.
I see it the same way as a few very proficient developers sell some libraries or on donation base without the possibility of using a lower free version.
This is why I donated in the first place...
A donation to you, the way I see it, is a way to keep your passion for ABMATERIAL going, so that you keep pushing it forward, and still you offer the previous version for free whenever a new version is out. We are not paying for the framework, but encouraging you and in a modest way, compensating for the huge amount of hours you have already put into this.

The plugins, I see them as "mods", that one can achieve on their own or donate to @Mashiane and use his (hers?) off the shelf solution.

But coming back to the cooperative creation of a designer, as I stated, I will only enter this endeavour if the final product is shared for free, no shortcuts on that.
 

alwaysbusy

Expert
Licensed User
The other 5% concerns projects like @Mashiane's plugins.
And as it is in its current state I don't take any measurements. But if the majority of controls in it become donator only, I will as it takes away ABMs philosophy of letting everyone create superb WebApps. People with money shouldn't have an edge (I'll tell you in a minute why I feel so strong about this).

Also, I put a lot of effort in making ABM create the fastest web apps possibly. That means fiddling a lot with the js/css which has not been done in the MashPlugins (just as an example, knowing ABM has its own version too, there are multiple additional versions of jquery loaded in it which kills app performances) so indirectly I have to put effort in them too.

Actually, 'mods' are the least of my concerns and if everyone would play fair, we wouldn't even have this conversation. But if I hadn't been hard from the beginning, Pen & Paper (previously called ABMaterial.show, MyMaterial.show) would probably have been a commercial product and the real engine behind it would've been forgotten. Not everyone means well. (just as a background note, I once, now some 15 years ago, lost a company because of someone stealing my technology. Although being very hard on me at the time, this inspired me to my current philosophy). So forgive me for being extra careful...

But coming back to the cooperative creation of a designer
Indeed, enough walking on memory lane, let's stay constructive :)

I would be glad if this could become maybe some kind of groups effort and I'm certainly willing to put time into it to assist. ABM iself takes already approx. 30 hours/week to maintain, but maybe I can write the 'tools' in it to facilitate others to write the real builder. I had some ideas that would require adjustments to the ABMaterial library (like being able to maybe serialize certain ABM components, having methods to return its properties in B4J Maps so they could be easily manipulated from an external builder in a property view without having to rewrite it for every new feature that is introduced, etc).

Also, we do have a problem we would need to tackle on how to present this for all device sizes.

But let the ideas flow on how you guys would see this! (or we can start a private conversation with ALL willing to participate?). Just note that if we undertake this endeavour, one has to be prepared to loose sleep :D
 

Mashiane

Expert
Licensed User
Interesting developments and I like where they are going.

Pen & Paper was and will never be a replacement to ABMaterial and will never come bundled with ABMaterial. That was and its still not the point. Anything created with it will never work without ABMaterial. The purpose of it is to aid the UX creation and ode generation faster and easily and I still maintain it, for 'simple' ABMaterial WebApps, and that is the purpose I started it.

Yes, after I put donation on it, @alwaysbusy explained to me and also put a license on ABMaterial with terms and conditions (these were not there before) and I 'freed' Pen & Paper. Secondly, somewhere in this thread I have indicated that Pen & Paper will come to end of life soon due to the upcoming ABStract designer, that is why I have shifted my concentration to PlugIn creation because I know very well where this is headed.

With due respect, people have a choice and I am not forcing Pen & Paper down anyone's throat, thus the disclaimer that I started this for my own personal enjoyment, this goes the same with the MashPlugins. At the moment, this has 21 components that are free for anyone to use for their ABMaterial WebApps.

The reason I asked for a donation in the first place was not due to wanting a quick buck. If I wanted a quick buck I would have commercialized Pen & Paper without even posting anything about it in this forum. Honestly they have helped with data bundles for me to get connected to this forum and the world and continue contributing to this platform. For the past three or so years I haven't had any form of income due to not having any form of employment. Yes, South Africa sucks at times. Yes, I put a $1 donation on MashPlugIns because of this, perhaps I should have handled it better and spoke with you first. I did not and I am sorry about that and it was not out of malice but for good intentions.

On the issue of being prepared not to sleep, I really need to think about that but this seems like a rabit hole that I am prepared to go all the way with.
 

alwaysbusy

Expert
Licensed User
@Mashiane Thanks for explaining your point of view. I know I may be over protective of ABM, but because of my history, it is really something baked in my character. As for your unemployment, I'm very sorry to hear that :(. PM me and we'll work something out for the donations for your plugins.

It would be nice if you would join the taskforce for the builder, as you have probably one of the most experienced with ABM and your Pen & Paper can give valuable input.
 

Cableguy

Expert
Licensed User
@Mashiane
It would be nice if you would join the taskforce for the builder, as you have probably one of the most experienced with ABM and your Pen & Paper can give valuable input.

At this state, and I already stated this to @Mashiane, he has already done most of the thinking and parsing... still you (@alwaysbusy ) have made some nice sugestions on how the properties could be exposed (Although I don't think it will be necessary, as I see us create a "skeleton maker" and not an app creator)

On the issue of being prepared not to sleep, I really need to think about that but this seems like a rabit hole that I am prepared to go all the way with.

I've been with my wife (not yet married but it makes no difference) for 3 years now, and in the very beginning I say to her:
On mondays, I go shoot pool, On thursdays I go drink in the pub, on wednesdays I watch soccer, on thuesdays I code, on Fridays I play poker, on saturdays I (whatever)...
and she said, no problem, On this house, there's sex everynight, with you or without you...

I can't afford losing sleep for this, or any thing else other than my familly and their needs, but I can dedicate (almos) all of my free time to test things out (I'm good at breaking things) and giving my insight.

I think it's time to go on to a private round table, count me in!
 

Mashiane

Expert
Licensed User
@Cableguy, @alwaysbusy suggestion to expose the nitty gritties is actually a very good one. As an example i was working on the group project ABMTableagrid and really wanted it to have the same look and feel of ABMaterial and i couldnt and had to work on a makeshift table that ended up frustrating me as i had to reinvent the wheel thus loading material css which i didnt want to just to make the component work.

That will also help with the process of creating beautiful plugins without having to rewrite the skeleton.

You are giving me too much credit. I'm just an explorer here who also like to invent things but at times it has led me to copy things because I wanted a part of my code to work.

Yes doing the designer is scary where do i even start? Its going to mean i do the 80 20 rule thoroughly. 80 planning and 20 execution and there is no one wiser on this other than @alwaysbusy to give us direction. Im sure he has a lessons learned notebook somewhere... Ha ha ha and for the fact that he is a perfectionist, we can't tolerate mediocre on this. Its a call to higher standards.
 

amaxco

Member
Licensed User
One of the best, if not the best of all, discussions I am enjoying! Ideas, thoughts, passion .... This world is still a better place to live in.
 

Mashiane

Expert
Licensed User
Hints: Speeding up Pen & Paper

Gradually, you might notice that Pen & Paper is becoming slow, this might be due to the 'Generate Preview' in your project settings being turned on. This has the effect of ensuring that for each component, page you create the source code is created in real-time.

You can turn this off by going to the project tab of your project, turning it off and then clicking apply to save your project.

1. Select your project in the treeview.
2. On the Project tab, locate and uncheck Generate Preview
3. Click Apply and save your project.

You should turn it off for each project.

Speeding.png
 

Mashiane

Expert
Licensed User
Houston we have a problem!!!

A critical bug was found in the Project > Compile script. This bug did not copy your development SQLite database to production version and as such the production database will always be 0 (zero) in size. This has been fixed and checks in place to ensure that your databases are in sync. I neartly had my head as my 51 page webapp as of yet and something was just not working propertly. This has now been fixed.

Please update Pen & Paper to 20171222 version, usual location. Please also test on your side and revert back should there be any issues.

PS: when you run Pen & Paper, you might encounter...

B4X:
Class not found: b4j.Mashy.ETV.editabletv, trying: b4j.Mashy.PenNPaper.editabletv

Please don't be alarmed, I'm working cleaning all the custom views up, everything should work as normal though. Another thing, the memory footprint of Pen & Paper gradually increases over time especially when you work with many pages and opening a lot of property bags. I'm still investigating and I'm sure I will find a solution, there is something I might not be doing right with this pet.

Again, thanks for all your support through this.
 

Mashiane

Expert
Licensed User
Hi there, please download 20171224 version now.

The PropertyBag custom control has been updated to speed it up and clean a few bugs found.

Below are controls that have designers to meet the MashPlugIns

MashBreadCrumbs
MashBreadCrumbs1.png


MashBreadCrumbs2.png


MashCameraPlain

MashCameraPlain.png


MashClock

MashClock.png


MashInfoBox

MashInfoBox.png


MashJustGage

MashJustGage.png


MashListView

MashListView.png


MashStats

MashStats.png


More is coming your way...
 

Mashiane

Expert
Licensed User
And me, trying to convert an old VB6 project I did in 2009 to ABMaterial using Pen & Paper... I was not looking this good so I'm trying to be creative...

These will drill down to more information soon enough...

ProjectMatrix.gif


The Viewer is one thing that has added a lot of value to the ABMaterial Framework.

I'm so impressed with this...

ProjectMatrixSmall.gif
 
Last edited:

Mashiane

Expert
Licensed User
What's New? Tab Order Helper

The TabOrder in Pen & Paper indicates the sequence of how your componts are created on your page especially for same RC components. When you have items sitting in the same RC, you would want them to appear in a particular sequence. As an example, I have 19 or so MashInfoBoxes sitting at R2C1 that I need to be in a particular sequence. Pen & Paper uses a sequence of the last item added as a counter and you can easily fix the tab order of your pages components by using the TabOrder tab.

1. Renumber will number the tab-order based on the current sequence starting from 0 to the number of items
2. You can then use the move up/move down buttons to move your components to the sequence you want.
3. Once done, click Update to save your sequences, so when Pen & Paper creates your components, it will follow the new tab order.

The buttons are hideable thus we have hidden the Update and Delete buttons.

TabOrder.png


So I'm using the custom view PropertyBag.

Code inside Pen * Paper... I create the columns and then add the details of the components for that page..

B4X:
etvComponent.GetPropertyBag
        PageName = etvComponent.getproperty("PageName")
        Dim xl As List: xl.initialize
        xl = modABMaterial.GetComponentsForPage(PageName,True)
        etvTabOrder.SetParentForm(MainForm,False)
        etvTabOrder.SetReportViewer
        'add the columns
        etvTabOrder.AddLabel("ComponentKey",150,"Component Key","")
        etvTabOrder.AddLabel("ComponentType",150,"Component Type","")
        etvTabOrder.AddComboBox("ActionButton",150,"Parent ID",xl,"")
        etvTabOrder.AddComboBox("placement",150,"Placement",modABMaterial.abmplacement,"")
        etvTabOrder.AddTextBox("RowID",60,"Row","0")
        etvTabOrder.AddTextBox("CellID",60,"Cell","0")
        etvTabOrder.AddTextBox("TabIndex",100,"Tab Index","0")
        etvTabOrder.AddComboBox("Visibility",200,"Visibility",modABMaterial.ABMVisibility,"")
        etvTabOrder.AddCheckBox("Active",100,"Active","0")
        etvTabOrder.showmoveup = True
        etvTabOrder.ShowMoveDown = True
        etvTabOrder.ShowUpdate = False
        etvTabOrder.showdelete = False
        etvTabOrder.RefreshColumns
        what2Save = "taborder"
        'get all the components for the page
        Dim comps As String = $"select * from components where lower(PageName) = '${PageName.ToLowerCase}' order by TabIndex asc;"$
        Dim records As List = DBUtils.ExecuteMaps(jMash.jSQL,comps,Null)
        'we need to explode the component properties
        Dim recTot As Int = records.Size - 1
        Dim recCnt As Int
        For recCnt = 0 To recTot
            Dim recMap As Map = records.Get(recCnt)
            Dim propsJSON As String = recMap.Getdefault("componentproperties","")
            Dim props As Map = jMash.Json2Map(propsJSON)
            'add the props to the recmap
            recMap = jMash.JoinMaps(recMap,props)
            records.Set(recCnt,recMap)
        Next
        etvTabOrder.AddRows(records)
 

magic2000

New Member
Houston we have a problem!!!

A critical bug was found in the Project > Compile script. This bug did not copy your development SQLite database to production version and as such the production database will always be 0 (zero) in size. This has been fixed and checks in place to ensure that your databases are in sync. I neartly had my head as my 51 page webapp as of yet and something was just not working propertly. This has now been fixed.

Please update Pen & Paper to 20171222 version, usual location. Please also test on your side and revert back should there be any issues.

PS: when you run Pen & Paper, you might encounter...

B4X:
Class not found: b4j.Mashy.ETV.editabletv, trying: b4j.Mashy.PenNPaper.editabletv

Please don't be alarmed, I'm working cleaning all the custom views up, everything should work as normal though. Another thing, the memory footprint of Pen & Paper gradually increases over time especially when you work with many pages and opening a lot of property bags. I'm still investigating and I'm sure I will find a solution, there is something I might not be doing right with this pet.

Again, thanks for all your support through this.
-----------------------------------

----------------------------------------------------
how to get file pen & paper.jar?
 

Mashiane

Expert
Licensed User
Pen-N-Paper Changes 03 March 2018

This is some mouthful of stuff based on my time in-between these things. Some bits of expectations

1. App propertybag has BackEnd tab to setup the database, email and user settings
2. User settings Configuration to work with SignIn, SignUp and Contact (AppPropertyBag)
3. Email settings (import/export) to work with Forgot Password, Password Change & Contact Us page
4. Ability to setup email account to send email from App
5. ModalSheet designer updated to cater for controls just like container and abmgenerators code
6. Updated underlying project database to stabilize for project compilation
7. TreeView click method & ListViewEdit click method based on MouseClicked (this ensures codes executes everytime an item is clicked)

8. Page
8.1 Indicate whether a page can have a NavigationBar / not
8.2 Indicate the ModalSheet to open when page shows
8.3 ModalSheet on phone devices shows in Full Screen - this is hard coded to be default, others used designer settings.
8.4 Control creator for modal sheets works only for .Content container (for now). To create the controls on the Page, Container, Modal sheet select Create Controls
8.5 Controls are sorted by "fieldname" but by position order when generated
8.6 Removed Users table settings from Signing to AppPropertyBag (these are universal for project/not per page)
8.7 Added functionality for the page to intercept parameters in query string and process them (to be completed)
8.8 Sign In form includes functionality to Activate a user account
8.9 Sign Up form includes functionality to send Account Activation html email. The domain needs to be specified for this to work.

9. Updated the SignIn, SignUp, ForgotPassword code to work with ModalSheets. This was working at Page level only before. Containers to be visited.
10. Added more informative screens for SignIn,SignUp,ForgotPassword to tell the user of success of operation.

11. Buttons & Labels
11.1 The OnClickExecute property has been added to link buttons and labels to events. The supported events so far are "Sign In", "Sign Up", "Forgot Password"
linked to specific database table called "users" with its own specific fields. See App Back End tab in the property bag

12. Modals & Containers
12.1 You can convert a container to a modal sheet through a click of a button.

13. Application
13.1 Filter - added the ABMRootFilter to start app

14. TreeView
14.1 Added 'Add ABMGenerator' and 'Add Child Page' to the treeview. These are shortcuts to create a ABMTable & ABMModal Sheet combination. The child page is just a page but has a parent page on side bar.

15. Property Bags
15.1 ABMNavBar code consolidated into 1 to avoid confusion i.e. this includes other configuration settings for other functionality, e.g. Sign In, Sign Up, CRUD etc.
15.2 ABMGenerator components now managed same as ABMPage, ABMContainer and ABMModalSheet i.e. Field Selector, Field Properties and Controls.
15.3 Adding Controls to pages is now simpler for database based pages with Field Selector, Field Properties and Components.

Featuring the revamped ABMPage Designer & Code Generator (Watch in HD)

 
Top