B4J Library [Web][ABMaterial] Framework for WebApps

TIP: For absolute beginners with ABM, Get started with the Mini Template
TIP: Get started with 'ABMaterial For Dummies' by Harris here! (lessons)
TIP:
My mini course on Youtube by MichalK73

ABMaterial is a framework combining a tuned Materialize CSS with the free programming tool B4J. It allows creating WebApps that not only look great thanks to Googles Material Design, but can be programmed with the powerful free tool from Anywhere Software without any knowledge of HTML, CSS or Javascript.

ABMDragonfly4.00.png


ABMaterial has over 45 themeable controls and some useful helpers.

Components:

  • ABMActionButton
  • ABMAudioPlayer (1.08)
  • ABMBadge
  • ABMButton
  • ABMCanvas
  • ABMCalendar
  • ABMCard
  • ABMChart (Plugin support 2.00)
  • ABMChat (2.50)
  • ABMCheckbox
  • ABMChronologyList (2.00)
  • ABMCombo
  • ABMCustomControl (1.05)
  • ABMChip
  • ABMCodeLabel
  • ABMDivider
  • ABMDateTimeScroller (1.06)
  • ABMDateTimePicker (1.06)
  • ABMEditor (1.07)
  • ABMFileInput (1.20+)
  • ABMGoogleMap
  • ABMLabel
  • ABMList
  • ABMImage
  • ABMImageSlider
  • ABMInputField
  • ABMRadioGroup
  • ABMPagination (1.04)
  • ABMPatternLock (1.20+)
  • ABMPDFViewer (1.08)
  • ABMPercentSlider (2.50)
  • ABMPlanner (2.50)
  • ABMPivotTable (1.08)
  • ABMRange (1.05)
  • ABMSignaturePad
  • ABMTimeLine (1.10, depreciated in 4.00)
  • ABMSlider (1.05)
  • ABMSmartWizard (3.00)
  • ABMSocialShare (1.07)
  • ABMSocialOAuth
  • ABMSVGSurface (1.20+)
  • ABMSwitch
  • ABMTabs
  • ABMTreeTable (1.04)
  • ABMUpload
  • ABMVideo

Helpers:
  • ABMContainer
  • ABMFlexWall (1.10)
  • ABMGenerator (1.07)
  • ABMModalSheet
  • ABMNavigationBar
  • ABMPage
  • ABMParallax
  • ABMSideBar (2.00)
  • ABMTable
  • ABMTableMutable (1.20+)
Other:
  • Firebase Auth (1.20+)
  • Firebase Storage (1.20+)
  • Configurable App and Content folders (2.00)
  • Lorem Ipsum Generator (2.00)
  • Grid Builder (2.00+)
The Grid Builder:
With the Grid Builder you can build the responsive framework very easy. This has been the most difficult part for beginners to understand. But now with the builder, you have no reason to not use ABMaterial :)

gridbuilder1.png


There is an online demo at http://abmaterial.com
Alternative url: http://prd.one-two.com:51042/demo/

NEW: You can now support BANano and ABMaterial here too: https://www.patreon.com/alwaysbusy


This means it is free to use, but consider this: it took me already thousands of hours to program ABMaterial, all done in my free time early in the morning and deep into the night. Not only will a donation push me to continue developing ABMaterial , remember, you'll get a warm and fuzzy feeling doing it!

Download version 5.12 - for jServer 4.00 (open source, library only):

ALWAYS TAKE A BACKUP BEFORE USING A NEW VERSION!


ABMaterial 5.12 is now available on github and is open sourced :cool: (AS IS)! This version has been in heavy use (development and production) within our company for over a year now without major alterations, so I consider it very stable and ready to be open sourced.

I trust no one here will publish a clone or take credit for my work and I would consider it common courtesy if you find a bug/fix/new feature, you report back to me so I can make the same changes in the official library and everyone can benefit from it.


Note: next to downloading the library, you need also to download the accompanying www zip files from the same github (releases) containing the latest javascript/css/font files.

The procedure from Github for 5.12:

1. Download https://github.com/RealAlwaysbusy/A...eleases/download/v5.12/ABMaterial5.12-bin.zip
2. Download https://github.com/RealAlwaysbusy/A...r4.00/releases/download/v5.12-www/www5.12.zip
3. Unzip ABMaterial5.12-bin.zip and copy all .xml and .jar files to you B4J Libraries folder
4. Unzip www5.12.zip
5. In the projects you are working on (e.g. a for Dummies project) delete the following folders in \www
  • css
  • font
  • js
6. Copy from the unzipped www5.12.zip the 3 folder (css/font/js) to the \www folder where you just deleted these 3 folders.

Additional Resources:

Demo source code (for v4.51, not yet updated for 5.12, but still usefull to learn ABM): https://gorgeousapps.com/ABMExtras4.51.zip

I hope you enjoy it as much as I did creating it and I look forward to see the killer apps you will make with ABMaterial!

Also consider BANano if you are planning to write Websites/Apps in B4J!

Alain Bailleul
Alwaysbusy's Corner
 
Last edited:

Harris

Expert
Licensed User
Longtime User
Geeezzz... I was just kidding (kind of)... However - Good Job!
With any luck, this will help the newcomers find there way in the wonderful world of ABM... Seems it is helping with the basics since feedback to it has been minimal (except for @OliverA PM good points - yet to be addressed).
If I could create video presentations like Erel does - I would. That would be cool and most helpful. However, I have no freakin idea how he does it.

