5.4 Рекомендации и примеры

 
Избегайте ситуаций, когда размер ячейки лэйаута (высота или ширина) равен минимальному размеру вставленного в неё объекта. В этом случае возможна потеря связи     между объектом и ячейкой лэйаута.
 
Если у вас не получается уменьшить лэйаут на области редактирования, проверьте  зоны, размер которых указан в процентах от свободного пространства  лэйаута, поскольку уменьшение размера лэйаута возможно только за счёт уменьшения таких зон. Скорее всего     одна из этих зон достигла своего минимального размера (минимального возможного размера ячейки лэйаута — 2 пикселя, или     минимального размера объекта, вставленного в соответствующую ячейку лэйаута). 
Если при добавлении в лэйаут новой строки или столбца одна из зон, размер которой указан в     процентах от свободного пространства  лэйаута, достигла своего минимального размера,     размер лэйаута будет увеличен на 10 пикселей.

 

Как удалить шапку таблицы

 Чтобы убрать шапку у таблицы, достаточно отключить у неё свойство Полосы прокрутки . Кроме того, это приведёт к удалению границы объекта.

GUI Machine таблицы
Таблица без шапки

 

Полосы прокрутки

Будьте внимательны при использовании полос прокруток.
На рисунке ниже один и тот же лэйаут был запущен с выключенным (слева) и включенным (справа) свойством Полосы прокрутки.

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

Иногда возникают ситуации, когда необходимо, чтобы при включённых полосах прокрутки некоторые столбцы не увеличивались. Для того, чтобы столбец лэйаута не увеличивался, достаточно указать его размер в пикселях, а чтобы увеличивался — в процентах от свободного пространства лэйаута. Если необходимо, чтобы все столбцы лэйаута не увеличивались (но необходимо оставить один из столбцов лэйаута с размером, указанным в процентах от свободного пространства), добавьте пустой столбец минимального размера и назначьте ему все 100% свободного пространства.

GUI Machine лэйауты полосы прокрутки
Влияние полос прокрутки на вид лэйаута

 

Альтернативный способ выбора изображения

Наряду со стандартными способами существует альтернативный быстрый и удобный способ выбора изображений из ранее использованных:

  • щелкните по существующему изображению/объекту с изображением;
  • скопируйте или запомните значение свойства Изображение ;
  • вставьте скопированное значение (либо введите с клавиатуры) в свойство Изображение нового изображения/объекта.

Таким образом, вам не нужно искать изображение в списке ранее использованных, что очень удобно, особенно если у вас уже использовано большое количество изображений.

Как создать всплывающее окно

Для создания всплывающего окна добавьте на область редактирования Окно. В свойствах окна уберите флажок С оформлением   и установите Закрывать при потере фокуса . Теперь это окно при запуске будет выглядеть как pop-up окно (без оформления) и закрываться при потере фокуса, несмотря на то, что на области редактирования оно отображается с оформлением.

Пример: по нажатии на кнопку появляется всплывающее окно.

GUI Machine окна всплывающие окна
Просмотр всплывающего окна

Примечание: отключение оформления возможно только для стандартных окон, для окон Vaadin  такой возможности не предусмотрено.

Группировка объектов

Объекты типа Радиокнопка  и Западающая кнопка  можно объединять в группы. Для этого достаточно выделить группируемые объекты и ввести номер группы в свойство Группировка.
При просмотре объекты будут вести себя как группа:

  • Только один объект из группы может быть в состоянии выбран.
  • Перевод одного объекта группы в состояние выбран автоматически переводит все остальные объекты в состояние не выбран.
Как сделать текст одностроковым или многостроковым

Иногда возникает необходимость сделать текст текстового ярлыка многостроковым или одностроковым.

