This is a migrated thread and some comments may be shown as answers.

The New Navigation Thread

3 Answers 59 Views
NativeScript Insiders
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
tommy
Top achievements
Rank 1
tommy asked on 06 Mar 2015, 07:44 PM
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.

3 Answers, 1 is accepted

Sort by
0
TJ
Top achievements
Rank 1
answered on 06 Mar 2015, 10:32 PM
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>
0
tommy
Top achievements
Rank 1
answered on 06 Mar 2015, 10:50 PM
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.

0
Ian
Top achievements
Rank 1
answered on 09 Mar 2015, 09:10 AM
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
Tags
NativeScript Insiders
Asked by
tommy
Top achievements
Rank 1
Answers by
TJ
Top achievements
Rank 1
tommy
Top achievements
Rank 1
Ian
Top achievements
Rank 1
Share this question
or