Understand an Application’s Structure

Your visual application can contain multiple web and mobile applications. The web applications in your visual application are displayed when you open Web Applications in the Navigator. The mobile applications are displayed when you open Mobile Applications in the Navigator.

The structure and required files are created by default when you create a web or mobile application. Open Web Applications or Mobile Applications in the Navigator to see a visual representation of the structure of your application and to navigate to the application’s artifacts. In the Navigator, the artifacts are represented as one object, 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 artifact, you will describe the artifact’s variables and action chains in the artifact’s json file, and functions are defined in the artifact’s JavaScript file. See Understand the Application Designer.

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 application designer.


Description of browser-app-structure.png follows
Description of the illustration browser-app-structure.png

The following table describes the nodes and artifacts that are displayed 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 of the apps in your visual application. For example, if your visual application has three mobile apps, you will see three application nodes in the Mobile Applications 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. The application artifact 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 Understand the Application Designer.

flows

All the individual flows in your app are grouped under the flows node. Your app can have multiple flows, 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 mobile apps, the default flow is named item1. In web apps, the default flow is named main.

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 Work with Page Flows.

pages

Pages are grouped by flow under the flows node. 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.

See Design Pages.

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 where flow artifacts are embedded. The artifact describes the area containing the flow and the areas outside the page flow that can contain elements such as a header or title area, a navigation toolbar, and a footer.

An application typically contains one root page artifact for each flow. By default, a root page artifact named app is created when you create a mobile app and an artifact named shell is created when you create a web application.

Note:

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