B4J Library [BANano] Kendo UI Core - Wrapper

Hello,

i would like to present my first version of a BANano wrapper for Kendo UI Core.

You can see a demo version here: http://banano.tuebben.de/kendoui/demo/

What is Kendo UI Core?

Kendo UI is a library that provides some powerful and nicely designed controls. Besides the paid full version there is a free core version which does not include some controls (like the grid, scheduler, charts, etc.).

Here is an overview of the available controls in the core version: https://github.com/telerik/kendo-ui-core

Please note:

Currently the wrapper has the status of a 'proof of concept'.
Not all controls have been implemented yet.
And the already implemented controls do not yet support all properties and methods.
The documentation still needs some work.

For this reason only the brave and fearless would be able to work with the library at the moment. ;)

If you are interested, I can publish the library and a demo code.

Greetings ... Peter

// Edit (03.03.2019 16:00): I have now added the required files to this posting.

Quick installation guide:
  1. Extract the files in Library.zip into the Additional Files folder.
  2. Extract the files in BANanoKendoUIDemo.zip into a folder of your choice and start B4J with BANanoKendoUIDemo.b4j.
  3. Adjust the path in BANano.Build() according to your needs.
// Edit (14.03.2019 15:45): The library has been updated to version 0.14
 

Attachments

  • BANanoKendoUIDemo.zip
    159.1 KB · Views: 981
  • Library.zip
    178.8 KB · Views: 1,028
Last edited:
Click to expand...
Kiffi

Kiffi

Well-Known Member
Licensed User
Longtime User
@GanjaKyp : Please try again with the attached files.

At least SimpleDemo should work.
 

Attachments

  • Demo016.zip
    159.3 KB · Views: 541
  • Library016.zip
    179.1 KB · Views: 491
  • SimpleDemo.zip
    934 bytes · Views: 545
I

Ilya G.

Active Member
Licensed User
Longtime User
Doesn't work :(

B4X: 
Reading B4J INI in C:\Users\Администратор\AppData\Roaming\Anywhere Software\B4J to find Additional Libraries folder...
Found Additional Libraries folder: C:\Users\Администратор\YandexDisk\B4X Library\JLibraries
Building C:\inetpub\wwwroot\BANano\SimpleDemo\scripts\app.js
Loading library: C:\Users\Администратор\YandexDisk\B4X Library\JLibraries\bananokendoui.xml
java.net.MalformedURLException: unknown protocol: c
    at java.net.URL.<init>(URL.java:600)
    at java.net.URL.<init>(URL.java:490)
    at java.net.URL.<init>(URL.java:439)
    at com.sun.org.apache.xerces.internal.impl.XMLEntityManager.setupCurrentEntity(XMLEntityManager.java:620)
    at com.sun.org.apache.xerces.internal.impl.XMLVersionDetector.determineDocVersion(XMLVersionDetector.java:148)
    at com.sun.org.apache.xerces.internal.parsers.XML11Configuration.parse(XML11Configuration.java:805)
    at com.sun.org.apache.xerces.internal.parsers.XML11Configuration.parse(XML11Configuration.java:770)
    at com.sun.org.apache.xerces.internal.parsers.XMLParser.parse(XMLParser.java:141)
    at com.sun.org.apache.xerces.internal.parsers.AbstractSAXParser.parse(AbstractSAXParser.java:1213)
    at com.sun.org.apache.xerces.internal.jaxp.SAXParserImpl$JAXPSAXParser.parse(SAXParserImpl.java:643)
    at com.sun.org.apache.xerces.internal.jaxp.SAXParserImpl.parse(SAXParserImpl.java:327)
    at javax.xml.parsers.SAXParser.parse(SAXParser.java:274)
    at com.ab.banano.BANano.a(Unknown Source)
    at com.ab.banano.BANano.b(Unknown Source)
    at com.ab.banano.BANano.a(Unknown Source)
    at com.ab.banano.BANano.Build(Unknown Source)
    at b4j.example.main._appstart(main.java:66)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke(Method.java:498)
    at anywheresoftware.b4a.BA.raiseEvent2(BA.java:91)
    at anywheresoftware.b4a.BA.raiseEvent(BA.java:78)
    at b4j.example.main.start(main.java:37)
    at com.sun.javafx.application.LauncherImpl.lambda$launchApplication1$162(LauncherImpl.java:863)
    at com.sun.javafx.application.PlatformImpl.lambda$runAndWait$175(PlatformImpl.java:326)
    at com.sun.javafx.application.PlatformImpl.lambda$null$173(PlatformImpl.java:295)
    at java.security.AccessController.doPrivileged(Native Method)
    at com.sun.javafx.application.PlatformImpl.lambda$runLater$174(PlatformImpl.java:294)
    at com.sun.glass.ui.InvokeLaterDispatcher$Future.run(InvokeLaterDispatcher.java:95)
    at com.sun.glass.ui.win.WinApplication._runLoop(Native Method)
    at com.sun.glass.ui.win.WinApplication.lambda$null$148(WinApplication.java:191)
    at java.lang.Thread.run(Thread.java:748)
