Allow for ActionBar usage

[tjvantoll]

Currently using an ActionBar in a {N}/ng2 app is a bit clunky (see https://github.com/NativeScript/sample-Groceries/blob/5b09135256c24ec4e8ba17b3dc76eff5de7db6cc/app/views/login/login.ts#L17-L19).

Ideally we’d have some way you could provide the necessary ActionBar XML elements in your Angular components. I’m not sure how we could make that possible, but I thought I’d open things up for discussion because I think this is going to be a common pain point.

[matt4446]

My experience with Angular2 probably needs some more work so feel free to correct me if I'm wrong or the presumption is incorrect.

I went and created my own action bar / nav bar as this is a bit of an unknown at the moment. Making everything from scratch, however, is a bit unrealistic for the majority who want the native action bar rather than a made up one.

I would probably want to describe the action bar as it's in the docs (as well as the page element). If that is not possible... or we want to hide the page layout away (but is still described by a component)...

We could include some selectors for the component to be dragged into the content of the action bar. I can do this quite easily in a component and its children, but I have no idea if it works across components.

This is one of my favorite elements for templating. Can it help?
<ng-content select="[item-top]"></ng-content>

Component declaration
Component usage
Items within the component get moved to their designated positions.

The selector could then bring the content into position in the action bar like:
<StackPanel action-bar-template>...</StackPanel>
action-bar docs

<router-outlet></router-outlet>
(could I have some clarification on where about this item is in the page hierarchy at the moment)
This would then need to be above the Page XML Element in the hierarchy (I would think). I had expected this. Earlier versions of NativeScript-Angular I could describe each view as a page but in recent versions, I had to retreat to a StackPanel as the root element.

the router does have or has had the idea of siblings (not sure if it's implemented at the moment, its a challenge to keep up). Could this allow a view component to be described as a series of components old reference, but the implementation has since changed. This way the content component can remain content and the nav can be handled by a shared / different component depending on the route?

[jlooper]

I'm just going to add my $.02 by showing the jank with the current navbar...always a problem with this design pattern IMO, but if we could find a way to stop this jerkiness, it would be great:

[hdeshev]

I was thinking about possible ways of implementing this and wanted to write up my thoughts before actually implementing anything.

So, we can provide an ActionBar component that nests several ActionItem components, possibly a NavigationButton component too (which is really just an ActionItem). Android/iOS specific properties can go in JSON stored in attributes.

<ActionBar title="My glorious app" android='{"icon": "res://ic_test"}'>
  <ActionItem text="Photo" (tap)="shareSomething()" 
    android='{"systemIcon": "ic_menu_camera"}'></ActionItem>
  <NavigationButton text="Back" (tap)="goBack()"></NavigationButton>
</ActionBar>

The ActionBar allows you to pass a custom view as the title. We could solve this by looking for a content child with a special name:

<ActionBar android='{"icon": "res://ic_test"}'>
  <StackLayout #title>
    <Image src="~/logo.png"></Image>
    <Label text="My glorious app"></Label>
  </StackLayout>
</ActionBar>

(note the #title part on the StackLayout above)

I'm not sure if the #title variable looks good. Some may think this approach is too hacky. The alternative would be to use a template, which would make the markup even more complex.

Also, should we try and make sure there is only one instance of the ActionBar component or allow multiple declarations that just extend and overwrite each other's settings?

[matt4446]

It looks simple so I quite like it.

I could be way off on the implementation...

It's close to the docs (but should it be titleView or title-view to be closer?). You could drop the hash and use a selector to make it a character shorter for the user but a little more verbose in the component template:
<ng-content #titleView select="[titleView]"></ng-content>
or
<ng-content #titleView select="[title-view]"></ng-content>
or a far more plain (skipping selectors and any need for TitleView or Title etc):
<ng-content #titleView></ng-content>

Sorry, I have an obsession with content areas.

page-view:

<ActionBar>
   <StackLayout titleView orientation="horizontal">
          <Button text="1st" ></Button>
          <Button text="2nd"></Button>
          <Button text="3rd"></Button>
   </StackLayout>
</ActionBar>

That will hide away the property but have one or more ng-content blocks floating around the main component template. I imagine it wouldn't be hard to check the ng-content block for child elements and fill up the action bar template if it had child elements.

[tjvantoll]

Also, should we try and make sure there is only one instance of the ActionBar component or allow multiple declarations that just extend and overwrite each other's settings?

The most common things people switch up in an ActionBar are its title and its ActionItem/NavigationButton controls. In Groceries for instance, on each page I need a way to change the ActionBar title, and on one page I need to add two ActionItem buttons.

Because of that I tend to think that we should allow one ActionBar, and then come up with some way to allow all other pages to extend/overwrite. For instance would it be possible to do something like this? Or am I making up Angular things that don’t really exist? I tend to do that sometimes.

<!-- the template of the Component that sets up routing -->
<ActionBar [title]=" title">
    <ActionItem text="Share" (tap)="shareStuff()" [visibility]="showShareButton"></ActionItem>
</ActionBar>
<page-router-outlet></page-router-outlet>

// Some random page in the app
@Component({
    ...
})
export class MyPage {
    showShareButton = true;
    title = "Share Stuff!";
}

[matt4446]

That is pretty similar to how I was going to implement it using a decorator for main (but with my own nav bar). I'm curious what you all achieve.

I might play about later to get some further ideas ... I'm not sure how to overwrite a component, but Angular is a virtualization of the DOM... so one would think there would be a way, @hdeshev Any thoughts on that?

My scenario will also change the nav bar depending on the section of the app (titles + actions) (well I have not got that far in the nativescript version). Defining the action bar from the UI rather than code behind is preferable.

[hshristov]

@jlooper - The jerky behavior is fixed with NativeScript/NativeScript#1624

[vakrilov]

I've been poking with enabling the ActionBar inside angular apps and here is what I currently have.
We want to support main 2 scenarios:

Define The Whole ActionBar

Define the whole ActionBar from inside a component on your page. Probably you will want to do that in the root component of your app or inside component you've navigated to with the page-router-outlet:

<action-bar-content>
  <ActionBar title="Title Of My Page">
    <NavigationButton text="Go Back" android.systemIcon="ic_menu_back"></NavigationButton>
    <ActionItem text="action" (tap)="onTap()"></ActionItem>
  </ActionBar>
</action-bar-content>

You will have put the above code somewhere inside you component template and it will replace the action bar of the page with the one you defined.

Add Items To The Current ActionBar

For example if you have a component you want it to provide an additional (contextual) ActionItem to the existing ActionBar on the page:

<action-bar-content>
    <ActionItem text="delete" (tap)="deleteSelectedItem()"></ActionItem>
</action-bar-content>

Again you put the action-bar-content directive somewhere inside the component and it will add the items to the current action bar. The items are removed when the component is destroyed - for example it it is *ngIf-ed or if it is a part of a nested navigation and navigated away from.

Any suggestions for the syntax or additional scenarios that need to be supported?

[hdeshev]

I propose we split the action-bar-content component in two components: one that defines the action bar at the "root", and another that defines a scope with different action items, etc:

<action-bar-definition>
  <ActionBar title="Title Of My Page">
    <NavigationButton text="Go Back" android.systemIcon="ic_menu_back"></NavigationButton>
    <ActionItem text="action" (tap)="onTap()"></ActionItem>
  </ActionBar>
</action-bar-definition>

(other ideas: action-bar-root, action-bar-root-scope)
and

<action-bar-scope>
    <ActionItem text="delete" (tap)="deleteSelectedItem()"></ActionItem>
</action-bar-scope>

[hdeshev]

Even better if we get rid of the action-bar-definition component and move some of its responsibilities to the ActionBar one.

[vakrilov]

@hdeshev
That looks cleaned in terms of syntax. So to summarize:
<ActionBar> - for defining the whole action bar.
<action-bar-scope> - for adding just action-items.
I will try to see if implementing this is possible.

[nraboy]

Curious to know where this stands. Action bars are critical in todays applications.

[tjvantoll]

Looking over these examples it’s not exactly clear to me how <action-bar-content> or <action-bar-scope> fits into the main <ActionBar> definition. I think the most common scenario is people are going to want to define the full ActionBar on each page, so we might want to start with just <action-bar-definition> for simplicity.

[NathanWalker]

I agree with @tjvantoll ... It may be worth looking at how Ionic v2 handles this. They have the right approach IMO:

// in one component:
<ion-navbar *navbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>Profile</ion-title>
</ion-navbar>

// in another component
<ion-navbar *navbar>
  <ion-title>Notifications</ion-title>
  <button nav-pop class="btn-left">
    <ion-icon name="close"></ion-icon>
  </button>
</ion-navbar>

Then the framework helps coalesce things together to make them work pretty seamlessly. Even animating the titles in the right direction. It's nice.

[vakrilov]

@tjvantoll I described the scenarios we want to cover here - I think you are referring to the first one. The change that @hdeshev proposed is to eliminate the wrapping <action-bar-content> tag and just use <ActionBar>...</ActionBar>.

The <action-bar-scope> directive we are proposing will allow you to just add items to the existing action-bar. For example: Let's say you have a text editor component inside your page and want it to be able to just add a save action item when the text is changed without redefining the whole action-bar(title, nav-btn, etc.). So you can add the item form inside the editor component:

<action-bar-scope>
<ActionItem text="save" *ngIf="changes"></ActionItem>
</action-bar-scope>

Does that clarifies things?