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

2014-04-30_230203m1kgp.png


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)
 

Attachments

Last edited:
Click to expand...
Very nice.

You should return Futures from all the properties.
Otherwise you don't allow the developer to write optimized code.

This simple line:
Code: 
If txtUsername.Text = "" OR txtPassword.Text = "" Then
Can take 1 second or more to complete on a real external server because it creates two server -> client -> server round trips.
Getting the values of more properties will make it even worse. By using Future you can do everything in a single round trip.
See the Network Latency section: http://www.b4x.com/android/forum/threads/webapp-hello-world-web-app.39808/#content
 
Hello Erel,

thanks for this useful advice!

If i understand you correctly, i have to change my code the following way:
Code: 
'Gets or sets the Text
Sub GetText() As Future
[...]
End Sub
Sub SetText(Text As String)
[...]
End Sub

But then i'm losing the getter/setter - functionality (because of the different variable-types)
and i cannot write foo.Text = "123" or If foo.Text = ... anymore. I'm right?

So i have to change it to:

foo.SetText("123") and If foo.GetText.Value = ...

?

Greetings ... Peter
 
That is correct. As the types are different you cannot use properties here.

foo.SetText("123") and If foo.GetText.Value = ...
Click to expand...
Not exactly. You need to first get all the required values and only then call Future.Value.

For example, instead of:
Code: 
If txtUsername.Text = "" OR txtPassword.Text = "" Then

You should write:
Code: 
Dim userF = txtUsername, passF = txtPassword.Text As Future
If userF.Value = "" Or passF.Value = "" Then ...
This way you get the two values in a single round trip.
 
Thank you thank you

very nice work..simple to use and follow.

With this and the awesomeness that is b4j & b4a. I'm almost 100% ready to walk away from our current RealBasic/Xojo Pro licenses. Which are about up for renewal next month.

Very Excited about what b4j & b4a can offer us.:D
 
Hello flapjacks,

thanks for contributing!
allrighthkbxr.gif


Greetings ... Peter
 
Hello,

a new version is available (see first posting for details)

fxml2waui:

I also wrote a little tool to convert Scene-Builder fxml - files to WebAppUI - Code. So is it a little bit easier to design the Userinterface. The tool is attached to this posting.

Please note:
  • Every control must have an ID
  • The conversion is not pixel-perfect. So better leave a little bit space between the controls
  • At the moment the following controls are supported: AnchorPane, Button, CheckBox, RadioButton, Slider, ProgressBar, Label, TextField, ComboBox, TextArea, ListView and TableView

Greetings ... Peter



fxml2waui.png fxml.png waui.png
 

Attachments

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

2014-04-30_230203m1kgp.png


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.
Click to expand...

How can the font properties (size, color, style, alignment etc) of a Label (UILabel) which is appended into a Layout can be defined ?

Regards

Chris
 
Dear Peter,

I've been trying to set the background color of the Layouts in your example using:

Dim CSS As String = "var pstyle = 'background-color: #F5F6F7; border: 1px solid #dfdfdf; padding: 5px;';"

with no success.

As a matter of fact none of the settings seem to have any effect in the layouts.
What I mean is, if I change the border weight or the color of the border in the above code, there is no change
to the layouts.

What am I missing?

Regards

Chris
 
this one works for me:

Code: 
myLabel.SetCss("background-color", "#F5F6F7")
myLabel.SetCss("border", "1px solid #dfdfdf")
myLabel.SetCss("padding", "5px")

Greetings ... Peter
 
Kiffi said:
this one works for me:

Code: 
myLabel.SetCss("background-color", "#F5F6F7")
myLabel.SetCss("border", "1px solid #dfdfdf")
myLabel.SetCss("padding", "5px")

Greetings ... Peter
Click to expand...


Yes this works for me as well.


What I'll like to do now, is to set the background color of the panels in a Layout.

So I have added the 'background-color: #F5F6F7;' parameter into the CSS string and passed it alone with
rest properties as follows:

Code: 
    Dim xPanels As List
    
    xPanels.Initialize
   
    'Dim CSS As String = "var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';"
    
    Dim CSS As String = "var pstyle = 'background-color: #F5F6F7; border: 1px solid #dfdfdf; padding: 5px;';"
   
    xPanels.Add(CreateMap("type" : "top", "size" : "20%", "resizable": "true", "style" : CSS, "content": "TOP"))
    xPanels.Add(CreateMap("type" : "left", "size" : "30%", "style" : CSS, "content": "LEFT"))
    xPanels.Add(CreateMap("type" : "main", "size" : "50%", "style" : CSS, "content": "MAIN"))

I hope I've explained my self so you understood what I need to do.

Regards Chris
 
Christos Dorotheou said:
What I'll like to do now, is to set the background color of the panels in a Layout.
Click to expand...
oh, sorry, i have overlooked that.

Yes, that's an error in my code. Please change:

Code: 
Dim CSS As String = "var pstyle = 'background-color: #F5F6F7; border: 1px solid #dfdfdf; padding: 5px;';"

to:

Code: 
Dim CSS As String = "background-color: #F5F6F7; border: 1px solid #dfdfdf; padding: 5px;"


Greetings ... Peter
 
Kiffi said:
oh, sorry, i have overlooked that.

Yes, that's an error in my code. Please change:

Code: 
Dim CSS As String = "var pstyle = 'background-color: #F5F6F7; border: 1px solid #dfdfdf; padding: 5px;';"

to:

Code: 
Dim CSS As String = "background-color: #F5F6F7; border: 1px solid #dfdfdf; padding: 5px;"


Greetings ... Peter
Click to expand...

Thanks Peter

It's OK now.

Thanks for the help.

Regards

Chris
 
You must log in or register to reply here.

Similar Threads

eurojam
  • Question Question
B4J Question webapp: Hello world
Replies
2
Views
3K
Erel
Erel
BPak
  • Question Question
B4J Question Use JQuery offline
Replies
2
Views
3K
BPak
BPak
Erel
  • Locked
  • Article Article
B4J Tutorial [WebApp] Web Apps Overview
2 3 4
Replies
66
Views
147K
Erel
Erel
Erel
  • Article Article
B4J Tutorial [WebApp] Hello World Web App
2 3
Replies
40
Views
57K
Erel
Erel
Erel
  • Locked
  • Article Article
B4J Tutorial [Server] Building web servers with B4J
2 3 4
Replies
75
Views
124K
Erel
Erel
Back
Top