Кот в мешке

Механизм выбора стиля в приложениях, созданных в My Visual Database, напоминает покупку кота в мешке: до перезагрузки невозможно представить, как будет выглядеть программа с выбранным стилем. Несколько строчек кода помогут нам решить данную проблему.

Решение

К сожалению, визуализировать стиль программным способом не получится, но можно заранее приготовить изображения, на которых будут видны ключевые элементы интерфейса с применением выбранного стиля и отображать их синхронно со списком стилей.

Разместить картинки можно в той же папке, что и файлы стилей, с именами, совпадающими с названиями самих стилей. Также нужно добавить ещё одну картинку, на которой будет изображена программа без применения стиля (по умолчанию).

Скрипты

const
  STYLE_VIEWRE_FORM = 'frmStyleViewer';

procedure Style_StyleViewer;
// отображение формы просмотра и выбора стиля
var
  tmpForm: TForm;
  tmpList: TListBox;
  tmpImage: TImage;
  tmpPanel: TPanel;
  tmpButton: TdbButton;
  i: integer;
begin
  tmpForm := GetFormByName(STYLE_VIEWRE_FORM);
  if tmpForm = nil then
  begin
    tmpForm := TForm.Create(Application);
    with tmpForm do
    begin
      Name := STYLE_VIEWRE_FORM;
      Caption := R('STYLE_VIEWRE_FORM_CAPTION',STYLE_VIEWRE_FORM_CAPTION);
      Width := STYLE_VIEWRE_FORM_WIDTH;
      Height := STYLE_VIEWRE_FORM_HEIGHT;
      Position := poScreenCenter;
      Scaled := False;
      BorderStyle := bsSingle;
      BorderIcons := biSystemMenu;
      onShow := 'Style_StyleViewer_OnShow';
    end;
    // нижняя часть формы
    tmpPanel := TPanel.Create(tmpForm);
    with tmpPanel do
    begin
      Parent := tmpForm;
      Color := clGray;
      Height := 44;
      BorderWidth := 0;
      Align := alBottom;
    end;
    tmpButton := TdbButton.Create(tmpForm);
    AssignEvents(tmpButton);
    with tmpButton do
    begin
      Parent := tmpPanel;
      Name := 'btnCancel';
      Font.Name := 'Segoe UI';
      Font.Size := 11;
      Caption := R('BUTTON_CAPTION_CANCEL',BUTTON_CAPTION_CANCEL);
      dbActionType := adbCloseForm;
      Height := 36;
      Width := 109;
      Left := tmpPanel.Width - Width - 4;
      Top := 4;
      Anchors := akRight + akTop;
      Cancel := True;
      Default := False;
    end;
    Button_SetImage(tmpButton);
    //
    tmpButton := TdbButton.Create(tmpForm);
    AssignEvents(tmpButton);
    with tmpButton do
    begin
      Parent := tmpPanel;
      Name := 'btnSave';
      Font.Name := 'Segoe UI';
      Font.Size := 11;
      Caption := R('BUTTON_CAPTION_SAVE',BUTTON_CAPTION_SAVE);
      Height := 36;
      Width := 119;
      dbActionType := adbCloseForm;
      OnClick := 'Style_StyleViewer_btnSave_OnClick';
      Left := tmpPanel.Width - Width - 4 - 109 - 4;
      Top := 4;
      Anchors := akRight + akTop;
      Cancel := False;
      Default := True;
    end;
    Button_SetImage(tmpButton);
    // основная часть формы
    tmpPanel := TPanel.Create(tmpForm);
    with tmpPanel do
    begin
      Parent := tmpForm;
      BorderWidth := 0;
      Align := alClient;
    end;
    tmpList := TListBox.Create(tmpForm);
    with tmpList do
    begin
      Name := 'lstStyles';
      Font.Name := 'Segoe UI';
      Font.Size := 11;
      Parent := tmpPanel;
      Width := 200;
      Align := alLeft;

      for i := 0 to Length(arStyles) - 1 do
      begin
        Items.add( arStyles[i] );
      end;
      OnClick := 'Style_StyleViewer_ListOnClick';
    end;
    tmpImage := TImage.Create( tmpForm );
    with tmpImage do
    begin
      Parent := tmpPanel;
      Name := 'imgPreview';
      Align := alClient;
