This topic uses community comment apps as a typical example to detail how the feature of one-time development for multi-device deployment is applied in actual development. The core features of a community comment app are browsing the home page and viewing hot topics. Based on these core features, the following sections describe how to implement typical pages such as the follow, hot topic, social details, image details, image viewing, and commenting pages. The following will walk you through the key layout capabilities and their implementations. Currently, this app is compatible with the following devices: bar-type phones, bi-fold devices (Mate X series), tri-fold devices, widescreen foldable devices, tablets, and PCs.

Before reading this topic, you are advised to learn the ArkUI framework and the capabilities of one-time development for multi-device deployment.

The following practices will focus on these product forms and provide examples from the perspectives of UX design, project management, and page development, helping you develop community comment apps that can be deployed on multiple devices.

UX Design: describes the interaction logic and common design points of community comment apps. You can directly refer to the design points of similar apps.
Project Management: describes the configurations required for a project of one-time development for multi-device deployment and recommends a clearly three-layer architecture.
Mobile Pages and PC Pages: describe the design principles and implementation methods of window adaptation and page development by following the actual app development process, with pages as the basic unit.

UX Design

For details about the UX design, see the multi-device responsive design guide for social communication apps.

Project Management

To ensure the reusability and maintainability of the project to implement one-time development for multi-device deployment, it is recommended that developers use a layered architecture to organize code projects. The architecture consists of three layers: products (product customization layer), features (basic feature layer), and common (common capability layer). Each layer has clear responsibilities and independent functions, providing developers with a clear, efficient, and scalable design solution. For details about the layered architecture design, see Layered Architecture Design.

[h2]Project Creation

You are advised to create a template project after learning how to create and configure a layered architecture project by referring to Cross-Device Project Deployment and Release. Modify the project based on the development requirements of the community comment app to ensure that the project architecture meets the actual service requirements.

[h2]Project Structure

The community comment app uses the recommended layered architecture, organizing the code project into three layers: products, features, and common. The design of each layer is as follows:

products layer: The multi-device community comment app needs to be compatible with the following devices: bar-type phones, bi-fold devices (Mate X series), tri-fold devices, widescreen foldable devices, tablets, and PCs. The UI layout of PCs differs greatly from that of other devices. Therefore, a hap package named pc needs to be created separately as the app entry for PCs. The UI layouts of bar-type phones, bi-fold devices (Mate X series), tri-fold devices, widescreen foldable devices, and tablets are similar. Some differences can be adapted through the adaptive layout and responsive layout of one-time development for multi-device deployment. Therefore, a hap package named default is created as the app entry for these devices.
features layer: contains the social and content modules, which are two core service modules. A HAR package is created for each module, which can be referenced by the products layer as required. The modules are independent of each other, facilitating subsequent maintenance and iteration.
common layer: stores basic capabilities such as common constants, the log utility class, and window management utility in a centralized manner to implement code reuse and reduce redundancy. These capabilities can be uniformly called by other modules.

The project structure is as follows:

├──common
│  └──commonmulticommunityapplication                                     
│     └──src/main
│        ├──ets
│        │  ├──constants                      // Common constants
│        │  ├──model                          // Common model
│        │  ├──utils                          // Utilities
│        │  └──view                           // Common service components of features
│        └──resources                         // Public resources
├──features                                   
│  ├──commonui                                // Common service component module of products
│  │  └──src/main
│  │     ├──ets
│  │     │  ├──view                           // Common service components of products
│  │     │  └──viewmodel                      // Common view model of products
│  │     └──resources                         // Common service component module resources
│  ├──contentcommunity                        // Content community module
│  │  └──src/main
│  │     ├──ets
│  │     │  ├──model                          // Post data model
│  │     │  ├──view                           // Post component
│  │     │  └──viewmodel                      // Post view model
│  │     └──resources                         // Post module resources
│  └──socialcommunity                         // Social community module
│     └──src/main
│        ├──ets
│        │  ├──model                          // Follower/Comment data model
│        │  ├──view                           // Follower/Comment component
│        │  └──viewmodel                      // Follower/Comment view model
│        └──resources                         // Social module resources
├──product                                    
│  ├──default                                 // Mobile phone/Tablet
│  │  └──src/main
│  │     ├──ets
│  │     │  ├──entryability                   // Entry ability
│  │     │  ├──entrybackupability             // Custom extension ability for app data backup and restoration
│  │     │  └──pages                          // Entry page
│  │     └──resources                         // Resource file
│  └──pc                                      // PC
│     └──src/main
│        ├──ets
│        │  ├──pages                          // Entry page
│        │  ├──pcability                      // Entry ability
│        │  └──pcbackupability                // Custom extension ability for app data backup and restoration
│        └──resources                         // Resource file
└──oh-package.json5                           // Project dependency declaration

