Nav at bottom of screen

Thanks for the question.

This can be accomplished in a variety of ways using WIRE.

Think of your nav bar as simply objects nested within objects, your background could be a panel or an image with attributes such as valign="bottom" and background="ff0000"


<panel name="navbar" height="100" width="100%" background="ff0000" valign="bottom">
<image name="nav-button1" source="button1.jpg" "onclickup="page1action"></image>
<image name="nav-button2" source="button2.jpg" onclickup="page2action" rightof="nav-button1"></image>
<image name="nav-button3" source="button3.jpg" onclickup="page3action" rightof="nav-button2"></image>
<image name="nav-button4" source="button4.jpg" onclickup="page4action" rightof="nav-button3"></image>
</panel>


Then use images or panel objects nested a children to your nav bar to serve as your buttons.

Check out our documentation on the panel object to give you an idea of the actions you can trigger when a user selects your "buttons"

Because WIRE is so flexible you don't have to rely on "standard". You can design images to serve as buttons and backgrounds to make your nav bar look any way you want, while still remaining native.

Good luck!

OK thats all fine, and I've got images displaying nicely in there. I've checked out the documentation on for and still a bit unclear as to what to do with the

onclickup="page4action"

Does this reference a panel called page4action - ie:

I'm guessing that's not the way to do it, but can't work out how that works :-/

anything you are using an "on" attribute for an object (onclick, onmove, onswipe, etc) your value will be the name of an action tag.

Your action can contain a variety of action tags to produced a desired effect. In your example, you might simply have 4 panels that represent your pages and create a set of actions.


<wire>
<main>
<panel name="navbar" height="100" width="100%" background="ff0000" valign="bottom">
<image name="nav-button1" source="button1.jpg" "onclickup="page1action"></image>
<image name="nav-button2" source="button2.jpg" onclickup="page2action" rightof="nav-button1"></image>
<image name="nav-button3" source="button3.jpg" onclickup="page3action" rightof="nav-button2"></image>
<image name="nav-button4" source="button4.jpg" onclickup="page4action" rightof="nav-button3"></image>
</panel>
</main>
<actions>
<action name="page4action">
<alpha value="1" time="1" target="nameofreferencepage4" />
</action>
</actions>
</wire>


OK this is starting to make sense! I'm still missing something though. Currently my page looks something like this:

Page 1 Content
Page 2 Content
Page 3 Content
Page 4 Content

All of the panels are displaying one on top of each other, and nothing happens when I touch the buttons. What am I doing wrong?

Remember to use HTML to get your code to display: http://community.rarewire.com/some.html

What you can do to fix this is to define what the alpha is for your pages upfront. You will want to do a couple of things:

(panels require a height and width to be defined)

<panel name="page1" height="100%" width="100%" alpha="1">Page 1 Content</panel>
<panel name="page2" height="100%" width="100%" alpha="0">Page 2 Content</panel>
<panel name="page3" height="100%" width="100%" alpha="0">Page 3 Content</panel>
<panel name="page4" height="100%" width="100%" alpha="0">Page 4 Content</panel>


the second thing you want to do is tell the wire which page you want to display on load. use your existing action and add the attribute oninit="yes"

<action name="showPage1" oninit="yes">
<alpha value="1" time="1" target="page1" />
<alpha value="0" time="1" target="page2" />
<alpha value="0" time="1" target="page3" />
<alpha value="0" time="1" target="page4" />
</action>

This will tell the wire to run this action on launch.

I tried setting the alpha within the panels to "0" but the actions still didnt reveal them...

looks like your code isn't displaying on this comment either, Ian?

ha, taste of my own medicine. darn <code> block!

Also I noticed in your example that you have the panel wrapping text. I hope you just did this for the example since text can't live outside of a tag like that.

Until you actually have content, it is probably a good test tool to add the background attribute to your panels. This will let you make each page a different color to test that they alpha on ok.