Необходимо воспроизводить фоновые звуки в приложении
Сейчас использую компонент который наследует WebAbstractComponent<com.vaadin.ui.Audio>
Но при добавлении данного компонента на форму и скрытии его органов управления методом , он занимает место, и даже при скрытии органов управления методом setShowControls(false) компоновщик продолжает выделять под него место. Попытка выставления компоненту нулевой ширины и высоты тоже не приносит результатов.
Подскажите пожалуйста как сделать компонент нулевого размера или возможно есть какой-то другой лучший способ воспроизведения звуков?
Здравствуйте,
В платформе пока нет API, позволяющего создавать невизуальные компоненты, но вы можете воспользоваться API Vaadin. В Vaadin есть специальные объекты, называемые Extensions, которые могут исполнять JavaScript код в браузере не являясь визуальными компонентами.
Extensions описаны здесь:
- https://vaadin.com/docs/-/part/framework/gwt/gwt-extension.html
- https://vaadin.com/docs/-/part/framework/gwt/gwt-javascript.html
- https://vaadin.com/wiki?p_p_id=36&p_p_lifecycle=0&p_p_state=normal&p_p_mode=view&p_p_col_id=row-1&p_p_col_pos=2&p_p_col_count=4&_36_struts_action=%2Fwiki%2Fview&p_r_p_185834411_nodeName=vaadin.com+wiki&p_r_p_185834411_title=Creating+a+component+extension
- https://vaadin.com/wiki?p_p_id=36&p_p_lifecycle=0&p_p_state=normal&p_p_mode=view&p_p_col_id=row-1&p_p_col_pos=2&p_p_col_count=4&_36_struts_action=%2Fwiki%2Fview&p_r_p_185834411_nodeName=vaadin.com+wiki&p_r_p_185834411_title=Integrating+a+JavaScript+library+as+an+extension
Например, пусть я хочу показывать JavaScript alert() при помощи такого невизуального компонента.
Я реализую JavaScript Extension:
-
Создаю каталог VAADIN в каталоге web/modules/web/web
-
В этом каталоге создаю JavaScript файл с именем “alert-ext.js”
-
Этот файл будет реализовывать логику работы на стороне браузера:
// register extension
window.com_company_jsextdemo_web_AlertExtension = function() {
this.saySomething = function(text) {
window.alert(text);
}
};
Обратите внимание на имя функции в объекте window, это FQN класса в проекте, в котором точки заменены на “_”.
- Создаю Java класс com.company.jsextdemo.web.AlertExtension:
@JavaScript("vaadin://alert-ext.js")
public class AlertExtension extends AbstractJavaScriptExtension {
public AlertExtension(AbstractComponent target) {
super(target);
}
public void saySomething(String text) {
callFunction("saySomething", text);
}
}
Этот класс я буду использовать в коде своего экрана.
- В коде экрана создаю мой JavaScript Extension, добавляя его к одному из других компонентов в моём экране:
private AlertExtension alertExtension;
@Override
public void init(Map<String, Object> params) {
super.init(params);
// Add extension to some existing component in layout
AbstractComponent windowComponent = workArea.unwrap(AbstractComponent.class);
alertExtension = new AlertExtension(windowComponent);
}
- Вызываю методы Extension, например по кнопке:
public void showExtAlert() {
alertExtension.saySomething("Hello!");
}
Я приложил небольшой демо-проект, в котором реализован такой Extension, его можно импортировать в Studio и запустить.
Если вам всё-таки понадобятся сложные скрытые элементы управления, то их можно создать в виде DOM элементов на стороне Extension и добавить их в элемент body, например, в виде элементов с position: absolute и visibility: hidden. Кроме того, в платформе уже есть библиотека jquery, она может несколько упростить написание расширений для компонентов.
Я, к сожалению, ничего не знаю о том, как вы воспроизводите звуки, но надеюсь что этот материал вам поможет.
js-ext-demo.zip (24.2K)
4 симпатии