SQLite3 Framework User Interface Generation using VCL

ab · 2011-03-24 21:13:09

Up to now, the User Interface part of our SQLite3 framework was using proprietary components from TMS software.
See http://www.tmssoftware.com

I've modified the source code so that standard VCL components will be used.
Together with our SynTaskDialog unit, you have a 100% Open Source solution for automated User Interface Generation.

I you paid the money for buying TMS components, you can still use them.
Just define the USETMSPACK conditional for your whole project.

Here is the screen content, using the TMS components:

And here is the new content, using only VCL components, available from Delphi 6 up to XE:

Of course, this is no exact replicate of the Office 2007/2010 Ribbon, but you've most functionalities:
- multiple pages - with one TSQLRecord table content per page, with a corresponding ribbon tab ('Audit trail', 'Memo', 'Data'...);
- multiple toolbars per page - with buttons and toolbar captions ('Data', 'Record management', 'Select', 'Settings');
- page groups above the tabs ('Main', 'Clear', 'Safe');
- global buttons, shared by all pages: the 'Help' button in this case.

Note that the form itself has no Caption bar.
It has some custom rendering, with nice minimize/maximize/close buttons on the upper right, and a caption.

I like the resulting rendering of those components.
The above screenshot was taken under Windows Seven. Of course, the layout will be diverse under XP, and under 2000. But you got the idea!

ab · 2011-03-26 14:04:06

There was a problem with my first implementation: the buttons in the toolbars were added in reverse order: from right to left!

No one did see this from the forum screenshot?

Now it's fixed and screens are almost the same.

ab · 2011-06-13 10:21:23

Here is an extract from the documentation:

User Interface generation

You could of course design your own User Interface without our framework.
That is, this is perfectly feasible to use only the ORM part of it. For instance, it should be needed to develop AJAX applications using its RESTful model, since such a feature is not yet integrated to our provided source code.

But for producing user-friendly rich applications, the framework provides a mechanism based on both ORM description and RTTI compiler-generated information in order to create most User Interface by code.

It is able to generated a Ribbon-based application, in which each table is available via a Ribbon tab, and some actions performed to it.

So the framework would need to know:
- Which tables must be displayed;
- Which actions should be associated with each table;
- How the User Interface should be customized (e.g. hint texts, grid layout on screen, reporting etc...);
- How generic automated edition, using the !TRecordEditForm!LibSQLite3UIEdit.pas unit, is to be generated.

To this list could be added an integrated event feature, which can be linked to actions and custom status, to provide a centralized handling of user-level loging (as used e.g. in the SynFile TSQLAuditTrail table) - please do not make confusion between this user-level logging and technical-level logging using TSynLog and TSQLLog classes and "families" - see 16.

Rendering

The current implementation of the framework User Interface generation handles two kind of rendering:
- Native VCL components;
- Proprietary TMS components.

You can select which set of components are used, by defining - globally to your project (i.e. in the Project/Options/Conditionals menu) - the USETMSPACK conditional. If it is not set (which is by default), it will use VCL components.

The native VCL components will use native Windows API components. So the look and feel of the application will vary depending on the Windows version it is running on. For instance, the resulting screen will be diverse if the application is run under Windows 2000, XP, Vista and Seven. The "ribbon" as generated with VCL components has most functionalities than the Office 2007/2010 ribbon, but will have a very diverse layout.

The TMS components will have the same rendering whatever the Windows it's running on, and will display a "ribbon" very close to the official Office 2007/2010 version.

Here are some PROs and CONs about both solutions:

Criteria VCL TMS
Rendering Basic Sophisticated
OS version Variant Constant
Ribbon look Unusual Office-like
Preview button & Shortcuts None by default Available
Extra Price None High
GPL ready Yes No
Office UI Licensing N/A Required
EXE size Smaller Bigger

It's worth saying that the choice of one or other component set could be changed on request. If you use the generic components as defined in SQLite3ToolBar (i.e. the TSynForm, TSynToolBar, TSynToolButton, TSynPopupMenu, TSynPage, TSynPager, TSynBodyPager and TSynBodyPage classes) and SynTaskDialog (for TSynButton) in your own code, the USETMSPACK conditional will do all the magic for you.

The Office UI licensing program was designed by Microsoft for software developers who wish to implement the Office UI as a software component and/or incorporate the Office UI into their own applications. If you use TMS ribbon, it will require acceptance of the Office UI License terms as defined at http://msdn.microsoft.com/en-us/office/aa973809.aspx

