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

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

  • WebAppUI.zip
    436.9 KB · Views: 817
Last edited:
Click to expand...
Erel

Erel

B4X founder
Staff member
Licensed User
Longtime User
Very nice.

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

This simple line:
B4X: 
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
 
Kiffi

Kiffi

Well-Known Member
Licensed User
Longtime User
Hello Erel,

thanks for this useful advice!

If i understand you correctly, i have to change my code the following way:
B4X: 
'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
 
Erel

Erel

B4X founder
Staff member
Licensed User
Longtime User
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:
B4X: 
If txtUsername.Text = "" OR txtPassword.Text = "" Then

You should write:
B4X: 
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.
 
F

flapjacks

Member
Licensed User
Longtime User
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
 
F

flapjacks

Member
Licensed User
Longtime User
Kiffi

Your code was so easy to understand I was able to write a UI object for a JQuery progressbar and thus have attached it.
 

Attachments

  • UIProgressbar.bas
    4.2 KB · Views: 406
Kiffi

Kiffi

Well-Known Member
Licensed User
Longtime User
Hello flapjacks,

thanks for contributing!
allrighthkbxr.gif


Greetings ... Peter
 
Kiffi

Kiffi

Well-Known Member
Licensed User
Longtime User
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

  • fxml2waui.zip
    5.3 KB · Views: 456
C

Christos Dorotheou

Member
Licensed User
Longtime User
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:
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

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
 
C

Christos Dorotheou

Member
Licensed User
Longtime User
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
 
Kiffi

Kiffi

Well-Known Member
Licensed User
Longtime User
this one works for me:

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

Greetings ... Peter
 
C

Christos Dorotheou

Member
Licensed User
Longtime User
Kiffi said:
this one works for me:

B4X: 
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:

B4X: 
    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
 
Kiffi

Kiffi

Well-Known Member
Licensed User
Longtime User
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:

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

to:

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


Greetings ... Peter
 
C

Christos Dorotheou

Member
Licensed User
Longtime User
Kiffi said:
oh, sorry, i have overlooked that.

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

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

to:

B4X: 
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

Intelemarketing
  • Question
B4J Question HELLO WORLD WEB APP
Replies
3
Views
887
KMatle
KMatle
eurojam
  • Question
B4J Question webapp: Hello world
Replies
2
Views
1K
Erel
Erel
Erel
  • Locked
  • Article
B4J Tutorial [WebApp] Web Apps Overview
2 3 4
Replies
66
Views
111K
Erel
Erel
Erel
  • Article
B4J Tutorial [WebApp] Hello World Web App
2 3
Replies
40
Views
41K
Erel
Erel
Erel
  • Locked
  • Article
B4J Tutorial [Server] Building web servers with B4J
2 3 4
Replies
75
Views
90K
Erel
Erel
Top