Tag Archives: B4X

B4X: Lightweight charts in ABMaterial

Frappe3a

The official charts library inABMaterial is Chartist, but because of its many features it is also a rather slow rendering js/css library and not always that easy to implement. On the B4X forum, Mashiane has created a nice ABMCustomComponent wrapper for the JQPlot plugin and there are many examples in the forum on how to implement Google Charts in ABM, like this post from Harris.

So why yet another one? Well the main focus on this wrapper is being fast AND easy to implement. Of course this also means less tunable features but I have found that maybe for 95% of our needs having some basic stuff like a tooltip and being clickable is actually enough.

I came accross the Frappé charts javascript library. It has tooltips, some interactions and animations. And it is bloody fast! 🙂

I only had to make a couple of CSS changes to make it ABM compatible and the ABMCustomComponent wrapper was very easy to write.

Usage:

Create your chart variables in Class_globals:

Dim FrappeChart1 As FrappeChart
Dim FrappeChart2 As FrappeChart
Dim FrappeChart3 As FrappeChart
Dim FrappeChart4 As FrappeChart
Dim FrappeChart5 As FrappeChart
Dim FrappeChart6 As FrappeChart
Dim FrappeChart7 As FrappeChart

In Page_Connect(), make your charts (you immidately can see the simplicity of the code):

FrappeChart1.Initialize(page, "FrappeChart1", "bar", "My Awesome Chart", 250)
FrappeChart1.FrappeLabels.AddAll(Array As String("12am-3am", "3am-6am", "6am-9am", "9am-12pm","12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"))
FrappeChart1.AddDataSet("Some data", "light-blue", Array As Int(25, 40, 30, 35, 8, 52, 17, -4), Array As String())
FrappeChart1.AddDataSet("Another set", "violet", Array As Int(25, 50, -10, 15, 18, 32, 27, 14), Array As String())
FrappeChart1.AddDataSet("Yet Another", "blue", Array As Int(15, 20, -3, -15, 58, 12, -17, 37), Array As String())
page.Cell(1,1).AddComponent(FrappeChart1.ABMComp)

FrappeChart2.Initialize(page, "FrappeChart2", "line", "My Awesome Chart", 250)
FrappeChart2.FrappeLabels.AddAll(Array As String("12am-3am", "3am-6am", "6am-9am", "9am-12pm","12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"))
FrappeChart2.AddDataSet("Some data", "light-blue", Array As Int(25, 40, 30, 35, 8, 52, 17, -4), Array As String())
FrappeChart2.AddDataSet("Another set", "violet", Array As Int(25, 50, -10, 15, 18, 32, 27, 14), Array As String())
FrappeChart2.AddDataSet("Yet Another", "blue", Array As Int(15, 20, -3, -15, 58, 12, -17, 37), Array As String())
page.Cell(1,1).AddComponent(FrappeChart2.ABMComp)

FrappeChart3.Initialize(page, "FrappeChart3", "scatter", "My Awesome Chart", 250)
FrappeChart3.FrappeLabels.AddAll(Array As String("12am-3am", "3am-6am", "6am-9am", "9am-12pm","12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"))
FrappeChart3.AddDataSet("Some data", "light-blue", Array As Int(25, 40, 30, 35, 8, 52, 17, -4), Array As String())
FrappeChart3.AddDataSet("Another set", "violet", Array As Int(25, 50, -10, 15, 18, 32, 27, 14), Array As String())
FrappeChart3.AddDataSet("Yet Another", "blue", Array As Int(15, 20, -3, -15, 58, 12, -17, 37), Array As String())
page.Cell(1,1).AddComponent(FrappeChart3.ABMComp)

