Infield Top Aligned Form Labels

[Otto]

Dear Antonio
do you think you can provide "Infield Top Aligned GET fields".
Thank you in advance
Otto



http://uxmovement.com/forms/why-infield ... t-to-scan/

[cnavarro]

Dear Otto, excuse me, I do not understand well
Cuebanner?

[Otto]

Dear Cristobal
I would like something like the picture.
Get or a derived class should accept following parameters.

[ <INFIELDCAPTION <cInfieldCap> ] ;
[ INFIELDSIZE <nWidth>, <nHeight> ];
[ INFIELDFONT <oFont> ] ;
[ INFIELDCOLORTEXT <nClrFore> [,<nClrBack>] ]
[ INFIELDCOLORBORDER <nClrFore> [,<nClrBack>] ]

Thank you in advance
Otto

[ <INFIELDCAPTION <cInfieldCap> ] ;
[ INFIELDSIZE <nWidth>, <nHeight> ];
[ INFIELDFONT <oFont> ] ;



<nRow>, <nCol> FORMAT GET [ <oFGet> VAR ] <uVar> ;
[ <dlg: OF, WINDOW, DIALOG> <oWnd> ] ;
[ <memo: MULTILINE, MEMO, TEXT> ] ;
[ <color:COLOR,COLORS> <nClrFore> [,<nClrBack>] ] ;
[ SIZE <nWidth>, <nHeight> ] ;
[ FONT <oFont> ] ;
[ <hscroll: HSCROLL> ] ;
[ CURSOR <oCursor> ] ;
[ <pixel: PIXEL> ] ;
[ MESSAGE <cMsg> ] ;
[ <update: UPDATE> ] ;
[ WHEN <uWhen> ] ;
[ <lCenter: CENTER, CENTERED> ] ;
[ <lRight: RIGHT> ] ;
[ <readonly: READONLY, NO MODIFY> ] ;
[ VALID <uValid> ] ;
[ ON CHANGE <uChange> ] ;
[ <lDesign: DESIGN> ] ;
[ <lNoBorder: NO BORDER, NOBORDER> ] ;
[ <lNoVScroll: NO VSCROLL> ] ;
[ <INFIELDCAPTION <cInfieldCap> ] ;
[ INFIELDSIZE <nWidth>, <nHeight> ];
[ INFIELDFONT <oFont> ] ;

[Antonio Linares]

Reviewing how Bootstrap does it:

http://mrlopez.me/bootstrap-floating-labels/

[Otto]

Dear Antonio
what I would like are "Infield top aligned labels" connected to a GET and a border.

Do you think you can provide such a control.
The explanation why we should use "Infield top aligned labels" here seems to me logically.

http://uxmovement.com/forms/why-infield ... t-to-scan/


Thank you in advance
Otto

[Antonio Linares]

Dear Otto,

There is no need to create a new control. We can simply use standard GETs:

Code: Select all  Expand view

#include "FiveWin.ch"

function Main()

   local oWnd, cName := Space( 20 ), oGetName

   DEFINE WINDOW oWnd COLOR "N/W*"

   @ 10, 10 GET oGetName VAR cName OF oWnd NOBORDER COLOR "N/W*" CUEBANNER "Write here"

   oGetName:bPainted = { | hDC | PaintBorder( oGetName, "Name:" ) }

   ACTIVATE WINDOW oWnd

return nil

function PaintBorder( oGet, cLabel )

   local hDC := oGet:oWnd:GetDC()
   local aTopLeft := { -35, -10 }
   local aBottomRight := { oGet:nHeight + 5, oGet:nWidth + 20 }

   aTopLeft = ClientToScreen( oGet:hWnd, aTopLeft )
   aTopLeft = ScreenToClient( oGet:oWnd:hWnd, aTopLeft )
   aBottomRight = ClientToScreen( oGet:hWnd, aBottomRight )
   aBottomRight = ScreenToClient( oGet:oWnd:hWnd, aBottomRight )
   WndBox( hDC, aTopLeft[ 1 ], aTopLeft[ 2 ], aBottomRight[ 1 ], aBottomRight[ 2 ] )

   oGet:oWnd:Say( aTopLeft[ 1 ] + 10, aTopLeft[ 2 ] + 12, cLabel, CLR_HBLUE, CLR_WHITE, oGet:oWnd:oFont, .T. )

   oGet:oWnd:ReleaseDC()