Library: C:\Users\Администратор\YandexDisk\B4X Library\JLibraries\bananokendoui.xml is not a BANano library!
ERROR 22: [SimpleDemo,simpledemo_ready, around line: 36] bananokendowindow(METHODVAR) is not supported in BANano!
-->  myWindow.Initialize(Me, {10} , {11} )
--> Current index: 1
--> Var :    B4JName: mywindow, JSName: _mywindow ,ISPRIVATE: true,B4JTYPE: bananokendowindow, IsArray: false, InitValue: /* NOT SUPPORTED */
--> Method : ---- METHOD: simpledemo_ready (MODULE: SimpleDemo, ISPRIVATE: false) ----
B4J DECLARE:
   LINE NUMBER: 33
   ORIGINAL LINE: Sub SimpleDemo_Ready()
   CLEANED LINE: sub simpledemo_ready()
   WORDS: sub|simpledemo_ready|(|)|
INTERNAL VARS:
   B4JName: mywindow, JSName: _mywindow ,ISPRIVATE: true,B4JTYPE: bananokendowindow, IsArray: false, InitValue: /* NOT SUPPORTED */
RETURNS:    B4JTYPE: string, IsArray: false, InitValue: ''
------------------------------
ERROR 22: [SimpleDemo,simpledemo_ready, around line: 37] bananokendowindow(METHODVAR) is not supported in BANano!
-->  myWindow.AddToParent( {12} )
--> Current index: 1
--> Var :    B4JName: mywindow, JSName: _mywindow ,ISPRIVATE: true,B4JTYPE: bananokendowindow, IsArray: false, InitValue: /* NOT SUPPORTED */
--> Method : ---- METHOD: simpledemo_ready (MODULE: SimpleDemo, ISPRIVATE: false) ----
B4J DECLARE:
   LINE NUMBER: 33
   ORIGINAL LINE: Sub SimpleDemo_Ready()
   CLEANED LINE: sub simpledemo_ready()
   WORDS: sub|simpledemo_ready|(|)|
INTERNAL VARS:
   B4JName: mywindow, JSName: _mywindow ,ISPRIVATE: true,B4JTYPE: bananokendowindow, IsArray: false, InitValue: /* NOT SUPPORTED */
RETURNS:    B4JTYPE: string, IsArray: false, InitValue: ''
------------------------------
ERROR 22: [SimpleDemo,simpledemo_ready, around line: 38] bananokendowindow(METHODVAR) is not supported in BANano!
-->  myWindow.Title = {13}
--> Current index: 1
--> Var :    B4JName: mywindow, JSName: _mywindow ,ISPRIVATE: true,B4JTYPE: bananokendowindow, IsArray: false, InitValue: /* NOT SUPPORTED */
--> Method : ---- METHOD: simpledemo_ready (MODULE: SimpleDemo, ISPRIVATE: false) ----
B4J DECLARE:
   LINE NUMBER: 33
   ORIGINAL LINE: Sub SimpleDemo_Ready()
   CLEANED LINE: sub simpledemo_ready()
   WORDS: sub|simpledemo_ready|(|)|
INTERNAL VARS:
   B4JName: mywindow, JSName: _mywindow ,ISPRIVATE: true,B4JTYPE: bananokendowindow, IsArray: false, InitValue: /* NOT SUPPORTED */