FrappeChart4.Initialize(page, "FrappeChart4", "pie", "My Awesome Chart", 250)
FrappeChart4.FrappeLabels.AddAll(Array As String("12am-3am", "3am-6am", "6am-9am", "9am-12pm","12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"))
FrappeChart4.AddDataSet("Some data", "light-blue", Array As Int(25, 40, 30, 35, 8, 52, 17, -4), Array As String())
FrappeChart4.AddDataSet("Another set", "violet", Array As Int(25, 50, -10, 15, 18, 32, 27, 14), Array As String())
FrappeChart4.AddDataSet("Yet Another", "blue", Array As Int(15, 20, -3, -15, 58, 12, -17, 37), Array As String())
page.Cell(1,1).AddComponent(FrappeChart4.ABMComp)

FrappeChart5.Initialize(page, "FrappeChart5", "percentage", "My Awesome Chart", 250)
FrappeChart5.FrappeLabels.AddAll(Array As String("12am-3am", "3am-6am", "6am-9am", "9am-12pm","12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"))
FrappeChart5.AddDataSet("Some data", "light-blue", Array As Int(25, 40, 30, 35, 8, 52, 17, -4), Array As String())
FrappeChart5.AddDataSet("Another set", "violet", Array As Int(25, 50, -10, 15, 18, 32, 27, 14), Array As String())
FrappeChart5.AddDataSet("Yet Another", "blue", Array As Int(15, 20, -3, -15, 58, 12, -17, 37), Array As String())
page.Cell(1,1).AddComponent(FrappeChart5.ABMComp)

FrappeChart6.Initialize(page, "FrappeChart6", "bar", "My Awesome Chart", 250)
FrappeChart6.FrappeLabels.AddAll(Array As String("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"))
FrappeChart6.AddDataSet("Some data", "purple", Array As Int(25, 40, 30, 35, 8, 52, 17), Array As String())
FrappeChart6.AddDataSet("Another set", "orange", Array As Int(25, 50, -10, 15, 18, 32, 27), Array As String())
FrappeChart6.FrappeShowSums = True
FrappeChart6.FrappeShowAverages = True
page.Cell(1,1).AddComponent(FrappeChart6.ABMComp)

FrappeChart7.Initialize(page, "FrappeChart7", "bar", "My Awesome Chart", 300)
FrappeChart7.FrappeLabels.AddAll(Array As String("Ganymede", "Callisto", "Io", "Europa"))
FrappeChart7.AddDataSet("Distances", "grey", Array As Int(1070.412, 1882.709, 421.700, 671.034), Array As String("1.070.412km", "1.882.709km", "421.700km", "671.034km"))
FrappeChart7.FrappeIsNavigable = True
FrappeChart7.FrappeRaiseEventOnClick = True
page.Cell(2,1).AddComponent(FrappeChart7.ABMComp)

An example of the Click event on Chart7:

Sub FrappeChart7_Clicked(index As Int)
   Dim img As ABMImage = page.Component("img")
   Dim lbl As ABMLabel = page.Component("lbl")
   Select Case index
     Case 0
       img.Source = "../images/ganymede.jpg"
       lbl.Text = "{B}Ganymede{/B}{BR}{BR}Semi-major-axis: 1070412 km{BR}{BR}Mass: 14819000 x 10^16 kg{BR}Diameter: 5262.4 km"
     Case 1
       img.Source = "../images/callisto.jpg"
       lbl.Text = "{B}Callisto{/B}{BR}{BR}Semi-major-axis: 1882709 km{BR}{BR}Mass: 10759000 x 10^16 kg{BR}Diameter: 4820.6 km"
     Case 2
       img.Source = "../images/io.jpg"
       lbl.Text = "{B}Io{/B}{BR}{BR}Semi-major-axis: 421700 km{BR}{BR}Mass: 8931900 x 10^16 kg{BR}Diameter: 3637.4 km"
     Case 3
       img.Source = "../images/europa.jpg"
       lbl.Text = "{B}Europa{/B}{BR}{BR}Semi-major-axis: 671034 km{BR}{BR}Mass: 4800000 x 10^16 kg{BR}Diameter: 3121.6 km"
   End Select
   img.Refresh
   lbl.Refresh
