The New Navigation Thread

4 posts, 0 answers
  1. tommy
    tommy avatar
    6 posts
    Member since:
    Jul 2012

    Posted 06 Mar 2015 Link to this post

    It's mentioned in the "Application Navbar" thread (http://www.telerik.com/forums/application-navbar), that the abstraction for navigation (particularly as it relates to the iOS NavigationBar and Android Actionbar) is up in the air and still being ironed out.

    I have a bit of experience in this area from creating hybrid apps with a single codebase that look attractive and at home on both, but I am not sure I want to build my own navbar in NativeScript. That seems to defeat the purpose. However, as I mentioned in the thread above, the current iOS navbar is a bit flakey and not really useable (see my video of the cuteness sample: https://dl.dropboxusercontent.com/u/1456226/telerik/nativescript-navigation-weirdness-ios.m4v).

    So here is my question:

    Is there already a plan for this? Or are you still trying to decide on the best abstraction?

    If the latter, may I make a suggestion? Pre-Lollipop ActionBars are all well and good, but if you are designing an abstraction that might look the best across both iOS and Android (my Windows Phone experience is limited at best, so excuse that), it seems to me that embracing the new Material Design look (http://www.google.com/design/spec/material-design/introduction.html) would be the most cross-platform. 

    https://www.polymer-project.org/components/core-toolbar/demo.html

    Since the material design navigation toolbars are fairly similar to iOS anyway (unlike the ActionBar, they have arrowed back buttons for navigation, they have icon buttons on the right for additional behaviour, etc) it seems like a better solution than trying to massage the ActionBar into submission.

    I think it would be possible to have one JavaScript codebase create a material toolbar and an iOS NavigationBar without scads of platform specific code.

    Having said all that, I am quite keen to hear other ideas.

  2. TJ
    TJ avatar
    58 posts
    Member since:
    Aug 2013

    Posted 06 Mar 2015 Link to this post

    Customizing the Navbar was one of the first things I wanted to do in NativeScript, and I know Todd and Burke have both said the same, so I do think it's important that we offer some really easy way of making this possible.

    The specifics on this are tricky, but I personally think a material-design inspired approach is a good idea. Google has certainly proven that the approach can work on iOS. The hard part might be Windows Phone, because like Tommy, I'm also pretty ignorant about WP design paradigms.

    Really I want to be able to add something like this to my XML:

    <Page>
        <NavBar>
            <Label text="Task List" />
            <Button tap="{{ addTask }}" text="+" />
        </NavBar>
        <StackLayout>
            ...
        </StackLayout>
    </Page>
  3. tommy
    tommy avatar
    6 posts
    Member since:
    Jul 2012

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

    Looking at TJ's XML I had a thought... what if there was an app.xml file to go with the app.js and app.css? This app.xml could describe how the items above Pages in the hierarchy. Things like the NavBar, a sidemenu, etc. Then it could have a placeholder element that would be where in the layout your Pages would render.

    Maybe I am thinking too "DOM layout", I don't know. Also, I don't really think we need to push Material onto iOS. I think that a description of a material toolbar would map cleanly to an iOS NavigationBar just like a NativeScript abstraction should. It would look Material on Android and iOS on, well... iOS.

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

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

    Hi,
    I'd support the idea of some type of XML page template that could be used to setup common UI items on a page. Something like the page layout concept used in Microsoft MVC or Kendo Mobile might work - as long as you always have the option to use different layout templates on different pages where necessary.

    In fact, I'm just wondering whether the Custom UI Component feature in NS could be the basis for this?

    Regards, Ian
Back to Top