Post by meerkat on Sept 17, 2015 7:30:57 GMT -5
I'm doing a project where I had to create a screen without using a <table>.
I had to position each piece of data exactly where I wanted it.
I soon found out it was very time consuming to set up the screen..
So decided to write some code to do it for me.
It helped me, so decided to share it.
You can set up different types if fields such as text, date, time etc. You can give input fields a caption using a text field. You can give input a initial value.
You can do add, changes, 'add like', and delete. To change or 'add like', use the button to the left of the data on the screen
It uses a flat file to define your parameters to the screen. (see sample param below)
Here is a sample flat file you can use as a test.
Hope this helps
Dan
I had to position each piece of data exactly where I wanted it.
I soon found out it was very time consuming to set up the screen..
So decided to write some code to do it for me.
It helped me, so decided to share it.
You can set up different types if fields such as text, date, time etc. You can give input fields a caption using a text field. You can give input a initial value.
You can do add, changes, 'add like', and delete. To change or 'add like', use the button to the left of the data on the screen
It uses a flat file to define your parameters to the screen. (see sample param below)
NullColumn$ = ""
bf$ = "<SPAN STYLE='font-family:Arial; font-weight:700; font-size:12pt'>"
' --------------------------------------
' Direct these to your location
' --------------------------------------
projectDir$ = "layout_project"
layoutFile$ = DefaultDir$+"\projects\"+projectDir$+"\layout.txt" ' the flat file with layout definitions
screenFile$ = DefaultDir$+"\projects\"+projectDir$+"\screen.bas" ' where the output generated code goes
' --------------------------------------
' Possible field types
' --------------------------------------
fldTypCnt = 3
dim selFldTyp$(fldTypCnt)
dim selFldTypDisp$(fldTypCnt)
selFldTyp$(1) = "P" : selFldTypDisp$(1) = "Photo"
selFldTyp$(2) = "T" : selFldTypDisp$(2) = "Text"
selFldTyp$(3) = "I" : selFldTypDisp$(3) = "Input"
' --------------------------------------
' Possible input types
' --------------------------------------
inpTypCnt = 6
dim selInpTyp$(inpTypCnt)
dim selInpTypDisp$(inpTypCnt)
selInpTyp$(0) = "0" : selInpTypDisp$(0) = "-Not Input-"
selInpTyp$(1) = "1" : selInpTypDisp$(1) = "Text"
selInpTyp$(2) = "2" : selInpTypDisp$(2) = "Number"
selInpTyp$(3) = "3" : selInpTypDisp$(3) = "Decimal"
selInpTyp$(4) = "4" : selInpTypDisp$(4) = "Date"
selInpTyp$(5) = "5" : selInpTypDisp$(5) = "DateTime"
selInpTyp$(6) = "6" : selInpTypDisp$(6) = "Time"
' --------------------------------------
' Table structure for layout
' --------------------------------------
sqliteconnect #mem, ":memory:"
mem$ = "CREATE TABLE layout (
locX SMALLINT(3),
locY SMALLINT(3),
wide SMALLINT(2),
high SMALLINT(2),
scrollable CHAR(1),
backColor VARCHAR(11),
border SMALLINT(2),
borderColor VARCHAR(11),
align char(1),
fieldType CHAR(1),
inputType char(2),
fieldName VARCHAR(22),
fieldWidth SMALLINT(2),
photoId VARCHAR(20),
text TEXT);
CREATE UNIQUE INDEX scrNum ON layout(scrNum)"
#mem execute(mem$)
' --------------------------------------
' move the flat params to SQL
' --------------------------------------
files #f,layoutFile$
exist = #f HASANSWER()
if exist <> 0 then
open layoutFile$ for input as #f
WHILE not(eof(#f))
line input #f, a$
mem$ = "INSERT INTO layout VALUES('";a$;"')"
#mem execute(mem$)
WEND
end if
' --------------------------------------
' Main Code loop
' --------------------------------------
[main]
cls
html bf$;"<TABLE BORDER=1 CELLPADDING=0 CELLSPACING=0 width=100%><TR>"
html "<TD BGCOLOR=wheat align=center>"
button #chg, "Add", [scrAdd]
button #gen, "Gen", [scrGen]
button #ext, "Exit", [doExit]
html "</TD></TR></TABLE>"
mem$ = "SELECT layout.rowid as rowid,layout.*
FROM layout
ORDER BY locX,locY"
#mem execute(mem$)
numScr = #mem ROWCOUNT() 'Get the number of rows
WHILE #mem hasanswer()
#row = #mem #nextrow()
gosub [getData]
gosub [shoData]
WEND
wait
' --------------------------------------
' Position data to the screen
' --------------------------------------
[shoData]
if align$ = "R" then
fr$ = "float: right;"
else
fr$ = ""
end if
html "<div style='position: absolute; left:";locX$;"px; top:";locY$;"px; height:";high$;"px; width:";wide$;"px; border:";border$;"px; border-style:solid; border-color:";borderColor$;"; background-color:";backColor$;";' >"
' ---- Text ------
if fieldType$ = "T" then
html "<div style='";fr$;"'>";text$;"</div>"
goto [endDiv]
end if
' ---- Input -----
if fieldType$ = "I" then
inputType = max(inputType,1)
typ$ = lower$(selInpTypDisp$(inputType))
val$ = text$
if left$(typ$,4) = "date" then val$ = date$("yyyy-mm-dd")
if typ$ = "time" then val$ = time$()
html "<div style='";fr$;"'>"
html "<input type='";typ$;"' name='";fieldName$;"' id='";fieldName$;"' size=";fieldWidth$;" value='";val$;"'/>"
html "</div>"
goto [endDiv]
end if
' ---- Photo ------
if fieldType$ = "P" then
html "<div style='";fr$;"'>"
html "<IMG SRC='";photoId$;"' WIDTH=100%>"
html "</div>"
goto [endDiv]
end if
' ----- just in case we didn't give it a type, show the parameters -------
html "<div style='";fr$;"'>";locX$;" y:";locY$;" wi:";wide$;" hi:";high$;" clr:";clr$;" bdr:";bdr$;" it:";fieldType$;"</div>"
[endDiv]
html "</div>"
html "<div style='position: absolute; left:";locX$;"px; top:";locY$;"px; height:0px; width:0px;' >"
button #acd, "", [scrChg]
#acd setkey(rowid$)
html "</div>"
RETURN
' --------------------------------------
' Show Add, Change, or Delete Screen
' --------------------------------------
[scrAdd]
acd$ = "Add"
gosub [clearData]
goto [doMaint]
[scrChg]
acd$ = "Chg"
rowid$ = EventKey$
mem$ = "SELECT layout.rowid as rowid,layout.* FROM layout WHERE rowid = ";rowid$
#mem execute(mem$)
#row = #mem #nextrow()
gosub [getData]
[doMaint]
cls
html bf$;"<center><TABLE BORDER=1 CELLPADDING=0 CELLSPACING=0 bgcolor=wheat>"
html "<TR align=center><TD colspan=2>Layout</TD></TR><TR>"
html "<TD align=right>Loc X</TD><TD>"
html "<input type='number' name='locX' id='locX' value='";locX$;"' size=3/>"
html "</TD></TR><TR>"
html "<TD align=right>Loc Y</TD><TD>"
html "<input type='number' name='locY' id='locY' value='";locY$;"' size=3/>"
html "</TD></TR><TR>"
html "<TD align=right>Wide</TD><TD>"
html "<input type='number' name='wide' id='wide' value='";wide$;"' size=2/>"
html "</TD></TR><TR>"
html "<TD align=right>High</TD><TD>"
html "<input type='number' name='high' id='high' value='";high$;"' size=2/>"
html "</TD></TR><TR>"
html "<TD align=right>Scrollable</TD><TD>"
if scrollable$ = "Y" then chk$ = "checked" else chk$ = ""
html "<input type='radio' name='scrollable' id='scrollable' value='Y' ";chk$;" />Yes"
if scrollable$ = "N" then chk$ = "checked" else chk$ = ""
html "<input type='radio' name='scrollable' id='scrollable' value='N' ";chk$;" />No"
html "</TD></TR><TR>"
html "<TD align=right>Back Color</TD><TD>"
html "<input type='color' name='backColor' id='backColor' value='";backColor$;"' size=7/>"
html "</TD></TR><TR>"
html "<TD align=right>Border</TD><TD>"
html "<input type='number' name='border' id='border' value='";border$;"' size=2/>"
html "</TD></TR><TR>"
html "<TD align=right>Border Color</TD><TD>"
html "<input type='color' name='borderColor' id='borderColor' value='";borderColor$;"' size=7/>"
html "</TD></TR><TR>"
html "<TD align=right>Align Right</TD><TD>"
if align$ = "R" then chk$ = "checked" else chk$ = ""
html "<input type='checkbox' name='align' id='align' value='R' ";chk$;">"
html "</TD></TR><TR>"
html "<TD align=right>Field Type</TD><TD>"
html "<SELECT name='fieldType'>"
for i = 1 to fldTypCnt
if fieldType$ = selFldTyp$(i) then sel$ = "selected" else sel$ = ""
html "<option value='";selFldTyp$(i);"' ";sel$;">";selFldTypDisp$(i);"</option>"
next i
html "</select>"
html "</TD></TR><TR>"
html "<TD align=right>Input Type</TD><TD>"
html "<SELECT name='inputType'>"
for i = 1 to inpTypCnt
if inputType$ = selInpTyp$(i) then sel$ = "selected" else sel$ = ""
html "<option value='";selInpTyp$(i);"' ";sel$;">";selInpTypDisp$(i);"</option>"
next i
html "</select>"
html "</TD></TR><TR>"
html "<TD align=right>Field Name</TD><TD>"
html "<input type='text' name='fieldName' id='fieldName' value='";fieldName$;"' size=22/>"
html "</TD></TR><TR>"
html "<TD align=right>Field Width</TD><TD>"
html "<input type='number' name='fieldWidth' id='fieldWidth' value='";fieldWidth$;"' size=2/>"
html "</TD></TR><TR>"
html "<TD align=right>PhotoId</TD><TD>"
html "<input type='text' name='photoId' id='photoId' value='";photoId$;"' size=20/>"
html "</TD></TR><TR>"
html "<TD align=right>Text</TD><TD>"
html "<textarea name='text' id='text' rows=4 cols=35>";text$;"</textarea>"
html "</TD></TR><TR>"
html "<TR bgcolor=wheat><TD colspan=2 ALIGN=CENTER>"
if acd$ <> "" then
button #chg, acd$, [doChg]
#chg setkey(rowid$)
if acd$ = "Chg" then
button #chg, "Add", [doAdd]
button #del, "Del", [doDel]
#del setkey(rowid$)
end if
end if
button #ex, "Exit", [main]
html "</TD></TR></TABLE>"
wait
' --------------------------------------
' Do requested Add Change or Delete
' --------------------------------------
[doDel]
mem$ = "DELETE FROM layout WHERE rowid = '";rowid$;"'"
goto [execACD]
[doAdd]
acd$ = "Add"
[doChg]
dbFields$ = "locX,locY,wide,high,scrollable,backColor,border,borderColor,align,fieldType,inputType,fieldName,fieldWidth,photoId,text"
' --------------------------------------
' Request data from user screen
' --------------------------------------
locX$ = #request get$("locX")
locX = val(locX$)
locY$ = #request get$("locY")
locY = val(locY$)
wide$ = #request get$("wide")
wide = val(wide$)
high$ = #request get$("high")
high = val(high$)
scrollable$ = #request get$("scrollable")
backColor$ = #request get$("backColor")
border$ = #request get$("border")
border = val(border$)
borderColor$ = #request get$("borderColor")
align$ = #request get$("align")
fieldType$ = #request get$("fieldType")
inputType$ = #request get$("inputType")
inputType = val(inputType$)
fieldName$ = #request get$("fieldName")
fieldWidth$ = #request get$("fieldWidth")
fieldWidth = val(fieldWidth$)
photoId$ = #request get$("photoId")
text$ = #request get$("text")
dbVals$ = locX;",";locY;",";wide;",";high;",'";scrollable$;"','";backColor$;"',";border;",'";borderColor$;"','";align$;"','";fieldType$;"','";inputType$;"','";dblQuote$(fieldName$);"',";fieldWidth;",'";dblQuote$(photoId$);"','";dblQuote$(text$);"'"
if acd$ = "Chg" then
dbf$ = ",rowid"
dbv$ = ","+rowid$
else
dbf$ = ""
dbv$ = ""
END IF
' --------------------------------------
' Plase data in SQLite
' --------------------------------------
mem$ = "INSERT or REPLACE into layout ("; dbFields$;dbf$; ") VALUES ("; dbVals$;dbv$ ; ")"
[execACD]
#mem execute(mem$)
' --------------------------------------
' Move SQLite to the flat file
' --------------------------------------
open layoutFile$ for output as #f
mem$ = "SELECT * FROM layout ORDER BY locX,locY"
#mem execute(mem$)
WHILE #mem hasanswer()
result$ = #mem nextrow$("','")
print #f,result$
WEND
close #f
goto [main]
' --------------------------------------
' Generate RB screen code
' --------------------------------------
[scrGen]
cls
open screenFile$ for output as #f
mem$ = "SELECT layout.rowid,* FROM layout ORDER BY locX,locY"
#mem execute(mem$)
numScr = #mem ROWCOUNT() 'Get the number of rows
WHILE #mem hasanswer()
#row = #mem #nextrow()
gosub [getData]
fr$ = ""
if align$ = "R" then fr$ = "float: right;"
print #f, "html ""<div style='position: absolute; left:";locX$;"px; top:";locY$;"px; height:";high$;"px; width:";wide$;"px; border:";border$;"px; border-style:solid; border-color:";borderColor$;"; background-color:";backColor$;";' >"""
' ---- Text ------
if fieldType$ = "T" then
print #f, "html ""<div style='";fr$;"'>";text$;"</div>"""
goto [endDiv]
end if
' ---- Input -----
if fieldType$ = "I" then
inputType = max(inputType,1)
typ$ = lower$(selInpTypDisp$(inputType))
val$ = text$
if left$(typ$,4) = "date" then val$ = date$("yyyy-mm-dd")
if typ$ = "time" then val$ = time$()
print #f, "html ""<div style='";fr$;"'>"""
print #f, "html ""<input type='";typ$;"' name='";fieldName$;"' id='";fieldName$;"' size=";fieldWidth$;" value='";val$;"'/>"""
print #f, "html ""</div>"""
goto [endDiv]
end if
' ---- Photo ------
if fieldType$ = "P" then
print #f, "html ""<div style='";fr$;"'>"""
print #f, "html ""<IMG SRC='";photoId$;"' WIDTH=100%>"""
print #f, "html ""</div>"""
goto [endDiv]
end if
print #f, "html ""<div style='";fr$;"'>";locX$;" y:";locY$;" wi:";wide$;" hi:";high$;" clr:";clr$;" bdr:";bdr$;" it:";fieldType$;"""</div>"""
[endDiv]
print #f, "html ""</div></div>"""
WEND
close #f
print "Output at:";screenFile$
end
' --------------------------------------
' Get SQLite data
' --------------------------------------
[getData]
locX$ = #row locX$()
locX = #row locX()
locY$ = #row locY$()
locY = #row locY()
wide$ = #row wide$()
wide = #row wide()
high$ = #row high$()
high = #row high()
scrollable$ = #row scrollable$()
backColor$ = #row backColor$()
border$ = #row border$()
border = #row border()
borderColor$ = #row borderColor$()
align$ = #row align$()
fieldType$ = #row fieldType$()
inputType$ = #row inputType$()
inputType = #row inputType()
fieldName$ = #row fieldName$()
fieldWidth$ = #row fieldWidth$()
fieldWidth = #row fieldWidth()
photoId$ = #row photoId$()
text$ = #row text$()
rowid$ = #row rowid$()
RETURN
' --------------------------------------
' Clear SQLite data
' --------------------------------------
[clearData]
locX$ = ""
locX = 0
locY$ = ""
locY = 0
wide$ = ""
wide = 0
high$ = ""
high = 0
scrollable$ = "N"
backColor$ = "#ffffff"
border$ = ""
border = 0
border$ = ""
borderColor$ = "#000000"
align$ = "L"
fieldType$ = "1"
inputType$ = ""
fieldName$ = ""
fieldWidth$ = ""
fieldWidth = 0
photoId$ = ""
text$ = ""
rowid$ = ""
RETURN
[doExit]
cls
end
' -----------------------------------------
' Convert single quotes to double quotes
' -----------------------------------------
FUNCTION dblQuote$(str$)
i = 1
qq$ = ""
while word$(str$,i,"'") <> ""
dblQuote$ = dblQuote$;qq$;word$(str$,i,"'")
qq$ = "''"
i = i + 1
WEND
END FUNCTION
Here is a sample flat file you can use as a test.
311','200','200','18','Y','#f3ebde','1','#000000','R','T','2','fieldName','33','','Gimme a date
311','230','200','18','Y','#f3ebde','2','#000000','R','T','1','fieldName','22','photoId','Give me some time
311','260','200','18','Y','#f3ebde','1','#000000','R','T','2','fieldName','33','','This is text
311','290','200','18','Y','#f3ebde','1','#000000','R','T','2','fieldName','33','','Show me a photo
515','200','100','19','N','#ffffff','1','#000000','','I','4','fieldName','22','','Test by me
515','230','100','19','N','#ffffff','1','#000000','','I','6','fieldName','22','','Test by me
515','260','100','19','N','#ffffff','1','#000000','','I','1','fieldName','22','','Here is text
515','290','100','100','N','#ffffff','1','#000000','','P','6','fieldName','22','photoId','Test by me
Hope this helps
Dan
Sorry about that.