End Sub

Some more examples of charts generated with this code:

Frappe1Frappe2a

Attached are the FrappeChart.bas and the frappe-charts.min.iife.js files. Copy the .js file to the /www/js/custom/ folder and import the .bas file.

http://gorgeousapps.com/FrappeChart.zip

Alwaysbusy

Click here to Donation and support ABMaterial

Or make a donation with Bitcoins:

BTC: 13x7b12GonCj6iphnjLuonrwURK2jCgMdE

This is my bitcoin address as a QR code. It is possible to send bitcoins to me from mobile wallets by scanning this code.

13x7b12GonCj6iphnjLuonrwURK2jCgMdE

 

Advertisements

B4X: ABMaterial 3.75 Public/4.00 Donators released

ABMDragonfly4.00

ABMaterial Dragonfly (4.00) for B4X is available. Yes, it has a new name! What started as version 3.81 got upgraded to a new major version, especially since it uses a new cache control system.

ABMaterial has always been one of the fastest RADs from its start, now over 2 years ago.  But with 4.00, we’ll take it to a whole new level!

Mindful and I have spend 5 days (and nights) checking out how we could cache ABMaterial to the extreme without losing any of its functionality.  The results are just ridiculous…

Finish times are less than 10% of the time on the second and next loads. So on 3G, on the users next visit(s), the WebApp is almost just as fast as on high speed cable!

And this system not only works with the same page. Once one page has been loaded, all the other pages can take gain of this system. Even when the user revisits your app much later.

Furthermore there is the new debug feature to check how your apps work on different device sizes.  See it at work here:

Add this snippet to you main module, AFTER starting the server:

#If DEBUG
' in debug mode, start the browser and open the app on all devices (DOES NOT WORK IF EDGE IS YOUR DEFAULT BROWSER!)
ABM.ViewerOpenAllDevices("http://localhost:" & port & "/" & ABMShared.AppName & "/", 100)

' or open a specific device as default (DOES NOT WORK IF EDGE IS YOUR DEFAULT BROWSER!)
'ABM.ViewerOpenDevice("http://localhost:" & port & "/" & ABMShared.AppName & "/", 300, ABM.VIEWER_TABLET)

' or just open de browser, no multiple devices (should work in Edge)
'ABM.ViewerOpen("http://localhost:" & port & "/" & ABMShared.AppName & "/")
#End If

Lots of new theme properties! Check out the demo on how to use  them in the new Dragonfly theme.  As winter is coming and days are getting shorter (at least here in the northern hemisphere), I went for a ‘Night’ theme this time.

ABMaterial DragonFly is now available on 750+ locations worldwide on CDN!  If you use the CDN, you do not need to upload the css/js/fonts folders to your own server anymore!

This means only your own assets (images etc) from the www folder have to be available on your server. De demo running on abmaterial.com for example is working like this.

Usage:

ABM.ActivateUseCDN("DONATORKEY", "https://cdn.jsdelivr.net/gh/RealAlwaysbusy/ABMaterial@v4.00/")

The over 20 new fixes and fulfilled wishes make ABMaterial 4.00 very stable, just like its ‘parent’ programming language: B4X.  It is a real joy knowing one can depend on a strong, bug free environment.  Erel from Anywhere Software rulez!

Happy programming!

Alwaysbusy

Click here to Donation and support ABMaterial

Or make a donation with Bitcoins:

BTC: 13x7b12GonCj6iphnjLuonrwURK2jCgMdE

This is my bitcoin address as a QR code. It is possible to send bitcoins to me from mobile wallets by scanning this code.

13x7b12GonCj6iphnjLuonrwURK2jCgMdE


B4XHelp: An ABMaterial WebApp for B4X Library documentation

b4xhelpI’ve created an ABMaterial (3.75) WebApp to show the documentation for the B4X libraries. Everyone who created a library for B4A, B4i or B4J can upload their .xml file to the WebApp and everyone can consult it. You can re-upload a new version for a library if needed.

