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.
|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 service connections||
Create connections to external REST web services and select and configure the endpoints that you want to use in your application.
|Create business objects||
Define your own custom REST endpoints for data in your database based on the needs of your applications.
|Build the web or mobile app||
Design the flow and layout of the pages in your application.
|Secure the application||
Create application roles and configure the permissions for business objects.
|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.
|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.
|Publish the application||
Publish the staged version and either import data or use your live database.
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.
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
The following table describes the nodes and artifacts that are displayed when a web or mobile application is open in the Navigator.
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
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
A flow consists of a flow artifact and the pages within the flow. The descriptions of the flow are contained in the
See Work with Page Flows.
See Design Pages.
The resources node contains resources available to your application, such as images, style sheets (
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
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 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 the illustration app-designer-overview.png
The following table describes the editors available for editing artifacts.
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.
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.
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.
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.
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.
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.
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.
The HTML editor displays the code for an application’s
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
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.