Page 3: Basics 2: Using a Tab Accordion to Display a Layout

[ashimo]

Basics 2: Using a TabAccordion to Display a Layout

Create the 'Try 6-2' Project

Close the Try 6-1 project and then, from the IDE 'File' menu, select 'New Project'. In the 'New Project' dialog box, select “Applet Project” (1), input “Try6-2” (2), specify c:\Curl\lesson\Try6\02_accordion_layout in the “Directory” field (3), set the API Version to 6.0 (4), and then click OK (5).



Inputting the Program

Copy the curl_logo.gif file from c:\Curl\Try6\02_accordion_layout and paste it into the c:\Curl\lesson\Try6\02_accordion_layout folder. Next, we’ll input the program. You can copy the program code below or use c:\Curl\Try6\02_accordion_layout\start.curl and then paste it into the editor in the IDE.

Code:

{value
    let tab-accordion:TabAccordion =
        {TabAccordion
            || tab-orientation = Orientation.horizontal,
            {TabPane
                label = Page 1,
                margin = 5pt,
                Contents of Page 1
            },
            {TabPane
                label = Page 2,
                margin = 5pt,
                {image source = {url curl_logo.gif}}
                
            },
            {TabPane
                label = Page 3,
                margin = 5pt,
                {VBox
                    spacing = 5pt,
                    Display multiple objects using a VBox,
                    {image source = {url curl_logo.gif}}
                }
            }
        }    
    tab-accordion
}

Save the File, and then Execute the Program

After inputting the code, save the file, and then execute the program. The following result will appear in your browser.