Ghost Edit Controls

[GWS]

Hi folks,

There's always been a problem getting a program to respond to an 'Enter' keypress in an Edit Box.
Microsoft never provided for this apparently .. 

Then came an idea from Larry Adcock in 2002 for using just one edit box to do all the work for a window full of 'ghost' edit boxes. 

I'll post Larry's original ground-breaking idea separately.

Anyway, based on Larry's idea, I came up with the idea of not using an Edit box at all - but using an apparently 'editable' Text Box instead - and using decorative edit placeholders, which could be any image you fancied .. 

Here's the code:

Code Select Expand


' Creative Basic Code
' GWS 2008
'
' Example of using interesting-looking Placeholder images and a single Text Box instead of boring edit boxes.
' Any number of editable locations can be laid out on the window - but only one text box is needed.
' This method also allows checks to limit input to a given number of characters of a chosen type,
' numeric, text, or any particular group of permissible characters.

' You get colourful editable boxes which respond to the 'Enter' key
' Use any web button image you fancy to act as pretty placeholders ..

' This idea came from a post by Larry Adcock in 2002 which used edit boxes (but of course this didn't respond
' to 'Enter' keypresses ..

def w:WINDOW
def key,tb,tb2,sl,mx,my,highbox,im:int
def left,top,width,height,textW,textH:int
def i,j,tboxW,tboxH,bc,test1,test2:int
def run,chartest:int

def a$,b$,ok1$,ok2$:string

autodefine "off"

type ghosttype
def l:int
def t:int
def w:int
def h:int
def text:string
def nxt:int
def max:int
def ok:string
endtype

def tbox[3]:ghosttype

WINDOW w,0,0,600,400,@SIZE|@MINBOX|@MAXBOX,0,"Text Box Edit Example",main
centerwindow w
setwindowcolor w,rgb(0,0,30)
setfocus w

GETCLIENTSIZE w,left,top,width,height

' set the size of the editable text box and create it ...
tboxW = 81: tboxH = 21
CONTROL w,"T,,120,70,tboxW,tboxH,@CTEDITCENTER,1"
setcontrolcolor w,1,rgb(230,230,230),rgb(0,100,200)
setfont w,"Times New Roman",10,600,0,1
' hide the text box ...
SHOWWINDOW w, @swhide,1

CONTROL w,"B,Exit,(width-70)/2,300,70,35,0x50000000,2"
CONTROL w,"T,,(width-80)/2,180,80,22,@CTEDITCENTER,3"
setcontrolcolor w,3,rgb(240,240,100),rgb(0,100,200)
setfont w,"Times New Roman",10,600,0,3

' you could load your own suitably sized jpg image here for a nice placeholder background.
' load image for the ghost text box placeholders ...
' im = LOADIMAGE (GETSTARTPATH + "box.jpg", 4)
' a line drawing section below is used below to give
' a reasonable effect ...

' locate the editable text boxes and initialise ...
tbox[0].l = 100: tbox[1].l = 255: tbox[2].l = 410
tbox[0].t = 70: tbox[1].t = 70: tbox[2].t = 70
tbox[0].w = 90: tbox[1].w = 90: tbox[2].w = 90
tbox[0].h = 25: tbox[1].h = 25: tbox[2].h = 25
' set next box when Enter is pressed ...
tbox[0].nxt = 1: tbox[1].nxt = 2: tbox[2].nxt = 99
' set maximum number of characters for each box ...
tbox[0].max = 5: tbox[1].max = 5: tbox[2].max = 5
ok1$ = "1234567890+-":' set up valid characters for each box ...
ok2$ = "aAbBcCdDeEfFgGhHiIjJkKlLmMnNoOpPqQrRsStTuUvVwWxXyYzZ,."
tbox[0].ok = ok1$:'set up left hand box for numbers only
tbox[1].ok = ok2$:'set up right hand box for letters only ...
tbox[2].ok = "":' set up third box for any character ...
highbox=2:' set highest index ...

' show the ghost placeholders ...
for i = 0 to highbox
' ____________________________________________________________________________
' this line drawing section would normally be replaced by an image background
' loaded from a suitable web button image, sized to fit.
for j = 0 to tbox[i].w
if j < tbox[i].w /2
bc = 100+(200*j/tbox[i].w)
else
bc = 300-(200*j/tbox[i].w)
endif
line w,tbox[i].l+j,tbox[i].t,tbox[i].l+j,tbox[i].t+tbox[i].h,rgb(0,0,bc)
next j
'____________________________________________________________________________
' the image would normally replace the above line drawing section ...
' ShowImage w,im,4,tbox[i].l,tbox[i].t,tbox[i].w,tbox[i].h

next i

