Advanced Page Overview

What Is an Advanced Page

Advanced pages are highly customizable, packed with a variety of powerful widgets. They support a range of frameworks and coding options, making them perfect for complex page design needs.

Advanced pages are complex application frontend pages that contain images, charts, videos, and maps. When developing websites or e-commerce platforms, you can quickly set them up by dragging and laying out widgets and configuring related properties. The common widgets with preset styles on advanced pages have encapsulated basic event code, avoiding repeated work and enabling you to focus on services.

Advanced Page Development Workbench

Figure 1 Advanced page development workbench

The advanced page development workbench consists of the following functional modules:

• Toolbar (area 1)
  Toolbar, where you can find common tools for page development. For example, you can save web or mobile page settings and publish web or mobile pages.

  • : Expand or collapse the advanced widget list.
  • /: There are two types of advanced pages: Web and Mobile. You can customize and develop these pages for the PC and mobile devices. Once developed, both versions share the same URL. The platform automatically detects the user's device and displays the appropriate version of the page when the URL is accessed.
  • : Save the changes to the page.
  • : Release the page so that you can preview it.

    After modifying and saving a page, release it again for the modifications to take effect on the application and preview pages.

  • : Preview the page after releasing it.
  • : Release a developed page as a template.
  • /: Undo or restore operations.
  • : You can check the performance of advanced pages and generate a performance report.
  • /: Adjusts the size of the page canvas on the development workbench.
  • : Automatically adapts to the size ratio of the page canvas on the development workbench.
  • : Show the grid lines to locate widgets in the canvas.
  • : Set the resolution, grid size, background color, and background image of the advanced page.
  • : Set the page status.
• Widget list (area 2)

  The widget list facilitates widget search and management. It contains chart, media, map, text, and decoration. Select a category to filter advanced widgets.

• Advanced widget display and selection area (area 2 and 3)
  This area displays widgets of the category you select. It includes a search box, scenarios, preset, and system/custom widgets, which are described as follows:

  • Search box: Search for an advanced widget in the current category by name.
    Figure 2 Search box
    
  • Scenarios: Find advanced widgets for different scenarios, including general, smart campus, 5G message, and other.
    Figure 3 Application scenario filtering
    
  • System/Custom: Select preset or custom widgets.

    Preset widgets are global advanced widgets provided by Astro Zero. For details, see Setting Properties of Preset Widgets on Advanced Pages. Custom widgets are advanced widgets developed by users. For details, see Adding Custom Widgets to Advanced Pages.

• Canvas (area 4)
  Canvas area, where you can quickly set up an advanced page by dragging advanced widgets. The following uses the advanced page in Absolute layout as an example.

  • Drag a desired widget to the canvas and build your advanced page.
    Figure 4 Dragging a widget to the canvas
    
  • Adjust the widget position and size by dragging the widget in the canvas. You can arrange the widget using the scales.
    Figure 5 Adjusting widgets
    
  • Right-click functions: Right-click a widget in the canvas, and choose Delete, Copy, Paste (if a widget has been copied), Format Painter, Bring to Front, Bring to Back, or Setting.
    • Delete: Delete the selected advanced widget. Alternatively, press Backspace or Delete on your keyboard.
    • Copy: Copy the selected advanced widget. Alternatively, press Ctrl+C.
    • Paste: Paste the copied advanced widget. Alternatively, press Ctrl+V.
    • Format Painter: Copy properties of the selected widget and apply them on other widgets. The available properties include style (border and background), position (left, top, height, and width), and other. Select desired properties, and then click a target widget to apply these properties when the cursor becomes a brush.
      Figure 6 Painting format
      
    • Bring to Front/Bring to Back: Set the stack order of the selected advanced widget, that is, the z-index CSS property. These two options are available only for advanced pages of the Absolute type.
    • Setting: Set the style properties of the selected widget. For details about how to set global advanced widgets, see Setting Properties of Preset Widgets on Advanced Pages.
• Widget property setting (area 5)

  When no widget in the canvas is selected, the right pane shows all widgets in the canvas. Select a widget in this area or in the canvas to display the Widget Property setting pane, and and then set basic properties, data, events, and routes.

  • Basic: Basic properties of a widget. You can create custom widget properties. For details, see Adding Custom Widgets to Advanced Pages.
  • Data: Specify a bridge for the widget to call backend APIs to obtain data. For details, see Using Bridges to Bind Data to Advanced Page Widgets.
  • Event: Set the actions to be triggered by different events related to the widget in the runtime environment. For details, see Adding Events or Macros to Implement Advanced Page Widget Interaction.
  • Router: This tab is available for the Router Navigator widget on advanced pages of the Liquid type.

