Difference between revisions of "Anchor Docking Step by step example/ru"

From Lazarus wiki
Jump to navigationJump to search
(7 intermediate revisions by the same user not shown)
Line 27: Line 27:
 
С панелью инструментов (Toolbar), инструментами (Tools) (несколько страниц), «Вывода сообщений» ( Output Messages) все части становятся «пристыковываемыми» (dockable). Поскольку механизм "drag-and-drop" еще не реализован, я не собираюсь пытаться добавить функциональность для перемещения частей. (Компиляция примера показывает, как это можно сделать) ... Этот проект будет лишь демонстрировать состояние «закреплено» или «не закреплено» для каждой из этих частей. (Этот проект может быть выполнен только с панелями.)
 
С панелью инструментов (Toolbar), инструментами (Tools) (несколько страниц), «Вывода сообщений» ( Output Messages) все части становятся «пристыковываемыми» (dockable). Поскольку механизм "drag-and-drop" еще не реализован, я не собираюсь пытаться добавить функциональность для перемещения частей. (Компиляция примера показывает, как это можно сделать) ... Этот проект будет лишь демонстрировать состояние «закреплено» или «не закреплено» для каждой из этих частей. (Этот проект может быть выполнен только с панелями.)
  
= Step 1: Create the main page =
+
= Шаг 1: Создание главной страницы =
  
In essence, we'll just be creating a new form, adding a main menu to the form, and then adding the dockmanager to the form. I also add a stringgrid just to show what it will look like.
+
По сути, мы просто создадим новую форму, добавим в форму главное меню, а затем добавим в форму dockmanager. Я также добавляю stringgrid, чтобы показать, как она будет выглядеть.
  
* Create a new project
+
* Создайте новый проект
* In Lazarus go to File -> New ... -> Select "Application"
+
* В Lazarus перейдите в File -> New ... -> Выберите "Application"  
* The first form (unit1.pas) will be the "Main Application" part.
+
* Первая форма (unit1.pas) будет частью "Main Application".  
** Drop a TMainMenu component onto the form
+
** Перетащите компонент TMainMenu на форму.
*** Double click on the TMainMenu component, and create:
+
*** Дважды щелкните компонент TMainMenu и создайте:  
**** Main - File
+
**** Main - File  
**** FileSub - Exit
+
**** FileSub - Exit  
 
**** Main - Windows  
 
