Neil Patrick's Mansion

    nativescript-getters
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    NativeScript Getters Plugin

    NPM version GitHub last commit NPM downloads NPM bundle size

    A NativeScript plugin that adds six new getters – in addition to the native getViewById method – to retrieve one or more views by tag, type, class, style, value pair or property.

    Getting Started

    Prerequisites

    Basics

    • NativeScript installed and configured. (see CLI setup)
    • An IDE with intelligent code completion. (see VS Code)
    • A functional project to use the plugin. (see app templates)

    Minimum versions

    Installation

    In Command prompt or Terminal navigate to your application root folder and run one of the following commands to install the plugin. (see docs)

    ns plugin add nativescript-getters

    or

    npm install --save nativescript-getters

    The --save flag will add the plugin as dependency in your package.json file.

    Usage

    Import the plugin at the top of your JavaScript or TypeScript file. It can be imported only once into the application entry point file. (see docs)

    import 'nativescript-getters'

    New methods have been added into the Frame, Page, layouts, tabs and texts classes. (see methods)

    Examples

    Get views by tags

    export function navigatingTo(args: EventData) {
      const page = <Page>args.object
      const actionBar = page.getViewsByTags('ActionBar')[0] // case sensitive
      const foundViews = page.getViewsByTags('Label', 'Button')
    
      console.log('action bar:', actionBar)
      console.log('found views:', foundViews)
    }

    The list of possible tags can be found on the modules page of the NativeScript API documentation. (see "Classes")

    Get views by types

    export function navigatingTo(args: EventData) {
      const page = <Page>args.object
      const layouts = page.getViewsByTypes('layout')
      const foundViews = page.getViewsByTypes('field', 'list')
    
      console.log('layouts:', layouts)
      console.log('found views:', foundViews)
    }

    The list of available types: bar, picker, view, layout, list, text, tab, field and form. (see types.ts)

    Get views by classes

    export function navigatingTo(args: EventData) {
      const page = <Page>args.object
      const mainTitle = page.getViewsByClasses('h1')[0]
      const foundViews = page.getViewsByClasses('text-primary', 'font-italic')
    
      console.log('main title:', mainTitle)
      console.log('found views:', foundViews)
    }

    Get views by styles

    export function navigatingTo(args: EventData) {
      const page = <Page>args.object
      const redViews = page.getViewsByStyles(
        { name: 'background', value: 'FF0000' }
      )
      const foundViews = page.getViewsByStyles(
        { name: 'visibility', value: 'collapsed' },
        { name: 'opacity', value: '0.5' }
      )
    
      console.log('red views:', redViews)
      console.log('found views:', foundViews)
    }

    The list of possible styles can be found on the style page of the NativeScript API documentation.

    Note: The color name (example: red or white) is converted by NativeScript to hexadecimal.

    Get views by val pairs

    export function navigatingTo(args: EventData) {
      const page = <Page>args.object
      const welcomeTexts = page.getViewsByValPairs(
        { name: 'text', value: 'Welcome' }
      )
      const foundViews = page.getViewsByValPairs(
        { name: 'columns', value: 'auto' },
        { name: 'width', value: '210' }
      )
    
      console.log('welcome texts:', welcomeTexts)
      console.log('found views:', foundViews)
    }

    The list of possible property names and their values can be found on the view page of the NativeScript API documentation.

    Get views by properties

    export function navigatingTo(args: EventData) {
      const page = <Page>args.object
      const texts = page.getViewsByProperties('text') // alias: getViewsByProps('text')
      const foundViews = page.getViewsByProperties('columns', 'width')
    
      console.log('texts:', texts)
      console.log('found views:', foundViews)
    }

    The list of possible property names can be found on the view page of the NativeScript API documentation.

    Get views by identifiers

    export function navigatingTo(args: EventData) {
      const page = <Page>args.object
      const debugIds = page.getViewsByIdentifiers('debug') // alias: getViewsByIds('debug')
      const foundViews = page.getViewsByIdentifiers('my-id', 'another-id')
    
      console.log('debug ids:', debugIds)
      console.log('found views:', foundViews)
    }

    Example in stand-alone mode

    import { getViewsByTags } from 'nativescript-getters'
    
    export function standaloneMode(view: View) {
      const foundViews = getViewsByTags.call(view, 'Label', 'Button')
    
      console.log('found views:', foundViews)
    }

    More info about call():

    API

    Methods

    All methods return an array of views, except for the native method getViewById.

    Name Parameter(s) Returns
    getViewsByTags ...tagNames: string[] View[]
    getViewsByTypes ...typeNames: string[] View[]
    getViewsByClasses ...classNames: string[] View[]
    getViewsByStyles ...styles: ValPair[]
    ValPair: { name: string, value: string }
    View[]
    getViewsByValPairs ...valPairs: ValPair[]
    ValPair: { name: string, value: string }
    View[]
    getViewsByProperties
    Alias: getViewsByProps
    ...propNames: string[] View[]
    getViewsByIdentifiers
    Alias: getViewsByIds
    ...idNames: string[] View[]

    Native method

    The native method returns only a view. Its name is written in the singular (getView...).

    Name Parameter Returns
    getViewById idName: string View

    Known issues

    VSCode IntelliSense

    If the following TypeScript declaration error occurs, you need to open the application entry point file (and keep it open) or click on the tab of the file already open.

    Property 'getViewsBy...' does not exist on type 'View'. ts(2339)
    

    VSCode IntelliSense now remembers the entry point of the application and recognizes the declaration of new methods.

    Vue.js

    The plugin may not work properly with these symlinked. It is because webpack resolves symlinks to their real locations by default.

    A workaround for this issue is to manually disable symlinks resolution in webpack:

    const config = {
      resolve: {
        // resolve symlinks to symlinked modules
        symlinks: false
      }
    }

    Question? Idea?

    If you have a question about how nativescript-getters works or an idea to improve it, the Discussions tab in GitHub is the place to be.

    However, if you get an error, you should open an issue.

    License

    Distributed under the MIT License. See LICENSE for more information.

    Contact

    Benjamin Grand @bgrand_ch

    Install

    npm i nativescript-getters

    DownloadsWeekly Downloads

    2

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    16.8 kB

    Total Files

    4

    Last publish

    Collaborators

    • bgrand-ch