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

I am trying to build a Web Application using WebSockets and jquery with Kiffi's UI Classes.

I need to know, how I can accomplish the 'Back' functionality of the browser in use (ex. history.go(-1) ) from within the _Click Event of a UIButton.

Could it be implemented using a javascript string and execute the script with jScriptEngine as follows?

Private Sub myButton_Click(Params As Map)

Dim jse as jScriptEngine

jse.evalString("window.history.go(-1);")

End Sub

I have achieved to implement the Back functionality using the following code, but the dynamically
created HTML Button does not match (Visually) with the rest of UIButtons.

B4X: 
Sub Class_Globals

    Private WS As WebSocket
    Private myBut As UIHtmlElement
End Sub

Private Sub WebSocket_Connected (WebSocket1 As WebSocket)
   
WS = WebSocket1


myBut.Initialize(WS, "myBut", "button")
myBut.Resize(50,80,-1,-1)
myBut.SetCss("border","0px transparent")
myBut.SetCss("background-color","transparent")

myBut.AppendHtml("<button class='button' style='-webkit-border-radius:13px; height:60px; width:100px' onClick='history.go(-1);return true;' id='mybut'>Back</button>")

End Sub

Any suggestions are welcome.

Regards

Chris
 
C

Christos Dorotheou

Member
Licensed User
Longtime User
Christos Dorotheou said:
I am trying to build a Web Application using WebSockets and jquery with Kiffi's UI Classes.

I need to know, how I can accomplish the 'Back' functionality of the browser in use (ex. history.go(-1) ) from within the _Click Event of a UIButton.

Could it be implemented using a javascript string and execute the script with jScriptEngine as follows?

Private Sub myButton_Click(Params As Map)

Dim jse as jScriptEngine

jse.evalString("window.history.go(-1);")

End Sub

I have achieved to implement the Back functionality using the following code, but the dynamically
created HTML Button does not match (Visually) with the rest of UIButtons.

B4X: 
Sub Class_Globals

    Private WS As WebSocket
    Private myBut As UIHtmlElement
End Sub

Private Sub WebSocket_Connected (WebSocket1 As WebSocket)
 
WS = WebSocket1


myBut.Initialize(WS, "myBut", "button")
myBut.Resize(50,80,-1,-1)
myBut.SetCss("border","0px transparent")
myBut.SetCss("background-color","transparent")

myBut.AppendHtml("<button class='button' style='-webkit-border-radius:13px; height:60px; width:100px' onClick='history.go(-1);return true;' id='mybut'>Back</button>")

End Sub

Any suggestions are welcome.

Regards

Chris
Click to expand...

I have found a solution to my question, using the WebSocket's Eval Method as follows:

WS.Eval("window.history.go(-1)", Array As Object(""))

I've tested it and it works fine.

There is another approach if there is a need to go directly to the Main Page of the application
using this code:

Dim Url As String

Url = "/index.html"
WS.Eval("window.location = arguments[0]", Array As Object(Url))

Regards

Chris
 
Kiffi

Kiffi

Well-Known Member
Licensed User
Longtime User
something like this?
B4X: 
Private Sub WebSocket_Connected(WebSocket1 As WebSocket)

   WS = WebSocket1
 
   myBut.Initialize(WS, "myBut", "button")
   myBut.Resize(50, 80, 100, 60)
   myBut.SetCss("background-color","transparent")
   myBut.SetCss("-webkit-border-radius","13px")
   WS.RunFunction("b4j_addEvent", Array As Object("#mybut", "click", "mybut_click", True))

End Sub

Private Sub myBut_Click(Params As Map)
    WS.Eval("window.history.go(-1);", Null)
End Sub

Greetings ... Peter
 
C

Christos Dorotheou

Member
Licensed User
Longtime User
Kiffi said:
something like this?
B4X: 
Private Sub WebSocket_Connected(WebSocket1 As WebSocket)

   WS = WebSocket1

   myBut.Initialize(WS, "myBut", "button")
   myBut.Resize(50, 80, 100, 60)
   myBut.SetCss("background-color","transparent")
   myBut.SetCss("-webkit-border-radius","13px")
   WS.RunFunction("b4j_addEvent", Array As Object("#mybut", "click", "mybut_click", True))

End Sub

Private Sub myBut_Click(Params As Map)
    WS.Eval("window.history.go(-1);", Null)
End Sub

Greetings ... Peter
Click to expand...

Thanks Peter

I appreciate your fast response every time I need help.

Chris
 
Kiffi

Kiffi

Well-Known Member
Licensed User
Longtime User
Christos Dorotheou said:
I appreciate your fast response every time I need help.
Click to expand...
you're welcome! :)

BTW: a new Version is online. See the first posting for details.

instead of...
B4X: 
  myBut.Initialize(WS, "myBut", "button")
[...]
WS.RunFunction("b4j_addEvent", Array As Object("#mybut", "click", "mybut_click", True))