Advanced Page Development Framework

Advanced page development involves widgets, libraries, bridges, events, and actions. This section describes the relationships between widgets, libraries, bridges, events, and actions.

• Widgets are elements of advanced pages. The reusability of widgets greatly improves development efficiency.
• The event-action mechanism of widgets improves page flexibility so that widgets can interact with each other or with pages.
• As widget dependencies, libraries can be easily imported to simplify development and enrich widget functions.
• Widgets can use bridges to call backend APIs for obtaining data.

The platform constructs the basic framework for advanced pages by using the widget, library, and bridge assets and the event-action mechanism.

Figure 7 Widgets, libraries, and bridges

• Widget

  Widgets are reusable elements. An advanced page can be quickly set up by dragging one or more widgets. Each widget of an advanced page is like a block in a jigsaw game. Figure 8 shows the relationship between advanced pages and widgets.

  Figure 8 Advanced pages and widgets
  

  Widgets on the advanced page are classified into the following types:

  • Global advanced widgets

    Global advanced widgets are common widgets that Astro Zero provides for developers. The widgets include chart, image, video, and text. For details, see Setting Properties of Preset Widgets on Advanced Pages.

  • Custom widgets

    If the global advanced widgets cannot meet your requirements, create your own widgets in any of the following ways:

    • Secondary development of global advanced widgets

      Download global widgets, modify their style and logic, and upload the widgets. This greatly reduces the workload of widget development. For details, see Adding Custom Widgets to Advanced Pages.

    • Development with a widget template

      If the global advanced widgets do not contain the desired ones, develop your own widgets using the templates provided by Astro Zero. The templates include the basic architecture for building widgets. For details, see Adding Custom Widgets to Advanced Pages.

• Library

  Libraries are third-party dependencies of advanced widgets. Widgets cannot run properly if the required libraries are missing. For advanced widgets that require the frontend framework or widget library, for example, the popular Vue (preset), Boot Strap, and Element (preset), convert these dependencies into library assets and upload them to the environment. For details about how to import libraries to advanced pages, see Referencing Third-Party Libraries to Develop Advanced Pages.

• Bridge

  When you develop a frontend page, you may need to retrieve backend data such as user IDs, order IDs, and information about products in the shopping cart. In this case, you can use a bridge to call backend APIs for obtaining data. For details, see Using Bridges to Bind Data to Advanced Page Widgets.

• Events and actions

  Events and actions are used for widget interaction. For example, if you want to click a button in a widget to update the data in another widget or to redirect you to another page in the application, set the data update or page redirection as an action for the event of clicking the button. For details, see Adding Events or Macros to Implement Advanced Page Widget Interaction.

Multi-Device Adaptation

How is the same page displayed on devices of different sizes? The platform provides two types of device views: PC view and mobile view. The liquid layout is responsive. Astro Zero also provides the stretch function for the absolute layout to assist adaptation. To ensure that custom widgets can adapt to devices with different resolutions, comply with responsive layout design specifications. Responsive design of widgets is the foundation of multi-device adaption. For details about how to implement multi-terminal adaptation on advanced pages, see Creating Multi-Device Compatible Advanced Pages.

• Web and mobile views

  The platform provides two types of advanced pages: Web and Mobile. You can customize and develop these pages on the PC and mobile devices. Once developed, both versions share the same URL. The platform automatically detects and displays the appropriate version of the page when the URL is accessed.

  NOTICE:

  • The responsive liquid layout is recommended for displaying advance pages on different devices.
  • Web advance pages can also be loaded and displayed on a mobile device. But, the effect may be dissatisfactory due to the resolution difference. You are advised to design and develop views for web and mobile devices separately to obtain better views.
