How Are Applications Structured?

Your visual application workspace can contain multiple web (and mobile) applications. Each app's structure and the artifacts required to add functionality to it are created by default when you create or import the app.

Open Web Applications (or Mobile Applications) in the Navigator to see a visual representation of your app's structure and to navigate to its artifacts. The artifacts are represented as one object in the Navigator, but they actually represent two or three separate files that describe the artifact’s behavior and properties. The properties and behavior of an artifact are built by creating and combining the building blocks described in these files. For example, when you edit a flow, its variables and event listeners are described in the flow artifact’s JSON file, while functions are defined in the artifact’s JavaScript file.

When you open an application in the Navigator, the structure of the application is displayed as nodes and subnodes representing the application’s artifacts and files. You can collapse and expand nodes to hide and reveal the contents. Selecting an artifact or file in the Navigator opens the artifact in the one of the editors in the Designer.

Description of the illustration browser-app-structure.png

Here's a look at the nodes and artifacts you might see when a web (or mobile) application is open in the Navigator:

Item	Description
application	All the artifacts of an application are grouped under the application node in the Navigator. You will see an application node for each app in your visual application. For example, if your visual application has three web apps, you will see three application nodes in the Web Apps pane. You can select the application node to view the application artifact in the Designer. The application artifact represents the files and metadata that describe your application. It has the same name as your app. The descriptions of the application artifact are contained in the app-flow.json, app-flow.js, and index.html source files. The metadata in these files defines the artifacts that can be used by every artifact in your application, for example, the variables that are application-scoped, types that describe data structures, and security settings for the application. See Which Editor Do I Use?.
flow	All individual flows in your app are grouped under a flow node. Your app can have multiple flows (including sub-flows that are grouped under a flows node) and each flow can contain multiple pages. Depending on the type of application, one or more flows are created by default when you create the application. In web apps, the default flow is named main when you use the None navigation style. For imported mobile apps, the default flow is named item-1. The default flow is badged default for easier identification. A flow consists of a flow artifact and the pages within the flow. The descriptions of the flow are contained in the flowname-flow.json and flowname-flow.js source files. See Create and Manage Flows.
page	All pages in your application are grouped under a flow. Each page uses a HTML file to specify the page elements, a JavaScript file that determines the page’s functions, and a JSON file for the page’s metadata. The default page in a flow is badged default for easier identification. See Work With Pages and Flows.
Fragments	(Only web apps) The fragments node contains artifacts for modular pieces of UI that can be reused in multiple pages of an application. Each fragment is developed just like a page and contains its own HTML file for elements, JavaScript file for functions, and JSON file for metadata. See Work With Fragments.
Resources	The resources node contains resources available to your application, such as images, style sheets (css) and translation files (strings). See Work With Application Resources.
Root pages	The root pages node contains one or more root page artifacts which describe elements such as a header or title area, a navigation toolbar, and a footer. An application typically contains one root page artifact. By default, a root page artifact named shell is created for a web application. For imported mobile apps, the root page artifact is named app. See Customize Your App's Root Page.

Note:

You can open the Source View in the Navigator to view all the source files in the visual application.