Application NavBar

11 posts, 1 answers
  1. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 12 Jan 2015 Link to this post

    Hi,
    When I navigate from the initial page in my app to a second (or subsequent) page, what appears to be a navbar automatically appears at the top of the screen (on iOS devices). On the left-hand side, a button with the label < Back is included. Clicking this button returns you to the previous page.

    Is it possible to control this navbar? For example:

    Can I change the label/function of the left-hand button?
    Can I add a second button on the right-hand side with a programmed action?
    Can I add a title in the centre of the navbar?
    Can I hide the navbar if I wanted to implement my own custom navigation in an app?

    Regards, Ian
  2. Arthur
    Arthur avatar
    4 posts
    Member since:
    May 2014

    Posted 12 Jan 2015 in reply to Ian Link to this post

    Also topbar is automatically added in Android apps. I hope you will remove this automatic thing in next releases and will give more control to developers.

    Thank you.
  3. Erjan Gavalji
    Admin
    Erjan Gavalji avatar
    1455 posts

    Posted 16 Jan 2015 Link to this post

    Hi guys,

    Your questions and suggestions are indeed up to the point!

    Right now, as you've noticed, the navbar gets added automatically. We didn't provide any APIs for its customization or disabling, leaving these for a later stage, while concentrating on the richness of the core modules.

    Basically, due to the differences in the core platforms NativeScript is built upon, the capabilities of a cross-platform, customizable navigation bar are a subject of a deep research. Our target is that the API we will build provides rich set of functionalities and at the same time allows for a smooth use of platform-specific JavaScript code for a rarely-used functionality.

    That said, this discussion happens right in time :)

    Both Ian's questions and Arthur's note will be taken into consideration.

    As per the current situation - almost everything in the navbar can be changed by ios-specific JavaScript code.
    Let me know if you need something specific in a real-live scenario so that I prepare an example for it.

    Kind regards,
    Erjan Gavalji
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  4. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 16 Jan 2015 in reply to Erjan Gavalji Link to this post

    Hi Erjan,
    Thanks for the explanation - I understand your need for further research before developing an API.

    I guess an easy fix at this time would be to know how to disable the automatic navbar so that developers can implement their own custom navigation within each app.

    Are you able to you provide a NativeScript code snippet that shows how to disable the automatic navbar for an iOS environment? That would be really useful.

    Best regards, Ian




  5. Erjan Gavalji
    Admin
    Erjan Gavalji avatar
    1455 posts

    Posted 20 Jan 2015 Link to this post

    Hi Ian,

    Please, find attached the sample - it is the cross-platform "app" folder only, which is basically located under the RootProjName/app folder of a project, created with the NativeScript CLI.

    To run it, simply extract it under your project, created with NativeScript 0.4.2 and paste the files to the folder I pointed out above.

    Let me know if everything got fine.

    Kind regards,
    Erjan Gavalji
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 21 Jan 2015 in reply to Erjan Gavalji Link to this post

    Hi Erjan,
    Using the statement frames.topmost().ios.showNavigationBar = false; works perfectly. Thanks!

    However, in trying to create a custom navbar, I think I may have discovered an issue in NativeScript's XML parser. I was trying to use the XML below to create a navbar with left/right buttons and a central title bar. I wanted to label the buttons '<' and '>' and, although the left button appears OK, I can't get the right button to appear as '>'. Any other text works and I tried escaping the '>' symbol as '&gt;' which then labels the button as '...' for some reason. Do you think your parser is confusing the '>' character as part of the XML declaration or should I be escaping the character differently?

    <Page loaded="loadBoard">
      <GridPanel cssClass="panel">
        <GridPanel.columnDefinitions>
          <ColumnDefinition width="auto" />
          <ColumnDefinition width="*" />
          <ColumnDefinition width="auto" />
        </GridPanel.columnDefinitions>
        <GridPanel.rowDefinitions>
          <RowDefinition height="40" />
        </GridPanel.rowDefinitions>
        <Button id="leftButton" click="navLeft" text="<" width="30" col="0"/>
        <Label text="Nav title" col="1" />
        <Button id="rightButton" click="navRight" text=">" width="30" col="2"/>
      </GridPanel>
    </Page>

    Best regards, Ian



  7. Rossen Hristov
    Admin
    Rossen Hristov avatar
    2478 posts

    Posted 21 Jan 2015 Link to this post

    Hi,

    I will investigate the &gt; issue and will let you know once it is resolved.

    Regards,
    Rossen Hristov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. Answer
    Rossen Hristov
    Admin
    Rossen Hristov avatar
    2478 posts

    Posted 23 Jan 2015 Link to this post

    Hello,

    I fixed the issue. It will work properly in the next release.

    Regards,
    Rossen Hristov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  9. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 23 Jan 2015 in reply to Rossen Hristov Link to this post

    Hi Rossen,
    That's great news.

    Thanks, Ian
  10. tommy
    tommy avatar
    6 posts
    Member since:
    Jul 2012

    Posted 06 Mar 2015 Link to this post

    I have basically the opposite request. I would like the navbar to be shown on the main initial page as well.

    If it is added in when navigating to subsequent pages, when you navigate back to whatever the first page was, the navbar disappears at the very beginning of the transition. This is bad normally, but looks super weird when you navigate back to the main page via iOS's swipe from the left edge gesture.

    In fact, it is possible (if you begin the "swipe to go back" gesture then stop before the "breaking point", the navbar doesn't recover and goes blank.


    What I would like to see is a navbar that is there right from the first "page". At least until whatever cross platform navigation abstraction you design is ready.

    It gets weirder with the Android Action bar of course. In this case, the ActionBar is always there, but has no control over navigation whatever. No "up caret", or whatever it's called on Android. 

    Short of manually making my own navbar navigation, I am not sure what to do.
  11. tommy
    tommy avatar
    6 posts
    Member since:
    Jul 2012

    Posted 06 Mar 2015 in reply to tommy Link to this post

    Here is a video that shows what I am talking about:

    https://dl.dropboxusercontent.com/u/1456226/telerik/nativescript-navigation-weirdness-ios.m4v
Back to Top