xBase for the web Now version 4.1!

Home Reference

Building the User Interface Open on a page of its own

DBFree offers various functions for building attractive user interfaces.
All functions are tailored on Twitter Bootstrap 3.3.5, that is they return code compatible with this famous HTML framework.
You can use the functions provided by DBX-3 and DBX-4 libraries, write the code manually or a combination of both.

Notice that the resulting page sent to browser contains always and only pure CSS code (check yourself by exposing the HTML underlying this page).


Here below you may see in action, directly in the page, a collection of most used UI functions like button(),getStr(),menu(): DBFree Guide
Using library FREE_2017-07-27-063

1 - Web Forms

formStart("/nextpage.msp", "myForm1", cTarget, cComment)
getStr("EF_NAME","Your name?",1,"John")
getDate("EF_DATE","Date of Arrival?",0,date())
formSubmit()
formEnd()
formStart("/nextpage.msp", "myForm1", cTarget, cComment)
Current mileage of your car?
getNum("EF_KM","Start mileage",0,10000)
formSubmit("Ok","Discard")
formEnd()

2 - Menus

menuBar() menuTitle("Your Menu","logo.gif") menu() menuitem("/","Home") submenu("Submenu here") submenu(0) menu(0) menuBar(0)

3 - Buttons

button( cLink, cLabel, nType, cTarget, cStyle, cImage)

Type=1 Type=2 Type=3 Type=4 Type=5
Type=6 Type=7 Type=8 Type=9 Type=10
Type=11 Type=12 Type=13 Type=14 Type=15
Type=16 Type=17 Type=18 Type=19 Type=20

4 - Links

hyperlink( cUrl, cDescr, cTarget, cStyle, cClass)

This is a link

5 - Radio buttons

radioButton( cName,cDescr,cVal,nVal,cId)

6 - Panels

well("This is a well!")
This is a well!

alarm("This is a warning!")

This is a warning!


box("This is a message")
This is a message

7 - Panels with images (Posters)

poster("/img/demo.jpg",500) <h1>Hello<br>World</h1> poster(0)

Hello
World

8 - Panels with images (Carousels)

carousel("\ads\","*.jpg",300)

9 - Calendars

calendar()

July 2017

SuMoThWeThFrSa
......1
2345678
9101112131415
16171819202122
23242526272829
3031.....
calendarMonth()





10 - Login forms

loginButton() logoutButton()

11 - Page formatting

shelf() Start the shelf
drawer(4)
This is a drawer 4 columns wide
off()
drawer(8)
This is a drawer 8 columns wide
off()
shelf(0) End of shelf

12 - Standard page formatting

shelf() Start the shelf
drawer(3)
This is a drawer 3 columns wide
drawer(0)
drawer(3)
This is a drawer 3 columns wide
drawer(0)
drawer(3)
This is a drawer 3 columns wide
drawer(0)
drawer(3)
This is a drawer 3 columns wide
drawer(0)()
shelf(0) End of shelf

13 - Pop Up pseudo-windows (click on buttons to open the popups)

btnPopUp(cLink,cMsg,nType)

nType=1 nType=2 nType=3 nType=4 nType=5
nType=6 nType=7 nType=8 nType=9 nType=10
nType=11 nType=12 nType=13 nType=14 nType=15
nType=16 nType=17 nType=18 nType=19 nType=20

14 - Quick Database info

DBInfo()
Table open in work area 1: CUSTOMERS

CUSTOMERS (4044 Recs.)

Fld#FieldnameData typeSizeDecimals
01 CUST_ID C String of characters 10 0
02 CUST_NAME C String of characters 35 0
03 ADDRESS C String of characters 50 0
04 CITY C String of characters 25 0
05 ZIPCODE C String of characters 12 0
06 STATE C String of characters 3 0
07 CUST_BAL N Numeric with decimals 10 2
08 D_SUBS D Calendar date 8 0
09 D_EXPIR D Calendar date 8 0
10 TOT_AMNT N Numeric with decimals 8 2
11 DUE_AMNT N Numeric with decimals 8 2
12 GRP_ID C String of characters 10 0
13 USR_NOTES M Text (memo) 10 0

15 - Quick Database list

ListNext(5) 18:36:52

LISTNEXT Error: cLink1=U

R1
R2
R3
R4
R5
R6
R7

Show only the given fields: listNext(5,"02,03,05,07")

LISTNEXT Error: cLink1=U

R8
R9
R10
R11
R12
R13

16 - Alert messages

alarm("This is an alarm!")

This is an alarm!


alert("This is an alert!")

This is an alert!


box("This is only a message!")
This is only a message!

17 - Hide/Unhide paragraphs/divisions

btnHide() This is usally hidden btnHide(0)
Click the button to hide/unhide the text:
Click me

18 - Web Forms (1)

formstart(cSelf) flds2form("02,03,04,08") formsubmit()
formEnd()

19 - Web Forms (2)

formstart(cSelf) rec2form(2,7) formsubmit()
formEnd()

20 - Web Forms (3)

p( formStart(cSelf) ) //-- default target page is same page
 p( well() )
 p( formField( "XY",, cSeed, "H") )
 p( formField( "VA",, "GO", "H") )  //-- action to perform (GO) 
 p( getStr("EF_NAME","Your name?",1,"Mary") )
 p( getNum("EF_AGE","Your Age?",0, 44) )
 p( startRadio() )
   p( radiobutton("EF_GENDER","Male") )
   p( radiobutton("EF_GENDER","Female",1) )
 p( endRadio() )
 p( formSubmit() )
 p( well(0) )
 p( formEnd() )

You can add Live data updates with Ajax (Asynchronous page loading)

//-- TARGET DIV
<div id="my_div1">Test failed!</div>

//-- TIMED AJAX CALL
<script type="text/javascript">
function timer() {
window.setTimeout("timer()", 3000);
ajaxRun('ajcount.msp',' ','my_div1');
}
window.setTimeout("timer()", 500);
</script>

Top of page