It seems as well, that those who find and get it (over the perceived/real hump) - don't look back. They, as I, realize they isn't anything easier to build functional web apps. Would nice to see a page (post) with links to apps created with ABM.

Keep on ABMin...

Thanks
 

Mashiane

Expert
Licensed User
Longtime User
If I could create video presentations like Erel does - I would. That would be cool and most helpful. However, I have no freakin idea how he does it.Thanks
This Erel is good hey. In the post I did in the ...Dummies thread I used ActivePresenter. It has a lot of other things but havent had the time to go through everything yet. Perhaps he can advise in terms of how he does that stuff. You started something in that thread, keep it up and congrats.
 

roberto64

Active Member
Licensed User
Longtime User
Hello abm, to make a donation for your work, the donation and to our care the import?
 

roberto64

Active Member
Licensed User
Longtime User
Hello abm, I wanted to tell you that I will make a donation for your work of ABMaterial once I have done the application can I create applications and publish them?
regards
 

roberto64

Active Member
Licensed User
Longtime User
hi ABM, taking the cue where to take the Template folder and then edit the files based on the name of the application I'm creating and start the application in the first place in the log I see this "ABM v4.25 requires Cache System 3.0 (yours : 1.0) Upgrade instructions: "secondly by inserting and example an imput command and making sure to see the icon as in the instruction below you can not see when and in execution. what am I doing wrong?

B4X:
LOG  ABM v4.25 requires Cache System 3.0 (yours: 1.0)
Upgrade instructions:

B4X:
Dim inp7 As ABMInput
inp7.Initialize(page, "inp7", ABM.INPUT_TEXT, "First Name", False, "")
inp7.IconName = "mdi-action-account-circle"
page.Cell(11,1).AddComponent(inp7)

thank you
 

alwaysbusy

Expert
Licensed User
Longtime User

Attachments

  • README 4.25.txt
    20.4 KB · Views: 502
Last edited:

alwaysbusy

Expert
Licensed User
Longtime User
ABMaterial 4.30 Public is now released!
See the attachment for the release notes.

Donators will receive an email for ABMaterial 4.50 in a couple of hours.

Some time has passed since the last update. Main reason is ABMaterial has been proven to be very stable and very few bugs were reported (Good news!).
On the other hand I have been very busy with some unexpected projects, but because of them, a lot of new features were added to this ABM release.
 

Attachments

  • README 4.30.txt
    18 KB · Views: 500

MbedAndroid

Active Member
Licensed User
Longtime User
question about this 4.30 update (and also 4.25)
i'm using ABMcanvasObject for drawing graphics see code below.
This works on Chrome with 4.30/4.25 but not Firefox/IE anymore
What could cause this?

(4.05 works out of box with this code)
NB pages are much faster loaded with 4.30!


B4X:
Sub BuildRainbucket(rain As Double,width As Int,height As Int,id As String) As ABMCanvasObject
   Dim bucket As  ABMCanvasObject
   Dim const stb=height-30 As Int
   Dim const stt=30 As Int
   Dim const tg=0.27 As Double 'precaluculated 15 deg tan

   Dim level=rain*40 As Int
   Dim y=Sqrt(1/tg*4000) As Double 'x1 displacement
   Dim x=y*tg/2 As Double
   Dim x2=width/8 As Int
   Dim top=y As Int
   If rain>200 Then rain=200 ''limit amount of rain just to prevent skyhigh filled bucket
   bucket.beginPath
   bucket.moveTo(width/2-x2,stb)
   bucket.lineTo(width/2-x-x2,stb-y)
   bucket.lineTo(width/2+x+x2,stb-y)
   bucket.lineTo(width/2+x2,stb)
   bucket.lineTo(width/2-x2,stb)
   bucket.fillStyleColor("#d3d3d3")
   bucket.fill

   y=Sqrt(1/tg*level)
   x=y*tg/2
   bucket.beginPath
   bucket.moveTo(width/2-x2,stb)
   bucket.lineTo(width/2-x-x2,stb-y)
   bucket.lineTo(width/2+x+x2,stb-y)
   bucket.lineTo(width/2+x2,stb)
   bucket.lineTo(width/2-x2,stb)
   bucket.fillStyleColor("#0000ff")
   bucket.fill
   '' draw indicator
   bucket.beginPath
   bucket.moveTo(width/2,stb)
   bucket.lineto(width/2,stb-top)
   bucket.lineWidth(1)
   bucket.strokeStyleColor("#ffff00")
   bucket.stroke
   For x=1 To 10
       bucket.beginPath
       bucket.moveTo(width/2-x2/2,stb-top*x/10)
       bucket.lineto(width/2+x2/2,stb-top*x/10)
       bucket.lineWidth(1)
       bucket.stroke
   Next
   ''write amount of rain
   bucket.font("arial", 13)
   bucket.fillStyleColor("#ff00ff")
   bucket.textAlign(ABM.CANVAS_TEXTALIGN_CENTER)
   bucket.fillText(id,width/2,stt)
   bucket.fillText(NumberFormat(rain,1,1) & "mm",width/2,height)
   Return bucket
End Sub
 
Top