B4J Library [WebApp] Generate (jQuery-)UI on demand

Kiffi · Apr 30, 2014

Hello.

here is my attempt for a couple of classes to generate an (jQuery-)UI out of a WebApp.

With this classes you are able to open dialogs and place controls (buttons, textinputs, labels and more).

Here is a little demo: http://realsource.de:51234/

Example:

B4X:

'WebSocket class

Sub Class_Globals

    Private WS As WebSocket

    Dim dlgHelloWorld As UIDialog
    Dim cmdHelloWorld As UIButton

End Sub

Private Sub WebSocket_Connected(WebSocket1 As WebSocket)

    WS = WebSocket1

    dlgHelloWorld.Initialize(WS, "dlgHelloWorld", True) ' Create a modal dialog
    dlgHelloWorld.Resize(-1, -1, 800, 500)
    dlgHelloWorld.SetTitle("HelloWorld")
    dlgHelloWorld.Open

    cmdHelloWorld.Initialize(WS, "cmdHelloWorld")
    cmdHelloWorld.SetText("HelloWorld")
    cmdHelloWorld.appendTo("dlgHelloWorld")

End Sub

Private Sub cmdHelloWorld_Click(Params As Map)
    WS.Alert("Hello World!")
End Sub

Please take a look into the Websocket-Files (those who begin with ws*) for further explanations

I'm sure, that the code can be optimized. Therefore i will be glad about constructive criticism.

Greetings ... Peter

Update 2014-05-20: Add Slider, Progressbar (thanks to flapjacks), BlockUI. Minor improvements.

Update 2014-06-20: Add Google Chart and some Client-Events (MouseMove and Resize). Minor improvements.

Update 2014-06-21: Fixed UICheckBox (Thanks to Christos Dorotheou)

derez · Aug 11, 2015

I have succeeded in building a server, combining WS and handlers.
Thank you for the examples Kiffi !

tuhatinhvn · Aug 12, 2015

can you give a simple example (ex: make website with a button and a textbox and a label?? for example??)

tuhatinhvn · Aug 12, 2015

I think we will make new app name as B4H (Html) for make website

TomDuncan · Aug 24, 2015

Has anyone managed to set a textarea with TinyMCE?

I have tried this but it did not work.

B4X:

    TinyM.Initialize(ws,"TinyM")
    TinyM.Resize(x+70, y, 360, 180)


    edtBlog.Initialize(ws,"edtBlog")
    edtBlog.Resize(x+70, y, 360, 180)
    Accordion.AppendElementToSection("edtBlog", 2)
    TinyM.SetAttr("textarea","edtBlog")

Also tested TinyM.SetCSS("selector","edtBlog")
did not work.

Tom

little3399 · Aug 28, 2015

HI, Kiffi
I runing your project and demo , but show nothing at the browser ? here was my program , could you help me to see what happend in it ? tks

my JDK version was JDK8 64bit ...

TomDuncan · Aug 29, 2015

Hi Little3399,
Easy fix.
in your wsStart.bas after the myDialog.Resize just add

B4X:

    Log("connected")
   
    myDialog.Initialize(ws, "myDialog", True)
    myDialog.Resize(-1, -1, 600, 519)
    myDialog.Open

The Open will open the Dialog.

Tom

micro · Aug 29, 2015

Hi Kiffi
the image it not loaded and I think that the code is correct:

B4X:

Private Sub WebSocket_Connected (WebSocket1 As WebSocket)

    WS = WebSocket1
   
    Dialogl1.Initialize(WS, "Dialogl1", False)
    Dialogl1.Resize(-1, -1, 1000, 600)
    lab1.Initialize(WS, "lab1")
    lab1.SetTop(2)
    lab1.SetLeft(2)
    lab1.SetText("Prova")
    lab1.AppendTo("Dialogl1")
    Img1.Initialize(WS, "post1_1")
    Img1.AddEvent("load", True)
    Img1.Resize(2, 16, 22, 22)
    Img1.SetImage("C:/Users/Me/Desktop/ProvaWebServ/Files/conn.png")
    Img1.AppendTo("Dialogl1")
   
    WS.Flush

    Dialogl1.Open
   
End Sub

The image is size 22x22 but not displayed, only the box.
See image attached
Thanks

TomDuncan · Aug 29, 2015

Have not tested that but you will need to have the image in the server directory then just name it Conn.png
Tom

javiers · Aug 31, 2015

Hello, first congratulations for the project.

In the example of GoogleMap, how could add a marker with a custom icon?

Thanks in advance...

Another question, in the example of UIw2uiGrid, how can I get the value of the cell or row and execute instructions with those values by clicking on the cell or row?

Thanks again for your help.

micro · Sep 7, 2015

HI, Kiffi
which is the correct syntax for Uilistbox event change?

B4X:

listboxUi.AddEvent("change", True)
...............
Sub listboxUi_Change
...............
End Sub

but it's never raised

Ok, work

B4X:

Sub listboxUi_Change(Params As Map)
   
End Sub

only that it's raised if clicked on the list, while i thought that it's raised with AddItem

billyrudi · Sep 8, 2015

hi
i have already asked this...
there is someone that is able to rewrite this good job for make jquery ui mobile apps?
tanks Paolo

korshkov · Sep 29, 2015

Hi to all!
Please help me for resolve situation with get screen dimension for design elements dynamically.
I see all WebApp examples and all UI elements have strong coordinate for placement.
Is this possible?
Thanks!

billyrudi · Jun 17, 2016

hi, there are updates about this work?

B4J Library [WebApp] Generate (jQuery-)UI on demand

Attachments

derez

Expert

tuhatinhvn

Active Member

tuhatinhvn

Active Member

TomDuncan

Active Member

little3399

Active Member

Attachments

TomDuncan

Active Member

micro

Well-Known Member

Attachments

TomDuncan

Active Member

javiers

Active Member

micro

Well-Known Member

billyrudi

Active Member

korshkov

Member

billyrudi

Active Member

B4J Library [WebApp] Generate (jQuery-)UI on demand

Attachments

Expert

Active Member

Active Member

Active Member

Active Member

Attachments

Active Member

Well-Known Member

Attachments

Active Member

Active Member

Well-Known Member

Active Member

Member

Active Member

Privacy & Transparency

Privacy & Transparency