Вопрос: Зачем это вообще нужно?

Ответ: Кто из вас знаком, знает и пользуется каскадными стилями? Почти никто, за исключением нескольких рук. С другой стороны, согласитесь, странно выглядит, у нас классическое приложение и тут пошли какие-то каскадные стили, но в целом понятие такое, что авторы, которые делали JavaFXотделили же в FXMLразработку внешнего вида. В отдельный файл все это положили, да. А ведь возьмите любой HTML-файл. Какая там сегодня идеология? Там HTMLдолжен сегодня что класть? Элементы. Бизнес логика в JavaScript. А внешний вид в каскадном стиле. Но это же тоже разделение, это тоже правильно. Поэтому раз они сказали: «давайте в отдельном файле будет пользовательский интерфейс, а контроллер с обработчиками и бизнес-логикой отдельно», то им ничего не оставалось, как добавить каскадные стили. Потому что, что такое FXML-файл? Разметка. А если я там начну писать цвета: «зеленый», «красный». Простите, а как я потом это буду менять? Опять открывать файл и читать по нему? А если у вас таким файлов 100 штук и вам нужно, чтобы все было в едином стиле? Понимаете, да? Эта проблема была давным-давно решена. А изобретать велосипед? Ну какой смысл? Они взяли версию каскадных стилей. Понятное дело, что они под себя ее доработали. Видите fx? Это естественно, некое расширение. Т.е. взяли синтаксис за основу, куда-то добавили свои расширения чтобы не конфликтовать со стандартами названий и атрибутов и всё. И прикрутили.

Кстати, интересна вторая строчка: Настройки по умолчанию.

Обратите внимание, что действительно есть каскадный стиль для JavaFXприложений. И мы с вами делали первые программы, которые никак не украшали общий вид. Согласитесь, что достаточно безлико выглядит. А это правильный подход. Если бы их дизайнеры в JavaFXнастроили вариант внешнего вида интерфейса броский и яркий, то согласитесь, что вашему дизайнеру и вашему пользователю это может не подойти хотя бы по корпоративному стилю. И первое, что стали делать – это изменять его. Поэтому их вариант такой – простенький и невнятный чтобы ничего не было. Есть такое даже название «Lookless», в общем неброский. И этот файлик можно посмотреть. Вот я путь прописал: https://docs.oracle.com/javafx/2/css_tutorial/jfxpub-css_tutorial.htm

Т.е. если интересно заглянуть, как у них все настроено, то в целом этот файлик можно взять за основу. Еще один плюс этого файлика. Дело в том, что если вы или ваши дизайнеры будут менять, то согласитесь, что вы должны все элементы управления сделать в едином стиле. Правильно? А иначе как это будет смотреться? В общем это будет выделяться на общем фоне. Скорее всего в этом файле вы увидите настройку всего. Поэтому возьмите его за основу, ничего не пропустите. Естественно, если вы будете разрабатывать что-то свое дополнительное, тогда там будут от вас какие-то дополнительные настройки. Вдруг вы сделаете какие-то свои собственные классы элементов. Ну это понятно. Это уже расширение. Это ваша задача.

Пункт №3.

Как именно добавлять мы не будем смотреть. Когда мы в проект добавим, руками это все напишем.

Пункт 5.

.root – означает что? Класс. Конечно, слово класс, звучит немножко странно. Те кто знают о чем идет речь – понимают меня. Это не ООП. Это просто набор элементов и его можно присвоить в htmlнекое имя.

Вот у нас есть например класс button. Вы можете его изменить. А вы можете пяти кнопкам свой класс присвоить в разметке. Вот оно там будет mybutton. Ну и отлично, значит этот стиль будет только для них.

Если имя начинается с решетки «#», то это по idшнику. Помните, что у нас вFXML есть idшники. Вы можете прямо конкретному элементу сказать: «вот твой вариант».

Ну и конечно последний – это кодом. Почему бы и нет? А вдруг вы хотите сделать какое-то визуальное переключение, но это нужно почему-то кодом сделать. Ради Бога! Конечно из кода вот так переключать туда и обратно я не стал бы. Это прошлый век. Дальше мы увидим нормальную анимацию. Там можно было бы грамотно и качественно поуправлять.

Итак! Создаем обычный JavaFX проект.

Создать -> Новый проект -> JavaFX -> JavaFX4 -> Готово

