#Rikulo EUL
EUL is deprecated. Please use Rikulo UXL instead.
Rikulo EUL (Embeddable User-interface Language) is a markup language allowing developers to define user-interface in HTML 5 and XML.
Unlike Rikulo UXL, which compiles the markup language to Dart, EUL is interpreted at run time and can be embedded in Dart code (as a string) or HTML pages (as a HTML fragment).
Rikulo EUL is distributed under the Apache 2.0 License.
##Install from Dart Pub Repository
Add this to your pubspec.yaml (or create it):
dependencies:
rikulo_eul:
Then run the Pub Package Manager (comes with the Dart SDK):
pub install
##Install from Github for Bleeding Edge Stuff
To install stuff that is still in development, add this to your pubspec.yam:
dependencies:
rikulo_eul:
git: git://github.com/rikulo/eul.git
For more information, please refer to Pub: Dependencies.
##Usage
Example 1: Everything starts from the EULTemplate:
(TextEUL.dart)
import 'dart:html';
import 'package:rikulo_ui/view.dart';
import 'package:rikulo_eul/eul.dart'; //(required) EUL classes and utilities
import 'package:rikulo_eul/impl.dart'; //(optional) EUL implementation
void main() {
final View mainView = new View()..addToDocument()
mainView.layout.text = "type: linear; orient: vertical";
//Define the template with a string
new EULTemplate('''
<View layout="type: linear">
<View layout="type: linear; orient: vertical">
<CheckBox forEach="#{['Apple', 'Orange', 'Banana', 'Pomelo']}" text="#{each}"></CheckBox>
</View>
<TextView class="list">
<attribute name="html">
<ul>
<li>This is the first item of TextView with HTML</li>
<li style="font-weight: bold">This is the second</li>
</ul>
<ol>
<li forEach="#{['Henri', 'Tom', 'Simon', 'Tim']}">#{each}</li>
</ol>
</attribute>
</TextView>
</View>
''').create(mainView);
}
(TextEUL.html)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="packages/rikulo_ui/resource/css/view.css" />
</head>
<body>
<style>
.list {
border: 2px solid #886;
border-radius: 6px;
}
</style>
<script type="application/dart" src="TestEUL2.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
Example2: Or you can choose to read the template definition from the html page.
(TextEUL2.dart)
import 'dart:html';
import 'package:rikulo_ui/view.dart';
import 'package:rikulo_eul/eul.dart'; //(required) EUL classes and utilities
import 'package:rikulo_eul/impl.dart'; //(optional) EUL implementation
void main() {
final View mainView = new View()..addToDocument()
mainView.layout.text = "type: linear; orient: vertical";
//Define the template from the element node "eul"
new EULTemplate.fromNode(document.query("#eul").elements[0]..remove())
.create(mainView);
}
(TextEUL2.html)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="packages/rikulo_ui/resource/css/view.css" />
</head>
<body>
<style>
.list {
border: 2px solid #886;
border-radius: 6px;
}
</style>
<div id="eul" style="display: none">
<View layout="type: linear">
<View layout="type: linear; orient: vertical">
<CheckBox forEach="#{['Apple', 'Orange', 'Banana', 'Pomelo']}" text="#{each}"></CheckBox>
</View>
<TextView class="list">
<attribute name="html">
<ul>
<li>This is the first item of TextView with HTML</li>
<li style="font-weight: bold">This is the second</li>
</ul>
<ol>
<li forEach="#{['Henri', 'Tom', 'Simon', 'Tim']}">#{each}</li>
</ol>
</attribute>
</TextView>
</View>
</div>
<script type="application/dart" src="TestEUL2.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
##Pros and Cons
Rikulo UXL depends on mirrors heavily. For better performance and smaller footprint, it is suggested to use Rikulo UXL instead if applicable.
###Pros
- The user interface can be defined easily in a similar manner to HTML pages.
- MVC/MVP and data-binding for improving the separation of view, model and controller.
- The content can be indexed by search engines if you embed it as HTML fragment.
- Ready for MVVM design pattern.
###Cons
- It is interpreted at run time based on mirrors, so the performance is slower and the tree shaking of
dart2jsmight not work as effective as expressing UI in Dart or in UXL.
##Notes to Contributors
###Create Addons
Rikulo is easy to extend. The simplest way to enhance Rikulo is to create a new repository and add your own great widgets and libraries to it.
###Fork Rikulo EUL
If you'd like to contribute back to the core, you can fork this repository and send us a pull request, when it is ready.
Please be aware that one of Rikulo's design goals is to keep the sphere of API as neat and consistency as possible. Strong enhancement always demands greater consensus.
If you are new to Git or GitHub, please read this guide first.