Для того, чтобы текст автоматически размещался на нескольких строчках, откройте свойство ярлыка Текст, в открывшемся окне перейдите на таб HTML-редактор . Текст будет заключён в HTML-теги  (увидеть их вы можете на табе HTML-код. После этого нажмите Сохранить. Текст, заключённый в HTML-тэги, отображается на нескольких строках. На рисунке 133 в первой строке лэйаута отображается текст без HTML, а на второй — с HTML-оформлением.

Возможна обратная ситуация, когда необходимо, чтобы текст, оформленный в HTML (например, подчёркнутый текст), отображался на одной строке. Откройте свойство ярлыка Текст, в открывшемся окне перейдите на таб HTML-код. Заключите текст в тэгиtext. На рисунке ниже на третьей строке лэйаута отображается текст с HTML оформлением на нескольких строках, а на последней — на одной строке.

GUI Machine лэйаут текст
Одностроковый и многостроковый текст

 

На вкладке HTML-код  вы можете использовать не только описанные выше теги, но и любые другие теги HTML. 
Операции над изображением на области редактирования

Для Изображения  на области редактирования доступны дополнительные операции:

  • уменьшение или увеличение размера объекта до размера изображения;
  • вращение изображения вокруг его центра.

Выполняются эти операции путем нажатия на кнопки над изображением:

GUI Machine изображения операции над изображением
Операции над изображением

 

Как создать границу для объекта/области

 качестве границы области можно использовать Панель . Для этого вставьте панель в нужную область, удалите значение свойства Заголовок границы, выберите подходящие тип, толщину и цвет границы (свойства Тип границы, Ширина границы и Цвет границы  соответственно). Теперь панель представляет собой границу.

Как сделать чекбокс в виде переключающихся кнопок

Для представления чекбокса в виде переключающихся иконок:

  • выберите изображение-аналог выбранного чекбокса в свойстве Изображение;
  • выберите изображение-аналог выбранного чекбокса в свойстве Изображение при выборе  ;
  • удалите значение свойства Текст .

Такой же алгоритм применим для Радиокнопки .
Для Западающей кнопки  помимо перечисленных шагов нужно отключить свойство С оформлением.

Копирование объектов с действиями

Для того, чтобы объекты были скопированы вместе с действиями, нужно выделить и скопировать объекты событий и объекты действий вместе.
Если будет скопирован только объект события или объект действия, то действие скопировано не будет.

Особенности работы с многоугольниками

Для добавления угла многоугольника нужно нажать на значок  , для удаления угла — щелкнуть по углу с зажатой клавишей Ctrl, для перемещения угла — перетащить точку угла. Для того, чтобы точку угла можно было перемещать не только по краям объекта, но и внутри него, отключите свойство Привязывать точки к сторонам .

Для искривления сторон многоугольника нужно отключить свойство  Привязывать точки к сторонам  и передвинуть точку угла с зажатой клавишей Shift.

GUI Machine многоугольник искривление сторон
Искривление сторон многоугольника

 

Как добавить в окно меню

Для добавления в окно меню предусмотрено 2 способа:

  • На области редактирования вызовите контекстное меню окна и выберите пункт Выбрать меню окна  , после чего кликните левой кнопкой мыши по меню, которое должно быть вставлено в окно.
  • В свойствах окна выберите свойство  Меню окна, в открывшемся дереве объектов выберите меню, которое должно быть вставлено в окно.

После этого установите всплывающие меню для каждого пункта меню, для этого также предусмотрено 2 способа:

  • Щелкните по пункту меню, для которого требуется выбрать всплывающее меню, правой кнопкой мыши и в контекстном меню выберите пункт выбрать всплывающее меню для пункта , после чего щелкните левой кнопкой мыши по нужному всплывающему меню.

В Pедакторе меню у пункта меню, для которого требуется выбрать всплывающее меню, выберите столбец Всплывающее меню и нажмите на кнопку .  В открывшемся дереве объектов выберите нужное всплывающее меню.

Для удаления связи между меню и окном вызовите контекстное меню окна и выберите пункт меню Отвязать меню от окна . Также можно выбрать другое меню для окна, выбрав в контекстном меню пункт Поменять меню окна.

Как создать окно нестандартной формы

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

  • добавить окно на область редактирования;
  • в свойствах окна снять флажки С оформлением и Непрозрачный.
GUI Machine, окна, окна нестандартной формы, свойства окна
Настройка свойств окна
  • выбрать необходимую фигуру в меню Фигуры;
  • в свойствах фигуры в поле Передвигает окно задать область передвижения:
GUI Machine, фигуры, настройки, свойства фигур
Настройка свойств фигуры
  • перетащить мышью фигуру на область окна.

При запуске просмотра окна оно примет форму заданной фигуры.  В окно нестандартной формы могут быть добавлены любые другие компоненты.

Перейти на сайт GUI Machine Suffusion theme by Sayontan Sinha