RETURNS:    B4JTYPE: string, IsArray: false, InitValue: ''
------------------------------
Building C:\inetpub\wwwroot\BANano\SimpleDemo\index.html
 
semar

semar

Active Member
Licensed User
Longtime User
Impressive work !

A question: would be possible to use the kendo library also only in conjunction with ABMaterial ? Or do I need BANano for that ?

Regards,
Sergio
 
Kiffi

Kiffi

Well-Known Member
Licensed User
Longtime User
Tutorial: BANanoKendoDataSource (Part 2) (you can find part 1 of this tutorial here)

We start with again this code:
B4X: 
Dim myDataSource As BANanoKendoDataSource
myDataSource.Initialize(Me, "myDataSource")

myDataSource.Add(CreateMap("name": "Jane Doe", "age": "30"))
myDataSource.Add(CreateMap("name": "John Doe", "age": "33"))
myDataSource.Add(CreateMap("name": "Jill Doe", "age": "55"))
myDataSource.Add(CreateMap("name": "Jock Doe", "age": "99"))

Dim myListbox As BANanoKendoListbox
myListbox.Initialize(Me, "myListBox", "myListBox")
myListbox.AddToParent("body")
myListbox.DataSource = myDataSource
myListbox.Template = "#:name# is #:age# years old"

... to get this Listbox:

Z4lseC3.png


Filtering items:

KendoDataSource can filter data entries according to certain criteria.

For example:

B4X: 
' Return all records whose first name begins with "Jo":
Dim myFilter As Map = CreateMap("field": "name", "operator": "startswith", "value": "Jo")
myDataSource.Filter = myFilter

sroHZCI.png



B4X: 
' Return all records whose age is greater than 50 years:
Dim myFilter As Map = CreateMap("field": "age", "operator": "gt", "value": "50")
myDataSource.Filter = myFilter

M1QzFEG.png


The following values can be entered in operator:
B4X: 
"eq" (equal to)
"neq" (not equal to)
"isnull" (is equal to null)
"isnotnull" (is not equal to null)
"lt" (less than)
"lte" (less than or equal to)
"gt" (greater than)
"gte" (greater than or equal to)
"startswith"
"doesnotstartwith"
"endswith"
"doesnotendwith"
"contains"
"doesnotcontain"
"isempty"
"isnotempty"


You can set several filters as a conjunction (AND):

B4X: 
Dim myFilter As Map
myFilter.Initialize
myFilter.Put("logic", "and")

Dim myFilters As List
myFilters.Add(CreateMap("field": "name", "operator": "startswith", "value": "Jo"))
myFilters.Add(CreateMap("field": "age", "operator": "gt", "value": "50"))

myFilter.Put("filters", myFilters)  

myDataSource.Filter = myFilter

RKn0oQQ.png


... or OR:

B4X: 
Dim myFilter As Map
myFilter.Initialize
myFilter.Put("logic", "or")

Dim myFilters As List
myFilters.Add(CreateMap("field": "name", "operator": "startswith", "value": "Jo"))
myFilters.Add(CreateMap("field": "age", "operator": "gt", "value": "50"))

myFilter.Put("filters", myFilters)  

myDataSource.Filter = myFilter

zXWGSAE.png


That's it for now. See you later at the next tutorial. :)

Greetings ... Peter
 
Kiffi

Kiffi

Well-Known Member
Licensed User
Longtime User
Tutorial: BANanoKendoDataSource (Part 3)

KendoDataSource also has the ability to aggregate data.

Again, we take the Doe family as an example:
B4X: 
Dim myDataSource As BANanoKendoDataSource
myDataSource.Initialize(Me, "myDataSource")

myDataSource.Add(CreateMap("name": "Jane Doe", "age": 30))
myDataSource.Add(CreateMap("name": "John Doe", "age": 33))
myDataSource.Add(CreateMap("name": "Jill Doe", "age": 55))
myDataSource.Add(CreateMap("name": "Jock Doe", "age": 99))
(please note that in contrast to the previous examples, the age is passed as a number here)

Now we want to know who is the youngest (min) and oldest (max) family member and the average age of the family:
B4X: 
Dim myAggregateList As List
myAggregateList.Initialize

