Page Include

The Page Include component enables you to embed other DGLux5 pages in the current page. This feature is useful for creating tabbed navigation.

For a detailed reference of properties that affect Page Includes, see Common Properties and Page Include Properties.

A Page Include component in DGLux5

You can create a button panel that lets the user determine which .dg5 file is loaded in a Page Include. There are several ways to do this. These steps show you how to achieve this effect using a Case dataflow block. Alternatively, you could create an onClick action for each button, as shown in this video, or you could create a button symbol that holds the URL as one of its parameters.

To use a Case block for Page Include navigation:

1. Right-click the Stage in the Outline or Document window, and select Insert > Components > Page Include.
2. Create the button panel:
   1. Right-click the Stage and select Insert > Components > Group.
   2. In the Property Inspector, set the Layout property of the group to Horizontal or Vertical.

   3. Insert a text component within the group.

      This is your first button. Optionally, style your button using properties and actions.

   4. When your button is styled, select it in the Outline and click Duplicate until you have the correct number of buttons.
   5. Change the text that appears in each button. Each button should refer to the page that it opens.
3. In the Outline, select the group.
4. In the Property Inspector, set Selection to Single Select.
5. Right-click the Page Include, and select Dataflow.
6. In the dataflow window, expand Logic, and add a Case block:
   1. Drag the Case block to the dataflow window.
   2. Inside the block, click the plus sign until the number of case n properties matches the number of URLs you want.
   3. Set op to equals.
   4. Bind the Selection Index property of the group to the input property of the Case block.
   5. For each case n property, enter an index number in your group.
   6. For each then n property, drag the .dg5 file from the Project panel to the then n field to add the path.
   7. For else, enter a default path, or leave it null.
   8. Bind the output property of the case block to the URL property of the Page Include.

These steps demonstrate how to transfer a value from one page to another by using Project Dataflow.

These steps refer to the two pages as the "source page," meaning the page that contains the value to be transferred, and the "target page," meaning the page that is affected by the source value. Often, the source page is viewed within a Page Include component, and the target page is the page that contains the Page Include component.

1. In the Menu bar, select Modify > Project Dataflow.
2. Add a String to the Project Dataflow.

3. In the Project panel, double-click both the source page file and the target page file.

   This opens both files in the Document window.

4. In the source page, add a text input component.
5. With the text input component selected, open the Actions tab, then click Add and select Set State.

6. Open the dataflow for the Text Input component.

   Because you created an action, the dataflow contains a State block.

7. Configure the State block:
   1. Bind the text input component's value property to the State block's invoke property.

   2. Click the plus sign inside the State block.

      This adds path 0 and change 0 properties.

   3. Open Project Dataflow again, if it is not already open.

   4. Drag the value property of the String block from Project Dataflow to the path 0 field in the block properties panel for the text input component's State block, as shown in the following image. Do not drag it to the visual block in the dataflow window.

      

      Because you dragged the property to the block properties panel, the path itself was pasted, as shown in the following image.

      

      If a blue rectangle appears around the path 0 property, the value was bound instead, and you need to repeat this step.

   5. For change 0, click the imported layer icon and hover over value until a blue dot appears. Double-click the blue dot.

      This opens a small binding pop-up representing the value property, as shown in the following image.

      

   6. Bind the value property of the text input component to the value field in the small binding pop-up.
8. Save the source page and open the target page.
9. In the target page, create a Text component.
10. Bind the value of the String block from Project Dataflow to the value property of the Text component on the target page.
11. Finally, to view the results:
    1. Create a Page Include component on the target page.
    2. Set the path of the Page Include to the source page.

    3. In Preview mode, enter text in the text input component.

       The value in the text component changes.