B4J Question [BANANO] JQWidget integration question

Luk

Member
Licensed User
Hi,

I'm looking at BANano and possible integration with JQWidgets.
How can I do the following in BANano:

B4X:
$("#jqxButton").jqxButton({ width: 120, height: 40 });
Thanks.
 
Last edited:

alwaysbusy

Expert
Licensed User
Without knowing JQWidgets, I think something like that:

B4X:
Dim jQ as BANanoObject
jQ.Initialize("$")
JQ.Selector("#jqxButton").RunMethod("jqxButton", CreateMap("width": 120, "height": 40))
Note that the JQ declaration can be done once in the Global
 

Kiffi

Well-Known Member
Licensed User
Argh! Alain beats me ;)

But nevertheless:

B4X:
Sub Process_Globals
 
  Private BANano As BANano
 
End Sub

Sub AppStart (Form1 As Form, Args() As String)

  BANano.Initialize("BANanoJQWidgets", "BANanoJQWidgets", 1)
 
  BANano.UseServiceWorker = False
 
  BANano.HTML_NAME = "index.html"
 
  BANano.Header.Title = "BANanoJQWidgets"

  BANano.Header.AddCSSFile("https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css")
 
  BANano.Header.AddJavascriptFile("https://code.jquery.com/jquery-3.3.1.min.js")
 
  BANano.Header.AddJavascriptFile("https://jqwidgets.com/public/jqwidgets/jqx-all.js")

  BANano.Build("C:\inetpub\wwwroot\BANano\") ' <-- adjust to your needs!

  ExitApplication

End Sub

Sub BANanoJQWidgets_Ready()

  Dim HTML As String = $"<input type="button" value="Button" id="jqxbutton" />"$
 
  BANano.GetElement("body").Append(HTML)
 
  Dim jQuery As BANanoObject
 
  jQuery.Initialize("$")
 
  jQuery.Selector("#jqxbutton").RunMethod("jqxButton", CreateMap("width":"150", "height":"50"))
 
End Sub
 

Luk

Member
Licensed User

Attachments

alwaysbusy

Expert
Licensed User
As you are using jQuery, just continue with it:

B4X:
Dim event As BANanoEvent ' dummy declaration so B4J doesn't give an error in the next line for the param of the callback
mJRating.RunMethod("bind", Array("change", BANano.CallBack(mCallBack, mEventName & "_change", event))) ' _change must be lowercase!
Is this the way to go to create a jqWidget wrapper for BANano ?
Absolutely! As you are making it as a Custom View, you can just use the Abstract Designer, drop one of your jqxRating objects on in and use the generate members method. Just adding some simple normal B4J code et voila! :)

e.g. does the same as your manual code:
B4X:
Sub BANanoJQWidgets_Ready()
   BANano.LoadLayout("#body", "layout1")
End Sub

Sub jqxRating1_Change (event As BANanoEvent)
   BANano.Alert("ok")
End Sub
Alwaysbusy
 
Last edited:

alwaysbusy

Expert
Licensed User
For the moment, to get the value from the event you will have to use this workaround:

B4X:
Sub jqxRating1_Change (event As BANanoEvent)
   Dim ev As BANanoObject
   ev.Initialize(event)
   Log(ev.GetField("value"))
   BANano.Alert("ok")
End Sub
I'll add .value and a method .otherField(name) for any other field which is not wrapped.

So this will do the same:

B4X:
Log(event.Value)   
Log(event.OtherField("value"))
 

Luk

Member
Licensed User
Here I am again :)

I'm trying to call the function disable.
B4X:
$('#jqxRating').jqxRating('disable');
But the following is not working:
B4X:
mJRating.RunMethod("jqxRating","").RunMethod("disable","")
(I'm using version 2.39)

Thanks.
 

Attachments

alwaysbusy

Expert
Licensed User
Shouldn't it be? (untested)

B4X:
mJRating.RunMethod("jqxRating","disable")
as 'disable' seems like a param of the method jqxRating
 
  • Like
Reactions: Luk

Kiffi

Well-Known Member
Licensed User
From the jQWidgets-Documentation (here for a jqxButton-button):
To set a property(option), you need to pass the property name and value(s) in the jqxButton's constructor.
$("#jqxbutton").jqxButton({ disabled: true });
so, the BANanoCode looks like this:
B4X:
jQuery.Selector("#jqxbutton").RunMethod("jqxButton", CreateMap("disabled":True))
// Edit: Note to me: always wait at least one hour for Alain before I answer. ;)
 

Luk

Member
Licensed User
Another question ...

Using
B4X:
j = BANano.Window.GetField("JQXElements")
I can obtain the JQXElements object, but how can I do the following ?

B4X:
JQXElements.settings["buttonSettings"] =
        {
           width:120,height:40, value:"Button", theme:"light"
        }
Creating the wrong code was no problem :)
B4X:
j.RunMethod("buttonSettings", CreateMap("width":120, "height":40,"theme":"light","value":"button"))
Thanks
 

Kiffi

Well-Known Member
Licensed User
untested:
B4X:
j.RunMethod("settings", Array("buttonSettings", CreateMap("width":120, "height":40,"theme":"light","value":"button")))
 

alwaysbusy

Expert
Licensed User
Untested, but try this:

B4X:
Dim j As BANanoObject = BANano.Window.GetField("JQXElements").GetField("settings")
j.SetField("buttonSettings", CreateMap("width":120, "height":40,"theme":"light","value":"button"))
 

alwaysbusy

Expert
Licensed User
I wonder if both solutions work, as we seem to have taken a different approach to include the 'settings' @Luk can you test?
 

Luk

Member
Licensed User
This code isn't working. The error message : settings is not a function ...
Sorry Kiffi :)
untested:
B4X:
j.RunMethod("settings", Array("buttonSettings", CreateMap("width":120, "height":40,"theme":"light","value":"button")))
This code is working and will make my life a lot easier :)
Untested, but try this:

B4X:
Dim j As BANanoObject = BANano.Window.GetField("JQXElements").GetField("settings")
j.SetField("buttonSettings", CreateMap("width":120, "height":40,"theme":"light","value":"button"))
@Kiffi
@alwaysbusy
Thank you very much !
 
Top