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

Mashiane

Expert
Licensed User
Longtime User
ABMaterial.Show: ABMCombo

What's New

The ABMCombo component is now part of this tool. At the moment this just creates the code for the component and DOES NOT add any items to it.

To Do: Add code to add components to the Combo

Updated source code in the first post...
 

Attachments

  • AddCombo.png
    AddCombo.png
    13.5 KB · Views: 286
  • Combo.png
    Combo.png
    16.9 KB · Views: 290

Mashiane

Expert
Licensed User
Longtime User
ABMaterial.Show: ABMAudioPlayer and ABMAudioPlayerSong

What's New

The ABMAudioPlayer and ABMAudioPlayerSong components have been added now to the tool. Please note the song lyric functionality will not be added though.

This has been very eye opening as now the ABMAudioPlayerSong is an extra for the audioplayer. Will follow the same approach for other components with extras too depending on their complexity.

Excited!

The first post has the latest version...
 

Attachments

  • AddAudioPlayer.png
    AddAudioPlayer.png
    25.7 KB · Views: 255
  • AudioPlayer.png
    AudioPlayer.png
    53.2 KB · Views: 252
Last edited:

Mashiane

Expert
Licensed User
Longtime User
ABMaterial.Show: ABMEditor

The ABMEditor component has now been added to this tool. This also meant the EditorTheme was added and you can create EditorThemes too.

The first post has been updated with the latest source code for ABMaterial.Show
 

Attachments

  • AddEditor.png
    AddEditor.png
    11.5 KB · Views: 278
  • Editor.png
    Editor.png
    21.3 KB · Views: 265

Mashiane

Expert
Licensed User
Longtime User
ABMaterial.Show: ABMFlexWall

I have now added the ABMFlexWall to this tool. Well, between learning the examples from the Demo and coding ABMaterial.Show, I must say, this framework is brilliant. I see a lot that I can do with this. Off course there is still a lot to learn. Actually I'm thinking of writing a book about ABMaterial.Show in designing apps using the ABMaterial Framework.

The module for this has two sections, one to define the FlexWall properties and the other section to add the images to the flexwall. This approach will also be used for the ABMImageSlider for ABMaterial.Show.
 

Attachments

  • FlexWall.png
    FlexWall.png
    75.3 KB · Views: 263
  • AddFlexWall1.png
    AddFlexWall1.png
    13.9 KB · Views: 267
  • AddFlexWall2.png
    AddFlexWall2.png
    22.8 KB · Views: 258

Gabino A. de la Gala

Active Member
Licensed User
Longtime User
Hi. I could already compile MyMaterial . But now I find that when accessing the URL http : // localhost: 51043 / MyMaterial / I see only one completely blank page and the top of the browser the title "Welcome MyMaterial " appears

Can anyone give me a clue where further research ?

Thank you.
 

Mashiane

Expert
Licensed User
Longtime User
ABMaterial.Show: ABMImageSlider

What's New

1. Fixed a bug where the extra content e.g. songs, images were deleted when renaming a component for ABMAudioPlayer, ABMFlexWall and ABMImageSlider.
2. A new menu called 'More Components' added that one can use to add components
3. This is under More Components.

ABMImageSlider included now in this tool. Source code in first line updated..
 

Attachments

  • AddImageSlider.png
    AddImageSlider.png
    12 KB · Views: 241
  • AddImagSlider2.png
    AddImagSlider2.png
    24.6 KB · Views: 260
  • ImageSlider.png
    ImageSlider.png
    70.2 KB · Views: 264
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Hi. I could already compile MyMaterial . But now I find that when accessing the URL http : // localhost: 51043 / MyMaterial / I see only one completely blank page and the top of the browser the title "Welcome MyMaterial " appears

Can anyone give me a clue where further research ?

Thank you.
You perhaps set the Initial page of the app to be Index. Please download the updated version of ABMaterial.Show from the first post and extract it to your working directly.
Open MyMaterial.db db using File > Open, and then File > Compile.

After it opens MyMaterial in b4j, compile that, your first page should be myimageslider and nothing else. Good luck

NB: Please also follow my posts above in terms of the progress around ABMaterial.Show to understand how it works.
 

Mashiane

Expert
Licensed User
Longtime User
ABMaterial.Show: ABMVideoYouTube

What's new

1. The ABMVideo component has been added for youtube videos. As I will split these components, I have called this one ABMVideoYouTube.
2. Going forward I will also include my MyMaterial.zip which will have my own created project using ABMaterial.Show.

First post includes both projects.

Enjoy
 

Attachments

  • AddYouTubeVideo.png
    AddYouTubeVideo.png
    17.4 KB · Views: 250
  • YouTubeVideo.png
    YouTubeVideo.png
    29.3 KB · Views: 253

Mashiane

Expert
Licensed User
Longtime User
ABMaterial.Show: ABMHTML5Video

What's New

This is a contiation of post #52 above on the ABMVideo component. As noted in the ABMaterial Demo, if you decide not to HasControls for these components, you will have to write your own code to control the volme, play, pause etc. ABMaterial.Show concerns itself with the design, so the controlling source code must be written by the developer.

This component is part of More Components in the tool

@alwaysbusy I just love your framework, keep up the good work!
 

Attachments

  • AddHtml5Video.png
    AddHtml5Video.png
    13.7 KB · Views: 235
  • Html5Video.png
    Html5Video.png
    306 KB · Views: 233

Mashiane

Expert
Licensed User
Longtime User
ABMaterial.Show : ABMPatternLock

An exciting component, ABMPatternLock has now been added to the code generator. At the moment of building, there is no way to define the pattern yet that I know of.

First post updated with source code.
 

Attachments

  • AddPatternLock.png
    AddPatternLock.png
    10.6 KB · Views: 250
  • PatternLock.png
    PatternLock.png
    18.5 KB · Views: 244

Mashiane

Expert
Licensed User
Longtime User
ABMaterial.Show: Source Code Preview

An amazing wonderful addition to the tool, Source Code Preview. Whilst defining your components, you can now view and even copy the source code generated by the tool easily.

This should make development of your WebApps outside ABMaterial.Show easy.;)
 

Attachments

  • PreviewSourceCode.png
    PreviewSourceCode.png
    21.8 KB · Views: 245
  • PreviewSourceCode1.png
    PreviewSourceCode1.png
    54.2 KB · Views: 274

Mashiane

Expert
Licensed User
Longtime User
ABMaterial.Show: ABMUpload & UploadTheme

What's New

This update sees the addition of the ABMUpload component and addition of the UploadTheme.
I have also added functionality for "Preview Theme Code" when one is defining their themes.
 

Attachments

  • UploadImages.png
    UploadImages.png
    12.3 KB · Views: 254
  • AddFileUpload.png
    AddFileUpload.png
    12.6 KB · Views: 255
  • ThemePreview.png
    ThemePreview.png
    12.4 KB · Views: 256

Mashiane

Expert
Licensed User
Longtime User
MyMaterial.Show : ABMTimeLine and ABMTimeLineSlide

As part of this code generator for ABMaterial, I have now included a module to generate code for the ABMTimeLine and the ABMTileLineSlide.

For now only the ABPDFViewer is working as I have not learned about the tables and the google maps yet.
 

Attachments

  • TimeLine_Add.png
    TimeLine_Add.png
    18.1 KB · Views: 238
  • TimeLine_Display.png
    TimeLine_Display.png
    33.9 KB · Views: 244
  • TimeLineSlide_Source.png
    TimeLineSlide_Source.png
    30 KB · Views: 234

hibrid0

Active Member
Licensed User
Longtime User
Mashiane your tool is so great thanks a lot.
I have a wish for your tool, work with the CRUD generator on ABMaterial.
 

Mashiane

Expert
Licensed User
Longtime User
@hibrid0 , thanks for the vote of confidence, I wish there were more people like you who see the value in this tool and who can also start using it to develop their ABMaterial web apps. At the moment, developing this tool is based on my experience and learning curve for it and once I master the elements, I will start exploring its CRUD generator. Unfortunately for now, I am not in a hurry to learn the CRUD generator as I am not comfortable with my knowledge of the functionality of the rest of the components. You can watch this space for more things to come anyway. In the mean time you can refer any challenges and questions you might have about the ABMaterial framework in the forum.
 
Top