Is there a way to create a reusable ActionBar for all pages?
I followed this tutorial which walked me through the process of adding in a RadSideDrawer to my 4 page app (not 100% if using a sidedrawer would change how I could approach this problem).
The 4 pages all have the same ActionBar. Instead of copy/pasting the code on each page (and updating on each page with changes), how do I reuse the same code for them all?
I tried statically defining the ActionBar code in the Frame content...
<template lang="html">
<Page>
<RadSideDrawer>
<StackLayout ~drawerContent>
<slot name="drawerContent"></slot>
</StackLayout>
<Frame ~mainContent>
<!-- TRIED PUTTING ACTIONBAR STRUCTURE HERE? -->
<slot name="mainContent"></slot>
</Frame>
</RadSideDrawer>
</Page>
</template>
I've also tried creating a custom component (with my ActionBar code living in /widgets/header/header.xml), by following this tutorial...
<Page xmlns:header="widgets/header">
<header:header />
</Page>
But I got an error message in the console:
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
My best guess, at this moment, is that NativeScript-Vue prefers the use of slots -- but how would I go about putting a slot into content that's populating another slot (<slot name="mainContent"></slot>)?
Related
Lets say I've created a custom component and want to place it inside AbsoluteLayout of parent component. So basically I would do something like this:
<AbsoluteLayout>
<custom-component></custom-component>
</AbsoluteLayout>
But what if I want to adjust a position of the custom component and use AbsoluteLayout's top and left attributes on the child? The problem is that I can't put this attributes directly on custom child tag. The only solution I found is to wrap custom component with StackLayout:
<AbsoluteLayout>
<StackLayout top="50">
<custom-component></custom-component>
</StackLayout>
</AbsoluteLayout>
So my question is how can I position custom child without adding additional wrapper layout and make code like below work:
<AbsoluteLayout>
<custom-component top="50"></custom-component>
</AbsoluteLayout>
Should I make any changes to my child component? Or maybe it's not possible to get rid of wrapper layout at all?
I see that Frame works now much better.
We can have Tabview,that is a root of current view.
<TabView androidTabsPosition="bottom">
<TabViewItem title="First">
<Frame defaultPage="home/home-page" />
</TabViewItem>
<TabViewItem title="Second">
<Frame defaultPage="second/second-page" />
</TabViewItem>
</TabView>
This looks like home-page or second-page is “included”.
Now, i’m wondering if it’s possible to have app-root.xml that holds common elements, and needed page is included. I’ve tried this, but this is not working (why? This approach is possible only for tabview and sidedrawer ?)
app-root.xml
<Page>
<Frame defaultPage="create/create"></Frame>
</Page>
create/create.xml
<StackLayout class="footer white">
<Label text="test"></Label>
</StackLayout>
Instead of Page use layout like GridLayout Look at this test application as a reference and more specifically this page
However, the above approach would work for Android but for iOS, you should either remove the action bar for each Page (inside each Frame) or create multiple action bars (not recommended!).
is there anyway to customize the search-bar element that NativeScript provides ?
and add some buttons in it.
am trying to get something like this (the search-bar in this app)
I've been searching a bit but found nothing about it.
Basic demo here: https://play.nativescript.org/?template=play-vue&id=y6iFw9
You can always hide default action bar with actionBarHidden="true on your <page> element and then create your own action bar. In this case you can use GridLayout and put each element in its own column. Something like:
<Page actionBarHidden="true>
<StackLayout>
<GridLayout rows="auto columns="auto, *, auto, auto, auto>
<Label col="0 text="Menu"/>
<TextField col="1></TextField>
<Label col="2 text="icon1"/>
<Label col="3 text="icon2"/>
<Label col="4 text="icon3"/>
</GridLayout>
</StackLayout>
</Page>
Just replace labels with your icons, and add #tap="yourFunction to fire when icon is pressed. To turn labels into icons you can use package like Fonticon.
The search-bar from tns-core-modules doesn't provide what you're looking for (see the API at https://docs.nativescript.org/api-reference/modules/_ui_search_bar_). I'd recommend to implement the component yourself.
i want to play an animation when a new message is added in the DOM.
but i don't know how to find my object and edit it with code in (this.zone.run) function :
addMessage(message: string){
this.messages.unshift(message);
// renderer
this.zone.run(() => {
});
}
here's the app.component.html
<StackLayout #container>
<ScrollView>
<WrapLayout #red>
<Label class="message" *ngFor="let message of messages" [text]="message"></Label>
</WrapLayout>
</ScrollView>
</StackLayout>
i want to edit the first child of the WrapLayout element
There is no DOM with NativeScript.
However a major community contributor wrote a plugin to help transition web developers into native development with NativeScript. This plugin provides helper methods that you'll find familiar to the web and DOM. https://github.com/NathanaelA/nativescript-dom
Just remember these are helper methods are not something provided out of the box by NativeScript. You can get any view by its id in NativeScript several ways and during different events (page/frame and component level).
I recall there's no page component with NativeScript with angular but I think you still have the frame module which you could do something like
frame.topmost().currentPage.getViewById('yourID');
Making sure you import(require) the frame module.
<Page xmlns:tsk="pages/task" xmlns:trnr="pages/turner" loaded="loaded" navigatingTo="navigatingTo">
<Page.actionBar>
<ActionBar>
<ActionBar.actionItems>
<ActionItem text="Add" ios.position="right" android.position="popup" tap="addTabTapped" />
</ActionBar.actionItems>
</ActionBar>
</Page.actionBar>
<TabView>
<TabView.items>
<TabViewItem title="Turners">
<TabViewItem.view>
<trnr:turner-list-page />
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="Task">
<TabViewItem.view>
<tsk:task-list-page />
</TabViewItem.view>
</TabViewItem>
</TabView.items>
</TabView>
</Page>
I have a TabView xml page that contains custom xml components as TabViewItems. Each of these components has a code behind page with navigatingTo methods as exports. In my TabView loaded method, I have a handler that sets the currently selected TabViewItem "onSelectedIndexChange". When the user is navigated around the application, and back to the TabView page, the navigatingTo that is invoked is in the TabView, not in the TabViewItems. I have tried to place the navigatingTo in various spots in the TabView xml page, but the navigatingTo only seems to be called for the page, not the custom xml components.
I see when debugging and watching the TabViewItem that the exports object is available, and that the exports of each TabViewItem are accessible, but when I try to invoke those methods from within my code, they do not seem to be accessible.
Is there a means of accessing the export object on a TabViewItem so that the exported methods within the various tab view items can be invoked?
So I have successfully managed to answer my own question:
In my loaded function:
export function loaded(args:EventData) {
var page:Page = <Page>args.object;
var tv:tabView.TabView = <tabView.TabView>page.content;
tv.on(tabView.TabView.selectedIndexChangedEvent, handleTabChange);
selectedTabViewItem = tv.items[tv.selectedIndex];
};
I set a reference to the selected tab view item.
Then to reference the exports method, it is as simple as
selectedTabViewItem.view["exports"].addTapped(args);
Anything that is exported can now be accessed from anything referencing that view.