If you want to design your user interface using a Office 2007/2010 ribbon look, please take a look at those official guidelines: http://msdn.microsoft.com/en-us/library/cc872782.aspx

We didn't use yet the Ribbon component as was introduced in Delphi 2009. Its action-driven design won't make it easy to interface with the event-driven design of our User Interface handling, and we have to confess that this component has rather bad reputation (at least in the Delphi 2009 version). Feel free to adapt our Open Source code to use it - we'll be very pleased to release a new version supporting it, but we don't have time nor necessity to do it by ourself.

ab · 2011-06-13 10:32:38

The great Windows Ribbon Framework for Delphi won't fit our need of a on-the-fly generated Ribbon from code.
Its design, from the Microsoft implementation itself, is to create the UI from an XML resource, linked at compilation...

coblongpamor · 2012-04-28 05:07:15

In the project I was developing, there are many records to be displayed on the Ribbon.
So that not all records can appear on the screen (although there are navigation buttons (Prev Page and Next Page) on TSynPager).
TabGroup also not all can appear on the screen, because one group can have a lot of records.
The following fact what I need to my current project, which is associated with the Ribbon and ToolBar.
1. only associate records (TSynPage) which the group must be shown.
- Might be better if TopMostPanel replaced by TPageControl.
2. in particular TSQLRecordClass I also need to show a different behavior. Is there an easy way to override TSynBodyPager?
- for instance, I do not want to display data in a grid, but with PageControl.
3. I also need TSQLCustomToolBar can be placed on the TPanel or the other TWinControl class. But TSQLCustomToolBar.Init () does not allow it.

Thank you

ab · 2012-04-28 07:34:42

Thanks for your interest.

1. I do not get your point here.
What do you want to display?

2. and 3.
You can change the generated layout with your own, after creation.
2. Delete the grid component and the associated wrapper.
3. Change the parent.

If you can be more explicit about what you "want" to achieve, it would be easier for me to change the "how".

coblongpamor · 2012-04-28 16:45:07

sorry for the question is not so obvious.
to make no.1 and no.2 more clear, might be better if I make it directly on the form as follows:

