FXML provides two ways to refer to files 'import' and 'include'.

1. import

'import' can use the 'template' defined by the target file in the file, such as:

In item.fxml defines a 'template' called 'item':

<!-- item.fxml -->
<template name="item">
  <text>{{text}}</text>
</template>

With an item.fxml referenced in index.fxml, you can use the 'item' template:

<import src="item.fxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

2. The scope of import

import has the concept of scope, that is, only the template defined in the target file is imported, not the template imported in the target file.

**For example: C import B, B import A, you can use the 'template' defined by B in C, you can use the 'template' defined by A in B, but C cannot use the 'template' defined by A. **

<!-- A.fxml -->
<template name="A">
  <text> A template </text>
</template>

<!-- B.fxml -->
<import src="a.fxml"/>
<template name="B">
  <text> B template </text>
</template>

<!-- C.fxml -->
<import src="b.fxml"/>
<template is="A"/>  <!-- Error! Can not use tempalte when not import A. -->
<template is="B"/>

3. include

'include' can introduce the entire code of the target file except '' ''' to copy it to the 'include' location, such as:

<!-- index.fxml -->
<include src="header.fxml"/>
<view> body </view>
<include src="footer.fxml"/>

<!-- header.fxml -->
<view> header </view>

<!-- footer.fxml -->
<view> footer </view>