myAggregateList.Add(CreateMap("field": "age", "aggregate": "average"))
myAggregateList.Add(CreateMap("field": "age", "aggregate": "min"))
myAggregateList.Add(CreateMap("field": "age", "aggregate": "max"))

myDataSource.Aggregate = myAggregateList

The possible values for the aggregate-field are:
B4X: 
"average" - Only for Number.
"count" - String, Number and Date.
"max" - Number and Date.
"min" - Number and Date.
"sum" - Only for Number.


With the Aggregates-function we get a map whose members we can read out:
B4X: 
Dim ageAggregate As Map = myDataSource.Aggregates("age")

Log(ageAggregate.Get("average")) ' -> 54.25
Log(ageAggregate.Get("min")) ' -> 30
Log(ageAggregate.Get("max")) ' -> 99

That's it for now. See you later at the next tutorial. :)

Greetings ... Peter
 
Last edited:
J

joulongleu

Active Member
Licensed User
Longtime User
Hi:Kiffi:Thank you for your teaching,There is another problem ,TabStrip1_Select(Event As Map),How to take the value?
 
J

joulongleu

Active Member
Licensed User
Longtime User
Hi :)Kiffi:Thank you for your assistance,There is another problem ,ListView1_Change(Event As Map) ,How to take the value?:)
 
Bladimir Carrillo

Bladimir Carrillo

Member
Licensed User
Longtime User
Great job Kiffi, congrats and thank you very much, just now I am testing...

After compilation of demo in B4J I have some errors...