return nil

[Enrico Maria Giordano]

Wonderful!

EMG

[Carles]

Antonio

We can simply use standard GETs

Bonissim !

[Otto]

Dear Antonio,

thank you so much.

Now I will check if the hypotheses that “Infield Top Aligned Form Labels“ are making scanning a DIALOG easier.
There are also opposite – as allways – views:
posting.php?mode=reply&f=3&t=36283

Although I think for better readable source code a dBase style syntax to call the Infield Top Aligned Label-get field would be easier.
I will start with a function and handle the parameters.


Thank you and best regards,
Otto

[cnavarro]

Antonio, great

With function roundbox:

Code: Select all  Expand view

   //WndBox( hDC, aTopLeft[ 1 ], aTopLeft[ 2 ], aBottomRight[ 1 ], aBottomRight[ 2 ] )
   RoundBox( hDC, aTopLeft[ 2 ], aTopLeft[ 1 ], aBottomRight[ 2 ], aBottomRight[ 1 ], 0, 0, ;
                  Rgb( 204, 204, 204 ) )     // Select color box

 

My two cents

[Otto]

Dear Antonio,

please go ahead and design a control.

Look at this:

https://material.io/design/components/t ... ml#anatomy

https://storage.googleapis.com/spec-hos ... ext-do.mp4

[Silvio.Falconi]

Dear Otto,

There is no need to create a new control. We can simply use standard GETs:

Code: Select all  Expand view

#include "FiveWin.ch"

function Main()

   local oWnd, cName := Space( 20 ), oGetName

   DEFINE WINDOW oWnd COLOR "N/W*"

   @ 10, 10 GET oGetName VAR cName OF oWnd NOBORDER COLOR "N/W*" CUEBANNER "Write here"

   oGetName:bPainted = { | hDC | PaintBorder( oGetName, "Name:" ) }

   ACTIVATE WINDOW oWnd

return nil

function PaintBorder( oGet, cLabel )

   local hDC := oGet:oWnd:GetDC()
   local aTopLeft := { -35, -10 }
   local aBottomRight := { oGet:nHeight + 5, oGet:nWidth + 20 }

   aTopLeft = ClientToScreen( oGet:hWnd, aTopLeft )
   aTopLeft = ScreenToClient( oGet:oWnd:hWnd, aTopLeft )
   aBottomRight = ClientToScreen( oGet:hWnd, aBottomRight )
   aBottomRight = ScreenToClient( oGet:oWnd:hWnd, aBottomRight )
   WndBox( hDC, aTopLeft[ 1 ], aTopLeft[ 2 ], aBottomRight[ 1 ], aBottomRight[ 2 ] )

   oGet:oWnd:Say( aTopLeft[ 1 ] + 10, aTopLeft[ 2 ] + 12, cLabel, CLR_HBLUE, CLR_WHITE, oGet:oWnd:oFont, .T. )

   oGet:oWnd:ReleaseDC()

return nil

this feature is made many years ago when I wish draw a light border on a get to draw also a verify bitmap ,

I remember it made by Nages or Cristobal or Uwe ( esk..) on this forum , I not remember good , I try to found the source on my hard diskes...

[Silvio.Falconi]

found
viewtopic.php?f=3&t=18808&hilit=border#p98628

[cnavarro]

Otto, Something like that?

[cnavarro]

Added new clauses and datas, methods in TGET

[ <infield: INFIELD>
Clause initial for active others clauses

[INCAPTION <cInCaption>]
Text for infield box
When DYNAMIC clause is active, not need this clause, cInCaption is replaced with cCuebanner

[INRECT <aInRect>];
aRect for paint: coordinates relative to nTop and nBottom of get

[INSIZE <nInWidth>, <nInHeight> ];
Width and Height for box paint

[INFONT <oInFont>]
Font for cInCaption

[INCLRTXT <nInClrFore> [,<nInClrBack>] ];
Colors for cInCaption

[INCLRBORDER <nInClrBFore> [,<nInClrBBack>] ]
Colors for box infield

[<lgroup: GROUP>];
Text is painted over line of box

[INCLRLINE <nInClrBLine>] [INCLRLINEDIS <nInClrDLine>]
COLOR for BORDERBOTTOM when focused / not focused

[<ldynamic: DYNAMIC>];
Allow change position of cInCaption when get gotfocus or lost focus

[INALIGN <nInAlign>]
Position for this get, relative to nPrevCtrl: default last

[INPREVCTRL <nPrevCtrl>]
Ctrl for get relative coordinates and alignment

[INSEPH <nSepH>] [INSEPVL <nSepV>] ]
Pixels separators between controls
By default, there are no spaces between the controls

