How to use the tabris.contentView.append 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.

github eclipsesource / tabris-js / snippets / stack-alignment.jsx View on Github external
import {contentView, TextView, Stack} from 'tabris';

contentView.append(
  <Stack stretch spacing={24} alignment='stretchX'>
    <TextView background='red'>lorem</TextView>
    <TextView left background='green'>ipsum dolor</TextView>
    <TextView centerX background='blue'>sit amet</TextView>
    <TextView right background='teal'>consectetur</TextView>
  </Stack>
).find(TextView).set({font: '48px', textColor: 'white'});
github eclipsesource / tabris-js / snippets / device.jsx View on Github external
import {contentView, device, TextView} from 'tabris';

contentView.append(<TextView padding={16} markupEnabled font={'16px'} lineSpacing={1.4}/>);

device.onOrientationChanged(renderDeviceProperties);
renderDeviceProperties();

function renderDeviceProperties() {
  $(TextView).only().text =
    <$>
      <b>Platform:</b> {device.platform}<br/>
      <b>Version:</b> {device.version}<br/>
      <b>Model:</b> {device.model}<br/>
      <b>Vendor:</b> {device.vendor}<br/>
      <b>Name:</b> {device.name}<br/>
      <b>Language:</b> {device.language}<br/>
      <b>Orientation:</b> {device.orientation}<br/>
      <b>Screen:</b> {device.screenWidth} x {device.screenHeight}<br/>
      <b>Scale:</b> {device.scaleFactor}<br/>
github eclipsesource / tabris-js / snippets / alertdialog.jsx View on Github external
import {AlertDialog, Button, Stack, TextInput, TextView, contentView} from 'tabris';

contentView.append(
  <Stack stretch padding={16} spacing={16} alignment='stretchX'>
    <Button onSelect={showSimpleDialog}>Simple dialog</Button>
    <Button onSelect={showDialogWithButtons}>Dialog with multiple buttons</Button>
    <Button onSelect={showSelfClosingDialog}>Self-closing dialog</Button>
    <Button onSelect={showTextInputDialog}>Dialog with text fields</Button>
    <TextView/>
  </Stack>
);

const textView =  $().only(TextView);

async function showSimpleDialog() {
  await AlertDialog.open('Comment saved').onClose.promise();
  textView.text = 'Dialog closed';
}
github eclipsesource / tabris-js / snippets / collectionview-cellheightauto.jsx View on Github external
import {TextView, CollectionView, contentView} from 'tabris';

const items = createItems();

contentView.append(
  <CollectionView stretch
      itemCount={items.length}
      createCell={() => new TextView({padding: 12})}
      updateCell={(cell, index) => cell.text = items[index]}/>
);

function createItems() {
  const text = (
    <$>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem
      accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
      illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
      Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
      sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
      Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
      adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et
github eclipsesource / tabris-js / snippets / local-storage.jsx View on Github external
import {Button, TextView, TextInput, contentView, Stack} from 'tabris';

contentView.append(
  <Stack stretch alignment='stretchX' padding={16} spacing={8}>
    <TextInput id='key' message='Key' text='Key'/>
    <TextInput id='value' message='Value' text='Value' onAccept={setValue}/>
    <Button text='Set' onSelect={setValue}/>
    <Button text='Get' onSelect={getValue}/>
    <Button text='Remove' onSelect={removeValue}/>
    <Button text='Clear' onSelect={clearAll}/>
    <Button text='List Keys' onSelect={showKeys}/>
    <TextView id='output'/>
  </Stack>
);

const keyField = $('#key').only(TextInput);
const valueField = $('#value').only(TextInput);
const output = $('#output').only(TextView);
github eclipsesource / tabris-js / snippets / textview-markupenabled.jsx View on Github external
import {CheckBox, contentView, Stack, TextView} from 'tabris';

contentView.append(
  <Stack stretch padding={16} spacing={16} alignment='stretchX'>
    <TextView markupEnabled font='16px'>
      Normal Text <b>bold</b> <i>italic</i><br/>
      <big>big</big><br/>
      <small>small</small><br/>
      <strong>strong</strong><br/>
      <ins>inserted</ins><br/>
      <del>deleted</del>
    </TextView>
    <CheckBox text='Enable markup' checked onSelect={e => $(TextView).only().markupEnabled = e.checked}/>
  </Stack>
);
github eclipsesource / tabris-js / snippets / layout-stack.jsx View on Github external
import {contentView, TextView, StackLayout, ScrollView} from 'tabris';

contentView.append(
  <ScrollView stretch layout={new StackLayout({alignment: 'stretchX'})} >
    <TextView background='red'>lorem</TextView>
    <TextView background='green'>ipsum dolor</TextView>
    <TextView background='blue'>sit amet</TextView>
  </ScrollView>
).find(TextView).set({font: '48px', textColor: 'white'});
github eclipsesource / tabris-js / snippets / imageview-zoom.jsx View on Github external
import {CheckBox, Composite, contentView, ImageView, Slider, Stack, TextView} from 'tabris';

contentView.append(
  <Stack stretch alignment='stretchX'>
    <ImageView stretchY zoomEnabled image='resources/salad.jpg' background='#f5f5f5'
      onZoom={ev => zoomLevelSlider.selection = ev.zoomLevel * 10}/>
    <Stack height={device.platform === 'iOS' ? 196 : undefined} alignment='stretchX'
      padding={{bottom: 12, top: 12}} background='white' elevation={8}>
      <CheckBox left={device.platform === 'iOS' ? 16 : 9} height={48} stretchX checked text='Zoom enabled'
        onCheckedChanged={ev => setZoomEnabled(ev.value)}/>
      <LabeledSlider id='zoomLevel' text='Zoom level' selection={10}
        onSelectionChanged={ev => setZoomLevel(ev.value / 10)}/>
      <LabeledSlider id='minZoomLevel' text='Min zoom' selection={10}
        onSelectionChanged={ev => setMinZoomLevel(ev.value / 10)}/>
      <LabeledSlider id='maxZoomLevel' text='Max zoom' selection={30}
        onSelectionChanged={ev => setMaxZoomLevel(ev.value / 10)}/>
    </Stack>
  </Stack>
);
github eclipsesource / tabris-js / snippets / layout-center.jsx View on Github external
import {Composite, contentView} from 'tabris';

contentView.append(
  <$>
    <Composite centerX centerY width={100} height={100} background='red'/>
    <Composite centerX={-120} centerY width={100} height={100} background='green'/>
    <Composite centerX={120} centerY width={100} height={100} background='green'/>
    <Composite centerX centerY={120} width={100} height={100} background='green'/>
    <Composite centerX centerY={-120} width={100} height={100} background='green'/>
  </$>
);
github eclipsesource / tabris-js / snippets / button.jsx View on Github external
import {Button, contentView} from 'tabris';

let count = 0;

contentView.append(
  <Button onSelect={countUp} left={16} top={16}>Button</Button>
);

function countUp() {
  $(Button).set({text: `Pressed ${++count} times`});
}