Reading B4J INI in C:\Users\bladi\AppData\Roaming\Anywhere Software\B4J to find Additional Libraries folder...
Found Additional Libraries folder: C:\Program Files (x86)\Anywhere Software\B4J\Additional Libraries
Building d:\Sm_Temp\Kendo\BANanoKendoUI\scripts\app.js
Loading layout comboboxlayout...
Loading layout progressbarlayout...
Loading layout sliderlayout...
Loading layout splitterlayout...
Loading layout tabstriplayout...
Loading layout toolbarlayout...
Loading layout windowlayout...
Loading layout dateandtimelayout...
Loading layout dialoglayout...
Loading layout listboxlayout...
Loading layout listviewlayout...
Loading layout mainlayout...
Loading layout panelbarlayout...
Loading layout predefineddialogslayout...
ERROR 22: [DialogDemo,initialize, around line: 18] kendo(GLOBALMYCLASSVAR) is not supported in BANano!
--> Kendo_OpenConsole
--> Current index: 1
--> Var : B4JName: kendo, JSName: _kendo ,ISPRIVATE: true,B4JTYPE: kendo, IsArray: false, InitValue: /* NOT SUPPORTED */
--> Method : ---- METHOD: initialize (MODULE: DialogDemo, ISPRIVATE: false) ----
B4J DECLARE:
LINE NUMBER: 14
ORIGINAL LINE: Public Sub Initialize
CLEANED LINE: public sub initialize
WORDS: public|sub|initialize|
INTERNAL VARS:
RETURNS: B4JTYPE: string, IsArray: false, InitValue: ''
------------------------------
ERROR 22: [DialogDemo,initialize, around line: 29] bananokendodialog(GLOBALMYCLASSVAR) is not supported in BANano!
--> Dialog1.Actions = Actions
--> Current index: 1
--> Var : B4JName: dialog1, JSName: _dialog1 ,ISPRIVATE: true,B4JTYPE: bananokendodialog, IsArray: false, InitValue: /* NOT SUPPORTED */
--> Method : ---- METHOD: initialize (MODULE: DialogDemo, ISPRIVATE: false) ----
B4J DECLARE:
LINE NUMBER: 14
ORIGINAL LINE: Public Sub Initialize
CLEANED LINE: public sub initialize
WORDS: public|sub|initialize|
INTERNAL VARS:
B4JName: actions, JSName: _actions ,ISPRIVATE: true,B4JTYPE: list, IsArray: false, InitValue: []
RETURNS: B4JTYPE: string, IsArray: false, InitValue: ''
------------------------------
ERROR 22: [DialogDemo,initialize, around line: 31] bananokendodialog(GLOBALMYCLASSVAR) is not supported in BANano!
--> Dialog1.Content = {14}
--> Current index: 1
--> Var : B4JName: dialog1, JSName: _dialog1 ,ISPRIVATE: true,B4JTYPE: bananokendodialog, IsArray: false, InitValue: /* NOT SUPPORTED */
--> Method : ---- METHOD: initialize (MODULE: DialogDemo, ISPRIVATE: false) ----
B4J DECLARE:
LINE NUMBER: 14
ORIGINAL LINE: Public Sub Initialize
CLEANED LINE: public sub initialize
WORDS: public|sub|initialize|
INTERNAL VARS:
B4JName: actions, JSName: _actions ,ISPRIVATE: true,B4JTYPE: list, IsArray: false, InitValue: []
RETURNS: B4JTYPE: string, IsArray: false, InitValue: ''
------------------------------
ERROR 22: [DialogDemo,btnopendialog_click, around line: 37] bananokendodialog(GLOBALMYCLASSVAR) is not supported in BANano!
--> Dialog1.Open
--> Current index: 1
--> Var : B4JName: dialog1, JSName: _dialog1 ,ISPRIVATE: true,B4JTYPE: bananokendodialog, IsArray: false, InitValue: /* NOT SUPPORTED */
--> Method : ---- METHOD: btnopendialog_click (MODULE: DialogDemo, ISPRIVATE: false) ----
B4J DECLARE:
LINE NUMBER: 35
ORIGINAL LINE: Sub btnOpenDialog_Click(Event As Map)
CLEANED LINE: sub btnopendialog_click(event as map)
WORDS: sub|btnopendialog_click|(|event|as|map|)|
INTERNAL VARS:
B4JName: event, JSName: _event ,ISPRIVATE: true,B4JTYPE: map, IsArray: false, InitValue: {}
RETURNS: B4JTYPE: string, IsArray: false, InitValue: ''
------------------------------
ERROR 22: [DialogDemo,dialogactionok, around line: 43] bananokendonotification(GLOBALMYCLASSVAR) is not supported in BANano!
--> Notification1.ShowInfo( {15} )
--> Current index: 1
--> Var : B4JName: notification1, JSName: _notification1 ,ISPRIVATE: true,B4JTYPE: bananokendonotification, IsArray: false, InitValue: /* NOT SUPPORTED */
--> Method : ---- METHOD: dialogactionok (MODULE: DialogDemo, ISPRIVATE: false) ----
B4J DECLARE:
LINE NUMBER: 41
ORIGINAL LINE: Sub DialogActionOK(Event As Map)
CLEANED LINE: sub dialogactionok(event as map)
WORDS: sub|dialogactionok|(|event|as|map|)|
INTERNAL VARS:
B4JName: event, JSName: _event ,ISPRIVATE: true,B4JTYPE: map, IsArray: false, InitValue: {}
RETURNS: B4JTYPE: string, IsArray: false, InitValue: ''
------------------------------
ERROR 22: [DialogDemo,dialogactionok, around line: 45] kendo(GLOBALMYCLASSVAR) is not supported in BANano!
--> Kendo.ConsoleLog( {16} )
--> Current index: 1
--> Var : B4JName: kendo, JSName: _kendo ,ISPRIVATE: true,B4JTYPE: kendo, IsArray: false, InitValue: /* NOT SUPPORTED */
--> Method : ---- METHOD: dialogactionok (MODULE: DialogDemo, ISPRIVATE: false) ----
B4J DECLARE:
LINE NUMBER: 41
ORIGINAL LINE: Sub DialogActionOK(Event As Map)
CLEANED LINE: sub dialogactionok(event as map)
WORDS: sub|dialogactionok|(|event|as|map|)|
INTERNAL VARS:
B4JName: event, JSName: _event ,ISPRIVATE: true,B4JTYPE: map, IsArray: false, InitValue: {}
RETURNS: B4JTYPE: string, IsArray: false, InitValue: ''
------------------------------
ERROR 22: [DialogDemo,dialogactioncancel, around line: 51] bananokendonotification(GLOBALMYCLASSVAR) is not supported in BANano!
--> Notification1.ShowInfo( {17} )
--> Current index: 1
--> Var : B4JName: notification1, JSName: _notification1 ,ISPRIVATE: true,B4JTYPE: bananokendonotification, IsArray: false, InitValue: /* NOT SUPPORTED */
--> Method : ---- METHOD: dialogactioncancel (MODULE: DialogDemo, ISPRIVATE: false) ----
B4J DECLARE:
LINE NUMBER: 49
ORIGINAL LINE: Sub DialogActionCancel(Event As Map)
CLEANED LINE: sub dialogactioncancel(event as map)
WORDS: sub|dialogactioncancel|(|event|as|map|)|
INTERNAL VARS:
B4JName: event, JSName: _event ,ISPRIVATE: true,B4JTYPE: map, IsArray: false, InitValue: {}
RETURNS: B4JTYPE: string, IsArray: false, InitValue: ''
------------------------------
ERROR 22: [DialogDemo,dialogactioncancel, around line: 53] kendo(GLOBALMYCLASSVAR) is not supported in BANano!
--> Kendo.ConsoleLog( {18} )
--> Current index: 1
--> Var : B4JName: kendo, JSName: _kendo ,ISPRIVATE: true,B4JTYPE: kendo, IsArray: false, InitValue: /* NOT SUPPORTED */
--> Method : ---- METHOD: dialogactioncancel (MODULE: DialogDemo, ISPRIVATE: false) ----
B4J DECLARE:
LINE NUMBER: 49
ORIGINAL LINE: Sub DialogActionCancel(Event As Map)
CLEANED LINE: sub dialogactioncancel(event as map)
WORDS: sub|dialogactioncancel|(|event|as|map|)|
INTERNAL VARS:
B4JName: event, JSName: _event ,ISPRIVATE: true,B4JTYPE: map, IsArray: false, InitValue: {}
RETURNS: B4JTYPE: string, IsArray: false, InitValue: ''
------------------------------
ERROR 22: [DialogDemo,dialogactionnoclose, around line: 59] bananokendonotification(GLOBALMYCLASSVAR) is not supported in BANano!
--> Notification1.ShowInfo( {19} )
--> Current index: 1
Copying file from Files to WebApp assets: wallpaper.jpg
Copying file from Files to WebApp assets: countries.json
Building d:\Sm_Temp\Kendo\BANanoKendoUI\index.html
Copying file from Files to WebApp assets: wallpaper.jpg
Copying file from Files to WebApp assets: countries.json
Building d:\Sm_Temp\Kendo\BANanoKendoUI\index.html
Copying file from Files to WebApp assets: wallpaper.jpg
Copying file from Files to WebApp assets: countries.json
Building d:\Sm_Temp\Kendo\BANanoKendoUI\index.html
Copying file from Files to WebApp assets: wallpaper.jpg
Copying file from Files to WebApp assets: countries.json
Building d:\Sm_Temp\Kendo\BANanoKendoUI\index.html
Click to expand...

