How to use the tabris.NavigationView function in tabris

To help you get started, we’ve selected a few tabris examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github eclipsesource / tabris-js / snippets / navigationview-searchaction.js View on Github external
import {Button, Composite, NavigationView, Page, SearchAction, TextView, contentView, device} from 'tabris';

// Create an action on NavigationView to perform a search with dynamic proposals

const PROPOSALS = ['baseball', 'batman', 'battleship', 'bangkok', 'bangladesh', 'banana'];

const navigationView = new NavigationView({
  left: 0, top: 0, right: 0, bottom: 0
}).appendTo(contentView);

const page = new Page({
  title: 'Search action'
}).appendTo(navigationView);

const searchBox = new Composite({
  centerX: 0, centerY: 0
}).appendTo(page);

const textView = new TextView().appendTo(searchBox);

const action = new SearchAction({
  title: 'Search',
  image: {
github eclipsesource / tabris-js / test / typescript / Widgets / NavigationView.fail.ts View on Github external
import {NavigationView, Button, Page, Action} from 'tabris';


let widget = new NavigationView();
widget.append(new Button());

class CustomPage extends Page {
  public foo: string;
}

class CustomAction extends Action {
  public bar: string;
}

const badlyTypedNavigationView1: NavigationView<tabris.Composite> = new NavigationView();
const badlyTypedNavigationView2: NavigationView<CustomPage, tabris.Composite> = new NavigationView();
const badlyTypedNavigationView3: NavigationView<CustomAction, CustomPage> = new NavigationView();
const typedNavigationView: NavigationView<CustomPage, CustomAction> = new NavigationView();
typedNavigationView.append(new Action());
typedNavigationView.append(new Page());

/*Expected
(5,
'Button' is not assignable to parameter
(15,
does not satisfy the constraint
(16,
does not satisfy the constraint
(17,
does not satisfy the constraint
(19,
not assignable to parameter
github eclipsesource / tabris-js / test / typescript / Widgets / NavigationView.fail.ts View on Github external
import {NavigationView, Button, Page, Action} from 'tabris';


let widget = new NavigationView();
widget.append(new Button());

class CustomPage extends Page {
  public foo: string;
}

class CustomAction extends Action {
  public bar: string;
}

const badlyTypedNavigationView1: NavigationView<tabris.Composite> = new NavigationView();
const badlyTypedNavigationView2: NavigationView<CustomPage, tabris.Composite> = new NavigationView();
const badlyTypedNavigationView3: NavigationView<CustomAction, CustomPage> = new NavigationView();
const typedNavigationView: NavigationView<CustomPage, CustomAction> = new NavigationView();
typedNavigationView.append(new Action());
typedNavigationView.append(new Page());

/*Expected
(5,
'Button' is not assignable to parameter
(15,
does not satisfy the constraint
(16,
does not satisfy the constraint
(17,
does not satisfy the constraint
(19,
github eclipsesource / tabris-js / test / typescript / Widgets / NavigationView.fail.ts View on Github external
let widget = new NavigationView();
widget.append(new Button());

class CustomPage extends Page {
  public foo: string;
}

class CustomAction extends Action {
  public bar: string;
}

const badlyTypedNavigationView1: NavigationView<tabris.Composite> = new NavigationView();
const badlyTypedNavigationView2: NavigationView<CustomPage, tabris.Composite> = new NavigationView();
const badlyTypedNavigationView3: NavigationView<CustomAction, CustomPage> = new NavigationView();
const typedNavigationView: NavigationView<CustomPage, CustomAction> = new NavigationView();
typedNavigationView.append(new Action());
typedNavigationView.append(new Page());

/*Expected
(5,
'Button' is not assignable to parameter
(15,
does not satisfy the constraint
(16,
does not satisfy the constraint
(17,
does not satisfy the constraint
(19,
not assignable to parameter
(20,
not assignable to parameter
github eclipsesource / tabris-js / snippets / popover.js View on Github external
function showPopover() {
  const popover = new Popover({width: 300, height: 400, anchor: button})
    .on('close', () => console.log('Popover closed'))
    .open();
  const navigationView = new NavigationView({
    layoutData: {left: 0, right: 0, top: 0, bottom: 0},
    navigationAction: new Action({
      title: 'Close',
      image: {
        src: device.platform === 'iOS' ? 'resources/close-black-24dp@3x.png' : 'resources/close-white-24dp@3x.png',
        scale: 3
      }
    }).on('select', () => popover.close())
  }).appendTo(popover.contentView);
  const page = new Page({title: 'Popover'}).appendTo(navigationView);
  new TextView({centerX: 0, centerY: 0, text: 'Hello popover'}).appendTo(page);
}
github eclipsesource / tabris-js / examples / cordova / app.js View on Github external
const {Button, Page, NavigationView, ScrollView, contentView} = require('tabris');
const ToastPage = require('./ToastPage');
const SharingPage = require('./SharingPage');
const MotionPage = require('./MotionPage');
const NetworkPage = require('./NetworkPage');
const MediaPage = require('./MediaPage');
const CameraPage = require('./CameraPage');

const navigationView = new NavigationView({left: 0, top: 0, right: 0, bottom: 0})
  .appendTo(contentView);

const mainPage = new Page({
  title: 'Cordova Examples'
}).appendTo(navigationView);

const contentContainer = new ScrollView({
  left: 0, top: 0, right: 0, bottom: 0, padding: 16
}).appendTo(mainPage);

[
  SharingPage,
  ToastPage,
  MotionPage,
  NetworkPage,
  CameraPage,
github eclipsesource / tabris-js / snippets / navigationview-action-placement.js View on Github external
import {Action, NavigationView, contentView, device} from 'tabris';

const navigationView = new NavigationView({
  left: 0, top: 0, right: 0, bottom: 0
}).appendTo(contentView);

createAction('Close', getImage('close'), 'navigation');
createAction('Settings', getImage('settings'), 'default');
createAction('Share', getImage('share'), 'overflow');

function createAction(title, image, placement) {
  new Action({
    title,
    placement,
    image: {src: image, scale: 3}
  }).appendTo(navigationView);
}

function getImage(image) {
github eclipsesource / tabris-js / examples / reddit / reddit.js View on Github external
const {CollectionView, Composite, ImageView, NavigationView, Page, TextView, WebView, contentView} = require('tabris');

const ITEM_FETCH_COUNT = 25;

let loading;
let items = [];

const navigationView = new NavigationView({
  left: 0, top: 0, right: 0, bottom: 0
}).appendTo(contentView);

const page = new Page({
  title: 'Reddit - Pets'
}).appendTo(navigationView);

const collectionView = new CollectionView({
  left: 0, top: 0, right: 0, bottom: 0,
  background: '#f5f5f5',
  refreshEnabled: true,
  cellHeight: 96,
  cellType: index => items[index].loading ? 'loading' : 'normal',
  createCell: (type) => {
    if (type === 'normal') {
      return createItemCell();
github eclipsesource / tabris-js / examples / animation / app.js View on Github external
const animationPage = require('./simple');
const peoplePage = require('./people');
const trayPage = require('./tray');
const {Button, NavigationView, Page, contentView} = require('tabris');

const navigationView = new NavigationView({
  left: 0, top: 0, right: 0, bottom: 0
}).appendTo(contentView);

const mainPage = new Page({
  title: 'Animation Examples'
}).appendTo(navigationView);

[animationPage, peoplePage, trayPage].forEach((page) => {
  new Button({
    left: 8, top: 'prev() 8', right: 8,
    text: page.title
  }).on('select', () => page.appendTo(navigationView))
    .appendTo(mainPage);
});
github eclipsesource / tabris-js / snippets / drawer-pages.ts View on Github external
import {
  Button, CollectionView, Composite, ImageView, NavigationView, Page, TextView, contentView, drawer
} from 'tabris';

const PAGE_CONFIGS: Array<{title: string, icon: string}> = [
  {title: 'Basket', icon: 'resources/page.png'},
  {title: 'Checkout', icon: 'resources/page.png'}
];

const navigationView = new NavigationView({
  left: 0, top: 0, right: 0, bottom: 0,
  drawerActionVisible: true,
  pageAnimation: 'none'
}).appendTo(contentView);

drawer.enabled = true;

new ImageView({
  left: 0, right: 0, top: 0, height: 200,
  image: 'resources/landscape.jpg',
  scaleMode: 'stretch'
}).appendTo(drawer);

const pageSelector = new CollectionView({
  left: 0, top: 'prev()', right: 0, bottom: 0,
  itemCount: PAGE_CONFIGS.length,