It is a framework to develop applications in a more controlled way with tabrisjs
npm install 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
- 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
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.
execute command
``bash`
npm i voir-nativeVoir
It is an object with 2 properties that helps render more friendly without invoking the addView function
Voir.Render It is an abstract class that has to be inherited. It has as abstract methods the _render_ that returns a page and the _renderAction_ that returns an array action collection.
Voir.factory It helps that the class is invoked as a function.
addView function adds views to the CoordinatePage
| parameter types
|:--
| ...Array
#### example
`typescript
import { addView, CoordinatePage } from "voir-native";
import { Action, Page, contentView } from "tabris";
contentView.append(
addView(
`
| 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)
);
`
displays as a popup element in the user interface
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
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();
`
Add new preference data
| parameter types
|:--
| string
| any
Recover the value of preference
| parameter types | return |
| :-------------- | ------ |
| string | any |
comprueba si existe la preferencia
| parameter types | return |
| :-------------- | ------- |
| string | boolean |
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 |
create preference page
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;
}
`
| property | type |
| -------- | ------------------ |
| title | string |
| summary | string |
| onSelect | (event: any)=> any |
`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" }]
})
)
);
`
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(
`
`jsx``
image=""
id=""
/>
https://github.com/user-attachments/assets/91232486-11bb-4f71-a2dd-f0fd3be67bb2
> new features will be added little by little