Is there anyone knows a link which shows an example on how to implement itemSelecting in Nativescript angular RadListViewhttps://docs.nativescript.org/ns-ui-api-reference/classes/radlistview#itemselecting?
Because I can't find any example. Thank you.
HTML
<RadListView class="list-group" [items]="countries" selectionBehavior="Press"
multipleSelection="true" (itemSelecting)="onItemSelecting($event)"
(itemDeselecting)="onItemSelecting($event)">
<ng-template let-country="item">
<FlexboxLayout flexDirection="row" class="list-group-item">
<Image [src]="country.imageSrc" class="thumb img-circle"></Image>
<Label [text]="country.name" class="list-group-item-heading"
verticalAlignment="center" style="width: 60%"></Label>
</FlexboxLayout>
</ng-template>
</RadListView>
TS
import { ListViewEventData } from "nativescript-ui-listview"
import { Component } from "#angular/core";
#Component({
selector: "Home",
moduleId: module.id,
templateUrl: "./home.component.html",
styleUrls: ["./home.component.css"]
})
export class HomeComponent {
countries: { name: string, imageSrc: string }[] = [
{ name: "Australia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/au.png" },
{ name: "Belgium", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/be.png" },
{ name: "Bulgaria", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/bg.png" },
{ name: "Canada", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ca.png" },
{ name: "Switzerland", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ch.png" },
{ name: "China", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/cn.png" },
{ name: "Czech Republic", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/cz.png" },
{ name: "Germany", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/de.png" },
{ name: "Spain", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/es.png" },
{ name: "Ethiopia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/et.png" },
{ name: "Croatia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/hr.png" },
{ name: "Hungary", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/hu.png" },
{ name: "Italy", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/it.png" },
{ name: "Jamaica", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/jm.png" },
{ name: "Romania", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ro.png" },
{ name: "Russia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ru.png" },
{ name: "United States", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/us.png" },
];
onItemSelecting(args: ListViewEventData): void {
console.log(args.view.bindingContext.name);
args.returnValue = args.index > 5;
}
}
Note: It seems to be buggy, at least on Android. Second tap fails to fire itemSelecting event and marks the item as selected. A workaround could be found at nativescript-ui-feedback/issues/181
Related
I am following this tutorial.
I have trips.json in my data folder
[
{
"img": "../assests/images/bahamas.jpg",
"name": "Bahama Beach"
},
{
"img": "../assests/images/china.jpg",
"name": "Chinese Palace"
},
{
"img": "../assests/images/dubai.jpg",
"name": "dubai"
},
{
"img": "../assests/images/monke.jpg",
"name": "monke",
"alt": "monke monke monke monke"
}
]
Here is my gatsby-config.js
module.exports = {
siteMetadata: {
title: `My Gatsby Project`,
description: `Made with Gatsby.`,
author: `#gatsbyjs`,
siteUrl: `https://gatsbystarterdefaultsource.gatsbyjs.io/`,
},
plugins: [
`gatsby-transformer-json`,
{
resolve: `gatsby-source-filesystem`,
options: {
path: `./src/data`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/assets/images`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `videos`,
path: `${__dirname}/src/assets/videos`,
},
},
{
resolve: `gatsby-plugin-styled-components`,
options: {
// Add any options here
author: `me`,
},
},
`gatsby-plugin-react-helmet`,
`gatsby-plugin-image`,
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
`gatsby-plugin-gatsby-cloud`,
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
],
}
At localhost:8000/__graphql, I am getting a checkbox for "img."
However, the tutorial makes extensive use of many properties within the "img" attribute.
I have tried to stop the process, do gatsby clean and restart the process.
So I want to figure out why I am not seeing this and how I can get this drop-down to appear on my screen.
Solved it by adding the following to gatsby-node.js
exports.createResolvers = ({
actions,
cache,
createNodeId,
createResolvers,
store,
reporter,
}) => {
const { createNode } = actions
createResolvers({
StrapiPageContentArticleGallery: {
imageFile: {
type: `File`,
resolve(source, args, context, info) {
return createRemoteFileNode({
url: `${source.url}`, // for S3 upload. For local: `http://localhost:1337${source.url}`,
store,
cache,
createNode,
createNodeId,
reporter,
})
},
},
},
})
}
I am using b-table (Bootstrap-vue) with API Laravel.
This is the vue code:
<TableCli
:items="items"
:fields="fields"
:rows="rows"
:perPage="perPage">
</TableCli>
.
data: function () {
return {
mode: "save",
item: {},
items: [],
paises: [{}],
checked: 1,
page: 1,
perPage: 10,
fields: [
{ key: "id", label: "Código", sortable: true },
{ key: "name", label: "Name", sortable: true },
{ key: "tva", label: "TVA", sortable: true },
{ key: "country_id", label: "Country", sortable: true},
{ key: "cp", label: "CP", sortable: true },
{ key: "city", label: "City", sortable: true },
{ key: "address", label: "Address", sortable: true },
{
key: "status",
label: "Status",
sortable: true,
formatter: (value) => (value ? "Yes" : "No"),
},
{ key: "actions", label: "Actions" }
],
};
Methods:
methods: {
loadCli() {
const url = `${baseApiUrl}/api/cli`;
axios.get(url).then((res) => {
this.items = res.data;
});
},
loadCountrys() {
const url = `${baseApiUrl}/api/country`;
axios.get(url).then(res => {
this.country = res.data
})
},
My table returns the country id, how do I return the country name?
Another question, how do I add an action button in the Actions column?
The button to edit and delete.
I think this snippet answers your questions. The main idea is using slot for b-table.
new Vue({
el: '#app',
data() {
return {
table_fields: [
{
key: "title",
label: "Title"
},
{
key: "user",
label: "User"
},
{
key: "id",
label: "Detail Button"
}
],
page_contents: [
{
id: "title-id-1",
title: "title 1",
user: {
id: "user-id-1",
name: "name 1",
},
}
]
}
},
methods: {
do_sth(id) {
console.log(id)
}
}
})
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap#4.5.3/dist/css/bootstrap.min.css" />
<script src="https://unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.js"></script>
<div id="app">
<b-table-lite striped small hover :items="page_contents" :fields="table_fields">
<template #cell(id)="data">
<b-button size="sm" #click='do_sth(data.value)'>Detail Button</b-button>
</template>
<template #cell(user)="data">
<span> {{ data.value.id }} </span>
<span> || </span>
<span> {{ data.value.name }} </span>
</template>
</b-table-lite>
</div>
I am using this (https://www.nativescript.org/blog/implementing-a-login-for-nativescript-apps-with-tab-based-navigation) git (https://github.com/NativeScript/login-tab-navigation-ng)
app-routing.module.ts
const routes: Routes = [
{
path: "",
redirectTo: "/tabs/default",
pathMatch: "full"
},
{
path: "login",
component: LoginComponent
},
{
path: "tabs",
loadChildren: "~/app/tabs/tabs.module#TabsModule",
canActivate: [AuthGuard]
},
];
tabs.module.ts
NativeScriptRouterModule.forChild([
{
path: "default", component: TabsComponent, children: [
{
path: "events",
outlet: "eventTab",
component: NSEmptyOutletComponent,
loadChildren: "~/app/event/events.module#EventsModule",
},
{
path: "notifications",
outlet: "notificationTab",
component: NSEmptyOutletComponent,
loadChildren: "~/app/notifications/notifications.module#NotificationsModule",
},
{
path: "profile",
outlet: "profileTab",
component: NSEmptyOutletComponent,
loadChildren: "~/app/profile/profile.module#ProfileModule",
},
{
path: "info",
outlet: "infoTab",
component: NSEmptyOutletComponent,
loadChildren: "~/app/info/info.module#InfoModule",
}
]
}
])
notifications.module.ts
NativeScriptRouterModule.forChild([
{ path: "", redirectTo: "notifications" },
{ path: "notifications", component: NotificationsComponent },
]),
In notifications view i have list with records, when i click on the record i want to redirect to events tab. I tried many ways but nothing works :(
for example, with this I have no errors, but redirect also not working
this.routerExtensions.navigate([
'tabs/default', { outlets: { eventTab: ["events"] } }
])
Do You have any ideas?
I'm building a app with just javascript, no typescript, no angular, no vuejs.
Is it possible to use NativeScript UI with pure javascript ?
I'm trying to use radlistview, and the only code I find is on TypeScript.
If not, then what I'm trying to do is just output a list and tapAction on each item to navigato to single item with the data passed of that item.
Anyone have any idea how to do that?
Yes, it's very possible. In many of the examples you'll have to mentally translate from typescript to javascript. I use javascript projects myself and had to make those translations myself when I was first starting. It can be a little confusing.
Irrespective of TypeScript / Angular / Vue, end of the code is complied to plain JavaScript only. These are just modern frameworks / libraries those help to speed up development & make things easier.
The TypeScript code can be compiled into JavaScript using TypeScript CLI, there are even several sites do this within your browser.
RadListView: ViewModel
var frame = require("tns-core-modules/ui/frame");
var observableModule = require("tns-core-modules/data/observable");
function HomeViewModel() {
var viewModel = observableModule.fromObject({
countries: [
{ name: "Australia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/au.png" },
{ name: "Belgium", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/be.png" },
{ name: "Bulgaria", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/bg.png" },
{ name: "Canada", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ca.png" },
{ name: "Switzerland", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ch.png" },
{ name: "China", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/cn.png" },
{ name: "Czech Republic", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/cz.png" },
{ name: "Germany", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/de.png" },
{ name: "Spain", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/es.png" },
{ name: "Ethiopia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/et.png" },
{ name: "Croatia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/hr.png" },
{ name: "Hungary", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/hu.png" },
{ name: "Italy", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/it.png" },
{ name: "Jamaica", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/jm.png" },
{ name: "Romania", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ro.png" },
{ name: "Russia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ru.png" },
{ name: "United States", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/us.png" },
],
onItemTap: function (args) {
var bindingContext = args.view.bindingContext;
console.log(bindingContext.name);
},
});
return viewModel;
}
module.exports = HomeViewModel;
Playground Sample
In NativeScript-Vue the SearchBar widget seems to override the back button in Android. The desired behavior is for the back button to close the keyboard and then, if pressed once more, navigate back to the page the user was on before. What happens instead is that the keyboard closes and then subsequent back button presses do nothing. This only happens once the SearchBar has focus.
I've tried registering a listener
mounted: function(){
if(application.android){
application.android.on(application.AndroidApplication.activityBackPressedEvent, this.backEvent);
}
}
That approach worked on other pages but it seems to be completely ignored once the searchBar has focus. Is there a way to capture the back button press event from the searchbar?
Here is the vue template:
<template>
<Page class="page">
<ActionBar title="Home" class="action-bar" />
<ScrollView>
<StackLayout class="home-panel">
<SearchBar id="mySearchBar" #loaded="onLoadedEvent" hint="Search hint" v-model="searchPhrase" #submit="onSearchSubmit" />
<ListView class="list-group" for="country in filteredList" #itemTap="onItemTap" style="height:1250px">
<v-template>
<GridLayout columns="*, 2*" rows="auto, auto" class="list-group-item">
<Image col="0" rowSpan="2" :src="country.imageSrc" />
<Label col="1" colSpan="2" row="0" :text="country.name" class="list-group-item-heading" />
<label col="1" colSpan="2" row="1" :text="country.description" />
</GridLayout>
</v-template>
</ListView>
</StackLayout>
</ScrollView>
</Page>
inside the script tag I have the appropriate imports and then the following inside export default:
methods: {
onLoadedEvent(args){
if(application.android){
args.object.android.clearFocus();
}
},
onItemTap: function (args) {
console.log('Item with index: ' + this.countries[args.index].name + ' tapped');
console.log("Value of searchPhrase: " + this.searchPhrase);
},
onSearchSubmit(args) {
let searchBar = args.object;
console.log("You are searching for " + searchBar.text);
},
onClearEvent(args){
let searchBar = args.object;
}
},
computed: {
filteredList() {
return this.countries.filter(country => {
return country.name.toLowerCase().includes(this.searchPhrase.toLowerCase())
})
}
},
data () {
return {
countries: [
{ name: "Australia", description: "Snakes and stuff", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/au.png" },
{ name: "Belgium", description: "Great Waffles", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/be.png" },
{ name: "Bulgaria", description: "No Clue. Maybe Dracula?", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/bg.png" },
{ name: "Canada", description: "Maple Syrup", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ca.png" },
{ name: "Switzerland", description: "Chocolate & Watches", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ch.png" },
{ name: "China", description: "Socialism", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/cn.png" },
{ name: "Czech Republic", description: "Checkers?", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/cz.png" },
{ name: "Germany", description: "AHH, Motherland!", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/de.png" },
{ name: "Spain", description: "Bulls!", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/es.png" },
{ name: "Ethiopia", description: "Hungry", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/et.png" },
{ name: "Croatia", description: "Crows?", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/hr.png" },
{ name: "Hungary", description: "Hung Gary", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/hu.png" },
{ name: "Italy", description: "Meatballs", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/it.png" },
{ name: "Jamaica", description: "Ganja", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/jm.png" },
{ name: "Romania", description: "Not Romans", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ro.png" },
{ name: "Russia", description: "Putin 4 Life", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ru.png" },
{ name: "United States", description: "Fat People", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/us.png" },
],
searchPhrase: ""
};
}