Pathing is defined within on- attributes as defined within the <panel> documentation (onclick,onclickup,onwswipeup,onswipedown,onhover,etc) and the target attribute available in an <action>.

Pathing allows the selection of objects or a collection of objects in a wire that an action has been assigned to. The path the action must take to get to the object that is being affected is much like that of a folder/file structure within the hierarchy of the wire. All pathing starts within the object where the action is invoked. Each level of a path is defined by using “../”.

<panel name="modal" width="400" height="400" align="center" valign="center">
     <panel name="background" width="100%" height="100%" background="#dddddd"></panel>
     <image name="close-button" source="button-close.png" onclickup="close-modal" 
onclickuptarget="../../modal"></image>
</panel>

An example of declaring the full path at the object level with onclickuptarget is shown below. This example paths the action close-modal directly to the parent object modal:

<main>
   <panel name="modal" width="400" height="400" align="center" valign="center">
      <panel name="background" width="100%" height="100%" background="#dddddd"></panel>
      <image name="close-button" source="button-close.png" onclickup="close-modal" 
onclickuptarget="../.."></image>
   </panel>
</main>
<actions>
   <action name="close-modal">
      <alpha value="0" time=".5" target="modal" />
   </action>
</actions>

In the next example, the onclickuptarget is used to get the path of a more generic location and uses the target attribute within the action to define what object is effected. This example will perform the same action to the same object defined in the first example, however, now there is the ability to create a generic close-modal action used globally for multiple modals within the wire, and to depend on object variables to pass in the desired object (modal) to close.

<main>
   <panel name="gallery-modal" width="400" height="400" align="center" valign="center">
      <panel name="background" width="100%" height="100%" background="#dddddd"></panel>
      <image name="close-button" source="button-close.png" onclickup="close-modal" 
onclickuptarget="../.." _modal="gallery-modal"></image>
    </panel>
</main>
    <actions>
       <action name="close-modal">
          <alpha value="0" time=".5" target="_model" />
       </action>
</actions>

Attributes for the <class> tag can be selected from the list that displays when the space bar is tapped after the tag is added. Required attributes display in bold in the list. The following is a list of known attributes that can be used:

None

None

<image name="close-button" source="button-close.png" onclickup="close-modal" onclickuptarget="../../modal"></image>