html interface

[nad]

This is more of a wish list.
Will spider ever consider using html.
I write a lot of business applications. Most only have 300 to 1000 web users.
Counting pixels for location and size for layouts is time consuming at best. Especially when you make additions and changes that change the whole design layout. Happens more often than you want.
Using html and <table> and <div> , the layout floats things and makes the best fit without having to figure out where all the positions of data fit.
All that would be needed is the ability to take care of triggers like onClick, onMouseOver, onChange, and other to have pointers to procedutes.
You could then concentrate on system design without having to spend time laying out every gadget.

Thanks for your consideration...

[plouf]

dunno most people like modern UI's like the new implement Mobile UI (which is the Onsen UI)

however its possible to "print" your own html on many spider fucntions like TextGadget,
and if you have basic javascript knowledge you interact with Spiders functions

here is super simple table ,handmade html table
that interact with a spiderbasic procedure

Code: Select all

OpenWindow(0, 0, 0, 270, 190, "TextGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
TextGadget(0, 10,  10, 250, 20, "<table border=1><tr><td onclick='f_testhi()'> clickme </td></tr><tr><td>2</td></tr></table>")

Procedure testhi()
  MessageRequester("hi")
EndProcedure

[RBart]

Could it be that Onsen UI is more focused towards phones? And mainly to use in portret mode?

On the other hand the idea to work with windows in a browser. I can't see why you would want this for a complete app in a browser? I find it facinating but to build an complete application like that, I don't see many advantages over PureBasic. Maybe for distribution?

If you use the webapp (with windows) in a browser on a tablet. Only firefox will move the windows. If you turn from portret to landscape the responsiveness doesn't work very well. It enlages the window and every thing is messed up.

I kind of miss the advantages of "simple" html5 and css3. Where you are less or more sure the responsive features will be ok.

[plouf]

Its about the app

Personally i like the idea of windows like ui
It has exact same feeling like purebasic
And also users expect that

As said depend on app
For simple app. OnsenUI is better and also mobile suited
Like simple control smart house etc

For a logistic product/ warehouse track, database front end in general used in offices and working enviroment
Windows interface is better suited and more flexible

So i like both and ability to have both is a tremendous advantage imho

At any case if you want a simple fully custom control html/css inteface you can do it easy as ghe example i post above

[RBart]

There's a difference between windows in an OS and the approach with Spiderbasic in a browser.
First of not all browsers react in the same way.
On a tablet you will get in trouble if you want to use moveable windows. If not I don't see the point.

The Textgadget will be limited to the window. I gess no responsive design is possible there?

I am looking at a non moveable window now, taking the size of the browser, with a ScrollAreaGadget and then let the calculating of the size and positions be done by the procedures.
This comes (kind of) close to responsive design.

Here's what I have so far:

Code: Select all

ExamineDesktops()
;MessageRequester("Current resolution = "+ DesktopWidth(0) + "x" +  DesktopHeight(0) + "x" + DesktopDepth(0))
Global  ProcTop.i=(DesktopHeight(0)/100) : Global ProcLeft.i=(DesktopWidth(0)/100) ; allows to multiply with the disired procentage
If OpenWindow(0,0,0,DesktopWidth(0),DesktopHeight(0),"",#PB_Window_BorderLess| #PB_Window_NoMove| #PB_Window_Background)   
  ScrollAreaGadget(100, 0, 0, DesktopWidth(0),DesktopHeight(0), DesktopWidth(0)+5000, DesktopHeight(0)+5000) ;Make the window scrollable
   ButtonGadget  (0,(DesktopWidth(0)/2)-100 ,ProcTop*80,200,50,"Knop") ;in the middle and 80% from the top
   ButtonGadget  (1, 10, 10, 230, 30,"Button 1") ; fixed
   TextGadget    (2,ProcTop*40,ProcTop*40, 230, 20,"This is the content of a ScrollAreaGadget!",#PB_Text_Right)
  CloseGadgetList()
EndIf   

;Resize "browser"
Procedure ResizeEvents() 
  ; ResizeWindow(0,0,0,DesktopWidth(0),DesktopHeight(0)); If only 1 window use #PB_Window_Background
  ProcLeft=(DesktopWidth(0)/100) 
  ProcTop=(DesktopHeight(0)/100)
  ResizeGadget(100,0,0,DesktopWidth(0),DesktopHeight(0))
  ResizeGadget(0,(ProcLeft*35),ProcTop*80,200,50) ; set size and position of "knop"
  ResizeGadget(2,(ProcLeft*35),ProcTop*40, 230, 20)
EndProcedure  
AddTimer(0, 50)  
BindEvent(#PB_Event_Timer, @ResizeEvents())

[RBart]

At any case if you want a simple fully custom control html/css inteface you can do it easy as ghe example i post above

How would you add css to this? Only inline css?

this for example gives me an error about "checkbox" is not a valid operator... how to handle the extra ""?

Code: Select all

TextGadget(3, 10,  50, 250, 20, "<input type="checkbox">")

[plouf]

you can embed the whole CSS in html anywhere
here is the above example with css

Code: Select all

strc$ = "<style> redbox {border:red solid 4px;}</style>"   ; here we have the "CSS"
strc$ + "<table border=1><tr><td onclick='f_testhi()' > <redbox>clickme</redbox> </td></tr><tr><td>2</td></tr></table>" ; here we have the "html"

OpenWindow(0, 0, 0, 270, 190, "TextGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
TextGadget(0, 10,  10, 250, 20,strc$)

Procedure testhi()
  MessageRequester("hi")
EndProcedure

note that the string can be dynamic created/loaded external /modified by SpiderBAsic... so you imagination creates the limits

[Paul]

this for example gives me an error about "checkbox" is not a valid operator... how to handle the extra ""?

Code: Select all

TextGadget(3, 10,  50, 250, 20, "<input type="checkbox">")

Because your syntax it incorrect with the quotes...

Code: Select all

TextGadget(3, 10,  50, 250, 20, "<input type='checkbox'>")

[RBart]

Success!
Just added a slider checkbox. This opens possibilities.

Thanks again Plouf & Paul