[INERROR <cInError>]
Message for error when valid control return .F.,
It is automatically displayed
The box is automatically resized when this clause is included

[INCLRERROR <nInClrForeError> [,<nInClrBackError>] ]
Colors for message error

[INWHPEN <nInWHPen>]
Size PEN for draw box

All color values included in the clauses can be codeblocks

New DATAS for previous clauses

DATA lInfield INIT .F.
DATA cInCaption INIT ""
DATA oInFont
DATA nInClrFore
DATA nInClrBack
DATA nInClrBFore
DATA nInClrBBack
DATA nInClrLineB
DATA nInClrLineD
DATA lDynamic INIT .F.
DATA lGroup INIT .F.
DATA aInRect
DATA nInAlign
DATA nInPrevCtrl
DATA bInPostAlign
DATA nInOffSetH
DATA nInOffSetV
DATA lInError
DATA cInError
DATA nInClrForeError
DATA nInClrBackError
DATA nInWHPen

Code: Select all  Expand view

#include "FiveWin.ch"

#define  INDOWN       0
#define  INRIGHT      1
#define  INUP         2
#define  INLEFT       3
#define  INDOWNRIGHT  4
#define  INDOWNLEFT   5
#define  INUPRIGHT    6
#define  INUPLEFT     7

//----------------------------------------------------------------------------//
// https://material.io/design/components/t ... ml#anatomy
// Inactive - Activated - Focused - Hover - Error ( no se cumple el bvalid ) - Disabled
//----------------------------------------------------------------------------//