NOTE: not online anymore! In the zip is the source code of the webapp so you can run it yourself.

b4xhelp

Notes:

  • This WebApp is open for everyone, but please try to keep it clean. Thank you!
  • B4XHelp is running on my personal Raspberry Pi with not a super-duper internet connection, so it also may give some indication how it handles a lot of users.
  • The libraries itself are NOT uploaded to the WebApp! Only the .xml files to parse them.
  • The WebApp also runs on a HTTP/2 server, but I do not have a verified certificate. If you use this link, you will get a warning that it may not be safe. You normally only need to accept this once:

priv

ABMaterial may be overwhelming at first with all its features at your disposal, but once you get the hang of it, creating such a WebApp as this, in pure B4J, can go very fast.

Alwaysbusy

Click here to Donation and support ABMaterial

Or make a donation with Bitcoins:

BTC: 13x7b12GonCj6iphnjLuonrwURK2jCgMdE

This is my bitcoin address as a QR code. It is possible to send bitcoins to me from mobile wallets by scanning this code.

13x7b12GonCj6iphnjLuonrwURK2jCgMdE

 

 


B4J: ABMaterial 3.20 Public/3.50 Donators Released!

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

GM2

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!

Have a great summer!

Alwaysbusy

Click here to Donation and support ABMaterial

 


B4A + B4J: Profile your apps ‘live’ with ABMonitor

ABMonitor2

It has been some time since I could give my donators a new goodie;), and this time it is a library/tool to profile and monitor your B4J + B4A (7.01+) apps (not limited to ABMaterial WebApps!) I’ve been needing something like this for some time for my own projects, but couldn’t find one that suited me.  This can be a very good asset to find Memory Leaks or to track which method takes up to much time.

Using a very simple API, you can track how long the code execution time is, the times hit, average time, memory usage etc for any block of code you want to investigate.  I deliberately gave you this API freedom, as profiling ALL your code (as most programming languages do) is just drowning you in to much information so you don’t see the wood for the trees anymore.

QUICK NOTE: Do not forget to set your DONATORKEY and the port in the Viewer params.txt . The same port and the IP of your Viewer have to be used in the apps you are monitoring!

How it works:
ABMonitor uses the Jamon library, which has a extremely low overhead on your code. Just by disabling it (using the SetActive method), you can actually leave it in your production apps if you want (or use B4Js conditional compiling if you want to get rid of it all together in a production app).

ABMonitor consists of two main parts:
1. The ‘live’ ABMonitor Viewer.

Instructions: Simply start the Viewer in a command prompt using: java -jar ABMonitor.jar

This Viewer shows all the stuff you are monitoring with the API. It shows e.g. how many times some part of your code was hit, how long it took, what the average time was, when it was last accessed, memory consumption etc… It is presented in a TreeView Table, so you can check every detail (depending on how deep you’ve coded your profiling).  At the bottom, the last 50 runs are presented in some line charts.

Because the IDE of B4X is ‘live’, so is the Viewer! Thanks to this unique feature of the B4X products, you can update your code and see the results in the Viewer immediately.

Little side note: This ‘live’ IDE part is a little-known/promoted feature (except within the B4X community of course, as for us this is normal), but it has a HUGE advantage over any other tool out there.  In similar market aimed tools, like Xojo for example, you have to compile and re-compile every single time you make the smallest of changes to your code (on bigger projects it takes up to 20 minutes, some users reported). In B4X, just change the code, and continue running.  Not happy with it? Change it again and see what gives. BIG production time-saver! Some of you who used to program in VB6 know what I mean…

2. The ABMonitorB4X libraries (ABMonitorB4A.jar/ABMonitorB4J.jar).

Install instructions: Copy the xml and jars (dont’t forget jamon-2.81.jar), to your B4A or B4J libraries folder. In the IDE select the ABMonitorB4X library, the RandomAccessFile library and the Network library.

