2010-12-30 4 views
6

사용자가 온라인 투표를 만들 수있는 GWT + AppEngine 응용 프로그램이 있습니다. 여론 조사 작성자가 자신의 여론 조사에서 다양한 주제를 선택하도록하고 싶습니다. 투표 작성자가 서버에서 선택한 주제를 저장하고 설문 응답자가 설문에 액세스 할 때마다 선택한 주제로 질문을 받게됩니다.GWT에서 CSS 스타일 색상을 설정하는 방법

우리를위한 테마는 설문 조사 페이지의 스타일을 지정하는 데 사용할 4-5 색을 의미합니다. 우리의 클라이언트 측 애플리케이션은 UiBinder에 인라인 설정 스타일과 GWT 응용 프로그램, 예를 들어, 요소를 템플릿입니다 :

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

우리는 서버에 저장 주제에서 COLOR1 및 COLOR2을 설정할 수있는 방법을 제안 해주십시오. 이것은 GWT 모듈 테마 질문이 아니라는 점에 유의하십시오.

답변

4

내가 아는 한 런타임 중에 uibinder 템플릿을 변경할 수 없습니다 (컴파일 타임에 javascript로 컴파일되고 런타임에는 더 이상 액세스 할 수 없기 때문에).

gwt 코드의 색상을 수동으로 변경해야합니다 (= .xml 파일이 아닌 java 파일에서). 정직

:

  1. 색상 정보를 저장하는 데이터베이스 구조를 만드는
  2. 데이터베이스에서 색상을 얻기 위해 서버 코드를 생성
  3. GWT 서비스 (및 비동기 인터페이스와 서블릿 구현 클래스를 구현)를 사용하여 클라이언트에 색상 정보를 전달하십시오.
  4. gwt 클라이언트 코드를 구현합니다. 그러면 색상 정보를 묻고 gwt-compone의 색상을 설정합니다 nts. 다음과 같이 할 수 있습니다 (낙타의 경우는 http://www.francoismaillet.com/blog/?p=68로 기재) :

    widget.getElement(). getStyle(). setProperty ("background", colorValueFromDatabase);

당연히이 해결책은 많은 위젯을 변경해야 할 때 매우 손 쉽게 처리 할 수 ​​있습니다.

대안 1 :

가 데이터베이스에서로드 색상 데이터가에 CSS를 정의로 그 색상을 반환, CSS 파일 (표준 서블릿을 제공 할 수있다 (GWT없이) 일반 오래된 자바 서블릿을 구현 브라우저). 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 :

를 사용하여 자바 스크립트 (네이티브 코드)를 동적으로 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 : 내 코드가 안된 ... 스타일 사이

+0

이러한 것들은 사용 가능한 회피책이지만 CssResource 개발 가이드에 잘 설명되어 있지 않은 GWT 기반 솔루션이 있습니다. 내 대답을 보라. – LINEMAN78

0
  1. 전환이 용이하다. programmatically select inline styles을 참조하십시오. 다른 CSS 클래스에서 색상 체계를 선언하고 요소에 할당하면됩니다. 많은 요소가 있으면이 작업이 번거로울 수 있습니다.

  2. 기존 CSS 스타일을 조작하는 것은 GWT에서 직접 지원되지 않는 AFAIK입니다. JSNI에 의지해야합니다. 이 스레드를 참조하십시오 : change css rules dynamically

2

에 반대를하는 것이 runtime substitution에 UIBinder 스타일을 연기 할 수 대답 무엇 slartidan. 이것에 대한 유일한주의 사항은 스타일 시트를 삽입하기 전에 색상 기본 설정을로드해야한다는 것입니다.이 스타일 시트는 만들기 및 바인딩 UI 메서드에서 수행되며 정적 메서드를 통해 이러한 기본 설정을 사용할 수 있도록 설정해야합니다.

<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> 
관련 문제