Voir Native

It is a framework to develop android and ios applications in a more organized way with tabrisjs

> Now it supports tabris 2.9 you can download the development apk here
and for version 3.9 in the play store.
go to documentation 2.9.x & 3.9.x

Documentation

- video example
- getting started
- installation
- Voir
- helpers view
- addView
- setMenuDrawer
- popup
- Toast
- Modal
- helpers storage
- setPreference
- getValuePreference
- existsKeyPreference
- components
- PreferenceScreen
- SwitchPreference
- CheckBoxPreference
- ListPreference
- TextPreference
- CoordinatePage
- DrawerMenu
- DrawerMenuItem

Getting Started

when installing voir-native installs with the dependency of tabrisjs you can go to the documentation of tabrisjs and see the entire list of widgets, services and more.

$3

execute command

``bash
npm i voir-native
`


Voir

`typescript
import { addView, CoordinatePage } from "voir-native";
import { Action, Page, contentView } from "tabris";

contentView.append();

addView(, );
`

$3

| parameter types
|:--
| Array\<_MenuItemOption_\>

`typescript
interface MenuItemOption {
id: string;
text: string;
image?: string;
}
`

#### example

`typescript
import { setMenuDrawer } from "voir-native";
import { drawer } from "tabris";

drawer.enabled = true;

setMenuDrawer(
[
{
text: "home",
id: "home",
image: "/images/home.png"
},
{
text: "favorite",
id: "favorite",
image: "/images/favorite.png"
},
{
text: "configure",
id: "config",
image: "/images/settings.png"
}
],
menu => console.log(menu)
);
`

popup

displays as a popup element in the user interface

$3

show popup message with duration time

| method | parameter types |
| ---------------- | --------------- |
| constructor | string, number |
| static makeText | string, number |
| show | |

#### example

`typescript
import { Toast } from "voir-native";

Toast.makeText("hello", 2000).show();

`
static methods: SHORT | MEDIUM | LONG

$3

displays a popup that represents a view

| method | parameter types | return |
| --------------- | --------------- | ---------------- |
| addView | ...Widget[] |
| setButtonCancel | string | tabris.Listeners |
| setButtonAccept | string | tabris.Listeners |
| remove |
| removeView |
| removeButtons |
| show |

#### example

`typescript
import { Modal } from "voir-native";
import {TextView} from "tabris";

const modal = new Modal();

modal.addView(

);

modal.setButtonCancel("cancel").addListener(() => {
modal.remove();
});

modal.setButtonAccept("accept").addListener(() => {
modal.remove();
});

modal.show();
`

helpers storage

$3

Add new preference data

| parameter types
|:--
| string
| any

$3

Recover the value of preference

| parameter types | return |
| :-------------- | ------ |
| string | any |

$3

comprueba si existe la preferencia

| parameter types | return |
| :-------------- | ------- |
| string | boolean |

Components

$3

to add preferences where data can be saved in which the user preference persists

properties received by default to:

- ListPreference
- SwitchPreference
- CheckBoxPreference

| property | type |
| -------- | --------------------------- |
| title | string |
| summary | string |
| key | string |
| value | string \| boolean \| number |
| onSelect | (event: any)=> any |

$3

create preference page

$3

create a modal displaying a view of options to select

received aditional property

| property | type |
| -------- | -------- |
| entries | IEntry[] |

`typescript
interface IPropertyListPreference extends IPropertyChildPreference {
entries: IEntry[];
}

interface IEntry {
text: string;
id: string;
}
`

$3

| property | type |
| -------- | ------------------ |
| title | string |
| summary | string |
| onSelect | (event: any)=> any |

$3

`javascript
import {
PreferenceScreen,
TextPreference,
SwitchPreference,
CheckBoxPreference,
ListPreference
} from "voir-native";
import { contentView } from "tabris";

contentView.append(
PreferenceScreen({
layoutData: "stretch"
}).append(
TextPreference({
title: "text info",
summary: "summary"
}),
SwitchPreference({
title: "title",
summary: "summary",
key: "keySwitch",
value: true
}),
CheckBoxPreference({
title: "title",
summary: "summary",
key: "cbPreference",
value: false
}),
ListPreference({
title: "my list preference",
key: "list",
value: 0, // default value select
entries: [{ id: "myId", text: "item 1" }]
})
)
);
`

CoordinatePage

handles the elements of a current page

`javascript
import { CoordinatePage } from "voir-native";

import { contentView, TextView } from "tabris";

const menuLeft = ()=> {
return (




)
}

const menuItemSelected = (item) => {
console.log('pressed id '+ item.id)
}

const drawerItemSelected = (item) => {
console.log('pressed drawerItemSelected id '+ item.id)
}

contentView.append(
CoordinatePage({
layoutData: "stretch",
drawerActionVisible: true,
menuDrawer={menuLeft()}
contentDrawer={}
onDrawerItemSelected={drawerItemSelected}
onActionSelect={menuItemSelected}
})
);

// or

contentView.append();
`

DrawerMenu

`jsx

text=""
image=""
id=""
/>

``

Video Example

https://github.com/user-attachments/assets/91232486-11bb-4f71-a2dd-f0fd3be67bb2

> new features will be added little by little