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

1 Like

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.



Did you used EasyHTML template of Ingasoftplus?


Yes I used EasyHTML as a core.

1 Like

Hallo Menno,

Thanks for all your interesting posts. Because a lot of them are big text source code i think it would be much more easy to zip a demo app (with dct sln project) in C6.3 or C10 or C11 format or as a prj.

1 Like

Hi Dirk - Those kinds of things are pretty much what “gists” are designed for. And the code formatting will remain intact.

Hi Dirk,

Personally I find full text on webpages more informative and quick to scan, as well google bots can pick it up for better exposure what helps more people.

My posts are just meant for enthousiasts to give a handle to start with. It is not meant as a here you go a finished project. Also, when it’s as a finished project, the essence and the learning curve is skipped, which is the opposite of why i post it.

A bit nasty maybe :wink: but i am not uploading a finished project as I make money on software with the assembled code all together. This is just for those who like to investigate and with their own effort use it for their own implementations. It’s useless anyway if it’s a perfect working app, as this code is just showing how to use win32 api’s within Clarion. Just some example snippets only. I am not a good teacher as Jim Kane :wink: is he still around actually?

Hi Menno,

Understandable. I am glad you posted the text:smiley:

Take care

Thanks. Yes, my intention is mainly to give a hint to people what you can do more with Clarion.
I never used ABC templates or any template besides Capesoft tools. I use Clarion as a C++ environment more or less. WinApi32
That i wanted to put people in their face haha :wink:
Haha cheers :slight_smile: and its true, i dislike github and repositories…even OOP i dislike haha (too long with .NET c#) …i love spaghetti code goto !!! Loop break if then thats all :slight_smile: