Как установить цвета стиля CSS в GWT - PullRequest
6 голосов
/ 30 декабря 2010

У меня есть приложение GWT + AppEngine, которое позволяет пользователям создавать онлайн-опросы.Я хочу позволить создателю опроса выбирать из множества тем для своего опроса.Мы сохраним тему, которую создатель опроса выбрал на сервере, и всякий раз, когда респондент опроса получит доступ к опросу, он получит вопросы по выбранной теме.

Тема для нас означает набор из 4-5 цветов, которые мыбудет использовать для стилизации страницы опроса.Наше клиентское приложение - это приложение GWT со встроенными стилями в элементах шаблонов UiBinder, например:

<ui:style>
.header {
background: color1;
padding: 6px 6px;
}
.anothercssclass {
background: color2;
padding: 6px 6px;
}
</ui:style>

Пожалуйста, предложите, как мы можем установить color1 и color2 из темы, сохраненной на сервере.Обратите внимание, что это НЕ тема вопроса модуля GWT.

Ответы [ 3 ]

4 голосов
/ 30 декабря 2010

Насколько я знаю, невозможно изменить шаблон uibinder во время выполнения (так как он скомпилирован в javascript во время компиляции и больше не доступен во время выполнения).

Возможно, вам придется вручную изменитьцвета в вашем gwt-коде (= в java-файлах, а не в XML-файлах).

Прямо:

  1. создать структуру базы данных для хранения вашего цветаинформация
  2. создание серверного кода для получения цветов из базы данных
  3. реализация службы gwt (а также асинхронного интерфейса и класса реализации сервлета) для доставки информации о цвете клиенту
  4. реализовать клиентский код gwt, который запрашивает информацию о цвете, а затем устанавливает цвета для ваших gwt-компонентов.Вы можете сделать это следующим образом (используйте случай верблюда, как описано на http://www.francoismaillet.com/blog/?p=68):

    widget.getElement (). GetStyle (). SetProperty ("background", colorValueFromDatabase);

Конечно, это решение довольно неудобно, когда приходится менять множество виджетов.

Альтернатива 1:

Реализация простого старогоСервлет Java (без gwt), который может предоставить файл CSS (стандартный сервлет, который загружает данные о цвете из базы данных и возвращает эти цвета в виде определений CSS в браузер).Используйте ссылку на этот сервлет на стартовой странице gwt-html.

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class CssServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        // you somehow have to get your user's information out of the session
        User user = (User) request.getSession().getAttribute("loggedInUser");
        PrintWriter writer = response.getWriter();

        // use saved color values and generate css
        writer.append(".header {");
        writer.append(" background: " + getHeaderColorForUser(user) + ";");
        writer.append(" padding: 6px 6px;");
        writer.append(" }");
        writer.append(" .anothercssclass {");
        writer.append(" background: " + getAnotherCssClassColorForUser(user) + ";");
        writer.append(" padding: 6px 6px;");
        writer.append(" }");

        // finish request
        writer.close();
        response.setStatus(HttpServletResponse.SC_OK);
    }

    private String getAnotherCssClassColorForUser(User user) {
        // TODO Auto-generated method stub
        return null;
    }

    private String getHeaderColorForUser(User user) {
        // TODO Auto-generated method stub
        return null;
    }

}

Проблема этой альтернативы в том, что вы не можете мгновенно обновить информацию о цвете.Пользователь должен перезагрузить страницу, чтобы увидеть изменения в своих цветовых стилях.

Альтернатива 2:

Использование javascript (нативный код) для динамического изменения настроек CSS.

// in java code:
changeCssStyle("header", "background", colorFromDatabase);

и

private native void changeCssStyle(String cssClass, String cssName, String cssValue)
/*-{
    var children = document.getElementsByTagName('*') || document.all;
    var elements = new Array();

    // iterate over ALL elements
    for (i in children) {
        var child = children[i];
        var classNames = child.className.split(' ');
        for (c in classNames) {

            // does this element use our css class?
            if (classNames[c] == '.' + cssClass) {

                // now modify this element: set the attribute with name "cssName" to the value "cssValue"
                child.style.setAttribute(cssName, cssValue);
            }
        }
    }
 }-*/
;

Заключение

Три обходных пути для вашей проблемы, но ни один из них не является действительно решением - но, надеюсь, он поможет вамреализации вашего кода.Удачи!

PS: мой код не проверен ...

2 голосов
/ 05 января 2011

Вопреки тому, что ответил Слартидан, можно отложить стили UIBinder до замена во время выполнения .Единственное предостережение: перед загрузкой таблицы стилей необходимо загрузить цветовое предпочтение, что, как я полагаю, выполняется с помощью метода создания и привязки пользовательского интерфейса, и вы должны сделать эти предпочтения доступными статическим методом.

<ui:style>
    @eval color1 com.module.UserPreferences.getColor1();
    .header {
      background: color1;
      padding: 6px 6px;
    }
    @eval color2 com.module.UserPreferences.getColor2();
    .anothercssclass {
      background: color2;
      padding: 6px 6px;
    }
</ui:style>
0 голосов
/ 01 января 2011
  1. Переключение между стилями легко. См. программный выбор встроенных стилей . Просто объявите свои цветовые схемы под различными классами CSS и затем назначьте их своим элементам. Это может быть громоздким, если у вас много элементов.

  2. Управление существующим стилем CSS не поддерживается AFAIK напрямую в GWT. Вам нужно будет прибегнуть к JSNI. Смотрите эту ветку: динамически изменяйте правила CSS

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...