Skip to content

Layouts Overview

Welcome to the "Layouts Overview" chapter! Here, we're going to explore a fantastic feature in Backendless UI Builder that's all about enhancing your productivity and improving user experience (UX) in web and mobile app development. This feature, aptly named "Layouts", is both a time-saver and a game-changer. Let's dive in!

What are Layouts?

In the world of web and mobile apps, consistency is key. Typically, apps have a recurring structure - think of a menu on the left or menu icons at the bottom, consistent across all pages. That's where Layouts come in.

The Concept

Layouts allow you to define and configure this recurring structure just once and then apply it across all pages of your app. It's like setting the stage where your app's content will perform.

The Benefits

  • Productivity Boost: By configuring your layout once, you avoid repetitive design tasks, speeding up the development process.
  • Enhanced UX: Layouts contribute to a smoother, more consistent user experience. As users navigate your app, they'll find comfort in the familiar elements that remain constant.

Understanding the Layout Structure

Take a look at this screenshot of a predefined layout:

layout-demo

Notice the "Page Render Area"? This is your canvas, where individual pages come to life. Everything around it - the menu, headers, footers - are part of the layout.

Customization and Control

  • Multiple Layouts: Your app isn't limited to a single layout. Feel free to create multiple layouts, either predefined or custom. (For creating custom layouts, see our Custom Layouts section.)
  • Data Model: Layouts have their own data model, enabling seamless context passing between pages and the layout.
  • Dynamic Interaction: Pages can interact with layout elements, like showing or hiding menu items based on the active page.

The Magic Behind Layouts

The true magic of Layouts lies in how they render on the screen:

  • Partial Page Refresh: When navigating between pages, only the "Page Render Area" refreshes. The rest of the layout stays intact, making transitions smooth and quick.
  • Performance: This approach significantly reduces load times and enhances overall app performance.

By now, you should have a good grasp of what Layouts are and how they can transform your app development process. In the next chapters, we'll delve deeper into creating pages with layouts, and creating and customizing Layouts. Stay tuned, and happy building!