+1
Answered

onclickup across whole screen

sovtek 7 years ago updated 7 years ago 11
Is it possible to attach an onclickup to the whole window that is only fired when no other action is executed?

The intent is to create an issue skin app, most magazines in the app store have a toolbar interface which toggles open and closed when the user clicks on an area of the screen that is not already bound to a clickup action.

Can you help me simulate this?
This is possible however in the case of a PDF, it is usually better to place your onclickup on the PDF tag since generally that is what is taking up 100% of the screen and is at the top of the z order. Any objects you place as children to the pdf using the onpage attribute will still work as you have described.
Here is an example WIRE to give you an idea.


<wire>
<main>
<panel name="background" alias="BACKGROUND" width="100%" height="100%">
<pdf name="calendar" alias="CAL" source="output.pdf" height="100%" width="100%" spreads="cover" covertile="yes" tile="yes" orientation="horizontal" onclickup="show-toolbar">
<panel name="link" width="300" height="360" lwidth="200" lheight="250" valign="bottom" xpos="140" lxpos="90" onpage="2" ></panel>
<panel name="link" width="130" height="100" lwidth="90" lheight="65" ypos="860" lypos="575" xpos="50" lxpos="30" onpage="1" ></panel>
</pdf>

<!-- TOOLBAR -->
<panel name="toolbar" alias="TOOLBAR" width="100%" height="65" ypos="-80" background="#ffffff" shadowradius="8" shadowopacity=".3">
<image name="logo" source="graphics/logo.png" height="55" align="left" valign="bottom" leftmargin="11%"></image>
<image name="about-town" source="graphics/txt_abouttown.png" align="right" valign="bottom" bottommargin="12%" onclickup="load-issue" rightmargin="20%" _wire="about.wire"></image>
</panel>
<include name="mag" alias="MAG" width="100%" height="100%" alpha="0"></include>
<panel name="wait" alias="WAIT" width="100%" height="100%" background="#000000" alpha="0">
<wait name="spinner" width="100%" height="100%"></wait>
</panel>

</main>

<actions>
<action name="show-toolbar">
<translate valign="top" time=".3" curve="linear" target="TOOLBAR" />
<set onclickup="hide-toolbar"/>
</action>
<action name="hide-toolbar">
<translate ypos="-80" time=".3" curve="linear" target="TOOLBAR" />
<set onclickup="show-toolbar"/>
</action>
<action name="load-issue">
<alpha value="1" time=".15" target="WAIT"/>
<sync>
<load target="MAG" file="_wire"/>
<alpha value="1" target="MAG"/>
<unload target="BACKGROUND"/>
<alpha value="0" target="BACKGROUND"/>
<alpha value="0" time=".15" target="WAIT"/>
</sync>
<translate ypos="-80" time=".3" curve="linear" target="TOOLBAR" />
</action>
<action name="close-issue">
<alpha value="1" time=".15" target="WAIT"/>
<unload />
<alpha value="0"/>
<load target="BACKGROUND"/>
<alpha value="1" target="BACKGROUND"/>
<alpha value="0" delay="1" time=".15" target="WAIT"/>
<set onclickup="show-toolbar" target="CAL"/>
</action>
</actions>
</wire>
Ok this definitely helped, but now clickable objects inside of the PDF are firing the showToolbar action.

Is there a way to prevent the objects on the pdf from firing the global click?
They really should not be, you may consider making their clickable areas larger.
This worked! Thanks.
The only part left is that, if i create the pdf object and it's content is in a different wire file, then load it oninit, i cannot call my showToolbar function from the loaded wire, because it is in the parent document.

The app throws an error saying that the function is not found.
Do you know of a way to get around this?

I prefer to keep the app skin as a complete separate file than inside of each actual issue.
You would need to move your toolbar into each of your subwires and the identify certain touch points that will close the issue and return you to the main.wire.
Yeah this isn't good for us. We can work around it for now, but this is not a good method for generating and managing mass content. If the toolbar is inside of every single wire file then then there is no way to manage a single app skin for all a publications issues.

I will contact Kirk and Matthew to see what can be done unless you have a better suggestion.
The issue here would be how you load your subwires and handle the main.wire. Generally we unload or alpha out the main.wire to make room for the subwire to sit inside of an include that is 100% x 100%. In this case, you could not remove the main.wire and still have a subwire drive the show toolbar action from the pdf sitting in your subwire. This would be done with the superwire option, the same that you would use to fire a close issue action sitting on main.wire from a subwire.

<action name="close">
<play action="close-issue" superwire="yes" target="../.." />
</action>


If your main wire only houses the toolbar portion, then it shouldn't end up being an issue of overlapping objects since it would translate in and out on top of the include content. You may have to use the set action to move the toolbar tofront every time.
ok, but are you saying i will still have to have all of my skin level actions, like showToolbar inside of the subwire?

Is there no way to target the superwire from the subwire when calling an action?
No I am saying that if you use the superwire inside of a play action from your subwire you can trigger an action inside of your main.wire to control the toolbar stored in your main.wire as well.

In the example above your subwire would have an onclickup="close" on your PDF tag and that close action would play a show toolbar action inside your main.wire.
Ok thanks, i will test it out.