**** Main - Windows  
**** WindowsSub - Dock/Undock Active Window (add a shortcut to F11 - so that we can have )
+
**** WindowsSub - Dock/Undock Active Window (Пристыковать/Отстыковать активное окно) (добавьте шоткат к F11 - чтобы он был у нас)  
**** WindowsSub - Save Window Positions
+
**** WindowsSub - Save Window Positions (Сохранить позиции окна)
** Create an "OnCreate" event for the Form
+
** Создайте событие «OnCreate» для формы
*** Select the form in the form designer
+
*** Выберите форму в конструкторе форм
*** In the object inspector, click the "events" tab, and double click the "OnCreate" event
+
*** В инспекторе объектов перейдите на вкладку "events" (события) и дважды щелкните событие «OnCreate»
** Create the docking manager
+
** Создайте диспетчер стыковки
*** Add this code to the OnCreate event: `'''DockingManager:=TLazDockingManager.Create(Self);'''`
+
*** Добавьте этот код в событие OnCreate: `'''DockingManager:=TLazDockingManager.Create(Self);'''`
*** Add the dockmanager variable to the main form's class.
+
*** Добавьте переменную dockmanager к классу основной формы.  
**** Press Ctrl-Shift-Up (this will take you to the OnCreate event's definition in the form's class
+
**** Нажмите {{keypress|Ctrl}}+{{keypress|Shift}}+{{keypress|Up}} (это приведет вас к определению события OnCreate в классе формы.)
**** Add this code to the Form's '''public''' class definition : `'''DockingManager : TLazDockingManager;'''`
+
**** Добавьте этот код в определение класса раздела '''public''': `'''DockingManager: TLazDockingManager; '''`
** Add the Docking unit and the XMLPropStorage to the uses section,  
+
** Добавьте модуль стыковки и XMLPropStorage в раздел uses,  
*** Scroll up to the uses section
+
*** Прокрутите редактор кода до раздела uses  
*** Add `''', LDockCtrl, XMLPropStorage'''` to the uses section
+
*** Добавьте `''', LDockCtrl, XMLPropStorage'''` в раздел uses  
** Now we'll just add stuff to make it look like an application
+
** Теперь мы просто добавим материал, чтобы он выглядел как приложение
*** Add a StringGrid component
+
*** Добавьте компонент StringGrid  
**** Make '''Align = Client''' in the object inspector
+
**** Сделайте '''Align = Client''' в инспекторе объектов
  
= Step 2: Create our tool bar =
+
= Шаг 2: Создание своей панели инструментов =
  
I'm not going to pretend that I know how to create a proper toolbar... ala excel or even open office's stuff. So I'll just create a form with speed buttons that are all left aligned, and add some icons to it. Also add the dock control to it.
+
Я не собираюсь притворяться, что знаю, как создать правильную панель инструментов ... аля excel или что-то в стиле Офиса ([[user:zoltanleo|прим.перев.]]: очевидно, имеется ввиду M$Office). Поэтому я просто создам форму со speedbutton'ами, которые выровнены по левому краю, и добавлю к ней несколько значков. Также добавьте к нему элемент управления док-станцией.
  
* Create a new form (File -> New Form)
+
* Создайте новую форму (File -> New Form)  
** Resize it to look "realistic" in size. Mine's height is 61.
+
** Измените ее размер так, чтобы она выглядела «реалистично» по размеру. Высота - 61.  
** Add some load/save buttons to it (add some icons too, if you like) and '''Align = Left''' them. I added a Load and Save speedbuttons, got some glyphs from Lazarus/images/menu. In my other project I've added a new panel, and put in a combobox there. Do what you want!
+
** Добавьте к ней несколько кнопок загрузки/сохранения (добавьте несколько значков, если хотите) и '''Align = Left''' для них. Я добавил speedbuttons Load и Save, получил несколько глифов из ''Lazarus/images/menu''. В моем другом проекте я добавил новую панель и поместил туда combobox. Делай что хочешь!  
** Add the control docker
+
** Добавьте панель управления.
*** On the OnCreate event add:  
+
*** В событие OnCreate добавьте:
 
<syntaxhighlight lang=pascal>
 
<syntaxhighlight lang=pascal>
 
     ControlDocker1:=TLazControlDocker.Create(Self);
 
     ControlDocker1:=TLazControlDocker.Create(Self);
Line 70: Line 70:
 
     ControlDocker1.Manager:=Form1.DockingManager;
 
     ControlDocker1.Manager:=Form1.DockingManager;
 
</syntaxhighlight>
 
</syntaxhighlight>
** Add the appropriate units to the uses part. ('''unit1, LDockCtrl''')
+
** Добавьте соответствующие модули в раздел uses. ('''unit1, LDockCtrl''')  
** Add the variable to the Form's '''public''' class definition: '''ControlDocker1 : TLazControlDocker;'''
+
** Добавьте переменную в раздел '''public''' определения класса формы: '''ControlDocker1: TLazControlDocker;'''
  
= Step 3: Our tools pages =  
+
= Шаг 3: Наши страницы инструментов =  
 +
Мы просто создадим 2 разные формы, которые ''узнаваемо'' отличаются друг от друга. И добавьте к нему элемент управления док-станцией. Сделайте следующее дважды:
  
We'll just create 2 different forms which are ''identifiably'' different from each other. And add the dock control to it.
+
* Создайте новую форму (File -> New Form)  
Do the following twice:
+
** Измените ее размер, чтобы она выглядела «реалистично» по размеру. (Я только что сделал это около 150 px в ширину)  
 
+
** Обозначьте ее. (Я помещаю на нее label, где пишу "окно инструментов" 1 и 2).
* Create a new form (File -> New Form)
+
** Добавьте панель управления.
** Resize it to look "realistic" in size. (I just made it about 150 wide)
+
*** В событии OnCreate добавьте:
** Identify it. (I put a label on, saying tool window 1 and 2)
 
** Add the control docker
 
*** On the OnCreate event add:
 
 
<syntaxhighlight lang=pascal>  
 
<syntaxhighlight lang=pascal>  
 
     ControlDocker1:=TLazControlDocker.Create(Self);
 
     ControlDocker1:=TLazControlDocker.Create(Self);
     ControlDocker1.Name:='Toolwindow1Form';  // (or 2 for the second one)
+
     ControlDocker1.Name:='Toolwindow1Form';  // (или 2 для второго)
 
     ControlDocker1.Manager:=Form1.DockingManager;
 
     ControlDocker1.Manager:=Form1.DockingManager;
 
</syntaxhighlight>
 
</syntaxhighlight>
*** Add the appropriate units to the uses part. ('''unit1, LDockCtrl''')
+
** Добавьте соответствующие модули в разделе uses('''unit1, LDockCtrl''')  
*** Add the variable to the Form's '''public''' class definition: '''ControlDocker1 : TLazControlDocker;'''
+
** Добавьте переменную в разделе '''public''' определния класса формы: '''ControlDocker1: TLazControlDocker;'''
  
= Step 4: Our Message window =
+
= Шаг 4: Наше Окно Сообщений =
  
Just our last form... The output form. Follow the same steps as before...
+
Просто наша последняя форма ... Форма вывода. Выполните те же действия, что и раньше ...  
  
* Create a new form (File -> New Form)
+
* Создайте новую форму (File -> New Form)  
** Resize it to look "realistic" in size. (I just made it about 100 high, and quite wide)
+
** Измените ее размер, чтобы она выглядела "реалистично" по размеру. (Я только что сделал его около 100 px высотой и довольно широким)  
** Add a memo component, and '''align = client'''
+
** Добавьте компонент memo, и выровняйте  '''align = client'''  
** Add the control docker
+
** Добавьте control docker  
*** On the OnCreate event add:  
+
*** В событии OnCreate добавьте:
 
<syntaxhighlight lang=pascal>
 
<syntaxhighlight lang=pascal>
 
     ControlDocker1:=TLazControlDocker.Create(Self);
 
     ControlDocker1:=TLazControlDocker.Create(Self);
     ControlDocker1.Name:='OutputForm';  // (or 2 for the second one)
+
     ControlDocker1.Name:='OutputForm';  // (или 2 для второго)
 
     ControlDocker1.Manager:=Form1.DockingManager;
 
     ControlDocker1.Manager:=Form1.DockingManager;
 
</syntaxhighlight>
 
</syntaxhighlight>
*** Add the appropriate units to the uses part. ('''unit1, LDockCtrl''')
+
** Добавьте соответствующие модули в разделе uses('''unit1, LDockCtrl''')  
*** Add the variable to the Form's '''public''' class definition: '''ControlDocker1 : TLazControlDocker;'''
+
** Добавьте переменную в разделе '''public''' определния класса формы: '''ControlDocker1: TLazControlDocker;'''
  
= Step 5: Putting it all together =
+
= Шаг 5: Собираем все вместе =
  
Now we'll just add everything together on the mainform... and see how it comes out.
+
Теперь мы просто добавим все вместе в основную форму ... и посмотрим, что из этого получится.
  
* Add all the units to the uses section in your main unit. ('''unit2, unit3, unit4, unit5'''
+
* Добавьте все модули в раздел об использовании вашего основного модуля. ('''unit2, unit3, unit4, unit5''')
* Next, we'll want to add it to the docking manager... but the problem is that the forms are not created yet at the "OnCreate" event for the main form. So, I'll move the "assigning" of the docking to the "OnActivate" event, and just set a flag that it's been done (so it doesn't do it again)
+
* Далее мы хотим добавить это в диспетчер стыковки ... но проблема в том, что формы еще не созданы в событии "OnCreate" основной формы. Итак, я перенесу «присвоение» свойств окнам пристыковки на событие «OnActivate» и просто установлю флаг, что это было сделано (чтобы он не делал это снова)  
* So: Add an Initialized variable to form1's class: '''Initialized : boolean;'''
+
* Итак: добавьте переменную Initialized в класс form1: '''Initialized: boolean;'''  
* At OnCreate we'll set it to "False", and then set it to true during the OnActivate Method.
+
* В OnCreate мы установим ее значение в «False», а затем установим в «True» во время метода OnActivate.  
* The current "OnActivate" method.
+
* Текущий метод «OnActivate».
 
<syntaxhighlight lang=pascal>
 
<syntaxhighlight lang=pascal>
 
procedure TForm1.FormActivate(Sender: TObject);
 
procedure TForm1.FormActivate(Sender: TObject);
Line 122: Line 120:
 
   if initialized then exit;
 
   if initialized then exit;
 
   Initialized := true;
 
   Initialized := true;
   // Sets the toolbaar to the top
+
   // Устанавливаем панель инструментов вверху
 
   DockingManager.Manager.InsertControl(Form2,alTop,Form1);
 
   DockingManager.Manager.InsertControl(Form2,alTop,Form1);
 
    
 
    
   // Set the tool window to the left
+
   // Устанавливаем окно инструментов слева
 
   DockingManager.Manager.InsertControl(Form3,alLeft,Form1);
 
   DockingManager.Manager.InsertControl(Form3,alLeft,Form1);
 
    
 
    
   // Set the second tool window IN the first
+
   // Устанавливаем второе окно инструментов ВНУТРИ первого
 
   DockingManager.Manager.InsertControl(Form4,alClient,Form3);
 
   DockingManager.Manager.InsertControl(Form4,alClient,Form3);
 
    
 
    
   // Set the second Message Control to the bottom
+
   // Устанавливаем второй элемент управления сообщениями снизу
 
   DockingManager.Manager.InsertControl(Form5,alBottom,Form1);
 
   DockingManager.Manager.InsertControl(Form5,alBottom,Form1);
 
end;
 
end;
 
</syntaxhighlight>
 
</syntaxhighlight>
 
  
 
= Отладка =
 
= Отладка =
  
This did not work 100% as expected.
+
Это не сработало на 100%, как ожидалось.  
  
Stuff that worked as expected:
+
Вещи, которые заработали, как ожидалось:  
# The Toolbar looked correct and awesome
+
# Панель инструментов выглядела правильно и потрясающе
# The Tool Windows' width was as expected
+
# Ширина окна инструмента была ожидаемой
  
Stuff that didn't work as expected:
+
Вещи, которые не сработали должным образом:  
# The Second tool window didn't work properly, there was a page control, but the second page wasn't assigned, and the first page had the SECOND tool window assigned
+
# Второе окно инструментов не работало должным образом, там был page control, но вторая страница не была назначена, а первой странице было назначено ВТОРОЕ окно инструментов
# The Main Menu was missing
+
# Главное меню отсутствовало
# The Memo was gone... though Form5 was there (maybe not? the "title" didn't read "Form5")
+
# Memo исчезло ... хотя форма Form5 была там (может, нет? "title" не прочитан "Form5")  
# Form5 took over all the space that was meant for the main application. Probably adding constraints to the main window would help.
+
# Form5 занял все пространство, предназначенное для основного приложения. Возможно, исправит ситуацию добавление ограничений в главное окно.
  
 
[[Category:Docking]]
 
[[Category:Docking]]

Revision as of 09:34, 7 November 2019

Template:MenuTranslate

Anchor Docking : Пошаговый пример

Warning-icon.png

Предупреждение: ЭТОТ ПРИМЕР РАБОТАЕТ НЕ НА 100%, КАК БЫЛО ЗАДУМАНО. См. раздел Отладка для получения дополнительной информации.

У нас теперь есть мануал по anchor docking ... но я знаю, что люди учатся на методом тыка, а не посредством чтения ... итак, давайте делать это.

Сначала я создам новое приложение с нуля, а затем (надеюсь) мы увидим, сможем ли мы "преобразовать" в него существующее приложение (которое работало по старому способу выравнивания "Panel").

Для первого проекта я создам приложение, которое должно выглядеть так:

 +-----------------------------+
 | Main menu                   |
 +-----------------------------+
 | Toolbar (open, save etc.)   |
 +-----+-----------------------+
 | __= |                       |
 |     |                       |
 |  T  |   Main Application    |
 |  o  |                       | 
 |  o  |                       |
 |  l  +-----------------------+
 |  s  |   Output Messages     |
 +-----+-----------------------+

С панелью инструментов (Toolbar), инструментами (Tools) (несколько страниц), «Вывода сообщений» ( Output Messages) все части становятся «пристыковываемыми» (dockable). Поскольку механизм "drag-and-drop" еще не реализован, я не собираюсь пытаться добавить функциональность для перемещения частей. (Компиляция примера показывает, как это можно сделать) ... Этот проект будет лишь демонстрировать состояние «закреплено» или «не закреплено» для каждой из этих частей. (Этот проект может быть выполнен только с панелями.)

Шаг 1: Создание главной страницы

По сути, мы просто создадим новую форму, добавим в форму главное меню, а затем добавим в форму dockmanager. Я также добавляю stringgrid, чтобы показать, как она будет выглядеть.

  • Создайте новый проект
  • В Lazarus перейдите в File -> New ... -> Выберите "Application"
  • Первая форма (unit1.pas) будет частью "Main Application".
    • Перетащите компонент TMainMenu на форму.
      • Дважды щелкните компонент TMainMenu и создайте:
        • Main - File
        • FileSub - Exit
        • Main - Windows
        • WindowsSub - Dock/Undock Active Window (Пристыковать/Отстыковать активное окно) (добавьте шоткат к F11 - чтобы он был у нас)
        • WindowsSub - Save Window Positions (Сохранить позиции окна)
    • Создайте событие «OnCreate» для формы
      • Выберите форму в конструкторе форм
      • В инспекторе объектов перейдите на вкладку "events" (события) и дважды щелкните событие «OnCreate»
    • Создайте диспетчер стыковки
      • Добавьте этот код в событие OnCreate: `DockingManager:=TLazDockingManager.Create(Self);`
      • Добавьте переменную dockmanager к классу основной формы.
        • Нажмите Ctrl+ Shift+ (это приведет вас к определению события OnCreate в классе формы.)
        • Добавьте этот код в определение класса раздела public: `DockingManager: TLazDockingManager; `
    • Добавьте модуль стыковки и XMLPropStorage в раздел uses,
      • Прокрутите редактор кода до раздела uses
      • Добавьте `, LDockCtrl, XMLPropStorage` в раздел uses
    • Теперь мы просто добавим материал, чтобы он выглядел как приложение
      • Добавьте компонент StringGrid
        • Сделайте Align = Client в инспекторе объектов

Шаг 2: Создание своей панели инструментов

Я не собираюсь притворяться, что знаю, как создать правильную панель инструментов ... аля excel или что-то в стиле Офиса (прим.перев.: очевидно, имеется ввиду M$Office). Поэтому я просто создам форму со speedbutton'ами, которые выровнены по левому краю, и добавлю к ней несколько значков. Также добавьте к нему элемент управления док-станцией.

  • Создайте новую форму (File -> New Form)
    • Измените ее размер так, чтобы она выглядела «реалистично» по размеру. Высота - 61.
    • Добавьте к ней несколько кнопок загрузки/сохранения (добавьте несколько значков, если хотите) и Align = Left для них. Я добавил speedbuttons Load и Save, получил несколько глифов из Lazarus/images/menu. В моем другом проекте я добавил новую панель и поместил туда combobox. Делай что хочешь!
    • Добавьте панель управления.
      • В событие OnCreate добавьте:
     ControlDocker1:=TLazControlDocker.Create(Self);
     ControlDocker1.Name:='ToolbarForm';
     ControlDocker1.Manager:=Form1.DockingManager;
    • Добавьте соответствующие модули в раздел uses. (unit1, LDockCtrl)
    • Добавьте переменную в раздел public определения класса формы: ControlDocker1: TLazControlDocker;

Шаг 3: Наши страницы инструментов

Мы просто создадим 2 разные формы, которые узнаваемо отличаются друг от друга. И добавьте к нему элемент управления док-станцией. Сделайте следующее дважды:

  • Создайте новую форму (File -> New Form)
    • Измените ее размер, чтобы она выглядела «реалистично» по размеру. (Я только что сделал это около 150 px в ширину)
    • Обозначьте ее. (Я помещаю на нее label, где пишу "окно инструментов" 1 и 2).
    • Добавьте панель управления.
      • В событии OnCreate добавьте:
 
     ControlDocker1:=TLazControlDocker.Create(Self);
     ControlDocker1.Name:='Toolwindow1Form';  // (или 2 для второго)
     ControlDocker1.Manager:=Form1.DockingManager;
    • Добавьте соответствующие модули в разделе uses(unit1, LDockCtrl)
    • Добавьте переменную в разделе public определния класса формы: ControlDocker1: TLazControlDocker;

Шаг 4: Наше Окно Сообщений

Просто наша последняя форма ... Форма вывода. Выполните те же действия, что и раньше ...

  • Создайте новую форму (File -> New Form)
    • Измените ее размер, чтобы она выглядела "реалистично" по размеру. (Я только что сделал его около 100 px высотой и довольно широким)
    • Добавьте компонент memo, и выровняйте align = client
    • Добавьте control docker
      • В событии OnCreate добавьте:
     ControlDocker1:=TLazControlDocker.Create(Self);
     ControlDocker1.Name:='OutputForm';  // (или 2 для второго)
     ControlDocker1.Manager:=Form1.DockingManager;
    • Добавьте соответствующие модули в разделе uses(unit1, LDockCtrl)
    • Добавьте переменную в разделе public определния класса формы: ControlDocker1: TLazControlDocker;

Шаг 5: Собираем все вместе

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

  • Добавьте все модули в раздел об использовании вашего основного модуля. (unit2, unit3, unit4, unit5)
  • Далее мы хотим добавить это в диспетчер стыковки ... но проблема в том, что формы еще не созданы в событии "OnCreate" основной формы. Итак, я перенесу «присвоение» свойств окнам пристыковки на событие «OnActivate» и просто установлю флаг, что это было сделано (чтобы он не делал это снова)
  • Итак: добавьте переменную Initialized в класс form1: Initialized: boolean;
  • В OnCreate мы установим ее значение в «False», а затем установим в «True» во время метода OnActivate.
  • Текущий метод «OnActivate».
procedure TForm1.FormActivate(Sender: TObject);
begin
  if initialized then exit;
  Initialized := true;
  // Устанавливаем панель инструментов вверху
  DockingManager.Manager.InsertControl(Form2,alTop,Form1);
  
  // Устанавливаем окно инструментов слева
  DockingManager.Manager.InsertControl(Form3,alLeft,Form1);
  
  // Устанавливаем второе окно инструментов ВНУТРИ первого
  DockingManager.Manager.InsertControl(Form4,alClient,Form3);
  
  // Устанавливаем второй элемент управления сообщениями снизу
  DockingManager.Manager.InsertControl(Form5,alBottom,Form1);
end;

Отладка

Это не сработало на 100%, как ожидалось.

Вещи, которые заработали, как ожидалось:

  1. Панель инструментов выглядела правильно и потрясающе
  2. Ширина окна инструмента была ожидаемой

Вещи, которые не сработали должным образом:

  1. Второе окно инструментов не работало должным образом, там был page control, но вторая страница не была назначена, а первой странице было назначено ВТОРОЕ окно инструментов
  2. Главное меню отсутствовало
  3. Memo исчезло ... хотя форма Form5 была там (может, нет? "title" не прочитан "Form5")
  4. Form5 занял все пространство, предназначенное для основного приложения. Возможно, исправит ситуацию добавление ограничений в главное окно.