4 Develop Applications

To develop an application you need to define its metadata and create its pages and artifacts.

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.

Understand the Application Designer

When designing your application you will use various tools in the application designer to view and edit the application’s artifacts and pages.

You use the application designer to create and edit the building blocks that prescribe the behavior of pages, application artifacts and flow artifacts in your web and mobile applications. The application designer has dedicated editors for each of the building blocks used to build your application. The editors provide an easy to use interface for editing the files containing the descriptions of artifacts and pages. For example, when designing a page, you might need to define page variables and create action chains, in addition to positioning page components in the page and specifying component properties. The application designer provides editors to help you perform these tasks so that you don’t need to edit the source code of the HTML, JavaScript and JSON files used to describe the layout and behavior. The application designer also provides a Metadata editor if you want to edit the JSON files directly.

The editors in the application designer provide forms and wizards to help you create and edit the building blocks, for example, to create action chains and to map parameters to variables. When designing pages you can use a visual editor to compose your pages, and use the Quick Starts to help you create the building blocks needed to add some of the functionality commonly used in applications.

When you open an artifact, each artifact opens in a separate tab in the application designer. You switch between editors by selecting the editor’s icon in the left margin of the application designer. You use the same editors to edit each of your artifacts, with the exception that page artifacts provide a visual Designer for designing the page’s layout, and application and flow artifacts provide a Page Flow view for displaying the page artifacts they contain.


Description of app-designer-overview.png follows
Description of the illustration app-designer-overview.png

The following table describes the editors available for editing artifacts.

Editor Icon Description

Page Flow icon

The Page Flow view displays the pages in your application and the navigation flows between the pages. When you open an application artifact, the Page Flow view displays the root page artifacts in your application. When you open a flow artifact, the Page Flow view displays the page artifacts contained in the flow. You can double-click an artifact in the Page Flow view to open it in the Designer.

The Page Flow view is only available with application and flow artifacts.


Designer icon

The Designer is a visual editor for composing the layout of a page. The Designer contains a canvas that represents the page layout and a palette with page components that you can drag onto the canvas to add to the page. The Designer has a Property Inspector that you use to specify the properties of the page’s components and to open Quick Starts. See Use the Page Designer and About Quick Starts.

The Designer is only available with page artifacts.


Variable icon

The Variables editor displays the variables and data types that are defined within the scope of the artifact. You can use the Variables editor to create and edit variables and types. See About Variables and Types.


Actions icon

The Actions editor displays a list of the action chains that are defined within the scope of the artifact. You can use the Actions editor to create new action chains and to open action chains in the editor. See About Action Chains.

Events icon

The Events editor displays a list of lifecycle and custom events that are defined for the artifact, the type of event and the action chain that the event starts. You can use the editor to create new events and action chains. See Start an Action Chain with an Event.


Settings icon

The Settings editor contains tabs for editing an artifact’s settings. The options available depend upon the artifact. The Settings editors for flow and application artifacts contain a tab for setting security options for the artifact.

HTML icon

The HTML editor displays the code for an application’sindex.html file when the application artifact is open in the designer. You use the Code view in the Page Designer to view and edit the HTML of pages in apps.


Functions icon

The Functions editor contains a code editor for editing the artifact’s JavaScript functions. By default, application artifacts use a file named app-flow.js, flow artifacts use a file named <FLOWNAME>-flow.js and page artifacts use a file named <PAGENAME>-page.js to define their JavaScript functions.


Metadata icon

The Metadata editor contains an editor for editing the JSON file that contains the artifact’s metadata, including descriptions of variables and action chains.. By default, application artifacts use a file named app-flow.json, flow artifacts use a file named <FLOWNAME>-flow.json and page artifacts use a file named <PAGENAME>-page.json.