В этом проекте мы попытаемся сделать анимацию. А анимация делается программно. Ну вы уже поняли, что FXML – это работа для визуальной специальной среды. Напоминалка: делается через SceneBuilder. В FXML писать руками с т.з. программистского курса, как-то это не очень.

Итак, кнопочка здесь есть и пусть она работает.

Ну одной кнопочки что-то мало в этом интерфейсе. Текстовое поле надо бы какое-то добавить. В начала панель надо изменить. Как вы видите, StackPane не очень хорошо располагает – друг на дружке (стопочкой). А нам бы взять что? Что-нибудь попроще. Давайте возьмем «вертикальный бокс - VBOX»? Они тогда будут друг за дружкой расположены. Меняем StackPane на VBOX.

А теперь я могу писать «Добавить еще! Добавить еще!Добавить еще!Добавить еще!» и они друг за дружкой вниз пойдут. Ну то, что мы и хотели. Соответственно, надо бы отделить вот этот код, где создается сцена. Этот код я отправлю вниз. Это уже окончательная сборка. А вот сверху как раз мы будем создавать элементы управления. Кнопочка к сожалению на самом верху создается. После того как VBOXбыл создан, сейчас я создам еще пару элементов и, естественно, в этот контейнер мы их положим. А что у нас есть хорошего? Кстати, можно прямо у пакета Controlпоставить точку и посмотреть, что у нас есть хорошего?

Кстати, можно увидеть, что многие классы тут устарели. Нас устроит Labelи TextField. В Labelесть конструктор с параметрами и я могу сразу же задать на этой кнопке надпись «Testtext».

В Textfieldтакже есть конструктор с параметрами. Напишу там first name.

Ха! Как интересно! У нас текстовое поле заняло все отведенное место. Т.е. размер кнопочки определяется размером текста, размер labelопределяется текстом, а размер текстового поля определяется длиной окна. Вот такая по умолчанию настройка.

Для того чтобы это стало красивее, мы обращаемся к дизайнеру, дизайнер нам говорит: «вот, возьми. Пожалуйста, используй». В нашем случае дизайнернаходится в следующей папочке – смотрите. Если мы откроем папочку, где у нас лежит JavaFXи откроем «Пример 5», то мы увидим здесь два файлика. файл *.cssи какую-то *.jpgкартиночку.

А мы продолжаем наш проект JavaFX4. Копируем из пятого примера фотку *.jpg и файл *.css, но это мы делаем после того, как создана сцена. Ну а дальше идет то, что мы видели на слайде.

Внутри addмы должны указать имя этого файла, но мы же jar-архив поставляем, и у нас будет все внутри jar-архива. Поэтому jar-архив он будет загружен вместе с приложением. Т.е. он имеет имя, он загружается вместе с приложением. Поэтому этот ресурс вы должны тянуть, который лежит в jar-архиве. Соответственно, наше приложение называется «JavaFX4», т.е. в addпишем имя вашего класса. Далее ставим «точку» и выбираем слово class – это возможность получить описание метаданных. Дальше у класса ставим «точку» и здесь есть метод getResource, который позволяет добраться до этих самых ресурсов. А в getResourceвы и можете написать имя вашего файла. Уже лучше. Этот тип нужно преобразовать. Здесь есть такой специальный метод – toExternalForm(). После компиляции проекта файл будет частью ресурса проекта.

Так всё! Можно запускать и радоваться!

В общем каскадные стили подключились.

И если мы в каскадные стили заглянем, то мы, например, увидим, что у элемента labelвы видите настройки, а в rootдобавлена картинка. Соответственно, если какой-то элемент button, то у него тоже есть настройки. Кстати, мне последний нравится «.button:hover», т.е. когда вы мышкой наезжаете на кнопочку, там происходит изменение background. Это сделано для того чтобы… Если вы начали переопределять, то чтобы пользовать понимал, что кнопочка выбрана. А вот еще такая мелочь, но ее легко реализовать. У нас в каскадных стилях, если у элемента, допустим, idшник = text, то у него будут такие настройки. А у нас естественно idникто не имеет. Вы скажете: «а как мы сделаем id? у нас же не FXML». А всё, что можно сделать в FXML – всё можно сделать и руками. Поэтому мы берем объект label, находим у него setId() и задаем параметр text. Вот его Id.