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

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:

'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]

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

 

[tuhatinhvn]

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

 

[tuhatinhvn]

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

 

[TomDuncan]

Has anyone managed to set a textarea with TinyMCE?

I have tried this but it did not work.

    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]

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]

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

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

The Open will open the Dialog.

Tom

 

[micro]

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

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]

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

 

[javiers]

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]

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

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

but it's never raised

Ok, work

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]

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]

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]

hi, there are updates about this work?