• Adaptive Design of Liquid Layout and Absolute Layout
  Take a PC as an example. Here are two types of adaptive design.

  • Liquid layout

    Liquid layout is adaptive and suitable for development of common web applications, such as e-commerce websites and administration websites. Liquid layout (12 grids): configurable width and adaptive height of widgets, which are displayed from left to right and from top downwards.

    For devices with different resolutions or different window sizes in the running environment, the liquid layout always divides grids based on 12 columns of grids and automatically adjusts the widget width accordingly, as shown in Figure 9. The widgets must meet the responsive design requirements. For details about the development specifications, see Basic Principles for Developing Responsive Widgets.

    Figure 9 Adaptive liquid layout in runtime state
    
  • Absolute layout

    The absolute layout page has a fixed size and is often used for IOC large-screen page development. In the absolute layout, widgets can be dragged to any position on the canvas. The widget width and height can be customized. The widget position and size are fixed. In the upper right corner of the page, click to set the view of the current page and select the required screen size.

    Figure 10 Setting the absolute layout screen size
    

    The absolute layout is not adaptive. In the running environment, if the device screen or browser window is smaller than the specified screen size, a scroll bar is displayed, as shown in Figure 11. If the device screen or browser window is greater than the specified screen size, the content is centered and the background is added.

    Figure 11 Scroll bar on the absolute layout page in runtime state
    

    The platform provides the stretch function to implement an auxiliary adaption for the absolute layout. Click on the right of the absolute layout page, choose Settings > Basic Settings, and select Stretch, as shown in Figure 12.

    Figure 12 Setting the stretch function
    

    Select Stretch to scale up the page width to 100% to adapt to the width of the entire browser or device. The content width is also adjusted based on the container width. This makes the absolute layout adaptive to devices with different resolutions or browser windows of different sizes to resize the widget with the aspect ratio preserved. The widgets must meet the responsive design requirements. For details about the development specifications, see Basic Principles for Developing Responsive Widgets.

Basic Principles for Developing Responsive Widgets

Responsive design of widgets is the foundation of multi-device adaption. To ensure that custom widgets can adapt to devices with different resolutions, comply with the basic principles of responsive design during widget development.

• Design based on the content.

  Instead of focusing on a specific screen width, focus on the content design. When the screen is smaller or the browser window is narrower, the increasing vertical height causes the content to extend downwards. You are advised to start from the small screen and set breakpoints (for example, 320 px, 768 px, or 1024 px of the device width) for different devices to form a liquid layout.

  For complex situations, use the @media query of CSS3 to customize styles for devices with different resolutions based on CSS rules. The specified CSS rule takes effect only when the media query matches the device in use.

  The CSS syntax is as follows:

  @media mediatype and|not|only (media feature) {
      CSS-Code;
  }

  For details about the parameters, see Table 1.

  Table 1 @media syntax parameters

  Parameter	Value	Description
  mediatype	all	Applies to all devices.
  	screen	Applies to PCs, tablets, smartphones, and other devices.
  	print	Applies to printers and print previews.
  media feature	aspect-ratio	Ratio of width to height of the area on the output device page.
  	max-width	Width of the maximum area on the output device page.
  	max-height	Height of the maximum area on the output device page.
  	min-width	Width of the minimum area on the output device page.
  	min-height	Height of the minimum area on the output device page.

  The example shows how to set different background colors for devices with different page widths.

  /*Media query*/
  /*When the page width is greater than 1200 px, the background color is blue. This parameter is mainly used for large-screen devices.*/
  @media screen and (min-width: 1200px) {
      body {
          background-color:blue;
      }
  }
  /*When the page width is between 992 px and 1200 px, the background color is red. This parameter is used on the PC with a medium screen.*/
  @media screen and (min-width: 992px){
      body {
          background-color:red;
      }
  }
• Avoid fixed dimensions.
  If you use absolute units such as px to specify the width, height, border, and font size of an element, fixed dimensions can easily damage responsive layouts. To make the layout more flexible, relative units such as percentage, em, and rem are recommended to properly display the page when you adjust the font size or zoom in a browser. Table 2 lists the common relative units.

  Table 2 Common relative units

  Unit	Description
  em	Indicates the font size relative to the ancestor in font-size and the font size relative to itself in other properties, for example, width.
  rem	Indicates the font size relative to the root element.
  ch	Indicates the width relative to the number 0.
  ex	Indicates the height relative to the character x.
  lh	Indicates the calculated value relative to the element line-height.

• Maximum and minimum values

  Large-screen pages and mobile devices do not always have the entire screen width occupied by the content. To display the same content, the mobile phone may be more suitable to fill the screen width, while the large screen needs to reserve a certain boundary in the width to make the layout more attractive. So, set the maximum or minimum value to design a more proper layout. For example, if you set the widget width to 100% and the maximum width to 1024 px, the maximum width of the content to be expanded is 1024 px. When the screen width exceeds 1024 px, the content will not be expanded.

• Nested objects

  For multiple elements that are closely related, using relative positions makes them difficult to control. You can place them in the same container for centralized management and use absolute units to fix their relationships. This is effective for elements such as buttons that do not need to be extended.

• Image adaption

  The adaptive widget design must meet the image adaption requirements. Use max-width to limit the image width to ensure that it does not exceed the width of the browser window or visible part of the container.

• Mobile first

  The mobile screen is smaller and simpler than the large screen, which is more complex and diversified. So, start from the small screen design on mobile devices to the large screen design to gradually increase the CSS complexity during development and enrich the layout by supplementing the design. This makes it easier to develop responsive layouts.