This API connects your own apps with the monitor. It basically consists of a Start and a Stop method.

First, we have to make the connection with the Viewer. Thanks to Erels new Resumable Subs, doing this is a breeze:

In Main make some declarations:

Sub Process_Globals
   Public Monitor As ABMonitor

   Private port As Int = 10090 ' <-- Set your Viewers Port!
   Private ip As String = "127.0.0.1" ' <-- Set your Viewers IP!
   Private abmonitor As AsyncStreams
   Private client As Socket

   ' Useful to quickly activate/deactivate the monitoring
   Public TRACKMONITOR As Boolean = True
End Sub

Next add the following resumable sub:

Sub ConnectMonitor()
   Dim c As Socket
   c.Initialize("client")
   c.Connect(ip, port, 5000)
   Wait For Client_Connected (Successful As Boolean)
   If Successful Then
     client = c
     abmonitor.InitializePrefix(client.InputStream, False, client.OutputStream, "abmonitor")
     Log("ABMonitor connected")
     Monitor.SetActive("Template", True,abmonitor, 5)
   Else
     Log("ABMonitor disconnected")
   End If
End Sub

Sub abmonitor_Error
   Monitor.SetActive("Template", False,Null, 0)
   Log("ABMonitor disconnected")
End Sub

You can set the interval the data should be send to the Viewer, in seconds, with the last parameter in ‘Monitor.SetActive(“Template”, True,abmonitor, 5)’.  In this example, it is every 5 seconds.  Note: This does not mean it is tracked every 5 seconds! The library will continue tracking everything, but it will only send all the info over to the Viewer every 5 seconds.

Finally, Initialize the monitor and call the resumable sub when your app starts (a good place is e.g. before StartMessageLoop in a Server app):

...
Monitor.Initialize("YOURDONATORKEY")

ConnectMonitor

StartMessageLoop

Ready to do some monitoring!

As I said, there are basically only two commands: Start and Stop.

There are two ways to monitor/profile your code (you can mix the use of them):

a. Monitor some code:
You want to monitor a query, or a whole sub, … In general this is a complete block of code.

Good practice is using the class/module name as the Group parameter, and the method name as the Label, but you can put whatever you want. This will later be used in the Viewer to group stuff. (Group and Label are the first and second parameters in the calls).

Example:

Private Sub WebSocket_Connected (WebSocket1 As WebSocket)
   If Main.TRACKMONITOR Then Main.Monitor.Start("ABMPageTemplate", "WebSocket_Connected", "")

   '   ... the code you want to monitor

   If Main.TRACKMONITOR Then Main.Monitor.Stop("ABMPageTemplate", "WebSocket_Connected", "")
End Sub

Or tracking a query:

..
If Main.TRACKMONITOR Then Main.Monitor.Start("ABMPageTemplate", "MySlowQuery", "")

Dim SQL_str As String
SQL_str = "SELECT cases.CaseID, cases.CaseUserID, cases.CaseType, cases.CaseSummary FROM tCases WHERE cases.CaseStatus=1;"
Dim cases As List = DBM.SQLSelect(SQL, SQL_str, Null)

If Main.TRACKMONITOR Then Main.Monitor.Stop("ABMPageTemplate", "MySlowQuery", "")
...

b. Monitor methods which are used in multiple places, and you want to know where it was called.
You have for example a page.Refresh method, which is called in multiple places. You can use the third parameter to set the ‘caller’. In general there will only be one line of code between the start() and stop().

This caller will later be used in the Viewer to build a call tree (or stack trace)

Example:

Private Sub WebSocket_Connected (WebSocket1 As WebSocket)
     ...
     If Main.TRACKMONITOR Then Main.Monitor.Start("ABMPageTemplate", "page.Refresh", "WebSocket_Connected")
     page.Refresh
     If Main.TRACKMONITOR Then Main.Monitor.Stop("ABMPageTemplate", "page.Refresh", "WebSocket_Connected")
     ...
