2012-07-15

Rikulo 之道

原文網址:http://blog.rikulo.org/posts/2012/Jul/General/the-rikulo-way/

前言

Rikulo 是一個免費、open source 的 framework,讓你可以使用 Dart 與 HTML5 創造出令人驚豔、跨平台的網頁與 native mobile application。我們的目標是提供開發人員最簡單且強而有力的方式來開發 application。為此我們提供了一個 UI 的架構。

Dart 提供了一個給 web 用的結構化程式語言,程式碼可以同時在 client 與 server 端執行。在 Rikulo 中,我們希望拓展這個思維、並應用到 UI 上。HTML 跟 CSS 對包含大量文字的網站而言是很棒的,許多強大的功能也隨著 HTML5 與 CSS3 的導入而出現。然而,在建立複雜的 application 時,複雜 layout 會導致許多 side-effect,HTML 與 CSS 是解決了一些問題、但是卻產生更多的問題。

我們提出的解決方法是「Structured UI Model」。


Structured UI Model

Structured UI Model 是我們的中心思想,在很初期的 GUI 系統導入時就已經調整成可用的程度,它可以簡單描述如下:
UI element 應該以對應其 parent 的位置來定位
這個簡單的思維提供開發人員所需的能力,讓他們在設計 layout 時能讓實作變得簡單。「簡單」就是重點。我們讓開發人員免於跟 DOM 打交道。下面這張圖概略描述出我們的架構:

從上述的架構可以知道:你完全不用碰觸到 DOM,Rikulo 的 UI Model 會幫你做好所有的工作。

在必要的時候,你可以毫不費力地設計自己的 layout,下面這個例子就概略展現了 Rikulo 以簡單又優雅的方式設定 component 的 layout。

for (int x = 0; x < 30; ++x) {
    for (int y = 0; y < 30; ++y) {
        View child = new View();
        final String color = CSS.color(250 - x * 4, 250 - y * 4, 200);
        child.style.cssText = "border: 1px solid #553; background-color: $color";
        child.left = x * 50 + 2;
        child.top = y * 50 + 2;
        child.width = child.height = 46;
        view.addChild(child);
    }
}
除了可以輕鬆地手動設定 component 的 layout,Rikulo 還提供了一組 stock layout 的 component。

Layout

Layout 是 Rikulo UI Model 的延伸,其中一個例子就是 Linear layout,它可以協助開發人員將 component 水平或垂直擺放。下圖展示不同大小的 Linear layout 所呈現的樣子:

Rikulo 在 Linear layout 之外還提供一個 Anchor layout。下面這個例子展示 Anchor layout 如何運作:
TextView welcome = new TextView("Hello World!");
welcome.profile.text = "anchor: parent; location: center center";
除了提供的 layout 外,開發人員也可以用 Rikulo 既有的基礎 layout 來設計自己的 layout,詳細資訊可以參閱這裡

依舊可以用 HTML 與 CSS
Rikulo 的理念是以最少的包袱建立結構化的 UI。當然在 application 中還是會有遇到開發人員想要完全掌控的部份,這也可以很容易做到。Rikulo 的 View 可以完元支援 HTML,例如:
textView.html = "<table><tr><td>${data1}</td><td>${data2}</tr></table>";

這表示當你需要 HTML 與 CSS 時,還是可以使用它們。

Mobile 實力

JavaScript 並不適合建立大型 application、而單純使用 HTML 與 CSS 也不太夠用——這正式 Rikulo 與 Dart 在 mobile 領域的亮點。將結構化、簡潔又強大的 Rikulo 與 Dart 結合起來,這代表開發人員會有令人興奮的方式建立 native mobile application。

結論

這篇文章快速地介紹了 Rikulo 的思維。想知道更多 Rikulo 嗎?請參閱教學文件

No comments:

Post a Comment