I'm very new to NativeScript. I chose it compared to React Native because I wanted 100% access to native API. I started playing with native plugins and read some tutorials like this one native libraries
Now I'm trying to follow the same principle with this plugin FloatingActionButton
var app = require("application");
var platformModule = require("platform");
var fs = require("file-system");
var imageSource = require("image-source");
function creatingFab(args) {
var fabMenu = new com.github.clans.fab.FloatingActionMenu(app.android.foregroundActivity);
var fabButton = new com.github.clans.fab.FloatingActionButton(args.object.android);
fabButton.setButtonSize(FloatingActionButton.SIZE_MINI);
fabButton.setLabelText("Hello Button");
//fabButton.setImageResource(imageSource.fromResource("logo"));
fabMenu.addMenuButton(fabButton);
fabMenu.hideMenuButton(false);
}
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page">
<Page.actionBar>
<ActionBar title="My App" icon="" class="action-bar">
</ActionBar>
</Page.actionBar>
<StackLayout class="p-20">
<Label text="Tap the button" class="h1 text-center"/>
<Button text="TAP" tap="{{ onTap }}" class="btn btn-primary btn-active"/>
<Label text="{{ message }}" class="h2 text-center" textWrap="true"/>
</StackLayout>
<android>
<placeholder id="fab" tap="fabClick" class="fab-button" margin="15" creatingView="creatingFab"/>
</android>
</Page>
Thank you in advance for your help
try is as this based on this http://docs.nativescript.org/api-reference/classes/application.androidapplication.html#foregroundactivity
var fabMenu = new com.github.clans.fab.FloatingActionMenu(app.AndroidApplication.foregroundActivity);
Related
I am getting issue to open sliding drawer from right to left for
xamarin android . but below code working for show sliding
drawer from left to right. if any property of MasterDetailPage to
open sliding from right to left
please share your views with me. Here Sliding Drawer open from left to right but i want to open from right to left for Xamarin
Android
Any idea regarding this. please share your idea's.
We are also using MenuRootPage for add items in Sliding Drawer :
Code for items view:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
>
<ContentPage.Content>
<StackLayout BackgroundColor="{StaticResource ToolbarStatusBackgroundColor}" Orientation="Vertical" Spacing="20">
<StackLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{mm:Command SliderClose}" />
</StackLayout.GestureRecognizers>
<Image Source="menu.png" HorizontalOptions="Start" Margin="10,40,0,0" />
</StackLayout>
<BoxView HorizontalOptions="EndAndExpand" HeightRequest="1" WidthRequest="1000" Color="{StaticResource SeparatorColor}" />
<Label Text="My account" Style="{StaticResource ToolbarStatusDescriptionLabel}" Margin="10" >
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{mm:Command SliderClose}" />
</Label.GestureRecognizers>
</Label>
<BoxView HorizontalOptions="EndAndExpand" HeightRequest="1" WidthRequest="1000" Color="{StaticResource SeparatorColor}" />
<Label Text="Settings" Style="{StaticResource ToolbarStatusDescriptionLabel}" Margin="10">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{mm:Command SliderClose}" />
</Label.GestureRecognizers>
</Label>
<BoxView HorizontalOptions="EndAndExpand" HeightRequest="1" WidthRequest="1000" Color="{StaticResource SeparatorColor}" />
<Label Text="Logout" Style="{StaticResource ToolbarStatusDescriptionLabel}" HorizontalTextAlignment="Center" VerticalOptions="EndAndExpand" Margin="10">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{mm:Command Logout}" />
</Label.GestureRecognizers>
</Label>
</StackLayout>
</ContentPage.Content>
</ContentPage>
In MenuRootPage .xaml file we are declare master page only UI section
In MenuRootPage .cs file: here we are inherit MasterDetailPage properties
Using code:
Root page in MenuRootPage .xaml file:
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Ansible.Vektor.App.Shared.Views.MenuRootPage" >
</MasterDetailPage>
Root MenuRootPage .cs file:
public partial class MenuRootPage : MasterDetailPage
{
public MenuRootPage ()
{
InitializeComponent();
MasterBehavior = MasterBehavior.Popover;
}
}
App.xaml.cs:
var menuPage = new MenuPages() { BindingContext = MenuPagesViewModel };
NavigationPage = new NavigationPage(new MainView() {
BindingContext = MainViewModel });
MenuRootPage = new MenuRootPage();
MenuRootPage.Master = menuPage;
MenuRootPage.Detail = NavigationPage;
MenuIsGestureEnabled = false;
MainPage = MenuRootPage;
Here Sliding Drawer open from left to right but i want to open from right to left for Xamarin Android
Any idea regarding this. please share your idea's.
Make custom render for Master Detail Page in Android.
public class MyMasterDetailPageRenderer : MasterDetailPageRenderer
{
protected override void OnElementChanged(VisualElement oldElement, VisualElement newElement)
{
base.OnElementChanged(oldElement, newElement);
var fieldInfo = GetType().BaseType.GetField("_masterLayout", System.Reflection.BindingFlags.Instance | System.Reflection.BindingFlags.NonPublic);
var _masterLayout = (ViewGroup)fieldInfo.GetValue(this);
var lp = new DrawerLayout.LayoutParams(_masterLayout.LayoutParameters);
lp.Width = 300;
lp.Gravity = (int)GravityFlags.Right;
_masterLayout.LayoutParameters = lp;
}
}
i have a listview to show data from hardcoded array list and i need to make user able to click on any item to show the details of this item in another page , how can i do that ? i tried to create another array for details and make bindingContext and its working good but no data show when converting to details page as you can see here
thats my code :
main-view-model.js:
var Observable = require("data/observable").Observable;
function RegisterViewModel() {
var viewModel = new Observable();
viewModel.shows = [
{name:"Reg1"},
{name:"Reg2"},
{name:"Reg3"},
{name:"Reg4"},
{name:"Reg5"},
];
return viewModel;
}
exports.RegisterViewModel = RegisterViewModel;
main-page.js:
var RegisterViewModel = require("./main-view-model").RegisterViewModel;
var frameModule = require('ui/frame');
var viewModel = new RegisterViewModel();
function RegisterViewModel(args) {
var page = args.object;
page.bindingContext = RegisterViewModel();
}
exports.getInfo = function (args) {
var navigationEntry = {
moduleName: "RegisterDetails",
context: {info:args.view.bindingContext}
}
frameModule.topmost().navigate(navigationEntry);
}
exports.loaded = function(args){
args.object.bindingContext = viewModel;
}
exports.RegisterViewModel = RegisterViewModel;
main-page.xml:
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page" loaded="loaded">
<Page.actionBar>
<ActionBar title="My App" icon="" class="action-bar">
</ActionBar>
</Page.actionBar>
<StackLayout class="p-20">
<SearchBar id="searchBar" hint="Search" text="" clear="onClear" submit="onSubmit" />
<TabView>
<TabView.items>
<TabViewItem title="register">
<TabViewItem.view>
<ListView items="{{shows}}" tap="getInfo" >
<ListView.itemTemplate>
<Label text="{{name}}" />
</ListView.itemTemplate>
</ListView>
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="Tab 2">
<TabViewItem.view>
<Label text="Label in Tab2" />
</TabViewItem.view>
</TabViewItem>
</TabView.items>
</TabView>
</StackLayout>
</Page>
these for details:
RegisterDetails-model.js
viewModel.shows = [
{name:"Reg01"},
{name:"Reg02"},
{name:"Reg03"},
{name:"Reg04"},
{name:"Reg05"},
];
return gotData;
}
exports.pageLoaded = pageLoaded;
RegisterDetails.js:
var gotData;
function pageLoaded(args) {
var page = args.object;
gotData = page.navigationContext.info;
page.bindingContext={passedData:gotData}
}
exports.pageLoaded = pageLoaded;
RegisterDetails.xml:
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page" loaded="pageLoaded">
<Page.actionBar>
<ActionBar title="Register" icon="" class="action-bar">
</ActionBar>
</Page.actionBar>
<StackLayout >
<Label text="{{name}}" />
</StackLayout>
</Page>
but when i clicked on any item i go to register details but no data shows in page , and i received this message error in console :
JS: Binding: Property: 'name' is invalid or does not exist. SourceProperty: 'name'
any help?
I'm completely new to NativeScript but it looks like a sweet platform. I'm writing a toy app and below is my setup:
//code behind
import {AddExpenseModel} from "./add-expense-view-model";
import {EventData} from "tns-core-modules/data/observable";
import {Page} from "tns-core-modules/ui/page";
let expenseModel = new AddExpenseModel();
export function navigatingTo(args: EventData) {
let page = <Page>args.object;
let textField = page.getViewById("tags");
textField.on("textChange", (ev)=>{expenseModel.onTagsTextFieldChange(ev)});
page.bindingContext = expenseModel;
}
export function submit() {
expenseModel.createNewExpense()
}
//view-model
import {Observable, PropertyChangeData} from "tns-core-modules/data/observable";
import {ObservableArray} from "tns-core-modules/data/observable-array";
let u = require('underscore');
export class AddExpenseModel extends Observable {
...
public parsed_tags;
constructor() {
super();
this.parsed_tags = new ObservableArray([]);
...
}
public onTagsTextFieldChange(ev) {
let that = this;
// empty
u.forEach(u.range(this.parsed_tags.length), function (_) {
that.parsed_tags.pop()
});
let parsed = this.parseTags(ev.value);
u.forEach(parsed, function (el) {
that.parsed_tags.push(el);
});
}
private getParsedTags() {
//unbox
return u.map(this.parsed_tags, (el: string) => el)
}
private parseTags(tag_string) {
let arr = u.map(tag_string.split(','), (tag: string) => tag.trim().toLocaleLowerCase());
arr = u.uniq(arr);
arr = u.filter(arr, u.negate(u.isEmpty))
return arr;
}
}
//view
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
<StackLayout class="p-20">
<Label text="Add new expense"/>
<text-field
id="name" text="{{ name }}"
row="0"/>
<text-field id="amount" stext="{{ amount, amount | numberConverter }}" />
<text-field id="tags" secure="false" text="{{ tags }}"
/>
<WrapLayout orientation="horizontal" height="300" width="300">
<ListView items="{{ parsed_tags }}">
<ListView.itemsLayout>
<Label text="{{ $value }}" width="70" backgroundColor="red"/>
</ListView.itemsLayout>
</ListView>
</WrapLayout>
<button text="Add expense" id="submit-button" tap="submit"/>
</StackLayout>
</Page>
What I want to achieve is that when a user writes in the tags textfield, stylised Labels appear in the WrapLayout. This works, however, the Labels appear always stacked vertically. Here's a screenshot
I tried to move the whole WrapLayout section out of the StackedLayout section, but I get a cannot read property 'on' of undefined, undefined.
Putting Labels inside of WrapLayout not within a ListView (i.e. static) works as expected, which makes me thing I probably misuse either the ListView or the WrapLayout. Any directions will be appreciated :)
Cheers
Update
Following Eddy's advice I used a Repeater. Using the following xml
<Repeater items="{{ parsed_tags }}">
<Repeater.itemsLayout>
<WrapLayout orientation="horizontal" backgroundColor="#d3d3d3"/>
</Repeater.itemsLayout>
<Repeater.itemTemplate>
<Label text="{{ $value }}" backgroundColor="#84ddff" marginRight="5" marginLeft="5"/>
</Repeater.itemTemplate>
</Repeater>
correctly produces this:
I still don't see why using a ListView wouldn't work. I used the debugger from Sidekick and this is what I see.
<ListView items="{{ parsed_tags }}">
<ListView.itemsLayout>
<WrapLayout orientation="horizontal" backgroundColor="#d3d3d3" marginRight="5" marginLeft="5"/>
</ListView.itemsLayout>
<ListView.itemTemplate>
<Label text="{{ $value }}" backgroundColor="#84ddff" marginRight="5" marginLeft="5"/>
</ListView.itemTemplate>
</ListView>
I want to create a list view NativeScript with custom item view. I'm using GridLayout to do that.
The problem is: There is large space between rows item.
These are what I've done:
XML:
<Page loaded="loaded">
<ActionBar title="Welcome">
<android>
<NavigationButton android.systemIcon="ic_menu_emoticons" icon="res://icon" tap="showSlideout"/>
</android>
</ActionBar>
<ListView items="{{ items }}">
<ListView.itemTemplate>
<GridLayout rows="auto" columns="auto,*" class="threads-list-wrapper" height="100">
<Image row="0" col="0" src="{{ photo }}"></Image>
<StackLayout row="0" col="1" class="" orientation="vertical">
<Label class="h1" text="{{title}}"></Label>
<Label text="{{ body }}"></Label>
<Label text="{{ date }}"></Label>
</StackLayout>
</GridLayout>
</ListView.itemTemplate>
</ListView>
CSS
.threads-list-wrapper {
padding: 15;
}
.threads-list-wrapper > Image {
height: 64;
width: 64;
margin-right: 15;
}
CODE:
var observableModule = require("data/observable");
var model = new observableModule.Observable();
exports.loaded = function (args) {
var items = [
{
photo: 'res://icon',
title: 'Ardiansyah Putra',
body: 'Ini adalah pesan yang saya kirimkan kepada anda, mohon cepat dibalas ya',
date: 'Just Now'
},
{
photo: 'res://icon',
title: 'Bagus Putra',
body: 'Ini adalah pesan yang saya kirimkan kepada anda, mohon cepat dibalas ya',
date: '12 Jan'
}
];
var page = args.object;
model.set("items", items);
page.bindingContext = model;
};
RESULT:
Not sure what exactly is causing the white space in your case , but here is a snippet where after stripping all the CSS there are no extra white spaces generated in the list-view template.
<GridLayout rows="*" columns="*, *">
<Image col="0" src="res://icon" stretch="none" />
<StackLayout col="1" >
<Label class="h1" text="{{title}}"></Label>
<Label text="{{ body }}"></Label>
<Label text="{{ date }}"></Label>
</StackLayout>
</GridLayout>
i want to show number or date from bindingcontex array. with this code :
<ListView items="{{ pakets }}" itemTap="onTap">
<ListView.itemTemplate>
<grid-layout rows="220, *, *, *" columns="*" id="cardReport" tap="goReport">
<image row="0" src="{{ foto }}" stretch="aspectFill"/>
<Label row="1" text="{{ textValue }}" />
<Label row="2" text="{{ numberValue }}" />
<Label row="3" text="{{ dateValue }}" />
</grid-layout>
</ListView.itemTemplate>
</ListView>
array pakets fron JSON with value textValue = 'XXXX', numberValue = 3000, dateValue = '2016-06-04'
Both of numberValue and dateValue not show, but textValue show to screen.
What the problems about it ? How to use namber or date in Label Nativescript.
Thanks anyway
I tested this in a test app; and I have the following code, pretty close to unmodified:
Here is the XML:
<Page id="Page" onloaded="pageLoaded" class="">
<ListView items="{{ pakets }}" itemTap="onTap">
<ListView.itemTemplate>
<grid-layout rows="220, *, *, *" columns="*" id="cardReport" tap="goReport">
<image row="0" src="{{ foto }}" stretch="fill"/>
<Label row="1" text="{{ textValue }}" />
<Label row="2" text="{{ numberValue }}" />
<Label row="3" text="{{ dateValue }}" />
</grid-layout>
</ListView.itemTemplate>
</ListView>
</Page>
Here is the JavaScript:
var Observable = require('data/observable').Observable;
var myData = new Observable();
exports.pageLoaded = function(args) {
var page = args.object;
myData.pakets = [
{foto: '~/SO587/nslogo.png', textValue: 'Text', numberValue: 2330, dateValue: '2016-01-01'},
{foto: '~/SO587/gswn.png', textValue: 'Text', numberValue: 2230, dateValue: new Date()},
];
page.bindingContext = myData;
};
And here is how it looks: As you can see from the above data, I have Text, number, Text Date and the second data line has Text, number and a real Date field.
Problems on CSS. i am add with this :
label {
font-family: 'Roboto', Roboto;
}
And work weel.
Thanks Mr. #nathanael