Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-24582] Android: Navigation parity for a cross-platform Ti.UI.NavigationWindow

GitHub Issuen/a
TypeNew Feature
PriorityHigh
StatusClosed
ResolutionDone
Resolution Date2019-01-11T02:17:29.000+0000
Affected Version/sn/a
Fix Version/sRelease 8.0.0
ComponentsAndroid
LabelsNavigationWindow, android, parity
ReporterHans Knöchel
AssigneeGary Mathews
Created2017-04-16T18:32:58.000+0000
Updated2019-01-11T02:17:32.000+0000

Description

On iOS, we have the Ti.UI.iOS.NavigationWindow to handle a stack of windows that can be opened and closed. Unfortunately, on Android and Windows, we have to do that manually and it required the (Alloy) developer to either write custom (per platform) logic or use plugins like [xp.ui](https://github.com/FokkeZB/UTiL/blob/master/app/lib/xp.ui.js). Proposed API-changes: * iOS: Deprecate Ti.UI.iOS.NavigationWindow in favor of Ti.UI.NavigationWindow * Android / Windows: Support NavigationWindow, add the native [back button](https://developer.android.com/training/implementing-navigation/temporal.html) * Android / Windows: Expose the openWindow, closeWindow and popToRootWindow if possible * Adjust Alloy to make the <NavigationWindow> tag available for all platforms

Attachments

FileDateSize
nav-bar-example.png2018-09-18T18:22:10.000+000017661
Untitled-2.png2018-09-18T18:21:33.000+000017661

Comments

  1. Kota Iguchi 2017-11-20

    Cloned to TIMOB-25537 for Windows so we can track the ticket independently.
  2. Kota Iguchi 2017-11-22

    Pushed mocha testbed for Ti.UI.NavigationWindow that is meant to be cross-platform. https://github.com/appcelerator/titanium-mobile-mocha-suite/pull/31. Just implemented few basic navigation tests and we can start from there.
  3. Jan Vennemann 2018-09-18

    Just my two cents on this topic since my mic seemed to be broken during our recent discussion. We should also think of this as a common abstraction of the Android ActionBar and the iOS NavigationWindow (and whatever it is called on Windows^^). So apart from handling the window stack and navigation, this should also include setting bar items. Ideally it would rely on leftNavButtons and rightNavButtons on iOS and Ti.Android.Menu on Android exposed as a unified API. I have something like this in mind for configuring the ActionBar/UINavigationBar: 
       <window>
     <!-- ActionBar/NavigationWindow setup -->
     <navigation-bar title="Example">
       <nav-item @click="shareMyStuff" :ios:systemIcon="Ti.UI.iOS.SystemButton.ACTION" ios:position="left" :android:systemIcon="Ti.Android.R.drawable.ic_menu_share" android:position="actionBar"></nav-item>
       <nav-item @click="deleteMyStuff" :ios:systemIcon="Ti.UI.iOS.SystemButton.TRASH" ios:position="right" android:text="Delete" android:position="menu"></nav-item>
     </navigation-bar>
   
     <!-- The rest of the content -->
     <label>Content</label>
   </window>
    or programmatically configurable via a navigationBar property on Ti.UI.Window for example. This would result in: !nav-bar-example.png|thumbnail! For the general navigation functionality in our apps we could build upon [titanium-navigator](https://github.com/appcelerator/titanium-navigator), which exposes a set of APIs for navigation through an app. It's currently tailored to handle components from Angular and Vue. Behind the scenes it inspects the root view of that component and handles navigation accordingly so it should be easy to make it work for Alloy or Classic apps too. Some pseudo code demonstrating the usage: 
       import { NavigationManager } from 'titanium-navigator';
   
   const navigationManager = new NavigationManager();
   
   // assuming Ti.UI.createNavigationWindow is the factory for our new cross-platform stacked window management
   const rootWindow = Ti.UI.createNavigationWindow({});
   const child1 = Ti.UI.createWindow({});
   const child2 = Ti.UI.createWindow({});
   rootWindow.push(child1);
   
   // Open the root window. Will call open() on rootWindow
   navigationManager.open(rootWindow);
   // open subsequent windows. Will push the child view to the window stack and open it.
   navigationManager.open(child2);
   // programmatically navigate back, will close the last window in the stack.
   navigationManager.back();
    Internally titanium-navigator has a set of rules so it knows how to handle navigation. See [AbstractNavigator](https://github.com/appcelerator/titanium-navigator/blob/master/src/navigators/AbstractNavigator.ts) and [NavigationManager.open()](https://github.com/appcelerator/titanium-navigator/blob/master/src/NavigationManager.ts#L145) to get a rough idea how it works.
  4. Gary Mathews 2018-10-10

    master: https://github.com/appcelerator/titanium_mobile/pull/10375
  5. Keerthi Mahalingam 2018-11-20

    FR passed. Waiting for CR To Merge.
  6. Christopher Williams 2018-12-04

    Already FR'd before merge

JSON Source