End Sub

public Sub ConnectPage()
   ...
   ' refresh the page
   If Main.TRACKMONITOR Then Main.Monitor.Start("ABMPageTemplate", "page.Refresh", "ConnectPage")
   page.Refresh
   If Main.TRACKMONITOR Then Main.Monitor.Stop("ABMPageTemplate", "page.Refresh", "ConnectPage")
   ...
End Sub

As you can see, you are totally free to monitor anything you want.

Call for action: if anyone out there is a guru in making B4i libraries, please PM me!  The java library code is quite simple and it shouldn’t be to hard for an experienced B4i library coder to write one which can connect to the same Viewer.  If we got this one too, then we’ve covered all major platforms in B4X!

ABMonitor is part of a multi-pack on libraries, frameworks and tools all Donators to this blog receive.

Included are currently:

ABMaterial (B4J) A very powerful framework combining a tuned Materialize CSS with the free programming tool B4J. It allows creating Web Apps that not only look great thanks to Googles Material Design, but can be programmed with the powerful free tool from Anywhere Software without having to write a single line of HTML, CSS or Javascript code!

ABExchange (B4J) It can be used to sync the ABMCalendar control with your exchange server and outlook. It can also send a mail.

ABJasperReports (B4J) his is a little library that allows you to export reports created in Jasper Reports in your B4J applications. They can be exported to pdf, html and xls. You can use parameters defined in JasperReports.

ABPDFBox (B4J) With this library you can print PDF files (either by showing a dialogbox or directly to a specified printer). Works in UI and NON-UI apps.

ABMonitor (B4J + B4A) Tool to monitor/profile your B4A (7.01+) and B4J code! Includes the libraries for both platform + the ABMonitor Viewer. See the tutorial for more info.

ABCron (B4J + B4A) A more advanced timer library that can schedule more intelligently tasks using Cron expressions. You can also set a start and end datetime. I’ve added a method RestartApplicationNONUI() that should restart you .jar file when the Cron expression is met.

ABEvaluator (B4J + B4A) Evaluate mathematical expressions. You can also write your own functions in B4J/B4A.

ABPlugin (B4J) Create Live plugins for you own apps. This means you can create plugins that can be added/removed while your app is running. Note it is a little experiment that shows the power of B4J. The ‘compile to library’ feature of B4J is very handy to create plugins.

ABZXCVBN (B4J + B4A) Realistic password strength estimation.

ABTreeTableView (B4J) Custom B4J component which combines a TreeView with a TableView.

Until next time!

Alwaysbusy

Click here to Donation and support ABMaterial


B4J: New in ABMaterial 3.50: Drag and Drop about anything

ABMDragDrop

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
     Params.Remove("eventname")
     Params.Remove("eventparams")
     ' BEGIN NEW DRAGDROP
     If eventName = "page_dropped" Then
       page.ProcessDroppedEvent(Params)
     End If
     ' END NEW DRAGDROP
     Select Case Params.Size
     ...

2. Next we define a ‘DRAG’ group:

' name, minimum height of a cell
page.DragDropCreateGroup("DRAG", 150)

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

page.DragDropAddZone("DRAG", "DRAGCELL1", page.Cell(3,1),null)
page.DragDropAddZone("DRAG", "DRAGCELL2", page.Cell(3,2),null)
page.DragDropAddZone("DRAG", "DRAGCELL3", page.Cell(3,3),null)

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.AddRows(1,True,"").AddCells12(1, "")
  cont.BuildGrid

  cont.IsTextSelectable = False

  If AllowInCell1 Then
    ' can be dragged to zone 1 of 'DRAG'
    cont.EnableDragDropZone("DRAG","DRAGCELL1",True)
  End If
  If AllowInCell2 Then
    ' can be dragged to zone 2 of 'DRAG'
    cont.EnableDragDropZone("DRAG","DRAGCELL2",True)
  End If
  If AllowInCell3 Then
    ' can be dragged to zone 3 of 'DRAG'
    cont.EnableDragDropZone("DRAG","DRAGCELL3",True)
  End If
  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
  card.AddAction("Press me")

  ' add the card to the page
  cont.Cell(1,1).AddComponent(card)
  Return cont
