Cloudinary has a great free plan which can cover a great deal of the webapps you make without any additional cost:
Total images and videos: 300,000
Managed storage: 10 GB
Monthly net viewing bandwidth: 20 GB
In ABM, it can be used for two things:
1. Automatic upload/update of the generated CSS/JS files (the ones you find next to each index.html).
2. Your own assets, like images, videos or outer ‘RAW’ files (xls, doc, …)
Creating a free account on Cloudinary is pretty straight forward. You make a login and give your ‘cloud’ a name. You will then be able to get your API_KEY and API_SECRET from the management console: https://cloudinary.com/console:
1. Automatic upload/update when starting the .jar file.
Activate it in the main class:
' just some clear consts to explain the parameters
Dim UPLOAD_GENERATED_JSCSS As Boolean = True
Dim DO_NOT_UPLOAD_GENERATED_JSCSS As Boolean = False
Dim SHOW_DEBUG As Boolean = True
Dim DO_NOT_SHOW_DEBUG As Boolean = False
Dim CLEAR As Boolean = True
Dim DO_NOT_CLEAR As Boolean = False
ABM.ActivateCloudinary("DONATOR_KEY","CLOUD_NAME", "API_KEY", "API_SECRET",UPLOAD_GENERATED_JSCSS, "APPNAME", DO_NOT_SHOW_DEBUG)
ABM.ActivateCloudinary("DONATOR_KEY","CLOUD_NAME", "API_KEY", "API_SECRET",DO_NOT_UPLOAD_GENERATED_JSCSS, "APPNAME", SHOW_DEBUG)
' this is for 2, your own assets
What will this code do?
It will create a folder structure in you Cloudinary cloud:
Every time you start your jar, both these folders will be emptied (so do not put anything else in it!) and the most recent generated .js/.css files will be uploaded. Note: depending on the size of your app, this can take quite some time. e.g. for the demo app it takes about 3 minutes.
There is nothing more you have to do, ABM will have changed all the calls in the HTML from your local drive to the CDN.
2. Your own Assests:
As you can see in (1), we pre-load all the urls of the images/videos and other files. That way it is pretty simple to use the e.g. if we want to use an image using the ABM.CloudinaryGet() command:
Dim img4 As ABMImage
img4.Initialize(page, "img4", ABM.CloudinaryGet("demo/images/sample-1"), 1)
As parameter it takes the ‘publicId’ of the asset. In my case my APPNAME was demo, I created a folder images in it in the Cloudinary console and uploaded a file called sample-1.jpg so the public id becomes:
Note: I’ve noticed when uploading images via the cloudinary console, the public id cuts of the file extension.
The result of the ABM.CloudinaryGet command will be something like:
It is very easy to upload and organize you assets through the Cloudinary console app:
but sometimes you will want to upload it through B4X code.
So the following API methods do exist:
' using these 3 methods will automatically add them the the internal Cloudinary map
' so you can use them with the ABM.CloudinaryGet() method without reloading.
' The next time you restart your .jar, they will also be loaded.
For the last 3 methods, you use a ‘prefix’ to delete files in bulk:
e.g. if I want to delete all images from my images folder, I would do:
ABMaterial 3.50 for B4J introduces Drag & Drop of ABMContainers between Cells! This new feature took a couple of weeks to implement, but I’m proud of the result.
It opens up a whole new range of possibilities for Web Apps.
Not many bug fixing needed in this release. Proves ABMaterial is really stable and truly production ready! (Happy face)
ABMGoogleMap also adds the possibility to use marker clusters, which cleans up your google map if you have many markers in one map.
Head to the ABMaterial section on this blog to get your free copy of 3.20, or make a small donation to support the development and get the latest 3.50 version + 9 extra libraries and tools to use in your own projects!
It may have been a bit silent the last few weeks around ABMaterial, but behind the scenes I have been working nights and weekends on maybe the biggest new feature since Chipmunk was introduced: Drag & Drop!
In 3.50, it will be possible to drag ABMContainers (and hence about anything in it) from one cell to another.
Let’s watch a video demonstration first:
Pretty cool hè!
How it works in B4J:
I explain the basics here, the DragDrop demo project included in the ABMaterial 3.50 download will show all tricks shown in the demo video.
1. Page_ParseEvent() gets a little bit of extra code to sync the moves made in the browser with our server
If SubExists(Me, eventName) Then
' BEGIN NEW DRAGDROP
If eventName = "page_dropped" Then
' END NEW DRAGDROP
Select Case Params.Size
2. Next we define a ‘DRAG’ group:
' name, minimum height of a cell
3. We add cells to this ‘DRAG’ group we want to drag & drop between. The last ‘null’ parameter can be any ABMComponent you want to use a title of the cell (e.g. the COLUMN X ABMLabel in the demo).
4. We add our draggable ABMContainers to the cells. Note: they MUST be added with AddArrayComponent!
Here we also enable them to be draggable with cont.EnableDragDropZone(). There is also a shortcut method to enable/disable all ‘Zones/Cells’ in a group with cont.EnableDragDropAllZonesFromGroup() in one go.
page.Cell(3,1).AddArrayComponent(CreateCard("1", True, True, True, "I may be dragged everywhere", "../images/list1.jpg"), "Cards")
Sub CreateCard(ID As String, AllowInCell1 As Boolean, AllowInCell2 As Boolean, AllowInCell3 As Boolean, Title As String, image As String) As ABMContainer
Dim cont As ABMContainer
cont.Initialize(page, ID, "")
cont.IsTextSelectable = False
If AllowInCell1 Then
' can be dragged to zone 1 of 'DRAG'
If AllowInCell2 Then
' can be dragged to zone 2 of 'DRAG'
If AllowInCell3 Then
' can be dragged to zone 3 of 'DRAG'
cont.EnableDragDropZone("DRAG","DRAGCELL4",True) ' for the sidebar
Dim card As ABMCard
card.InitializeAsCard(page, "card", "MY CARD", Title, ABM.CARD_SMALL, "")
card.Image = image
' add the card to the page
5. There are three events you will receive (all on Page level):
Sub Page_DragStart(component As String, source As String)
Log("Drag start: " & component)
Sub Page_DragCancelled(component As String, source As String)
Log("Drag cancelled: " & component)
' there are four parameters: component, source , target, before
Sub Page_Dropped(Params As Map)
Log("Dropped: " & Params.Get("component"))
I’m finishing up ABMaterial 3.50, ABMonitor (an upcoming article on this for B4J and B4A soon on the blog) and ABTreeTableView now and early next week I think I may be able to release it to the donators.
ABMaterial 3.02 Maintenance Release will have a new feature, especially useful for ‘one page’ apps/websites to navigate. It intruduces ‘sections‘ within a page. A section is a logical grouping of rows, which can have its own background and a new extra navigation method/menu.
Sections must be declared at the BuildPage() stage, and are typically created right after the page.BuildGrid() method.
First, let me show you how it works and then I’ll explain how this is archieved with just 12 lines of B4J code!
The tricky part are the minHeight and scrollTop params. In the above examples, I’ve set the minHeight to the browsers height, minus the height of the TopBar: “calc(100vh – 56px)”.
For scrollTop, I’ve set it the the height of the TopBar so the top of the section is right under the navigation bar: 56
ABMaterial 3.02 Maintenance Release will go out in acouple of days to the donators with 25 bug fixes and implemented wishes!