... now you can write:
B4X: 
  myBut.Initialize(WS, "myBut", "button")
[...]
myBut.AddEvent("click", True)

Greetings ... Peter
 
C

Christos Dorotheou

Member
Licensed User
Longtime User
Kiffi said:
you're welcome! :)

BTW: a new Version is online. See the first posting for details.

instead of...
B4X: 
  myBut.Initialize(WS, "myBut", "button")
[...]
WS.RunFunction("b4j_addEvent", Array As Object("#mybut", "click", "mybut_click", True))

... now you can write:
B4X: 
  myBut.Initialize(WS, "myBut", "button")
[...]
myBut.AddEvent("click", True)

Greetings ... Peter
Click to expand...


Dear Peter Greetings

I have run into a problem with CheckBoxes in a WebApp I am writing at work, in which I heavily use
CheckBoxes, which I need to Check/UnCheck under code if certain conditions exist.

The problem was that when I was trying to set via code myChkBox1.SetChecked(True) or myChkBox1.SetChecked(False) the CheckBox wouldn't change its state to Checked or Unchecked accordingly.

So I've Googled the Issue and with the little knowledge I have in Java, I found out that there is an issue
with jquery and Chrome as far as Checkboxes are concerned.

Since I've progressed enough with my WebApp project I was frustrated to find out that this problem
could have brought me down to a dead end.

Thankfully I have solved the problem by changing the code in UICheckBox as follows:

B4X: 
Sub SetChecked(Checked As Boolean)
'    If Checked = True Then
'        mWS.Eval("$(arguments[0]).find('input').attr('checked', 'checked')", Array As Object("#" & mID))
'    Else
'        mWS.Eval("$(arguments[0]).find('input').attr('checked', '')", Array As Object("#" & mID))
'    End If

    If Checked = True Then
        mWS.Eval("$(arguments[0]).find('input').prop('checked', true)", Array As Object("#" & mID))
    Else
        mWS.Eval("$(arguments[0]).find('input').prop('checked', false)", Array As Object("#" & mID))
    End If

End Sub

I have also added Enable/Disable functionality to the CheckBox by adding the following routines into UICheckBox:

B4X: 
Sub SetDisabled(Disabled As Boolean)
    mWS.Eval("$(arguments[0]).find(':checkbox').prop('disabled', arguments[1])", Array As Object("#" & mID, Disabled))
End Sub

Sub Enable()
    SetDisabled(False)
End Sub

Sub Disable()
    SetDisabled(True)
End Sub

Examples

Checkbox1.SetDisabled(True) ' Disables the CheckBox
Checkbox1.SetDisabled(False) ' Enables the CheckBox

or

Checkbox1.Disable ' Disables the CheckBox
Checkbox1.Enable ' Enables the CheckBox


Regards

Chris
 
L

le_toubib

Active Member
Licensed User
Longtime User
hi
sorry for the very newbie question
i already run your webapp from the IDE and it s working perfectly beautifull.
but i m trying to run ur webapp from the file : objects/www/index.html
but it s only showing a blank page on the browser ,
also i tried to upload the whole www folder on a domain :
www.blablabla.com/newfolder/index.html
but still a blank page ; can u tell me how to access your webapp online
 
Last edited:
D

D_Child123

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.

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

Kiffi, thanks man.

Very impressive. Not only because of the functionality; that's great, thanks. But even the code itself, is clean & clear, very easy to understand.

Thank you, sir.
 
TomDuncan

TomDuncan

Active Member
Licensed User
Longtime User
Can I have combo boxes within a grid?
And can I have Images in the Grid as well?

Great Library by the way. Using it in my new Web Page Designer
 
Last edited:
TomDuncan

TomDuncan

Active Member
Licensed User
Longtime User
Also With the TinyMce UI it seems to do funny things.
The Width seems to be a few pixels wider than the browser width.
Also I want to put the TinyMce on a Layout.
Have tested this..
B4X: 
    y = y + 310
    TinyMCE.Initialize(ws, "TinyMCE")
    TinyMCE.Resize(10, 10, 300, 400) ' (10, y , wdth, 300)
    Layout.Append(TinyMCE.GetID, "main")
But all I get is a full width TinyMCE behind the layout.

Tom
 
TomDuncan

TomDuncan

Active Member
Licensed User
Longtime User
Using the grid I cannot get any events on the selected row.
I need to fire an event when a row is selected.
Tom
 
TomDuncan

TomDuncan

Active Member
Licensed User
Longtime User
I have been chatting to Rob about the way he developed his application. However, I don't want to learn yet another language.
So will keep going with this idea. I like what it does and hope it will do what I want.
Tom
 
TomDuncan

TomDuncan

Active Member
Licensed User
Longtime User
I like the ui style that this library gives. Just at the moment their are a few things posted above that I am having problems with.
Tom
 
You must log in or register to reply here.

Similar Threads

Intelemarketing
  • Question
B4J Question HELLO WORLD WEB APP
Replies
3
Views
892
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