object Form1: TForm1
  Left = 192
  Top = 124
  Width = 870
  Height = 552
  Caption = 'Form1'
  Color = clBtnFace
  Font.Charset = DEFAULT_CHARSET
  Font.Color = clWindowText
  Font.Height = -11
  Font.Name = 'MS Sans Serif'
  Font.Style = []
  OldCreateOrder = False
  PixelsPerInch = 96
  TextHeight = 13
  object pgc1: TPageControl
    Left = 0
    Top = 0
    Width = 854
    Height = 145
    ActivePage = ts1
    Align = alTop
    TabOrder = 0
    object ts1: TTabSheet
      Caption = 'Home'
      object pgc2: TPageControl
        Left = 0
        Top = 0
        Width = 846
        Height = 117
        ActivePage = ts6
        Align = alClient
        TabOrder = 0
        object ts6: TTabSheet
          Caption = 'Family Card'
        end
        object ts23: TTabSheet
          Caption = '...'
          ImageIndex = 1
        end
      end
    end
    object ts2: TTabSheet
      Caption = 'Regional'
      ImageIndex = 1
      object pgc3: TPageControl
        Left = 0
        Top = 0
        Width = 846
        Height = 117
        ActivePage = ts13
        Align = alClient
        TabOrder = 0
        object ts7: TTabSheet
          Caption = 'City'
        end
        object ts8: TTabSheet
          Caption = 'Country'
          ImageIndex = 1
        end
        object ts9: TTabSheet
          Caption = 'Province'
          ImageIndex = 2
        end
        object ts10: TTabSheet
          Caption = 'Regency'
          ImageIndex = 3
        end
        object ts11: TTabSheet
          Caption = 'Sub District'
          ImageIndex = 4
        end
        object ts12: TTabSheet
          Caption = 'Village'
          ImageIndex = 5
        end
        object ts13: TTabSheet
          Caption = 'Hamlet'
          ImageIndex = 6
        end
      end
    end
    object ts3: TTabSheet
      Caption = 'People'
      ImageIndex = 2
      object pgc4: TPageControl
        Left = 0
        Top = 0
        Width = 846
        Height = 117
        ActivePage = ts22
        Align = alClient
        TabOrder = 0
        object ts14: TTabSheet
          Caption = 'Address'
        end
        object ts15: TTabSheet
          Caption = 'Education'
          ImageIndex = 1
        end
        object ts16: TTabSheet
          Caption = 'Job'
          ImageIndex = 2
        end
        object ts17: TTabSheet
          Caption = 'People'
          ImageIndex = 3
        end
        object ts22: TTabSheet
          Caption = '...'
          ImageIndex = 4
        end
      end
    end
    object ts4: TTabSheet
      Caption = 'Identity'
      ImageIndex = 3
      object pgc5: TPageControl
        Left = 0
        Top = 0
        Width = 846
        Height = 117
        ActivePage = ts21
        Align = alClient
        TabOrder = 0
        object ts18: TTabSheet
          Caption = 'SIN'
        end
        object ts19: TTabSheet
          Caption = 'Passport'
          ImageIndex = 1
        end
        object ts20: TTabSheet
          Caption = 'KITAS'
          ImageIndex = 2
        end
        object ts21: TTabSheet
          Caption = '...'
          ImageIndex = 3
        end
      end
    end
    object ts5: TTabSheet
      Caption = 'Utility'
      ImageIndex = 4
      object pgc6: TPageControl
        Left = 0
        Top = 0
        Width = 846
        Height = 117
        ActivePage = ts24
        Align = alClient
        TabOrder = 0
        object ts24: TTabSheet
          Caption = 'Audit Trail'
        end
        object ts25: TTabSheet
          Caption = 'User Log'
          ImageIndex = 1
        end
        object ts26: TTabSheet
          Caption = 'Error Log'
          ImageIndex = 2
        end
        object ts27: TTabSheet
          Caption = '....'
          ImageIndex = 3
        end
      end
    end
  end
  object pgc7: TPageControl
    Left = 0
    Top = 145
    Width = 854
    Height = 369
    ActivePage = ts28
    Align = alClient
    TabOrder = 1
    object ts28: TTabSheet
      Caption = 'Family Card'
      object lbl2: TLabel
        Left = 0
        Top = 0
        Width = 846
        Height = 13
        Align = alTop
        Caption = 
          'If TSQLFamilyCard is Selected, i want to show User Interface thi' +
          's.'
      end
      object pgc8: TPageControl
        Left = 0
        Top = 13
        Width = 846
        Height = 328
        ActivePage = ts29
        Align = alClient
        TabOrder = 0
        object ts29: TTabSheet
          Caption = 'Family Card-1'
          object pnl1: TPanel
            Left = 0
            Top = 0
            Width = 838
            Height = 73
            Align = alTop
            Caption = 'pnl1'
            TabOrder = 0
            object lbl1: TLabel
              Left = 32
              Top = 48
              Width = 45
              Height = 13
              Caption = 'Patriarch:'
            end
            object lbledt1: TLabeledEdit
              Left = 128
              Top = 16
              Width = 121
              Height = 21
              EditLabel.Width = 94
              EditLabel.Height = 13
              EditLabel.Caption = 'Family Card Number'
              EditLabel.Transparent = True
              LabelPosition = lpLeft
              TabOrder = 0
            end
            object cbb1: TComboBox
              Left = 128
              Top = 40
              Width = 145
              Height = 21
              ItemHeight = 13
              TabOrder = 1
              Text = 'cbb1'
            end
          end
          object grp1: TGroupBox
            Left = 0
            Top = 73
            Width = 838
            Height = 227
            Align = alClient
            Caption = 'Family Member'
            TabOrder = 1
            object dg1: TDrawGrid
              Left = 2
              Top = 15
              Width = 834
              Height = 210
              Align = alClient
              TabOrder = 0
            end
          end
        end
        object ts30: TTabSheet
          Caption = 'Family Card-2'
          ImageIndex = 1
        end
        object ts31: TTabSheet
          Caption = 'Family Card-3'
          ImageIndex = 2
        end
        object ts32: TTabSheet
          Caption = 'Family Card-4'
          ImageIndex = 3
        end
        object ts33: TTabSheet
          Caption = 'Family Card-5'
          ImageIndex = 4
        end
        object ts34: TTabSheet
          Caption = '...'
          ImageIndex = 5
        end
      end
    end
  end
end

3. ok. i do as follow

var
  TB: TSQLCustomToolBar;
begin
  SynPager:= TSynPager.Create(Self);
  SynPager.Parent:= pnl2;
  SynPager.Align:= alClient;
  TB.Init(SynPager,TypeInfo(TFileAction),nil,il32,sFileActionsHints);
  TB.Page.PageControl:= SynPager;
  TB.AddToolBar('Record');

thank you.

mORMot Open Source

#1 2011-03-24 21:13:09