iOS Question Working with multiple app Pages

[aaronk]

Hi,

I noticed B4i only has Classes and code modules.

How would you create a app that has multiple screens ?

Lets say I have a button, and a label and when I click on the button I want to then show the next page. Would I load the objects into a panel and then hide the panel when the button is pressed and then show the next panel with object in it ?

Or, would I use the following code:

Page1.Initialize("Page1")
Page1.RootPanel.LoadLayout("MyPage1")
NavControl.ShowPage(Page1)
Page2.Initialize("Page2")
Page2.RootPanel.LoadLayout("MyPage2")

Then when I click on the button I would call:

NavControl.RemoveCurrentPage
NavControl.ShowPage(Page2)

And it should swap the pages around ?
(I remember you saying something about how it does it the same as B4J but I haven't really played with that before.)

 

[Erel]

I wrote several short tutorials which you should start with: http://www.b4x.com/android/forum/forums/ios-tutorials.63/

I've attached a project that shows the simplest way to manage two pages.

Sub Process_Globals
   Public App As Application
   Public NavControl As NavigationController
   Private Page1, Page2 As Page
End Sub

Private Sub Application_Start (Nav As NavigationController)
   NavControl = Nav
   Page1.Initialize("Page1")
   Page2.Initialize("Page2")
   Page1.RootPanel.LoadLayout("1")
   Page2.RootPanel.LoadLayout("2")
   NavControl.ShowPage(Page1)
End Sub

Sub Button1_Click
   NavControl.ShowPage(Page2)
End Sub

The user can go back to page1 by sliding out the page or with the back button.

In a real project, it is most probably better to put each page in its own static module.

 

[moster67]

In the twopages example posted above, there is a "back-button" (or a label?) at the top and on the left in layout 2 which looks like this <- Page1.
Is this a "fixed" button/label which can be controlled by the "Hide Back Button" property in the designer? If yes, I noted that setting the boolean value to false (or even true) does not work - the button is always shown.

If this <- Page1 button is not controlled by the "Hide Back Button" property, how (or where) can I access the properties of this button? I noted that there are "Top Right Button" properties in the designer but not for Top Left buttons.

Can someone shed some light on this? Thanks.

 

[Erel]

The hide back button will now work. There was a bug related to the designer.
Choose Tools - Clean project and recompile the app.

You can also set one or more buttons with Page.TopLeftButtons.

 

[moster67]

I noted that hide back button property now works. However, if I set the hide back button to true, then I can't go back to page1 by sliding out the page so I remain stuck on page2

I tried to set the BarButtons by code by using Page.TopLeftButtons but I couldn't get it to work. Probably I am missing something obvious:

Private Sub Application_Start (Nav As NavigationController)
    NavControl = Nav
    Page1.Initialize("Page1")
    Page2.Initialize("Page2")
    Page1.RootPanel.LoadLayout("1")
    Page2.RootPanel.LoadLayout("2")
  
    'my test
        Dim x As BarButton
    x.InitializeSystem(x.ITEM_DONE,"e") 'what should I put in tag-value?
    Page2.TopLeftButtons.Clear
    Page2.TopLeftButtons.Add(x.ITEM_DONE)
      
    NavControl.ShowPage(Page1)
End Sub

What I am doing wrong?

 

[Erel]

However, if I set the hide back button to true, then I can't go back to page1 by sliding out the page so I remain stuck on page2

This is how iOS works. The sliding gesture comes together with the back button.

Add this code to dismiss page2:

Sub Page2_Click
 NavControl.RemoveCurrentPage
End Sub

About the bar buttons. You must set a new list:

Private Sub Application_Start (Nav As NavigationController)
   NavControl = Nav
   Page1.Initialize("Page1")
   Page2.Initialize("Page2")
   Page1.RootPanel.LoadLayout("1")
   Page2.RootPanel.LoadLayout("2")
   Nav.ShowPage(Page1)
   Dim b1, b2 As BarButton
   b1.InitializeSystem(b1.ITEM_ADD, "b1")
   b2.InitializeText("Button 2", "b2")
   Page1.TopLeftButtons = Array(b1, b2)
End Sub

Sub Page1_BarButtonClick (Tag As String)
   Log("Clicked button: " & Tag)
End Sub

 

[moster67]

Thanks Erel. That got it sorted.

One question:

Sub Page2_BarButtonClick (Tag As String)
   Log("Clicked button: " & Tag)
   NavControl.RemoveCurrentPage
   'NavControl.ShowPage(Page1)
  
End Sub

In above Sub, I noted that both methods RemoveCurrentPage and Showpage() worked fine. From what I understand it is all related to a stack. Can I use either one indifferently to navigate back to previous page or shall I use some cautions as to which method to use?

PS: it would be useful if you put the documentation-page as a Sticky in the B4i subforum.

 

[Erel]

I've added the link to my signature.

Can I use either one indifferently to navigate back to previous page

Yes.

 

[davepamn]

I created a sign on Page called Page 1

When the user presses the cmdLogin button, I want validate the individual as authentic, remove the sign on page from the page stack and display page2.

Case 1

Sub cmdLogin_Click

    NavControl.RemoveCurrentPage

    NavControl.ShowPage(Page2)
 
End Sub

Case 2

Dim b1 As BarButton
Private Sub Application_Start (Nav As NavigationController)
    NavControl = Nav
    Page1.Initialize("Page1")
    Page1.Title = "Page 1"
    Page1.RootPanel.Color = Colors.White
    Page1.RootPanel.LoadLayout("frmPassword")
    Page2.Initialize("Page2")
    Page2.Title = "Page 2"
    Page2.RootPanel.LoadLayout("frmGARInput")
    NavControl.ShowPage(Page1)

    Dim b1 As BarButton
    b1.InitializeSystem(b1.ITEM_DONE, "b1")
    Page1.TopLeftButtons = Array(b1)
end sub

Sub Page1_BarButtonClick(Tag As String)

    NavControl.RemoveCurrentPage

    NavControl.ShowPage(Page2)

End Sub

In both cases Page 1 remains on the stack

Is there a property in designer that needs to be set for the layout? What went wrong?

 

[davepamn]

I had to add

    Page2.HideBackButton=True

Then Page1 back button did not show. RemoveCurrentPage did not work the way I thought it would.

 

[Stephenz43]

I wrote several short tutorials which you should start with: http://www.b4x.com/android/forum/forums/ios-tutorials.63/


In a real project, it is most probably better to put each page in its own static module.

How would the static module be called?

This is where I get lost

 

[Erel]

I've written a new tutorial about this: https://www.b4x.com/android/forum/threads/multiple-pages-example.48170/

 

[Stephenz43]

Thank you