할 일

이전에 VSCode에서 JavaFX를 개발할 환경을 마련했습니다.
그 때의 기사는 이쪽입니다.
JavaFX15를 도입하여 VSCode에서 GUI 개발하기

이번은 그 계속으로 SceneBuilder를 도입하고 싶습니다.

SceneBuilder란?
JavaFX로 UI 디자인을 할 때 편리한 디자인 툴.

뿐만 아니라 이번에는 VSCode에서 FXML 파일에서 직접 SceneBuilder를 여는 설정도 해 나갈 것입니다.

그럼 가자!

SceneBuilder 도입

우선은 SceneBuilder의 도입으로부터입니다.

SceneBuilder 설치

먼저 SceneBuilder 설치 프로그램을 구합니다.
다운로드는 여기에서 할 수 있습니다.
htps : // g ㅅ 온 hq. 코 m / p 로즈 cts / s 세네 부이 l로 r /


Scene Builder for Java 11용 WindowsInstaller를 다운로드했습니다.

다운로드가 끝나면 설치 프로그램을 시작하고 설치하십시오.

깨져서 영어 버전으로 설정

SceneBuilder라고 하면 이 문자화 문제입니다.
시작할 때 문자가 깨지면 일본어 버전의 설정 파일이 손상되었기 때문입니다.

이 손상 파일을 수정하여 일본어 버전으로 만드는 방법도있는 것 같습니다만,
일부러 일본어로 하는 것도 귀찮기 때문에 이번은 하지 않습니다.

영어판으로 하기 쉽기 때문에 그 설정을 합시다.

SceneBuilder 설치 대상에 app\SceneBuilder.cfg라는 파일이 있어야합니다.
필자의 경우는 다음 패스에있었습니다.C:\Program Files\SceneBuilder\app\SceneBuilder.cfg
이 파일을 메모장 등으로 열어주세요.

열면 다음 행을 추가 편집합니다.


SceneBuilder.cfg

-Duser.language=en

이제 영어 버전의 SceneBuilder를 사용할 수 있게 되었습니다!

VSCode에서 FXML을 SceneBuilder에서 열기 설정

그런 다음 VSCode 설정으로 들어갑니다.

먼저 FXML Viewer라는 확장 프로그램을 설치합니다.

이와 같이 「fxml」등과 검색하면 나오는 FXML Viewer 를 인스톨 해 주세요.

그런 다음 확장 기능을 설정합니다.

확장 기능 설정을 열려면 ⚙ → "Extension Settings"를 선택하십시오.

그러면 다음 화면이 됩니다.

따라서 SceneBuilder .exe가있는 전체 경로를 입력합니다.

이것으로 VSCode 설정이 완료됩니다!

VSCode에서 FXML 열기

마지막으로 실제로 열거나 시도해 봅시다.

대상 FXML 파일을 마우스 오른쪽 단추로 클릭하고 Open FXML를 선택합니다.


그러면 SceneBuilder가 일어나 FXML 파일을 열 수있었습니다!