End Sub

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)
End Sub

Sub Page_DragCancelled(component As String, source As String)
  Log("Drag cancelled: " & component)
End Sub

' there are four parameters: component, source , target, before
Sub Page_Dropped(Params As Map)
  Log("Dropped: " & Params.Get("component"))
End Sub

And this is basically it! Very simple without having to write any HTML, CSS, PHP or Javascript. All done in pure B4J!

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.

Cheers,

Alwaysbusy

Click here to Donation and support ABMaterial


B4X: ABMaterial 3.03 Public/3.20 Donators released

A lot of internal changes were made in the ABMaterial 3.20 ‘Chipmunk’ release.  For example, ABMContainer has been rewritten from the ground-up, but with minimal impact to your existing projects.  It allows adding them as array components, and has much shorter ID tags in the generated HTML.

Mindful and Stanmiller had another go on the cache issues.  They came up with a very nice solution (I had tears in my eyes) and both have done extensive testing on this subject. A big thanks again!  ABM 3.20 is backwards compatible with the previous 3.0.3 Cache System, but I would advice you to make the changes whenever you have the chance.

A nice new feature for mobile devices is the New Debug feature using a modified version of Conzole!

New Debug at work:

Using this new feature is very simple in B4J:

First, you have to enable the console in BuildPage():

' params are: open on load, width
page.DebugConsoleEnable(True, 300)

Two methods can be used to show or hide the console programmaticaly. Can be handy as a buid-in tool in your apps where the user enters a code on his device and you can then check the console.

page.DebugConsoleShow
page.DebugConsoleHide

Now you can start doing some cool stuff 🙂 Some examples:

Show some text, or a server value (note: strings must be between single quotes!)

page.DebugConsoleLog("'Server click at: " & DateTime.Time(DateTime.Now) & "'") ' shows the text

Now I generated an error on purpose, so the demo can show it catches the error:

page.DebugConsoleLog("'value: ' + $('#pi002-r2c1').html();") ' generates an error, the ; at the end is wrong

Same code, but with the correct javascript syntax, showing the html() value of the tag:

page.DebugConsoleLog("'value: ' + $('#pi002-r2c1').html()") ' generates the html value of the pi002-r2c1 tag

It works also on the desktop, although you probably will use the Chrome console as you can do more.

But there is more. You can also redirect all browser console message directly into the B4J log window!  You can use the following commands anywhere in your own code to start/stop receiving the browser console messages.

page.DebugConsoleB4JStart
page.DebugConsoleB4JStop

This is a very powerful feature if you develop Webapps for mobile devices.  It can be done otherwise, but it is a pain in the a$$ to set it up. Now, you can easily debug it on your iPhone, iPad, Android or any other device.

ABMaterial 3.20 has over 20 new features and bug fixes.  Following the same philosophy as B4X, the quick release cycle has proven to work very well for ABMaterial and its many users.  Donators will receive their download mail shortly.  The public version 3.03 can be downloaded from this blog too.

I’m also glad that with these releases, now everyone can work with ‘Chipmunk‘, and this does also mean the development cycle for ‘Butterfly‘  has ended.

I would like to take this opportunity to thank everyone for the support, hourless testing and inventive ideas you came up with in the last few years. You’ve made ABMaterial one hell of a WebApp Development Tool!

ThankYou

But we are not at the end! Far from it as I already have big ideas for the next releases.

Until then, happy programming!

Alwaysbusy

Click here to Donation and support ABMaterial


%d bloggers like this: