Table of Contents

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


Video Tutorial: How to Use Page Include for DGLux5 Projects


Create a Page Include with Button Control

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.

Tip

To quickly open the .dg5 file contained within a Page Include, double-click the Page Include element in the Document window in Edit Mode.


How to Cause User Interaction within a Page Include to Affect the Outer Page

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.


Page Include Properties

These properties affect the Page Include component.

For a guide to using the Page Include component, see Page Include.

Page Include components are also affected by Common Properties.


The Page Include properties in the Property Inspector

Path

Path

Path
Specifies the relative or absolute URL of the .dg5 file to be used as a Page Include. This lets you use other .dg5 files as components within this file. To specify a file, either type a URL in the field, click the folder to specify a path, or drag a .dg5 file from the Project panel to the field.

The URL property
The URL property

Autosize

Autosize

Autosize
If true, causes this container to follow the content width. Only works if this container's width or height is set to Auto, and the content's width or height is set to pixels or percent.

The Autosize property
The Autosize property

Reload

Reload

Reload
Refreshes the .dg5 file within this Page Include.

The Reload property
The Reload property

2019/07/17 19:17