1# Custom Window Title Bar Development 2## Overview 3While OpenHarmony provides default UX styles for window title bars, it allows device vendors to develop custom window title bars to meet specific needs. 4## Development Guidelines 5 6### How to Develop 7Perform the following steps: 81. In **MaximizeMode** (in **frameworks/core/components/common/layout/constants.h**), define the enums, for example, **MODE_AVOID_SYSTEM_BAR** and **MODE_FULL_FILL**. 9 ```cpp 10 enum class MaximizeMode : uint32_t { 11 MODE_AVOID_SYSTEM_BAR, 12 MODE_FULL_FILL, 13 MODE_RECOVER, 14 }; 15 ``` 162. In **ContainerModalViewFactory::GetView** (in **foundation/arkui/ace_engine/frameworks/core/components_ng/pattern/container_modal/container_modal_view_factory.h**), add the creation of the custom window title bar based on the current value of **MaximizeMode**. 17 >  **NOTE** 18 > 19 > The **ContainerModalViewFactory::GetView** method is a factory method. Below shows the method expanded: 20 21 ```cpp 22 class ACE_EXPORT ContainerModalViewFactory { 23 public: 24 static RefPtr<FrameNode> GetView(RefPtr<FrameNode>& content, MaximizeMode mode) { 25 if (mode == MaximizeMode::MODE_AVOID_SYSTEM_BAR || 26 mode == MaximizeMode::MODE_FULL_FILL) { 27 return ContainerModalViewEnhance::Create(content); 28 } else { 29 return ContainerModalView::Create(content); 30 } 31 } 32 }; 33 ``` 34In the preceding example, vendor enhance creates a custom title bar branch based on the value of **MaximizeMode** (**MaximizeMode::MODE_AVOID_SYSTEM_BAR** or **MaximizeMode::MODE_FULL_FILL**). 35 363. Create a folder in the **foundation/arkui/ace_engine/frameworks/core/components_ng/pattern/container_modal** directory to store your custom title bar code. 37 >  **NOTE** 38 > 39 > The structure of the **container_modal** folder is as follows: 40 ```shell 41 ├── container_modal_accessibility_property.cpp 42 ├── container_modal_accessibility_property.h 43 ├── container_modal_pattern.cpp 44 ├── container_modal_pattern.h 45 ├── container_modal_view.cpp 46 ├── container_modal_view_factory.h 47 ├── container_modal_view.h 48 └── enhance 49 ├── container_modal_pattern_enhance.cpp 50 ├── container_modal_pattern_enhance.h 51 ├── container_modal_view_enhance.cpp 52 └── container_modal_view_enhance.h 53 ``` 54 The **container_modal_\*** files in the **container_modal** folder contain the code related to the default title bar view. You can add your custom code files in the created folder, **enhance** in this example. 55 564. Complete build configuration for the new .cpp files in **foundation/arkui/ace_engine/frameworks/core/components_ng/pattern/BUILD.gn**. 57 58When your development of the custom title bar is complete, debug and verify the title bar. 59### Debugging and Verification 60Before the verification, prepare the following files (which must be stored in the same path): 61- **open_maximize.bat** 62 63 Below shows the content of this file: 64 65 ```shell 66 hdc shell mount -o rw,remount /sys_prod 67 hdc file send window_manager_config_open.xml sys_prod/etc/window/resources/window_manager_config.xml 68 hdc shell reboot 69 ``` 70 71- **window_manager_config_open.xml** 72 73 Below shows the content of this file: 74 75 ```html 76 <?xml version="1.0" encoding="utf-8"?> 77 <Configs> 78 <decor enable="true"/> 79 <modeChangeHotZones>50 50 50</modeChangeHotZones> 80 <maxFloatingWidth>1706</maxFloatingWidth> 81 <maxFloatingHeight>1000</maxFloatingHeight> 82 <minFloatingWidth>398</minFloatingWidth> 83 <minFloatingHeight>528</minFloatingHeight> 84 <floatingBottomPosY>0</floatingBottomPosY> 85 <defaultFloatingWindow>82 121 1068 706</defaultFloatingWindow> 86 <defaultWindowMode>102</defaultWindowMode> 87 <defaultMaximizeMode>0</defaultMaximizeMode> 88 <dragFrameGravity>5</dragFrameGravity> 89 <maxUniRenderAppWindowNumber>10</maxUniRenderAppWindowNumber> 90 <maxFloatingWindowSize>2880</maxFloatingWindowSize> 91 <splitRatios>0.5 0.33 0.67</splitRatios> 92 <keyboardAnimation> 93 <timing> 94 <durationIn>500</durationIn> 95 <durationOut>150</durationOut> 96 <curve name="cubic">0.2 0.0 0.2 1.0</curve> 97 </timing> 98 </keyboardAnimation> 99 <windowAnimation> 100 <timing> 101 <duration>200</duration> 102 <curve name="cubic">0.0 0.0 0.2 1.0</curve> 103 </timing> 104 <scale>0.9 0.9</scale> 105 <rotation>0 0 1 0</rotation> 106 <translate>0 0</translate> 107 <opacity>0</opacity> 108 </windowAnimation> 109 <windowEffect> 110 <appWindows> 111 <cornerRadius> 112 <fullScreen>off</fullScreen> 113 <split>off</split> 114 <float>defaultCornerRadiusL</float> 115 </cornerRadius> 116 <shadow> 117 <focused> 118 <elevation>0</elevation> 119 <color>#000000</color> 120 <offsetX>0</offsetX> 121 <offsetY>15</offsetY> 122 <alpha>0.4</alpha> 123 <radius>34</radius> 124 </focused> 125 <unfocused> 126 <elevation>0</elevation> 127 <color>#000000</color> 128 <offsetX>0</offsetX> 129 <offsetY>15</offsetY> 130 <alpha>0.2</alpha> 131 <radius>17</radius> 132 </unfocused> 133 </shadow> 134 </appWindows> 135 </windowEffect> 136 </Configs> 137 ``` 138 >  **NOTE** 139 > 140 > The **window_manager_config_open.xml** file contains various configuration items. Before the verification, you must change the default value of **MaximizeMode** to the one you have defined, that is, the value obtained by **MaximizeMode maximizeMode = GetWindowManager()->GetWindowMaximizeMode()**. The system loads the corresponding title bar according to the value. 141 142Then, debug the custom title bar as follows: 1431. Burn the image that contains the custom title bar code to the device. 1442. Run the **open_maximize.bat** script. 1453. Run the demo to check whether the title bar works properly. 146
