DEV Community: Meyti

Stop event propagation Nativescript (vue)

Meyti — Tue, 26 May 2020 05:20:38 +0000

Consider this layout:

<template>
  <FlexboxLayout @tap="dismiss">
    <Button text="Submit" @tap="submit" />
  </FlexboxLayout>
</template>

<script>
export default {
  methods: {
    dismiss () {
      console.log('dismiss')
    },
    submit () {
      console.log('submit')
    }
  }
}
</script>

When tap on FlexboxLayout area console output will be:

dismiss

and its okey.

When tap on "Submit" button console output will be:

dismiss
submit

But we expect to get:

submit

Since we have no official way to do this (like what in browser Event.stopPropagation), then here is the hacky/dirty way:

<template>
  <FlexboxLayout @tap="dismiss">
    <StackLayout @tap="nothing">
      <Button text="Submit" @tap="submit" />
    </StackLayout>
  </FlexboxLayout>
</template>

<script>
export default {
  data () {
    return {
      ignoreTap: false
    }
  },
  methods: {
    nothing () {
      this.ignoreTap = true
    ,
    dismiss () {
      if (this.ignoreTap) {
        this.ignoreTap = false
        return true
      }
      console.log('dismiss')
    },
    submit () {
      console.log('submit')
    }
  }
}
</script>

Investigations:

Handle page unload event in nativescript-vue

Meyti — Sat, 02 May 2020 23:14:24 +0000

import { Page } from 'tns-core-modules/ui/page'
export default {
  mounted () {
    this.nativeView.page.on(Page.navigatingFromEvent, this.pageUnload)
  },
  beforeDestory () {
    this.nativeView.page.off(Page.navigatingFromEvent, this.pageUnload)
  },
  methods: {
    pageUnload () {
      console.log('page unload')
    }
  }
}

Draw your application sketch with Inkscape

Meyti — Fri, 17 Apr 2020 23:22:03 +0000

If you believe or not Inkscape is really great software to draw your ideation for everything.

Inkscape is free, open-source and hackable
Inkscape is cross-platform
Inkscape is stable
Inkscape is fast
Inkscape is powerful/featureful

I've been using it for about 5 years, recently i have some challenges to draw a good sketch. i love Inkscape but what about alternative softwares for sketching? yes i searched a lot. Inkscape is really fit with my desires, but searching helped me to learn more and bring other software ideas in it.
Finally i want to share some tips you need to learn about Inkscape and start drawing.

Cloning

DRY, create once and clone it as many as you want. when you change source object, clones will change too!

p.n: It's like Adobe XD's component

To clone an object, select object use alt+d shortkey
To clone an object in very advanced way: Edit -> clone -> Create tiled clones... learn more
Duplicate and object ctrl+d (source changes will not apply)

Paths and nodes

You should able to edit path and nodes, learn about it.

Grid, Snap and Guide

It's very important part to achieve a perfect design.

Another sketching softwares has really sexy tool, known as Smart Guide. for example when you move object beside another one, its magically snap in same position that neighbors has.

Inkscape has no feature like that (when i`m writing this post), you should define grid size and turn on the snapping manually. Yes, little old fashioned but not annoying at all. Learn more

Moreover Inkscape has Guides to drag in where it needs and position the objects.

Learn how to create, delete, move and rotate Guide lines Learn more

Conclusion

I've mentioned important parts, of-course you need more. learn about layers, gradients, document size, colors, shapes, etc.
But i promise, learning Inkscape in action is much easier than Sand Play.

Inkscape is not best choice if you need:

Built-in prototyping tool
Share / Review and online collaborate
Large collection of Components and UI kits (like material design components exists for Sketch App or Adobe XD)

Enable fullscreen view on nativescript-vue

Meyti — Tue, 14 Apr 2020 18:15:32 +0000

import * as app from 'tns-core-modules/application'
import { device } from 'tns-core-modules/platform'

export function hideSystemUi () {
  if (!app.android || parseInt(device.sdkVersion) < 21) { return }
  const androidViewPkg = android.view // eslint-disable-line no-undef
  const window = app.android.startActivity.getWindow()
  window.addFlags(androidViewPkg.WindowManager.LayoutParams.FLAG_FULLSCREEN)
  window.clearFlags(androidViewPkg.WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN)
}

export function showSystemUi () {
  if (!app.android || parseInt(device.sdkVersion) < 21) { return }
  const androidViewPkg = android.view // eslint-disable-line no-undef
  const window = app.android.startActivity.getWindow()
  window.addFlags(androidViewPkg.WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN)
  window.clearFlags(androidViewPkg.WindowManager.LayoutParams.FLAG_FULLSCREEN)
}

A very simple dubstep visualizer

Meyti — Mon, 23 Mar 2020 06:12:57 +0000

I'm listening to dubstep sometime, it's really good genere to listen while doing some routines. about two years ago i owned dubstep.ir domain and created a fake radio to play top dubstep songs in loop.

Fake radio? i've created a simple server script that scan and schedule directory of mp3 songs. and repeats the playlist in browser forever. but player state synced with an initial timestamp. so you hear same song in same state on all devices!

Today dubstep.ir recieved an update:

Dropped fake-radio and uses a real radio station
Black theme
Simple circular visualizer

For next update i'm planning to turn it to a very cool audio visualizer.

Next update TODO:

Multiple visulizers
Full-screen mode
Color scheme
Visualize local audio files
Radio station selector
Save and share customizations
SSL

Get dimensions in nativescript-vue

Meyti — Mon, 16 Mar 2020 01:20:16 +0000

Get screen size:

docs

import { screen } from 'platform'

screen.mainScreen.widthDIPs 
screen.mainScreen.widthPixels
screen.mainScreen.heightDIPs
screen.mainScreen.heightPixels

Get element size:


<Button ref="myElement" width="300" height="auto" />

this.$refs.myElement.nativeView.width  // 300
this.$refs.myElement.nativeView.height  // 'auto'
this.$refs.myElement.nativeView.getMeasuredWidth() // 600 (on Nexus 4)
this.$refs.myElement.nativeView.getMeasuredHeight()
this.$refs.myElement.nativeView.getActualSize() // { width: 300, height: 200 }

Note:
Make sure the element already rendered, and seems there is no such event to set a hook, so just take a nap!

export default {
  mounted () {
    setTimeout(() => {
      console.log(this.$refs.myElement.nativeView.width)
    }, 10)
  }
}

Links:

Controll Android Back Button in nativescript-vue

Meyti — Sun, 15 Mar 2020 20:52:57 +0000

Just create a simple component:

import { android, AndroidApplication } from 'tns-core-modules/application'
import { isAndroid } from 'tns-core-modules/platform'

// WARNING: Just works on android
export default {
  props: {
    prevent: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      hooked: false
    }
  },
  watch: {
    prevent (newVal, oldVal) {
      if (newVal === oldVal) { return }
      if (newVal) {
        this.setHook()
      } else {
        this.clearHook()
      }
    }
  },
  render () {},
  mounted () {
    if (this.prevent) { this.setHook() }
  },
  beforeDestroy () {
    this.clearHook()
  },
  methods: {
    onBackEvent (data) {
      this.$emit('tap', data)
      if (this.prevent) {
        data.cancel = true // prevents default back button behavior
      }
    },
    setHook () {
      if (!isAndroid || this.hooked) { return }
      android.on(AndroidApplication.activityBackPressedEvent, this.onBackEvent)
      this.hooked = true
    },
    clearHook () {
      if (!isAndroid || !this.hooked) { return }
      android.off(AndroidApplication.activityBackPressedEvent, this.onBackEvent)
    }
  }
}

And use it like:

...
<android-back-button :prevent="true" @tap="onBackButton" />
...