B4J Library [ABMaterial] Framework for WebApps

Discussion in 'B4J Libraries & Classes' started by alwaysbusy, Nov 5, 2015.

  1. alwaysbusy

    alwaysbusy Expert Licensed User

    Gabino A. de la Gala likes this.
  2. billyrudi

    billyrudi Active Member Licensed User

    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?
     
  3. alwaysbusy

    alwaysbusy Expert Licensed User

    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.

    Code:
    <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
     
    Peter Simpson and Cableguy like this.
  4. billyrudi

    billyrudi Active Member Licensed User

    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:

    Code:
    '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
     

    Attached Files:

    alwaysbusy likes this.
  5. Erel

    Erel Administrator Staff Member Licensed User

    <off topic>
    The smart strings literal was implemented exactly for this use case:
    Code:
    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>
     
    DonManfred and Peter Simpson like this.
  6. billyrudi

    billyrudi Active Member Licensed User

    ok. i don't know it!
     
  7. alwaysbusy

    alwaysbusy Expert Licensed User

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

    billyrudi Active Member Licensed User

    no. i have not need. i can use your calling by their id for example r2c1.
     
    alwaysbusy likes this.
  9. Gabino A. de la Gala

    Gabino A. de la Gala Active Member Licensed User

    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)?
     
  10. Cableguy

    Cableguy Expert Licensed User

    log it! create a set of flags for the properties you need to know the state of, and log them!
     
  11. Gabino A. de la Gala

    Gabino A. de la Gala Active Member Licensed User

    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.
     
  12. Javier Lovay

    Javier Lovay Member Licensed User

    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!
     
    Last edited: Nov 29, 2015
  13. Harris

    Harris Well-Known Member Licensed User

    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
     
    cambopad and Roberto P. like this.
  14. Harris

    Harris Well-Known Member Licensed User

    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!



    ABMaterial1.png




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



    ABMaterial2.png
     
    Last edited: Nov 30, 2015
  15. Bladimir Carrillo

    Bladimir Carrillo Member Licensed User

    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.
     

    Attached Files:

    Harris likes this.
  16. Harris

    Harris Well-Known Member Licensed User

    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
     
    rboeck likes this.
  17. Bladimir Carrillo

    Bladimir Carrillo Member Licensed User

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

    Regards
     
    alwaysbusy, Cableguy and Harris like this.
  18. Harris

    Harris Well-Known Member Licensed User

    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
     
    jmon likes this.
  19. alwaysbusy

    alwaysbusy Expert Licensed User

    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!
     
  20. Bladimir Carrillo

    Bladimir Carrillo Member Licensed User

    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
     
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice