B4J Library [Web][ABMaterial] Framework for WebApps

alwaysbusy · Nov 24, 2015

@Gabino A. de la Gala Not for the moment. Mail me a feature request.

billyrudi · Nov 25, 2015

hi,
i want try to use pluscharts.js (http://www.pluscharts.com/) in my project.
there is a way to do it? if i can create a div i thonk that i can use it!
can you help me?

alwaysbusy · Nov 25, 2015

Chartist.js is the library I've picked to make charts. The main objective of ABMaterial is that the user does not have to write any HTML, Javascript or CSS.

Before I start to make changes, and if it is only a div you'll need, you can try the following:

0. in you app create an empty row with one cell
1. Run your app
2. Open the html in an text editor like notepad++ (while your app running!)
3. Find the row and col you've created and add you div in it
e.g.

B4X:

<div class="container">
<div id="r18" class="row transparent   " style="margin-top: 0px; margin-bottom: 20px">
<div name="page.cell(18,1)" id="r18c1" class="col s12 m12 l12 offset-s0 offset-m0 offset-l0 transparent   " style="position: relative ;margin-top: 0px;margin-bottom: 0px;padding-left: 0px;padding-right: 0px" >
<div></div>   <--------------------------------------- this is your div
</div>
</div>
</div>

4. press F5 in the browser
5. check if everything is as you expected
6. Mail me with a feature request to add a div and I see if it can add it to the framework

billyrudi · Nov 26, 2015

Hi AlwaysBusy,
i have made as you write..
it is not necessary to add other div.
i can use one of your...ex r2c1

so if in the buildpage i add
page.AddExtraJavaScriptFile("herocharts-min.js")
page.AddExtraCSSFile("chartdemo.css")

and in WebSocket_Connected
chart.Initialize(ws, "r2c1","Grafico", "'label': 'Paolo','value': '18000','color': '#f8bd19'", "'label': 'Arianna','value': '20000','color': '#h8bd19'")
chart.Resize(10, 10, 600, 500)

i'm able to add all i want.

my
Private chart As UAPPlusChart is made so:

B4X:

'Class module Sub Class_Globals Private mID As String Private mWS As WebSocket Private mData As List End Sub Public Sub Initialize(WS As WebSocket,ID As String,Titolo As String, d1 As String,d2 As String) mWS = WS mID = ID.ToLowerCase Dim Script As String Script = "var lineChart2 = new HeroCharts({ " & _ "'chart': {'type':'3dpie','chartcontainer':'" & mID &"','heading':'" & Titolo &"', 'width': 600," & _ "'height': 500,'originx': 0," & _ "'originy': 80," & _ "'colors': ['#33bdda', '#ff5904','#6baa01']," & _ "'legendposition': 'bottom'," & _ "'legendbox': true," & _ "'startingangle': '125',}, 'series': [ " & _ "{" & d1 & "}," & _ "{" & d2 & "}]," & _ "});" & _ " lineChart2.draw();" mWS.Eval(Script, Array As Object(mID)) End Sub Sub GetID() As String Return mID End Sub ' ### Sub AddEvent(EventName As String, PreventDefault As Boolean) EventName = EventName.ToLowerCase mWS.RunFunction("b4j_addEvent", Array As Object("#" & mID, EventName, mID & "_" & EventName, PreventDefault)) End Sub Sub RemoveEvent(EventName As String) EventName = EventName.ToLowerCase mWS.Eval("$(arguments[0]).off('" & EventName & "', $(arguments[1]))", Array As Object("#" & mID)) End Sub Sub SetEventObjectName(EventObjectName As String, EventName As String, PreventDefault As Boolean) EventObjectName = EventObjectName.ToLowerCase EventName = EventName.ToLowerCase RemoveEvent(EventName) mWS.RunFunction("b4j_addEvent", Array As Object("#" & mID, EventName, EventObjectName & "_" & EventName, PreventDefault)) End Sub ' ### Sub AppendTo(ElementID As String) mWS.Eval("$(arguments[0]).appendTo($(arguments[1]))", Array As Object("#" & mID, "#" & ElementID.ToLowerCase)) End Sub Sub Remove() mWS.Eval("$(arguments[0]).remove()", Array As Object("#" & mID)) End Sub Sub Resize(Left As String, Top As String, Width As String, Height As String) Dim CSS As String CSS = "$(arguments[0]).css({" If Left <> -1 Then CSS = CSS & "'left':'" & Left & "px'," If Top <> -1 Then CSS = CSS & "'top':'" & Top & "px'," If Width <> -1 Then CSS = CSS & "'width':'" & Width & "px'," If Height <> -1 Then CSS = CSS & "'height':'" & Height & "px'," If CSS.EndsWith(",") Then CSS = CSS.SubString2(0, CSS.Length - 1) CSS = CSS & "});" mWS.Eval(CSS, Array As Object("#" & mID)) End If End Sub

with this solution you can use all jquery ui objects and all javascript components if you like!
i hope that is usefull for you!.
regards Paolo

Erel · Nov 26, 2015

<off topic>
The smart strings literal was implemented exactly for this use case:

B4X:

Dim script As String = $"
    var lineChart2 = new HeroCharts({
     'chart': {'type':'3dpie','chartcontainer':'${mID}','${heading}':'${Titolo}', 'width': 600,{
     'height': 500,'originx': 0,
     'originy': 80,
     'colors': ['#33bdda', '#ff5904','#6baa01'],
     'legendposition': 'bottom',
     'legendbox': true,"
     'startingangle': '125',}, 'series': [
     {${d1}},
      {${d2}}],
     });
     lineChart2.draw();"$

Note that you can use $xml{SomeVariable} to escape the 5 xml entities.
</offtopic>

billyrudi · Nov 26, 2015

ok. i don't know it!

alwaysbusy · Nov 26, 2015

@billyrudi Waw, nicely done! So do you still need an 'empty' <div> like you asked in your previous post to make this work?

billyrudi · Nov 26, 2015

no. i have not need. i can use your calling by their id for example r2c1.

Gabino A. de la Gala · Nov 27, 2015

Is there any way to activate one of the default options in a ABMCombo at runtime?

How Can I know which option of a combo is selected in any time (not when it is clicked)?

Cableguy · Nov 28, 2015

log it! create a set of flags for the properties you need to know the state of, and log them!

Gabino A. de la Gala · Nov 28, 2015

Cableguy said:
log it! create a set of flags for the properties you need to know the state of, and log them!

Yes, thanks. This is I'm doing. You can use Text property too.

The problem I have now is I can't refresh and I can't "initialize" it with no one option selected in run time.

Javier Lovay · Nov 29, 2015

Hello, your work is excellent.
Can use your framework in B4A? I am developing an web app in B4A that run on a android server.
Thanks and congratulations!

Harris · Nov 30, 2015

Hello AB,

Just spent the past few days exploring the ABMaterial concept of web site creation.
Looks great to date! Your examples work well with static data (with very small issues - see my next post...).

Anyone considering avoiding the normal learning curve of JavaScript, HTML(5) and JQuery (to some extent), PHP (- not covered here...) and understands B4X shall find this most welcoming, as I have.

I know enough about each to completely bury myself in a never ending spiral of frustration!
I have explored many different frameworks only to realize that I cannot possibly learn (in short order) what it takes to create what my app demands.
I have also had to HACK into generated code to make it function as I wanted (ie. introduce a filter).

We need a B4C (client) and B4S (server). Or a B4J_CS (covers both).

However complicated it may first appear, following your well defined examples and tutorial makes it easier.
Without this knowledge of how to properly construct a (page, table, etc) one could get way off tract in short order...
Thankfully you have taken the effort to point this out.

I think now is the time to connect it to a DB (MySQL) and introduce those complexities.
A simple CRUD example (using canvas to extend table as you have mentioned) would be most helpful.
Reading and experimenting with all your wonderful stuff, I am still too stupid (novice) to piece this together...

Hopefully you shall find the time soon (or some other contributor).

In my opinion, it only lacks the CRUD functionality (ie. a CRUD framework).
When one examines other offerings from various suppliers, this is not as easy one might expect.
Many technicalities to overcome (INSERT, UPDATE, DELETE, etc.)
I understand this from other suppliers who generate this PHP code to handle these functions.

Thanks

Harris

Harris · Nov 30, 2015

I added more TopMenuItems than the default Contact.
Works great until sized to small...

EDIT: SORRY! Helps do read the documentation!!!
Set Param to make topmenu NOT show on small screens!

Small (phone).
Top doesn't conform to wrap menu items...

Bladimir Carrillo · Nov 30, 2015

Dear Alain,

I've been testing the framework and is excellent. I plan to use it to migrate to a large web environment, which at the moment is a windows desktop application system.
Right now I'm testing with access to a MySQL database showing data in a ABMtable and works well.
Now I have an error when I try to run the JAR file (generated when running the application in Release mode):

'Error: A JNI error has occurreed, please chek your installation and try again"

Additionally, the JAR file generated just have 47 KB, so I think it does not contain server components internally.

I would appreciate your valuable assistance to solve this error and continue my testing and development.

Best regards.

Harris · Nov 30, 2015

Bladimir Carrillo said:
Right now I'm testing with access to a MySQL database showing data in a ABMtable and works well.

Would it be possible to provide a code snip-it of how you accomplished this? I am curious how you populate rows and cells with database table records.

Thanks

Bladimir Carrillo · Nov 30, 2015

Harris said:
Would it be possible to provide a code snip-it of how you accomplished this? I am curious how you populate rows and cells with database table records.

Thanks

On a few hours I will share my test app with the basic crud functionality.

Regards

Harris · Dec 1, 2015

http://192.227.136.228:51042/demo

The link above shows the Alain's demo running on my VPS located in Dallas, Texas, USA.

Try it out!

It is a Linux Ubuntu 12.04 LTS VPS. Just one of my test servers provided by WeLoveServers (19 bucks per year).

I installed the Demo.jar in the var directory (after much experimenting and updating java to 1.8).

When I ran it ( nohup java -jar Demo.jar ), it created the folders in the www dir with all files required - except for the /images folder (which was empty).
I copied the images to the folder and everything seems to work as expected...

It is working great on my tablet (Samsung Active 8.0) and desktop (Win 8.1) - both Chrome Browser with much the same performance as my localhost!

I think now I can relax because I have found a framework where (we) can create a stable and functional backend without all the extreme learning curve involved with website technologies. Sure, there will be some hoops, where we need to inject some JavaScript, php and such, but far less than what I have already dealt with (I expect).

Thanks alwaysbusy, I have sent a small donation... My next shall be larger as your wonderful project progresses.

Mike "Harris" Whetmore

alwaysbusy · Dec 1, 2015

Hi all,

Sorry for my absence the last few days, but I was in the hospital having some gallstones removed. They were killing me :-(
So I'm little short of a week behind on my release schedule.

I will carefully go through the last posts and see what can be done. I'm very happy some of you are willing to take over some of the work by creating little demo apps to help each other out.

First thing on the agenda is getting v1.02 out to the public. It has a great deal of fixes for little problems and makes it easier to design the 'grid'. Expect this later today.

Next, I'll try to finish up the next beta for the donators with the ABMCalendar and the ABMSocialOauth control. Check your mail in the next few days.

I'm aware some of the controls lack some functionality but I'm afraid it is part of the deal. It is not that easy to find a good balance between 'easy to use' and 'extended functionality'. But it will grow in time. First versions of B4A were alo missing some things. I love billyrudis example on 'adding' a new chart control. Maybe some amongst you could share more of these 'extra controls'?

Cheers and happy programming!

Bladimir Carrillo · Dec 1, 2015

alwaysbusy said:
Hi all,
Sorry for my absence the last few days, but I was in the hospital having some gallstones removed. They were killing me :-(

Hi Alain,
I'm glad you're safe from your gallstones and I hope you recover soon.

I'm trying to handle a data table (ABMTable) and have trouble when updating content has been edited or deleted records from the database.
Is there any way to remove data from the table (ABMTable) to load and view the updated data?
Now only the data it is updated when I stop and run the application again.
These days I will make my donation. Your work is very important to me.

Best regards

B4J Library [Web][ABMaterial] Framework for WebApps

Expert

Active Member

Expert

Active Member

Attachments

B4X founder

Active Member

Expert

Active Member

Well-Known Member

Expert

Well-Known Member

Member

Expert

Expert

Member

Attachments

Expert

Member

Expert

Expert

Member

Similar Threads