3 Develop Applications

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

Typical Visual Application Development Workflow

Oracle Visual Builder supports all stages of the development workflow, from creating to staging and publishing the application.

Oracle Visual Builder imposes no specific order for building the artifacts in your application and defining the building blocks. How you proceed is personal preference and determined by the way you planned your application. If you already know the data sources that you will use, or the structure of objects that you have, you might want to start by defining the service connections and business objects.

The following table provides a high-level description of some of the tasks that you will typically perform when building an application.

Task Description More Information
Create a new application or version

Use the wizard on the Home page to create a new application, or create a new version of an existing application

Create a Visual Application

Create a New Version of an Application

Create service connections

Create connections to external REST web services and select and configure the endpoints that you want to use in your application.

About Service Connections

Create business objects

Define your own custom REST endpoints for data in your database based on the needs of your applications.

Create a Business Object

Build the web or mobile app

Design the flow and layout of the pages in your application.

How are Visual Applications Structured?

Secure the application

Create application roles and configure the permissions for business objects.

Secure the Application

Stage and test the application

Use the Application Options menu in the toolbar of your application to stage the application when you are ready to do more thorough testing of your application. You can share the link to the staged application with people for testing.

Stage a Visual Application

Import real data and check the schema

Use the Data Manager to import data into your databases from a file or from the live database.

Manage Data During the Development Lifecycle

Publish the application

Publish the staged version and either import data or use your live database.

Publish a Visual Application

How are Visual Applications Structured?

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 What is the 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 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 What is the 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.

What is the Designer?

You use the 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 Designer has dedicated editors for each of the building blocks used to build your application. Each editor provides 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 Designer provides editors to help you perform these tasks, so you don’t need to edit the source code of the HTML, JavaScript, and JSON files used to describe the layout and behavior. It also provides a JSON editor if you want to edit the JSON files directly.

The editors in the 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 Designer. You switch between editors for the artifact by selecting the appropriate tab in the artifact. The tabs that appear for the artifact depend on the artifact. A Page Flow tab appears for application and flow artifacts while a Page Designer tab appears when you open a page. A number in the tab indicates the number of incidences. For example, the application in the following image includes two action chains and one event listener:


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.

Tab Description
Page Flow

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.

Page Designer

Use the Page Designer to compose 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 includes a Properties pane 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.

Actions

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.

Event Listeners

The Event Listeners editor displays a list of lifecycle 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. See Start an Action Chain From a Lifecycle Event.

Events

The Events editor displays a list of 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 From a Lifecycle Event.

Types

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

Variables

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. See About Variables and Types.

HTML

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

JavaScript

The JavaScript 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.

JSON

The JSON 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.

Settings

The Settings editor contains tabs for editing an artifact’s settings. The options available depend upon the artifact. The Settings editor for flow and application artifacts includes a Security tab, which you can use to set the artifact's security. You can use the Imports tab to import components, custom modules, and CSS files for application artifacts, flows, and pages, and the Translation tab to create additional translation bundles, also for application artifacts, flows, and pages. See Manage Custom Component, CSS, and Module Imports and Create Translation Bundles.