Some idea ?
 
Bladimir Carrillo

Bladimir Carrillo

Member
Licensed User
Longtime User
Thanks @Kiffi Problem solved moving librarys to Additional Librarys folder.

Now, I have a question...
I was added two TextFields and two Buttons to WindowLayot (on BABanoKendo demo) to simulate a Login and Register new users on a MySQL database (based on this sample https://www.b4x.com/android/forum/threads/banano-mysql-crud-with-php-part-1.104622/).
How I can get the TextField values (name and password) and send to my database (making a call to php process) when I click the button ?

Thanks a lot, regards
 
You must log in or register to reply here.

Similar Threads

Mashiane
Mashy Teaches WebApp/Website Development with BANanoVuetifyAD3 - The New Series
7 8 9
Replies
163
Views
50K
Mashiane
Mashiane
Mashiane
  • Article
Share My Creation [BANanoWebix] An OpenSource Webix UX Wrapper for BANano
2 3
Replies
58
Views
20K
Mashiane
Mashiane
Kiffi
  • Article
B4J Library [BANano] Leaflet-Wrapper
Replies
6
Views
5K
francisco duran
F
alwaysbusy
  • Sticky
  • Article
B4J Library [Web][BANano] Website/App/PWA library with Abstract Designer support
6 7 8
Replies
154
Views
104K
tango
tango
Erel
  • Article
B4A Library [B4X] [XUI] Cross platform & native UI library
2
Replies
34
Views
55K
MarkusR
MarkusR
Top