Об общих правилах кастомизации читайте в этой статье.
Чтобы добавить пользовательское контекстное меню для приложений, проделайте следующее:
1. Создайте класс MyContextMenu, унаследовав его от класса по умолчанию desktop.views.JetView. Это и будет само меню с пользовательскими методами GetOptions() и AttachTo().
class MyContextMenu extends desktop.views.JetView {
config() {
return {
view: "contextmenu",
data: this.GetOptions(),
};
}
init() {
this.Menu = this.getRoot();
this.on(this.Menu, "onItemClick", id => {
const ctx = this.Menu.getContext();
this.app.callEvent("onMyMenuClick",
[id, ctx.id, ctx.obj]);
});
}
GetOptions() {
return [{
id: "1",
value: "Action 1"
},
{
id: "2",
value: "Action 2"
},
{
id: "3",
value: "Action 3"
},
];
}
AttachTo(master) {
this.Menu.attachTo(master);
}
}
2. Создайте классы MyDesk и MyMenu, унаследовав их от классов по умолчанию "desk" и "menu" соответственно. Прикрепите меню к компонентам с помощью метода AttachTo():
class MyDesk extends desktop.views["desk"] {
init() {
super.init();
this.MyMenu = this.ui(MyContextMenu);
this.MyMenu.AttachTo(this.Tiles);
}
}
class MyMenu extends desktop.views["menu"] {
init() {
super.init();
this.MyMenu = this.ui(MyContextMenu);
this.MyMenu.AttachTo(this.Tiles);
}
}
3. Создайте класс MyDesk , унаследовав его от класса по умолчанию "top". Пользовательский метод MyAction будет обрабатывать выбранные действия меню.
class MyTop extends desktop.views["top"] {
init() {
super.init();
this.on(this.app, "onMyMenuClick", (id, appId, master) =>
this.MyAction(id, appId, master)
);
}
MyAction(action, appId, master) {
webix.message(`Action '${action}' for '${appId}'`);
}
}
4. Переопределите классы по умолчанию через свойство override:
app = new desktop.App({
systemParams: user,
apps: myApps,
override: new Map([
[desktop.views["top"], MyTop],
[desktop.views["menu"], MyMenu],
[desktop.views["desk"], MyDesk],
]),
});
app.render(document.body);
Related sample: Desktop: Context Menu
Чтобы добавить кнопку на тулбар, проделайте следующее:
1. Создайте класс MyToolbar , унаследовав его от класса по умолчанию desktop.views["toolbar"].
2. Задайте конфигурацию кнопки.
3. Добавьте кнопку к коллекции "cols".
class MyToolbar extends desktop.views["toolbar"] {
config() {
const ui = super.config();
const myButton = {
view: "button",
autowidth: true,
css: "webix_primary",
label: "My button",
click: () => webix.message("My button clicked"),
};
// добавление кнопки к коллекции "cols" как части лейаута, чтобы задать отступы
ui.cols.push({
padding: {
right: 10
},
rows: [{}, myButton, {}],
});
return ui;
}
}
4. переопределите класс по умолчанию через свойство override:
app = new desktop.App({
systemParams: user,
apps: myApps,
override: new Map([
[desktop.views["toolbar"], MyToolbar]
]),
});
Related sample: Desktop: New Toolbar Button
Этот пример покажет, как можно касмомизировать компонент "signout". Вы сможете выбрать пользователя из списка, войти в аккаунт и выйти из нее с помощью меню. Чтобы добиться такого результата, проделайте следующее:
1. Создайте DataCollection для хранения пользователей.
2. Создайте функции для взаимодействия с DataCollection:
const UserCollection = new webix.DataCollection({});
function loadUsers() {
return Promise.resolve([{
name: "Alex Brown",
id: 1
},
{
name: "Sinister Alpha",
id: 2
},
{
name: "Alan Raichu",
id: 3
},
]).then(data => {
return UserCollection.parse(data);
});
}
function setParams(token, user) {
sessionStorage.setItem("login-token", token);
localStorage.setItem("desktop-user", user);
}
function getParams() {
var token = sessionStorage.getItem("login-token");
if (token)
return {
token,
user: localStorage.getItem("desktop-user")
};
return null;
}
3. Создайте класс MySignout, унаследовав его от класса по умолчанию desktop.views["signout"]. Это будет экран входа в аккаунт со списком пользователей. Пользовательский метод MyDoLogin() производит вход в аккаунт и задает свойство systemParams.
class MySignout extends desktop.views["signout"] {
config() {
return {
css: "sign-in",
rows: [{},
{
cols: [{},
{
type: "form",
css: "signin_form",
borderless: true,
maxWidth: 400,
minWidth: 250,
rows: [{
view: "list",
localId: "users",
autoheight: true,
template: "#name#",
}, ],
},
{},
],
},
{},
],
};
}
init() {
super.init();
this.List = this.$$("users");
this.List.parse(UserCollection);
this.on(this.List, "onItemClick", id => this.MyDoLogin(id));
}
MyDoLogin(user) {
this.MyGetToken("someurl").then(raw => {
var token = "mytoken";
setParams(token, user);
this.app.getState().systemParams = {
user,
token
};
});
}
MyGetToken(url) {
//return webix.ajax(url + "login?id=" + this.config.user);
return Promise.resolve("");
}
}
4. Создайте класс MyMenu, унаследовав его от класса по умолчанию desktop.views["menu"]. С помощью метода config() вы можете добавить иконку выхода из аккаунта и имя пользователя. Метод MyUserUpdate() используется для изменения текущего пользователя. А метод MyLogout() очищает объект systemParams и выходит из аккаунта.
class MyMenu extends desktop.views["menu"] {
config() {
const ui = super.config();
const bottomToolbar = {
padding: {
left: 10
},
margin: 5,
borderless: true,
cols: [{
view: "icon",
localId: "logout",
icon: "dsi-logout-variant",
click: () => this.MyLogout(),
},
{
view: "label",
localId: "MyUserName",
label: "",
css: "my_user_label",
},
{},
],
};
ui.body.rows.push(bottomToolbar);
return ui;
}
init() {
super.init();
// on systemParams change handler
this.on(this.app.getState().$changes, "systemParams", () =>
this.MyUserUpdate()
);
// set user name after user data loading
UserCollection.waitData.then(() => this.MyUserUpdate());
}
MyUserUpdate() {
const params = this.app.getState().systemParams;
if (params) {
const userId = params.user;
const user = UserCollection.getItem(userId);
this.$$("MyUserName").config.label = user.name;
this.$$("MyUserName").refresh();
}
}
MyLogout() {
this.app.getState().systemParams = null;
}
}
loadUsers();
5. Переопределите класс по умолчанию через свойство override:
app = new desktop.App({
apps: myApps,
systemParams: getParams(),
override: new Map([
[desktop.views["signout"], MySignout],
[desktop.views["menu"], MyMenu],
]),
});
app.render(document.body);
Related sample: Desktop: Custom Signout View
Наверх