Mobile Pages

This section describes how to use layout capabilities to adapt a set of pages in the community comment app across different devices, such as bar-type phones, bi-fold devices (Mate X series), tri-fold devices, widescreen foldable devices, and tablets. It also describes the window adaptation solutions for these devices.

[h2]Window Adaptation

Window Mode
Adapted devices support full-screen, split-screen, floating window, and freeform window modes. For details, see Window Mode. The split-screen and floating window modes can be easily accessed through the system. By listening for window size changes, the app refreshes the UI based on the breakpoints to automatically apply layouts suitable for distinct window modes.
Window Orientation
In the model.json5 configuration file, set the orientation field to follow_desktop (following the orientation of the home screen.). For details, see Controlling the Display Orientation Using Window Properties.
Immersive Window
You can implement the immersive windows in different modes (full-screen, split-screen, floating window, and freeform window modes) based on the UX design. For details, see Immersive Window. You are advised to use the component-level immersive solution (component-based page immersion) to implement the immersive effect and dynamically avoid the safe area to ensure the immersive display effect. In freeform window mode, the title bar is hidden by calling window.setWindowDecorVisible(false), and only the three buttons in the upper right corner are retained. In this way, the app page extends to the title bar area, achieving an immersive display effect.

[h2]Follow Page

The home page of the community comment app serves as the service entry. According to the function design, the follow page is divided into four areas, as shown in the following table.

Horizontal Breakpoint	sm	md	lg
Follow page

UI Development

The following table describes the details and implementation scheme.

No.	Description	How to Implement
1	Top tab bar	Use the Stack component to nest custom components. Tap or swipe left or right to switch between the Following and Discovery tabs.
2	All following (top/side)	Use the responsive component List to implement this feature.
3	Social content list	Use the responsive component WaterFlow to implement this feature. Set the number of columns in the columnsTemplate layout to display different numbers of columns on different devices.
4	Bottom navigation bar	Use the responsive component HdsTabs to implement this feature. Set the floating style of the tab page using the barFloatingStyle attribute.

[h2]Hot Page

The hot page is used to display the current real-time hot content. According to the function design, the hot page is divided into four areas, as shown in the following table.

Horizontal Breakpoint	sm	md	lg
Hot page

UI Development

The following table describes the details and implementation scheme.

No.	Description	How to Implement
1	Top tab bar	Use the Stack component to nest custom components. Tap or swipe left or right to switch between the Real-time and Local tabs.
2	Social content area	Use the responsive component WaterFlow to implement this feature. Set the number of columns in the columnsTemplate layout to display different numbers of columns on different devices.
3	Bottom navigation bar	Use the responsive component HdsTabs to implement this feature. Set the floating style of the tab page using the barFloatingStyle attribute.

[h2]Social Details Page

On the social details page, the content is divided into four areas according to the function design, as shown in the following table.

Horizontal Breakpoint	sm	md	lg
Social details page

UI Development

The following table describes the details and implementation scheme.

No.	Description	How to Implement
1	Title bar on the top	Use the responsive component NavDestination to set the title attribute. The component automatically adapts to the screen on devices with different widths.
2	Social content + Image display area	Use basic common components and the nested grid container Grid to implement this area. Set the number of columns in the columnsTemplate layout to display different numbers of columns on different devices.
3	Social comment area	Use the scrollable container component Scroll to implement this area.
4	Bottom interaction bar	Use the responsive component HdsTabs to implement this feature. Set the floating style of the tab page using the barFloatingStyle attribute.

[h2]Image Details Page

On the image details page, the content is displayed in a separate area according to the function design. The following figure shows the effect.

Horizontal Breakpoint	sm	md	lg
Image details page

UI Development

The following table describes the details and implementation scheme.

No.	Description	How to Implement
1	Image display page	The image is automatically adapted and occupies the entire page.

PC Pages

This section describes how to reuse the code logic and layout based on the existing mobile UI development solution to efficiently develop community comment apps for PCs.