GWT和CSS開發最佳實踐

我在想開發一個外部CSS開發人員參與設計網站外觀的應用程序的最佳實踐嗎？GWT和CSS開發最佳實踐

理想情況下，他們將創建CSS文件，我們可以通過多次迭代輕鬆集成到網站中，開發團隊無需對這些文件進行任何操作（顯然，將會有HTML或模板更改指向適當的類）。

GWT文檔（http://code.google.com/webtoolkit/doc/latest/DevGuideUiCss.html）列出了四種方法：

使用的HTML網頁的標籤。
在模塊XML文件中使用元素。
使用包含在ClientBundle中的CssResource。
在UiBinder模板中使用內聯元素。

的文件表明，現代應用程序會傾向於使用方法3和4，但這些似乎侵入性的發展過程，因爲我們不希望有不斷地更改CSS每次迭代更新CssResource接口（在方法3）中，或者必須將CSS文件剪切和分割，以將它們內聯到我們的ui.xml文件中（方法4）。

我們正在考慮使用方法2，並手動編碼CSS類。這將允許我們輕鬆地放入CSS文件更新，而不需要開發人員去觸摸它們。我們會失去迷惑，並且將會有一些工作來管理對CSS名稱的更改，儘管只不過是其他方法而已。是否有其他考慮我缺少？

是否有構建GWT應用程序的最佳實踐，其中涉及外部CSS設計人員？

來源

2012-03-20 Numbat

如果您的團隊不熟悉HTML/CSS/JS & GWT/Java，可能會出現問題。讓我們假設你有開始，你應該爭取。然後你想獲得以下CSS GWT的好處：

沒有字符串字面類名稱引用
沒有CSS命名空間衝突/污染CSS類的
最小化（壓縮選擇和屬性）
編譯器優化的CSS規則（結合類似規則），排除未使用的規則
編譯器時間檢查CSS有效性和缺失類
沒有外部CSS文件堆
沒有問題，在遠程模式運行時DevMode的（否則瀏覽器遠程拉CSS，你的工作不是新的CSS）

我發現這樣做的最好的辦法是用UiBinder的&爲Java類UiBinder，在一個地方。看下面的例子。這將根據我的經驗產生儘可能最強健，最可靠，最快速，最可靠的應用程序，並且不會添加任何附加文件。

一切都在同一個地方：在UiBinder的，使用它的在Java中的文件，他們正在用在定義

CSS接口定義

的Widget

class MyClass extends Widget { 
    ... // jave UI binder class 

    public interface MyStyle extends CSSBundle { 
     String someClassName(); 
    } 

    @UiField 
    MyStyle style; 

    ... 
    something.setClassName(style.someClassName()); 
    ... 
}

UiBinder

<!-- UiBinder File --> 
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'> 

    <ui:style type='com.my.app.MyFoo.MyStyle'> 
     .someClassName { background-color:pink; } 
    </ui:style> 

    <div class='{style.someClassName}'>Sample text.</div> 

</ui:UiBinder>

我以前問過這個問題，請查看here。

來源

2012-03-21 03:05:07

感謝您的答覆和代碼示例以及其他問題的鏈接，希望您自己的項目進展順利。正如我在下面的另一個回覆中提到的那樣，我認爲在項目的這個階段，以及團隊成員在UI/CSS和GWT/Java上的經驗水平和熟悉程度，我們將採用一種更簡單的方法，但要確保我們的CSS輸出可以被切片並在以後轉換爲使用UiBinder或CssResource。 – Numbat 2012-03-21 06:29:37

這裏很難有一個「最佳實踐」，因爲四種不同的方法在不同情況下都能很好地工作。取決於你如何使用GWT，將決定使用的最佳選擇。

如果您的團隊由A）僅Java和B）CSS/HTML組成，則選項1或2將起作用。但是，如果您的UX角色瞭解GWT和CSS/HTML/XML的集成點（請參閱：UiBinder）。這個人可能會理解如何最好地設置UiBinder，以便最大限度地發揮僅用於Java的角色的功能。

UiBinder + ClientBundle爲您的項目增添了一層額外的複雜性。這有很多好處，但如果你的球隊不適合你，最終可能會造成太多傷害。

「最佳實踐」可能包括組織一個主要CSS文件（通過ClientBundle或選項1或2使用），其組織方式可以提供整體應用程序一致性，同時使用UiBinders中的特定樣式當地的東西

如果你想全力以赴，我想你應該通過

使用側重於利用UiBinder的和CssResource/ClientBundle到最大（實習醫生CssResource/ClientBundel的東西，以及給予UiBinder的風格的編程訪問外部重複使用+增加一致性

來源

2012-03-20 21:01:42

感謝Ashton，在我們項目的這個階段，爲了保持流暢的迭代速度（並且允許開發人員和CSS人員有一點喘息空間來逐漸跨越兩個領域的技能），我們決定以方法2進行，但保持與我們的CSS敞開大門在以後切換到CssResource。 – Numbat 2012-03-21 06:25:15

GWT和CSS開發最佳實踐

回答

相關問題