FNC Ribbon Webcore

FNC TMS FNC UI Pack
1

I finished my ribbon design in VCL and created a webcore app where I want to reproduce parts of the VCL app including the ribbon. I was stunned that I could copy components from VCL to WebCore including the bitmap container. Also the code that creates the ribbon items (i did everything by code) compiles. Unfortunately it does not work as desired:


  1. Layout is broken
  2. Images do not display (although I renamed everything to match the code)
  3. Tabs headers disappear if an other tab is displayed
Perhaps I have forgotten something very basic but I just don't see it. Any help is very appreaciated!

Thanks

Michael


2

Hi,


In some cases you can copy paste every part from VCL to WEB Core, but in case of the Ribbon, it's complexity at designtime differs from handling this in WEB Core, therefore I suggest to start with a new project and drop a fresh instance of the TTMSFNCRibbon on the form. The BitmapContainer should indeed be transferable.
3

Thanks, now the ribbon is displayed but still the images won't display. I inserted everything manually into a new application, also the bitmap container and in chrome I can see all images are loaded (they have different names, though). The code references them with the name that is displayed in the container. Also Chrome does not display any errors in the JS code or missing files.

4

Did you assign the bitmapcontainer to the ribbon and/or buttons? When copying an instance of the TTMSFNCBitmapContainer, the references are not automatically copied, thus the BitmapContainer is not automatically assigned to the bitmapcontainer property of the ribbon.

5

I create all Items in Code like this:


  function addBtn(const caption, img: String; large: boolean = true; toolbutton: boolean = false): TTMSFNCRibbonToolBarButton;
  begin
    result := tb.AddButton;
    with result do
    begin
      BitmapContainer := bmpContainer;
      Bitmaps.AddBitmapName('icons8_' + img + '18px.png');
      // Toolbuttons have no caption but fixed size e.g. alignment, font attributes
      if toolbutton then
      begin
        result.Width := btnw;
        result.height := btnh;
      end
      else
      begin
        // all other buttons
        Text := caption;
        AutoBitmapSize := true;
        LargeLayoutBitmaps.AddBitmapName('icons8' + img + '_36px.png');
        LargeLayoutAutoBitmapSize := true;
        if large then
        begin
          Layout := bblLarge;
          MinimumLayout := bblLarge;
        end
        else
        begin
          Layout := bblLabel;
          MaximumLayout := bblLabel;
        end;
        result.font.size := rb.font.size;
        result.font.name := rb.font.name;
      end;
    end;
  end;

  procedure addSection(index: integer; const caption: String);
  begin
    tb := rbPageControl.PageContainers[index].AddToolBar(caption);
    tb.font.name := rb.font.name;
    tb.font.size := rb.font.size;
  end;

...


    addPage('Datei').ShortCutHint := 'D';
    addPage('Start').ShortCutHint := 'P';
   // rbPageControl.PageContainers[1].OnClick := PatientPageClick;
    addPage('Management').ShortCutHint := 'M';
    addPage('Dokument').ShortCutHint := 'T';
    addPage('Formatierung').ShortCutHint := 'F';
    addPage('Administration').ShortCutHint := 'A';
    addPage('Hilfe').ShortCutHint := 'H';

    addSection(0, '');

    btn := addBtn('Info-Zentrum', 'Info');
    btn := addBtn('Abmelden', 'Logout_Rounded_Left', false);
    btn := addBtn('Beenden', 'Shutdown', false);
    addSection(0, '');
    btn := addBtn('Über EMIL', 'About');
...

Also, I assigned the biotmap container to the page controller but this did not change anything. In VCL this code works well. Is there any other difference I have to take care of?

Thanks
Michael
6

Hi,


Thank you for the code snippet. We have investigated this here and the issue is that the image is loaded asynchronously and the BitmapVisible property is never set to true automatically in TMS WEB Core. In VCL, this is automatically set to true whenever a bitmap is detected, therefore in VCL the above code works as expected. To workaround this for TMS WEB Core, an additional line needs to be added to your code. This can also be applied to VCL.


BitmapVisible := True;
Pieter Scheldeman2019-03-26 20:13:35
7

Thanks a lot, I will try that. Could you perhaps give me a hint where in the ribbon code the text width is calculated that I can adapt for the larger font on my own until you integrate that? I searched for textwidth but to no avail.

As I have a presentation of the planned layout soon, This would be great.



Thanks

Michael

8

I found a first workaround by patching VCL.TMSFNCGraphics in Line 2697: 


I Inserted

Result.cx := Result.cx * 1.2;

The result is not optimal but text is complete.

Perhaps you could expose a global factor that can be set for this purpose in one of the next versions.
9

Hi,


We'll investigate the possibilities