Progress Report

Kristoffer Rosn October 9, 2012

Rhodes Framework

Claims to be framework for developing true native device applications Closer to the truth: hybrid applications

See PhoneGap, Titanium, etc... Developer writes his code using JavaScript/Ruby and normal HTML The framework wrap the code in a special native UI component, called a WebView This view works more or less like a browser, but doesn't look like one Let's call it native!

How does it work?

Since last meeting

Started to define grammar and translation rules for user interface Entry point of program is defined as:
"application" ID Definition* -> Start {cons("Application")}

Right now, only one type of Definition is available, but more will come later...

UI grammar (1)
"screen" ID "(" {FuncArg ","}* ")" "{" ScreenElem* "}" -> Definition {cons("Screen")} "view" ID ":" Layout "{" UIElem* "}" -> View {cons("View")} "list" ID "{" ListElem* "}" -> View {cons("List")}

View View

-> ScreenElem -> UIElem

"Vertical" "Horizontal"

-> Layout {cons("VerticalLayout")} -> Layout {cons("HorizontalLayout")}

UI grammar (2)
"button" ID "{" UIElemProp* "}" -> UIElem {cons("Button")} -> UIElem {cons("Label")} -> UIElem {cons("TextField")} "label" ID "{" UIElemProp* "}" "textfield" ID "{" UIElemProp* "}"

"item" ID "=" STRING ";"

-> ListElem {cons("Item")}

"text" "=" STRING ";" "textsize" "=" INT ";"

-> UIElemProp {cons("UIElemTextProperty")}

-> UIElemProp {cons("UIElemTextSizeProperty")} "width" "=" (INT | "fill") ";" -> UIElemProp {cons("UIElemWidthProperty")} "height" "=" INT ";" -> UIElemProp {cons("UIElemHeightProperty")}

application MyApp screen Main() { view MainView : Vertical { view Panel1 : Horizontal { label label1 { text = "Some text:"; } textfield amount { width = fill; } } view Panel2 : Horizontal { label label2 { text = "Some other text:"; } textfield percentage { width = fill; } } button myButton { text = "Press me!"; textsize = 40; width = fill; } } }

application MyApp

screen Main() { list test { item i1 = "Option1"; item i2 = "Option2"; item i3 = "Option3"; item i4 = "Option4"; item i5 = "Option5"; item i6 = "Option6"; item i7 = "Option7"; item i8 = "Option8"; item i9 = "Option9"; item i10 = "Option10"; } }

Difficulties

Generating the UI code for Android is pretty straight-forward

XML, which handles the positioning/sizing automatically (most of the time) Nested views make this even harder, because each view has its own coordinate system

For iOS, I need to calculate this myself