Clarion modern UI examples

Hi Guys,

I’m checking out some possibilities for refreshing my current UI in my clarion app.
I’m curious if you guys have some cool examples of your own applications where you’ve adjusted the UI to a modern(bootstrap) look and feel.



Take a look to noyantis warper for codejock

Checkout the #community:showcase category for some examples too!

Thnx for your answers guys.

Is it possible to reproduce the Noyantis skinframwork examples with clarion’s built in options?

For selecting things in alpha sequence.

Where are you working Erol?

In the Netherlands. @SerhatSatir
Thnx! @jnawrocki

On your question for better looking Clarion apps… I use Clarion based upon an ‘own’ full UNICODE ‘framework’ (just clarion code) I created 1989 when I started with Clarion … of course actually since Clarion 4 the first Windows version… but i never use templates like ABC or the dictionary , but i use a lot nettalk simplenet class, jfiles, xfiles, stringtheory. On sql only the native windows shipped driver which looks like odbc but is native and mainly i use Bulkoperations (much much faster, inserting 10 million records in about 1 minute in the ms sql)

I paint every pixel, i use 0,0 controls, no listboxes, no nothing, only custom made painting and writing strings with GdiPlus… so tedious work but great high high professional end-result apps. (borderless is like this, but i use the MDIFrame for it, so full blown app: )

Borderless MDIFrame is an own custom Caption bar, like Explorer or Chrome or Outlook, with own drawn close buttons, custom resize routines on WM_INPUT … (you first use:

GetRawInputDeviceList and then:

    RAWINPUTDEVICE.usUsagePage = 1
    RAWINPUTDEVICE.usUsage = 02h ! mouse
    RegisterRawInputDevices(Address(RAWINPUTDEVICE),1, Size(RAWINPUTDEVICE))

    RAWINPUTDEVICE.usUsagePage = 1
    RAWINPUTDEVICE.usUsage = 06h !is keyboard
    RegisterRawInputDevices(Address(RAWINPUTDEVICE),1, Size(RAWINPUTDEVICE))

-GDIPlus API’s, thus UNICODE strings with anti-aliasing;

  • Example : GdipDrawString(BackGrndGdi, Address(BackGrndTextLineW1024),BackGrndTextLineLength, BackGrndFontObject, Address(BackGrndTextRectangleF),BackGrndStringFormatHandle, BackGrndTextSolidFill)
  • WM_INPUT handling, thus knowing what the mouse or keyboard do also when the APP is not Active, important for custom resizing of the mdiframe borders;
  • Subclassed;
  • Use of Layered windows WS_EX_LAYERED, I use 255 GREEN for full transparant (thus you can simply put a Green box, and you can punch a transparant rectangle in your MDIFrame or the Client forms;
  • using DwmExtendFrameIntoClientArea(HWND,Address(ExtendedFrameMargins)) for a GLASS LOOK (or normal but able to paint on it as a your own caption bar on Windows 2019 (or W10)
    which means taking away the standard CAPTION and titlebar, so having full control to create a BORDERLESS MDIFrame like Chrome, or your own custom layout like Photoshop or Outlook with a Ribbon and icons in the title bar.
  • Still having the DWM shadow (as this is a bit tricky as painting on the None Client part usually turns off the DWM shadow but can be solved with returning an unmodified WM_NCCALCSIZE and
  • changing the background solidbrush color (thus not only the client area) with
    ColorValue = 0FFFFFFh
    ClientSolidBrush# = CreateSolidBrush(ColorValue)
    SetClassLongA(AppFrame.Client.ClientWindowHandle,GCL_HBRBACKGROUND#, ClientSolidBrush#)    
    SetClassLongA(HWND,GCL_HBRBACKGROUND#, ClientSolidBrush#)    

… and GDIPlus you can do things like this:

        If SolidBrushBorderActive = 0
            !SolidBrushBorderActive = CreateSolidBrush(0h)
            SolidBrushBorderActive = CreateSolidBrush(0717171h)
        If SolidBrushTransGreen = 0
            SolidBrushTransGreen = CreateSolidBrush(00FF00h)
        GdipCreateFromHDC(BackGrndCompatibleDC, Address(BackGrndGdi))
        GdipSetTextRenderingHint(BackGrndGdi, 0) !TextRenderingHintClearTypeGridFit)
        BackGrndGdiPenWidth = 0.1
        GdipCreatePen1(0A0A0A0h,BackGrndGdiPenWidth, 0, Address(BackGrndGdiPen1))
        BackGrndFontFamilyNameA = 'Arial'
        BackGrndFontFamilyNameW = GetWideString(BackGrndFontFamilyNameA)
        GdipCreateFontFamilyFromName(Address(BackGrndFontFamilyNameW), 0, Address(BackGrndFontFamilyHandle))
        BackGrndFontEmSize = 7
        GdipCreateFont(BackGrndFontFamilyHandle, BackGrndFontEmSize, 0, 2, Address(BackGrndFontObject))     

!BackGrndTextRectangleF     GROUP,PRE(BckGrndTxtRectF)
!X              SREAL
!Y              SREAL
!W             SREAL
!Y            SREAL
!                END
        BackGrndTextRectangle.X     = 0
        BackGrndTextRectangle.Y     = 0
        BackGrndTextRectangle.W     = 400
        BackGrndTextRectangle.H     = 200  
        BackGrndTextColorAlpha      = 255
        BackGrndTextColorRed        = 30
        BackGrndTextColorGreen      = 30
        BackGrndTextColorBlue       = 30
        BackGrndTextColor           = GetColor(BackGrndTextColorAlpha,BackGrndTextColorRed,BackGrndTextColorGreen,BackGrndTextColorBlue)
        GdipCreateSolidFill(BackGrndTextColor, Address(BackGrndTextSolidFill))

        BackGrndTextLineA1024 = 'Hello World' 
        BackGrndTextLineLength = Len(Clip(BackGrndTextLineA1024))
        BackGrndTextLineW1024 = GetWideString(Clip(BackGrndTextLineA1024))

        BackGrndTextRectangleF.X     = 10
        BackGrndTextRectangleF.Y     = 10
        BackGrndTextRectangleF.W     = 400
        BackGrndTextRectangleF.H     = 200          
        !GdipDrawImage(BackGrndGdi , ImageHandle,0, 0)
        GdipDrawString(BackGrndGdi, Address(BackGrndTextLineW1024),BackGrndTextLineLength, BackGrndFontObject, Address(BackGrndTextRectangleF),BackGrndStringFormatHandle, BackGrndTextSolidFill)

anyway, you start with this:

GdiplusStartupInput.Version = 1
GDIPLUSSTATUS = GdiplusStartup(Address(GdiplusToken),Address(GdiplusStartupInput),0) 

If more as 1 person likes i can upload a stripped down version for clarity on ClarionHub (if that’s possible to attach a zip)


An example of Single Window Application (bootstrap-4 style) here.

1 Like