function Main()

   local oWnd
   local cName    := Space( 20 )
   local cLast    := Space( 20 )
   local cDir     := Space( 20 )
   local cCompany := Space( 20 )
   local cCode    := Space( 8 )
   local oGetName
   local oGetLast
   local oGetDir
   local oGetCompany
   local oGetCode
   local oGetTest1
   local cTest1  := Space( 12 )
   local oGetTest2
   local cTest2  := Space( 16 )
   local oGetTest3
   local cTest3  := Space( 10 )
   local oGetTest4
   local cTest4  := Space( 14 )
   local oGetTest5
   local cTest5  := Space( 14 )
   local oGetTest6
   local cTest6  := Space( 20 )
   local oGetTest7
   local cTest7  := Space( 16 )
   local oGetTest8
   local cTest8  := Space( 16 )
   local oGetTest9
   local cTest9  := Space( 16 )
   local oGetTest10
   local cTest10  := Space( 16 )
 
   local oBtn1
   local oBtn2
   local oBtn3
   local lSw   := .F.
   local oFontI
   SetResDebug( .T. )
   FErase( "Checkres.txt" )

   DEFINE FONT oFontI NAME "CALIBRI" SIZE 0,-10

   DEFINE WINDOW oWnd COLOR "N/W*" PIXEL
   oWnd:nHeight  := 650
   oWnd:nWidth   := 900

   @ 10, 20 FLATBTN oBtn1 PROMPT "Exit" OF oWnd SIZE 90, 40 ;
      COLOR CLR_BLUE, CLR_HGRAY NOBORDER ;
      ACTION oWnd:End()

   @ 10, 180 FLATBTN oBtn2 PROMPT if( !lSw, "Enable", "Disable" ) OF oWnd ;
      SIZE 90, 40 COLOR CLR_BLUE, CLR_HGRAY NOBORDER ;
      ACTION ( lSw := !lSw, oBtn2:cCaption := if( !lSw, "Enable", "Disable" ), ;
               oBtn2:Refresh() )

   @ 100, 20 GET oGetName VAR cName OF oWnd ;
      COLOR Rgb( 128, 128, 128 ), CLR_WHITE CUEBANNER "Name" PIXEL NOBORDER UPDATE ;
      INFIELD INFONT oFontI INCLRTXT CLR_GRAY INCLRBORDER Rgb( 204, 204, 204 ) DYNAMIC // BOTTOMBORDER
      //INCAPTION "Name:"

   @ 115 + 35 + 30 - 7, 20 GET oGetLast VAR cLast OF oWnd COLOR "N/W*" ;
      CUEBANNER "Write here" PIXEL BOTTOMBORDER INFIELD INALIGN 0

   @ 100, 190 - 3 GET oGetDir VAR cDir OF oWnd COLOR "N/W*" CUEBANNER "Street" PIXEL BOTTOMBORDER ;
      INFIELD INCAPTION "DIRECCION" INCLRTXT CLR_HGRAY INCLRBORDER Rgb( 204, 204, 204 ) GROUP WHEN lSw
   // INRECT { 25, 10, 15, 25 }

   @ 115 + 35 + 30 - 7, 190 - 3 GET oGetCompany VAR cCompany OF oWnd COLOR "N/W*" ;
      CUEBANNER "Company" PIXEL BOTTOMBORDER ;
      INFIELD INFONT oFontI INCLRTXT CLR_HGRAY INCLRBORDER Rgb( 204, 204, 204 ) DYNAMIC
   // INCAPTION "Company"

   @ 115 + 2*35 + 2*30 + 1, 20 GET oGetCode VAR cCode OF oWnd COLOR "N/W*" ;
      CUEBANNER "Code" PIXEL BOTTOMBORDER ;
      INFIELD INCAPTION "Code" INFONT oFontI INSIZE 105, 0 ;
      INCLRTXT CLR_HGRAY INCLRBORDER Rgb( 204, 204, 204 ) DYNAMIC GROUP

   @ 345, 20 GET oGetTest1 VAR cTest1 OF oWnd COLOR "N/W*" ;
      CUEBANNER "Test1" PIXEL BOTTOMBORDER ;
      INFIELD INALIGN INRIGHT

   @ 400, 20 GET oGetTest2 VAR cTest2 OF oWnd COLOR "N/W*" ;
      CUEBANNER "Test2" PIXEL BOTTOMBORDER ;
      INFIELD INALIGN INDOWN

   @ 400, 20 GET oGetTest3 VAR cTest3 OF oWnd COLOR "N/W*" ;
      CUEBANNER "Test3" PIXEL BOTTOMBORDER ;
      INFIELD INALIGN INDOWN

   @ 400, 20 GET oGetTest4 VAR cTest4 OF oWnd COLOR "N/W*" ;
      CUEBANNER "Test4" PIXEL BOTTOMBORDER ;
      INFIELD INALIGN INLEFT

   @ 400, 20 GET oGetTest5 VAR cTest5 OF oWnd COLOR "N/W*" ;
      CUEBANNER "Test5" PIXEL BOTTOMBORDER ;
      INFIELD INALIGN INUP
      //oGetTest5:lGroup  := .F.

   @ 400, 20 GET oGetTest6 VAR cTest6 OF oWnd COLOR "N/W*" ;
      CUEBANNER "Test6" PIXEL BOTTOMBORDER ;
      INFIELD INALIGN INDOWNRIGHT INPREVCTRL oGetTest3

   @ 400, 20 GET oGetTest7 VAR cTest7 OF oWnd COLOR "N/W*" ;
      CUEBANNER "Test7" PIXEL BOTTOMBORDER ;
      INFIELD INALIGN INDOWNLEFT

   @ 400, 20 GET oGetTest8 VAR cTest8 OF oWnd COLOR "N/W*" ;
      CUEBANNER "Test8" PIXEL BOTTOMBORDER ;
      INFIELD INALIGN INUPRIGHT INPREVCTRL oGetTest6

   @ 400, 20 GET oGetTest9 VAR cTest9 OF oWnd COLOR "N/W*" ;
      CUEBANNER "Test9" PIXEL BOTTOMBORDER ;
      INFIELD INALIGN INUPRIGHT INPREVCTRL oGetTest8

   @ 400, 20 GET oGetTest10 VAR cTest10 OF oWnd COLOR "N/W*" ;
      CUEBANNER "Test10" PIXEL BOTTOMBORDER ;
      INFIELD INALIGN INUPLEFT

   ACTIVATE WINDOW oWnd ;
      ON INIT ( AEVal( oWnd:aControls, { | o | if( o:ClassName() == "TGET", o:Refresh(), ) } ) )

   oFontI:End()

   Checkres()

return nil

//----------------------------------------------------------------------------//