Answered

Pagination Circles & Pager Dot Nav

12 years ago • updated by 12 years ago • 2

Has anyone made Pagination Circles or Dot Navigation in Wire? This could be used when paginate="yes" on a \pager>, \list> or \tableview> object to display which page you are currently on or even to navigate between pages.

They are great for small cell phone screens because they don't take up a lot of space and let the user quickly visualize the number of pages and which one they are on.

Vote

Replies 2
Oldest first
- Newest first
- Oldest first

12 years ago

This has been done in the past. It is actually pretty easy to implement.

You simply create your dots as a class (with two different styles: on/off). Then present those dots where it is appropriate in your App.

In order to get them to switch when you change to another "page" you can use a concept called states.

Check out this link on a quick example of how to use states in your project:
http://www.moderndukes.com/post/34704...

12 years ago

I have included an example that I created for an app I built. It dynamically creates the pagination circles and centers them. It also allows you to delete the circles and rebuild them. This is useful when you are changing the query on your datasource (filtering data in an app) and the result count is different.

I attempted to pull this out of a larger app. Hopefully, it is trimmed down to only what you need.

There is a wire file and an XML file used as the datasource.




<wire>


   <datasources>


      <datasource name="items" alias="ITEMS" source="" query="//item" providertype="xml" />  


   </datasources>   



   <styles>


     <style name="contain-style" width="100%" height="100%" align="center" valign="top" padding-top="25" padding-right="25" padding-left="25"></style>   


     <style name="btn-style-bottom" width="100%" height="45%" align="center" margin-top="15px" margin-bottom="5" ></style>    


     <style name="item-style" width="100%" height="100%" borderwidth="5" bordercolor="c0c0c0" cornerradius="8"></style> 


   </styles>



   <classes>



      <class name="item-selection">


         <panel name="item-[param:index]" alias="ITEM-[param:index]" style="item-style" _index="[param:index]" onscrollto="set-item" onscrollaway="from-item">  


           <text name="item-text-[param:index]" width="100%" height="100%" color="#ff0000" font="helvetica" size="40" alignment="center" text="[param:title]"></text>


         </panel>


      </class>  



      <class name="ellipse-inner">


         <panel name="[param:container-name]" 


                alias="[eval:'[param:container-name]'.toUpperCase()]" 


                height="100%" width="[param:panel-width]" align="center">


         </panel>   


      </class>                  



      <class name="ellipse-item">


         <panel name="[param:prename][param:index]" 


                alias="[eval:'[param:prename]'.toUpperCase()][param:index]" 


                width="5px" height="5px" valign="center" background="[param:ellipse-color]" 


            rightof="[eval:'[param:prename]'.toUpperCase()][eval:[param:index]-1]" 


                cornerradius="3" margin="13" /> 


      </class>



    </classes>



    <main>



      <panel name="canvas" alias="CANVAS" background="303030" width="100%" height="100%" padding="50">



         <list name="item-tableview" 


               alias="ITEMTABLEVIEW" rowheight="150" width="100%" height="45%"


               datasource="items" orientation="horizontal" pagination="no" 


               align="center" valign="center" margin="10" >


            <object class="item-selection" 


                    index="[param:dataSourceIndex]" 


                    title="[param:name]" />


         </list>



         <panel name="ellipse-container" alias="ELLIPSECONTAINER" 


                bottomof="ITEMTABLEVIEW" margin="10" align="center"


                height="10%" width="100%">


         </panel>



         <panel name="delete-ellipses" alias="DELETEELLIPSES" 


                bottomof="ELLIPSECONTAINER" align="center"


                height="75px" width="150px"


                borderwidth="2" bordercolor="808080"


                cornerradius="10"


                background="202020"


                onclickup="delete-ellipses">


           <text name="btn-action" alias="BTNACTION" width="100%" height="100%" color="808080" font="helvetica" size="24" alignment="center" valign="center" align="center" text="Delete">


           </text>


         </panel>



      </panel>



    </main>



    <actions>   



      <action name="initialize" oninit="yes">


         <assign property="datasource:items.source" value="res://items.xml" />


      </action>    



      <action name="load-items">           


           <assign property="datasource:items.query" value="//item" />   


           <set target="DELETEELLIPSES" onclickup="delete-ellipses"/> 


           <assign property="object:BTNACTION.text" value="Delete" />


      </action>



      <action name="items-error" datasource="items" datasourceevent="datasourceerror">


         <alert title="Items" message="Failed to load items" />  


      </action>



      <action name="items-loaded" datasource="items" datasourceevent="querycomplete">


         <sync>       


           <assign property="var:curItemNum" value="1" />



           <!-- set the variables for removing ellipses -->


           <assign property="var:numDeleteCount" value="1" />


           <assign property="var:numToDelete" value="[datasource:items.dataSourceResultCount]" /> 



           <!-- determine width of ellipses based on # in datasource -->


           <assign property="var:valEllipseWidth" 


                   value="[eval:15*[datasource:items.dataSourceResultCount]]" />



           <!-- create the panel that will be centered on the screen and hold the ellipses -->        


           <create class="ellipse-inner" 


                   target="ELLIPSECONTAINER" 


                   panel-width="[var:valEllipseWidth]" 


                   container-name="ellipseinner" /> 



            <!-- these values will be used to manage the looping to build the ellipses -->        


            <assign property="var:numItems" value="[datasource:items.dataSourceResultCount]" />            


            <assign property="var:numCounter" value="1" />


            <!-- 


                  call the action to build the ellipses. this action calls itself


                  until the counters match the number of retrieved items from the datasource


            -->


            <play action="build-ellipses" />


         </sync> 


      </action>  



      <!-- called when you have scrolled to an item and sets the new item as the current item -->


      <action name="set-item">   


         <assign property="var:curItemNum" value="_index" />


         <set target="CHOSEN-ELLIPSE_index" tofront="yes" />


      </action>   



      <!-- changes the old item from selected to unseleced with the pagination ellipses -->


      <action name="from-item">


         <set target="ELLIPSE_index" tofront="yes" />


      </action>     



      <!--


            manage the ellipses that show the number of items and 


            which item you have selected


      -->


      <action name="build-ellipses">


         <sync>  


            <!--


                  this section builds two ellipses if it is the selected item. it


                  builds two ellipses, in the reverse z-order, if it is an unselected item. The purpose 


                  is to allow the "selected" ellipse to be moved to the next selected


                  item on the scrollto event


            -->   


            <if lhs="[var:numItems]" operator="gte" rhs="1">      


               <if lhs="[var:numCounter]" operator="eq" rhs="[var:curItemNum]">


                  <create class="ellipse-item" target="ELLIPSEINNER" ellipse-color="808080" index="[var:numCounter]" prename="ellipse" move-right="1" />            


                  <create class="ellipse-item" target="ELLIPSEINNER" ellipse-color="ffffff" index="[var:numCounter]" prename="chosen-ellipse" move-right="1" />           


               </if>


               <if lhs="[var:numCounter]" operator="ne" rhs="[var:curItemNum]">


                  <create class="ellipse-item" target="ELLIPSEINNER" ellipse-color="ffffff" index="[var:numCounter]" prename="chosen-ellipse" move-right="1" />            


                  <create class="ellipse-item" target="ELLIPSEINNER" ellipse-color="808080" index="[var:numCounter]" prename="ellipse" move-right="1" />                    


               </if>


            </if>


            <!--


                  increment the loop counter by 1 and determine if ellipse building is done


                  or if we call the build-ellipses action again, in which case we come back


                  through this whole action again


            -->


            <assign property="var:numCounter" value="[eval:[var:numCounter]+1]" />


            <if lhs="[var:numCounter]" operator="lte" rhs="[var:numItems]">


               <play action="build-ellipses" />  


            </if>


         </sync>


      </action> 



      <!--


            increment the loop counter by 1 and determine if ellipse deleting is done


            or if we call the delete-ellipses action again


      -->      


      <action name="delete-ellipses">


         <sync>  


            <if lhs="[var:numDeleteCount]" operator="lte" rhs="[var:numToDelete]">


               <delete target="ELLIPSE[var:numDeleteCount]" />


               <delete target="CHOSEN-ELLIPSE[var:numDeleteCount]" />


               <assign property="var:numDeleteCount" value="[eval:[var:numDeleteCount]+1]" />            


               <play action="delete-ellipses" />            


            </if>


            <set target="DELETEELLIPSES" onclickup="load-items"/>


            <assign property="object:BTNACTION.text" value="Rebuild" />


         </sync>


      </action>       



    </actions>


</wire>

And this is the XML file





<?xml version="1.0" encoding="UTF-8"?>


<items>


   <item>


      <name>1</name>


   </item>


   <item>


      <name>2</name>


   </item>


   <item>


      <name>3</name>


   </item> 


<!--   <item>


      <name>4</name>


   </item>


   <item>


      <name>5</name>


   </item>


   <item>


      <name>6</name>


   </item>   --> 


</items>

You can uncommonly the other three nodes in the XML to prove that the circles are built dynamically

Customer support service by UserEcho