//      Stretch := True;
      Proportional := True;
      Center := True;
    end;
  end;
  FindC(tmpForm,'lstStyles',tmpList);
  for i:=0 to tmpList.Items.Count - 1 do
  begin
    if tmpList.Items.Strings[ i ] = currentStyleName then
    begin
      tmpList.ItemIndex := i;
      Style_StyleViewer_ListOnClick(tmpList); // загрузить картинку
      break;
    end
  end;
  tmpForm.ShowModal;
end;
Code language: Delphi (delphi)

Процедура Style_StyleViewer() служит для отображения формы просмотра и выбора стиля. Эта форма внешне напоминает форму редактирования: внизу расположена панель с кнопками “Сохранить” и “Отменить”, слева – список стилей, а посредине – изображение программы с выбранным стилем.

const
  STYLE_PREVIEW_EXT = '.png';

procedure Style_StyleViewer_ListOnClick(Sender: TObject);
// клик или выбор элемента списка стрелками клавиатуры
var
  tmpList: TListBox;
  tmpFileName: string;
  tmpStyleName: string;
  tmpForm: TForm;
  tmpImage: TImage;
begin
  CForm(Sender,tmpForm);
  tmpList := TListBox(Sender);
  tmpStyleName := tmpList.Items.Strings[ tmpList.ItemIndex ];
  tmpFileName := ExtractFilePath(Application.ExeName) + STYLE_DIR + tmpStyleName + STYLE_PREVIEW_EXT;
  FindC(tmpForm,'imgPreview',tmpImage);
  if not FileExists(tmpFileName) then
    tmpFileName := ExtractFilePath(Application.ExeName) + STYLE_DIR + 'default' + STYLE_PREVIEW_EXT;
  //
  tmpImage.Picture.LoadFromFile(tmpFileName);
end;
Code language: Delphi (delphi)

При выборе стиля в списке процедура Style_StyleViewer_ListOnClick() находит соответствующую картинку и загружает её для просмотра. Если картинка не найдена (что вполне ожидаемо для первого пункта в списке стилей), то имя картинки меняется на default.png

procedure Style_StyleViewer_btnSave_OnClick(Sender: TObject; var Cancel:boolean);
// сохранение и применение стиля
var
  tmpList: TListBox;
  tmpStyleName: string;
  tmpForm: TForm;
begin
  CForm(Sender,tmpForm);
  FindC(tmpForm,'lstStyles',tmpList);
  tmpStyleName := tmpList.Items.Strings[ tmpList.ItemIndex ];
  Style_SetStyle(tmpStyleName);
end;
Code language: Delphi (delphi)

При нажатии кнопки “Сохранить” происходит применение стиля посредством вызова процедуры Style_SetStyle().

Другие доработки

• Style_StyleViewer_OnShow() – отображение формы просмотра стиля, фокус на список
• Resource_CreateMenu() – добавлена опция, которая по умолчанию создает пункт выбора языка внутри пункта меню “Параметры”
• Style_AddToMenu() – создание пункта меню для интерактивного выбора стиля.
• Style_mniStyleViewer_OnClick() – обработчик пункта меню для вызова формы выбора стиля.
• Button_SetImage() – упрощенная процедура назначения картинки на кнопку
• english.txt, русский.txt – в файлы локализации ресурсов добавлены новые данные
• Добавлена иконка приложения ClassExplorer.ico, она встроена в ClassExplorer_.exe, так как файл ClassExplorer.exe будет перезаписываться каждый раз при изменении проекта.

Ссылки

• Проект “Руководство разработчика” v.1.8 с исходными кодами