' invalidate textbox indexes, so as to start with no box selected ...
tb = -1: tb2 = -1

' ****** documentation only *******************
SETFONT w, "Arial",10,500,0
frontpen w, RGB(20,230,150)   
a$ = "Select box - enter some values and press Enter - clears if clicked" 
GETTEXTSIZE w, a$, textW, textH 
move w,(width- textW)/2,20 
print w,a$

SETFONT w, "Arial",8,500,0 
a$= "(Box 1 set for 5 digits max - Box 2 for 5 letters max - Box 3 for any 5 characters)"
GETTEXTSIZE w, a$, textW, textH
move w,(width- textW)/2,120
print w,a$
' ****** documentation only *******************
   
frontpen w, RGB(50,100,250) 

run = 1

WAITUNTIL run = 0
' image delete only needed if a jpeg background image is loaded ...
' DeleteImage im,4
CLOSEWINDOW w
END

SUB main
SELECT @CLASS
CASE @IDCHAR
key = @CODE
select 1
case (key = 9)
' ignore TAB ...
return
case (key <> 13) & (key <> 8)
' normal character entered ..
if (tb >= 0) & (tb <= highbox)
a$ = getcontroltext(w,1)
b$ = chr$(key)
if (tbox[tb].ok <> "")
chartest = (instr(tbox[tb].ok,b$) > 0)
else
chartest = 1
endif
if (len(a$) < tbox[tb].max) & chartest
a$ = a$ + chr$(key)
      setcontroltext w,1,a$
endif
endif
case (key = 8)
' backspace pressed ...
a$ = getcontroltext(w,1)
sl = len(a$)
if sl>0
a$ = left$(a$,len(a$)-1)
      setcontroltext w,1,a$
endif
case (key = 13)
' Enter key pressed ..
if (tb >= 0) & (tb <= highbox)
writetext
if len(a$) > 0
setcontroltext w,3,a$
tb = tbox[tb].nxt
textmove
endif
endif
endselect
case @IDCLOSEWINDOW
run = 0
case @IDCONTROL
select @CONTROLID
case 2
run = 0
endselect
case @IDLBUTTONDN
' if mouse clicked, find where ...
tbox_click
case @IDMOUSEMOVE
    mx = @mousex : my = @mousey
ENDSELECT
RETURN

SUB tbox_click
' check for mouse click in a box ...
def tbv:int
for tbv = 0 to highbox
test1 = (mx>tbox[tbv].l) & (mx<(tbox[tbv].l+tbox[tbv].w))
test2 = (my>tbox[tbv].t) & (my<(tbox[tbv].t+tbox[tbv].h))
   if test1 & test2
' transfer the contents of the text box ...
if tb <= highbox
writetext
endif
setcontroltext w,3,""
tb = tbv
textmove
   endif
next tbv
RETURN

SUB textmove
' move the text box to the ghost placeholder clicked ...
' remove focus from current box ..
if tb >= 0
if tb <= highbox
setcontroltext w,1,""
' repaint the ghost background ...
' this line drawing section is only here to replace the image that
' would normally be used ...
' ____________________________________________________________
for j = 0 to tbox[tb].w
if j < tbox[tb].w /2
bc = 100+(200*j/tbox[tb].w)
else
bc = 300-(200*j/tbox[tb].w)
endif
line w,tbox[tb].l+j,tbox[tb].t,tbox[tb].l+j,tbox[tb].t+tbox[tb].h,rgb(0,0,bc)
next j
'_____________________________________________________________
' ShowImage w,im,4,tbox[tb].l,tbox[tb].t,tbox[tb].w,tbox[tb].h
' display the text box at the clicked location ...
SHOWWINDOW w, @swrestore,1
setsize w,tbox[tb].l+5,tbox[tb].t+2,tboxW,tboxH,1
tb2 = tb
else
' if last box in the sequence just go to the window ...
' and hide the text box ...
SHOWWINDOW w, @swhide,1
setfocus w
tb2 = -1
endif
endif
RETURN

SUB writetext
' transfer text from the text box to the selected ghost text area ...
a$ = getcontroltext(w,1)
if len(a$) > 0
setfont w,"Times New Roman",10,600
frontpen w, RGB(0,200,255)
GETTEXTSIZE w, a$, textW, textH
' note the divide by 3 to center the text vertically ...
move w,tbox[tb].l+(tbox[tb].w-textW)/2,tbox[tb].t+(tbox[tb].h-textH)/3
DRAWMODE w, @transparent
' write the information to the screen...
print w,a$
' and save it in the ghost text ...
tbox[tb].text = a$
' clear the text box ...
setcontroltext w,1,""
endif
RETURN



Hope you find it interesting ..

best wishes,

Graham