Oracle Cloud Visual Builder Mastery
Application Architecture
Beyond Drag and Drop
Oracle Visual Builder makes it easy to assemble applications visually. But beneath the drag-and-drop interface is a robust architecture designed for building professional, enterprise-grade software. Understanding this structure is the difference between creating a quick prototype and engineering a scalable, maintainable application.
At its heart, a Visual Builder application is a collection of metadata files. These files define everything from the user interface to business logic and data connections. This metadata-driven approach is what allows the platform to offer both low-code simplicity and high-code flexibility. This entire development lifecycle is managed within a collaborative environment called Visual Builder Studio.
The Anatomy of a VB Application
Visual Builder enforces a clear, hierarchical structure for your projects. Think of it as a set of nested containers, where each level has a specific purpose for managing resources and state. This organization keeps your application tidy and predictable as it grows.
The three primary levels are Application, Flow, and Page.
Application Scope: This is the outermost container. It's the place for resources that need to be available everywhere. Think user authentication details, application-wide settings, or custom JavaScript functions that every page might use. Variables and Action Chains defined here are global.
Flow Scope: A flow is a collection of pages that represent a specific user journey, like a customer onboarding process or a product catalog. Defining resources at the flow level—such as a customer ID needed across multiple pages in the onboarding flow—keeps them contained and prevents cluttering the global application scope.
Page Scope: This is the most granular level. It contains the UI components, variables, and event listeners specific to a single page. Most of your work happens here, but a well-structured app leverages the higher scopes to avoid duplicating code and state.
Design-Time vs. Run-Time
As you build your application in Visual Builder, you are working in the 'Design-Time' environment. Here, you interact with visual editors, property inspectors, and component palettes. When you click and configure a component, VB is writing to a set of underlying metadata files, typically in JSON format. These files describe your application's structure, UI, and logic in a declarative way.
When you click 'Run' or deploy your app, Visual Builder's 'Run-Time' environment takes over. It reads all that and uses the (JavaScript Extension Toolkit) framework to dynamically generate the actual HTML, CSS, and JavaScript that runs in the user's browser. This separation is powerful. It allows the low-code visual tools to evolve independently of the underlying web technologies, and it enables developers to dive into the generated code for advanced customizations when needed.
This architecture is what facilitates the transition from a simple web app to a native mobile experience. When you create a mobile application in Visual Builder, you're still defining metadata. However, at run-time, this metadata is used to build a hybrid mobile app, often using a framework like Apache Cordova. This packages your web application into a native shell that can be deployed to app stores and access device features like the camera or GPS.
At its core, what is a Visual Builder application primarily composed of?
You are building a wizard for customer onboarding that spans several pages. You need to store the new customer's ID and access it on every page within the wizard, but it should not be available globally across the entire application. Where is the most appropriate scope to define the variable for this customer ID?
By understanding these architectural layers, you move from simply using a tool to truly designing software. You can make informed decisions about where to store state and define logic, creating applications that are not only functional but also efficient and easy to maintain.