Differences

This shows you the differences between two versions of the page.

Link to this comparison view

dglux5_wiki:widgets_and_property_inspector:callouts:home [2019/07/17 19:17]
 dglux5_wiki:widgets_and_property_inspector:callouts:home [2021/09/20 14:51] (current)
Line 1: Line 1:
 +{{indexmenu_n>​8}}
 +====== Callouts ======
 +A callout is a instance of a [[dglux5_wiki:​widgets_and_property_inspector:​components:​symbols:​home|symbol]] that is connected to a target object. A callout can be static, in which case it always appears when the target object appears, or it can be triggered to appear based on user interaction.
  
 +Callouts are often used as labels that display key information about an object. However, the callout functionality in DGLux5 can also be used to create other effects, such as drop-down menus and pop-up dialogs.
 +
 +{{:​dglux5_wiki:​widgets_and_property_inspector:​callouts:​dglux5_callout.png?​direct|}}\\
 +//A callout functioning as a static label for an image//
 +
 +{{:​dglux5_wiki:​widgets_and_property_inspector:​callouts:​dglux5_callout_1.png?​direct|}}\\
 +//A callout functioning as a drop-down menu that appears when the shape is clicked//
 +
 +----
 +
 +===== Video Tutorial: Introduction to Callouts =====
 +
 +<​html>​
 +<​left>​
 +<iframe width="​620"​ height="​350"​ src="​http://​player.vimeo.com/​video/​115719217"​ frameborder="​0"​ allowfullscreen></​iframe>​
 +</​left>​
 +</​html>​
 +
 +----
 +
 +===== Video Tutorial: Custom Triggers with Callouts =====
 +
 +<​html>​
 +<​left>​
 +<iframe width="​620"​ height="​350"​ src="​http://​player.vimeo.com/​video/​116584324"​ frameborder="​0"​ allowfullscreen></​iframe>​
 +</​left>​
 +</​html>​
 +
 +More video tutorials are [[http://​dglogik.com/​videos|here]].
 +
 +----
 +
 +===== Create a Simple Callout with Label Parameter =====
 +
 +These steps show you how to create a simple callout that has label text that you can edit in the [[dglux5_wiki:​workspace_and_workflow:​panels_and_menus:​properties_panel|Property Inspector]].
 +  - Create a [[dglux5_wiki:​widgets_and_property_inspector:​components:​symbols:​home|symbol]] that represents the callout:
 +    - <​WRAP>​Right-click the Stage in the [[dglux5_wiki:​workspace_and_workflow:​panels_and_menus:​document_window|Document window]] or [[dglux5_wiki:​workspace_and_workflow:​panels_and_menus:​outline|Outline]],​ and select **Insert** > **Components** > **Text**.
 +
 +{{:​dglux5_wiki:​widgets_and_property_inspector:​callouts:​dglux5_callout_2.png?​direct|}}</​WRAP>​
 +     - <​WRAP>​Set the fill and stroke and text and font properties of the text component.
 +
 +{{:​dglux5_wiki:​widgets_and_property_inspector:​callouts:​dglux5_callout_3.png?​direct|}}</​WRAP>​
 +     - <​WRAP>​Right-click the text component and select **Convert to Symbol**.
 +
 +{{:​dglux5_wiki:​widgets_and_property_inspector:​callouts:​dglux5_callout_4.png?​direct|}}</​WRAP>​
 +     - <​WRAP>​When prompted, name the symbol ''​calloutSym''​.
 +
 +{{:​dglux5_wiki:​widgets_and_property_inspector:​callouts:​dglux5_callout_5.png?​direct|}}</​WRAP>​
 +  - Create parameters for the symbol:
 +    - In the [[dglux5_wiki:​workspace_and_workflow:​panels_and_menus:​symbols_panel|Symbols Panel]], right-click **calloutSym** and select **Edit**.
 +    - In the Outline, right-click the symbol and select **Edit Properties**.
 +    - <​WRAP>​Drag one **textarea** parameter into the right-hand column of the Symbol Parameters dialog.
 +
 +{{:​dglux5_wiki:​widgets_and_property_inspector:​callouts:​dglux5_callout_6.png?​direct|}}</​WRAP>​
 +    - <​WRAP>​Double-click the label of the **textarea** parameter to rename it ''​calloutText'',​ and enter a placeholder value.
 +
 +{{:​dglux5_wiki:​widgets_and_property_inspector:​callouts:​dglux5_callout_7.png?​direct|}}</​WRAP>​
 +    - <​WRAP>​Bind the **calloutText** parameter to the **Text** property.
 +
 +{{:​dglux5_wiki:​widgets_and_property_inspector:​callouts:​dglux5_callout_8.png?​direct|}}</​WRAP>​
 +  - <​WRAP>​Close the Symbol Parameters dialog, and click **OK** to exit symbol editing mode.
 +
 +{{:​dglux5_wiki:​widgets_and_property_inspector:​callouts:​dglux5_callout_9.png?​direct|}}</​WRAP>​
 +  - <​WRAP>​Right-click the Stage in the Document window or Outline, and select **Insert** > **Components** > **Image**.
 +
 +{{:​dglux5_wiki:​widgets_and_property_inspector:​callouts:​dglux5_callout_10.png?​direct|}}</​WRAP>​
 +  - <​WRAP>​With the image component selected in the Outline, for **URL**, click the folder icon and select an image in your [[dglux5_wiki:​workspace_and_workflow:​projects_and_files:​project_directories|project]].
 +
 +{{:​dglux5_wiki:​widgets_and_property_inspector:​callouts:​dglux5_callout_11.png?​direct|}}</​WRAP>​
 +  - <​WRAP>​With the image component selected in the Outline, under **Callout**,​ click **Static**.
 +
 +{{:​dglux5_wiki:​widgets_and_property_inspector:​callouts:​dglux5_callout_12.png?​direct|}}</​WRAP>​
 +  - Under **Callout**,​ for **Symbol**, type ''​calloutSym''​.
 +  - <​WRAP>​For **Bond**, select Line.
 +
 +{{:​dglux5_wiki:​widgets_and_property_inspector:​callouts:​dglux5_callout_13.png?​direct|}}</​WRAP>​
 +  - In the Outline, expand the image and select "​callout."​
 +  - <​WRAP>​Enter a text value for the callout.
 +
 +{{:​dglux5_wiki:​widgets_and_property_inspector:​callouts:​dglux5_callout_14.png?​direct|}}</​WRAP>​
 +  - <​WRAP>​In [[dglux5_wiki:​workspace_and_workflow:​edit_preview:​home|Edit mode]], click the image in the Document window, and then drag the callout to control its placement.
 +
 +{{:​dglux5_wiki:​widgets_and_property_inspector:​callouts:​dglux5_callout_15.png?​direct|}}</​WRAP>​
 +
 +----
 +
 +===== Callouts FAQ =====
 +<hidden **How do I create a drop-down menu with multi-select behavior?​**>​
 +**How do I create a drop-down menu with multi-select behavior?​**\\
 +The [[dglux5_wiki:​widgets_and_property_inspector:​form_input:​list:​home|list input]] component only supports a single selection, but you can use a callout to easily create a drop-down menu that supports multiple selections:
 +
 +**Create a Repeater Inside a Symbol**
 +  - <​WRAP>​Create a [[dglux5_wiki:​widgets_and_property_inspector:​repeaters:​home|repeater]] with multi-select behavior.
 +
 +{{:​dglux5_wiki:​widgets_and_property_inspector:​callouts:​dglux5_callout_16.png?​direct|}}</​WRAP>​
 +  - <​WRAP>​Right-click the group that holds the repeater, and select **Convert to Symbol**.
 +
 +{{:​dglux5_wiki:​widgets_and_property_inspector:​callouts:​dglux5_callout_17.png?​direct|}}</​WRAP>​
 +  - <​WRAP>​When prompted, name the symbol ''​dropDown'',​ and click OK.
 +
 +{{:​dglux5_wiki:​widgets_and_property_inspector:​callouts:​dglux5_callout_18.png?​direct|}}</​WRAP>​
 +
 +**Set the Callout Properties**
 +  - Create a text component that represents the collapsed menu:
 +    - Right-click the Stage in the Document window or Outline, and select **Insert** > **Components** > **Text**.
 +    - Style the appearance and content of the text component using the Property Inspector.
 +  - Select the text component in the Outline, and in the **Callout** properties:
 +    - For Callout Type, select Events.
 +    - for Symbol, enter ''​dropDown''​.
 +    - Set **Position** to bottom left.
 +    - <​WRAP>​Set **Anchor** to top left.
 +
 +{{:​dglux5_wiki:​widgets_and_property_inspector:​callouts:​dglux5_callout_19.png?​direct|}}</​WRAP>​
 +    - Hover over the **Show Callout** or **Show Trigger** property until a blue dot appears, and double-click the blue dot.
 +    - <​WRAP>​Hover over the **Hide Callout** or **Hide Trigger** property until a blue dot appears, and double-click the blue dot.
 +
 +A small binding dialog appears containing the two properties.
 +
 +{{:​dglux5_wiki:​widgets_and_property_inspector:​callouts:​dglux5_callout_20.png?​direct|}}</​WRAP>​
 +    - With the text component selected, in the Advanced Properties panel, find **onClickOn** and bind it to the **Show Callout** property in the small binding dialog.
 +    - <​WRAP>​With the text component selected, in the Advanced Properties panel, find **onClickOff** and bind it to the **Hide Callout** property in the small binding dialog.
 +
 +{{:​dglux5_wiki:​widgets_and_property_inspector:​callouts:​dglux5_callout_21.png?​direct|}}</​WRAP>​
 +  - Close the small binding dialog.
 +
 +**Track Item Selection**
 +  - <​WRAP>​In the Symbols panel, right-click **dropDown**,​ and select **Edit**.
 +
 +{{:​dglux5_wiki:​widgets_and_property_inspector:​callouts:​dglux5_callout_22.png?​direct|}}</​WRAP>​
 +  - <​WRAP>​In the Outline, click {{:​dglux5_wiki:​92_icn-dataflow-icon.png?​nolink|}} **Dataflow** to open dataflow for the symbol.
 +
 +{{:​dglux5_wiki:​widgets_and_property_inspector:​callouts:​dglux5_callout_23.png?​direct|}}</​WRAP>​
 +  - <​WRAP>​Add a Select Rows block to the dataflow.
 +
 +{{:​dglux5_wiki:​widgets_and_property_inspector:​callouts:​dglux5_callout_24.png?​direct|}}</​WRAP>​
 +  - <​WRAP>​Bind the Table block that drives the repeater to the **input** property of the  Select Rows block.
 +
 +{{:​dglux5_wiki:​widgets_and_property_inspector:​callouts:​dglux5_callout_25.png?​direct|}}</​WRAP>​
 +  - <​WRAP>​In the Property Inspector, in the **Selection** properties, find the **Selected Index** property, and bind it to the **indexes** property of the Select Rows block.
 +
 +{{:​dglux5_wiki:​widgets_and_property_inspector:​callouts:​dglux5_callout_26.png?​direct|}}</​WRAP>​
 +  - <​WRAP>​In the Outline, right-click the symbol and select **Edit Properties**.
 +
 +{{:​dglux5_wiki:​widgets_and_property_inspector:​callouts:​dglux5_callout_27.png?​direct|}}</​WRAP>​
 +  - <​WRAP>​Drag a **tabledata** property into the right hand column of the Symbol Parameters dialog.
 +
 +{{:​dglux5_wiki:​widgets_and_property_inspector:​callouts:​dglux5_callout_28.png?​direct|}}</​WRAP>​
 +  - Double-click the label of the table to rename it **selectedOptions**
 +  - <​WRAP>​Bind the output table of the  Select Rows block to the **selectedOptions** parameter.
 +
 +{{:​dglux5_wiki:​widgets_and_property_inspector:​callouts:​dglux5_callout_29.png?​direct|}}</​WRAP>​
 +  - <​WRAP>​Close the Symbol Parameters dialog and the Dataflow window, and click **OK** to exit symbol editing mode.
 +
 +{{:​dglux5_wiki:​widgets_and_property_inspector:​callouts:​dglux5_callout_30.png?​direct|}}</​WRAP>​
 +  - <​WRAP>​In Preview mode, expand the drop-down and select some items. Then, select "​callout"​ in the Outline and open the table, to access information about the currently selected rows.
 +
 +{{:​dglux5_wiki:​widgets_and_property_inspector:​callouts:​dglux5_callout_31.png?​direct|}}</​WRAP>​
 +</​hidden>​
 +
 +----
 +<WRAP left>​[[dglux5_wiki:​widgets_and_property_inspector:​repeaters:​home|Previous:​ Repeaters]]</​WRAP>​
 +<WRAP right>​[[dglux5_wiki:​widgets_and_property_inspector:​layouts:​home|Next:​Layout]]</​WRAP>​