Write the first page

In the Java UI framework, there are two ways to write layouts: declare UI layouts in XML and create layouts in code. The layout created in these two ways is essentially the same, so to get familiar with both ways, we’ll write the first page in XML and the second in code.

1. In the Project window, choose Entry > SRC > Main > Resources > Base > Layout to open the ability_main. XML file.2. The first page has a Text and a Button. The layout is DependentLayout with Text and Button components, where VP and FP represent virtual pixels and font pixels respectively. Example code for “ability_main.xml” is as follows:


      
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_parent">
    <Text
        ohos:id="$+id:text"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="Hello World"
        ohos:text_color="# 000000"
        ohos:text_size="32fp"
        ohos:center_in_parent="true"/>
    <Button
        ohos:id="$+id:button"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="Next"
        ohos:text_size="19fp"
        ohos:text_color="#FFFFFF"
        ohos:top_padding="8vp"
        ohos:bottom_padding="8vp"
        ohos:right_padding="70vp"
        ohos:left_padding="70vp"
        ohos:center_in_parent="true"
        ohos:below="$id:text"
        ohos:margin="10vp"/>
</DependentLayout>
Copy the code

3. The background of the button is a blue capsule style, which can be set using an XML file in the graphic directory. Right-click the “Graphic” folder, choose New > File, name it “background_button.xml”, and press Enter.Example code for “background_button.xml” is as follows:


      
<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <corners
        ohos:radius="100"/>
    <solid
        ohos:color="#007DFF"/>
</shape>
Copy the code

In the ability_main. XML file in the layout directory, reference the background_button. XML file with background_element=”$graphic:background_button” :


      
<DependentLayout
    .
    <Button
        ohos:id="$+id:button"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="Next"
        ohos:text_size="19fp"
        ohos:text_color="#FFFFFF"
        ohos:top_padding="8vp"
        ohos:bottom_padding="8vp"
        ohos:right_padding="70vp"
        ohos:left_padding="70vp"
        ohos:center_in_parent="true"
        ohos:below="$id:text"
        ohos:margin="10vp"
        ohos:background_element="$graphic:background_button"/>
</DependentLayout>
Copy the code

4. After adding the components to the XML file, you need to load the XML layout in Your Java code. In the “Project” window, select the “entry > SRC > main > Java > com. Example. Myapplication > slice”, open “MainAbilitySlice. Java” file, Load the “ability_main.xml” layout using the setUIContent method. Example code for MainAbilitySlice. Java is as follows:

package com.example.firstdemo.slice;

import com.example.firstdemo.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
    }

    @Override
    public void onActive(a) {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent); }}Copy the code

5. Run the project using the preview or simulator, and the effect is as shown below.