rikulo / ui Goto Github PK
View Code? Open in Web Editor NEWRikulo UI is a cross-platform framework for creating amazing Web and mobile applications in Dart and HTML 5.
Home Page: https://quire.io
License: Other
Rikulo UI is a cross-platform framework for creating amazing Web and mobile applications in Dart and HTML 5.
Home Page: https://quire.io
License: Other
It would be shorter to have a children setter instead the addChild Method, for examplo:
void main() {
new View()
..addChild(new TextView("Hello World!")
..on.click.listen((event) {
(event.target as TextView).text = "Welcome to Rikulo.";
event.target.requestLayout();
}), new TextView("Hello World!"))
..addChild(new View()
..layout.type = "linear" //arrange the layout of child views linearly
..addChild(new TextView("Name")) //a label
..addChild(new TextBox()))
..addToDocument();
}
would be shorter to have
new View()
..children = [
new TextView("Hello World!")
..on.click.listen((event) {
(event.target as TextView).text = "Welcome to Rikulo.";
event.target.requestLayout();
}),
new View()
..layout.type = "linear" //arrange the layout of child views linearly
..children = [
new TextView("Name"), //a label
new TextBox()
]
]
..addToDocument();
I think that it could be solved adding this code to the View class:
set children(List<View> views) {
views.forEach((view) => this.addChild(view));
}
For example,
mainView.layout.text = "type: linear; orient: vertical";
for (int i = 0; i < 2; ++i) {
final view = new View();
view.classes.add("container");
view.layout.text = "type: linear; spacing: 5";
view.profile.text = "min-width: 150; min-height: 150";
mainView.addChild(view);
}
The view shall take 200 x 100 if it has no child.
The examples on this page work fine, but when you click "Source code" or "Blog post" on any of them, they can't be found.
I found Rikulo yesterday, after the Dart M1 / pub.dartlang.org release, and it looks very good. Though dead links don't give the best first impressions.
Exception: type '_HTMLTextAreaElementImpl@33cc944a' is not a subtype of type 'InputElement' of 'inp'.
Stack Trace: 0. Function: 'TextBox.get:value' url: 'http://127.0.0.1:3030/Users/td/Downloads/rikulo-2012-07-27/client/view/src/TextBox.dart' line:69 col:41
Dragger is not enough for handling drag-and-drop. Though it is possible to handle it at DOM level, it is better to have a more elegant and transparent approach for doing it.
In my snake example I add a background image using the following code:
View div = new View();
div.style.backgroundImage = "url('./res/snake_bg.png')";
div.profile.width = "flex";
div.profile.height = "flex";
However, when compiled the background image isn't outputted correctly (at least on Firefox). I did a small test using pure Dart and it worked well, here is the test code that I compiled:
#import('dart:html');
void main() {
document.query("#blah").attributes["style"] = "background-image: url('./res/snake_bg.png')";
}
<!DOCTYPE html>
<html>
<!-- Demo of animating canvas -->
<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="./resources/css/view.css" />
</head>
<body>
<script type="application/dart" src="test.dart"></script>
<script src="./resources/js/dart.js"></script>
<div id="blah">
Blah
</div>
</body>
</html>
Test case: see test/TestPopup1.dart
Cause:
Broadcaster.dart:
bool send(ViewEvent event, {String type}) {
...
//broadcast to all root views
for (final v in rootViews)
if (v.sendEvent(event, type: type))
dispatched = true;
...
}
As ActivateEvent will be broadcasted, any removal/addition of root view within the event handler will cause ConcurrentModificationError in the new List implementation of M3. The old dart implementation doesn't seem to check concurrent modification.
Needs an update to allow it to work with rikulo_commons 2.0.x. At the moment it fails as some of the libraries have been removed e.g. html.dart.
Alternative is to set rikulo_commons to <2.0.0 in pubspec.
Currently, it depends on this.runtimeType.toString(). However, it is meaningless if it is converted to JS with the minify flag.
Thus, each subclass shall override it and return its class name.
In _ViewImpl.dart:
_DOMEventDispatcher _domEvtDisp(String type) {
return (View target) {
return (Event event) {
var tv = event.target; //the real target based on the event
if (tv != null)
tv = ViewUtil.getView(tv);
target.sendEvent(new DOMEvent(event, type, tv != null ? tv: target));
};
};
}
event.target may not be an Element (for example, text node) and will cause cast exceptions.
On the other hand, the older version (http://rikulo.org/resource/js/examples/index-angryhead.html) runs smoothly.
For example,
new View()..profile = "location: center center; offset: 10 -10";
It moves the view from center by (10, -10).
The ScrollView should react to WheelEvents and scroll accordingly. Otherwise it's pretty unintuitive to use on a desktop machine.
Issue5.dart
#import('../../client/app/app.dart');
#import('../../client/view/view.dart');
#import('../../client/model/model.dart');
#import('../../client/event/event.dart');
#import('../../client/util/util.dart');
class Issue5 extends Activity {
void onCreate_() {
TextView btn = new TextView("show");
mainView.addChild(btn);
View myView = new View();
mainView.addChild(myView);
btn.on.click.add((event) {
myView.hidden = false;
myView.requestLayout();
});
myView.hidden = true;
myView.layout.text = "type: linear; orient: vertical";
myView.addChild(createSwitch(true));
myView.addChild(createSwitch(false));
myView.addChild(createSwitch(true, "Yes", "No"));
myView.addChild(createSwitch(false, "True", "False"));
myView.addChild(createSwitch(true, small: true));
myView.addChild(createSwitch(false, small: true));
}
Switch createSwitch(bool value, [String onLabel, String offLabel, bool small=false]) {
Switch view = new Switch(value, onLabel, offLabel);
if (small)
view.classes.add("v-small");
view.on.change.add((event){
log("Switch${view.uuid}: ${view.value}");
});
return view;
}
}
void main() {
new Issue5().run();
}
Also need to update demo cases.
The method starts with code:
for (final View view in _views) {
if (_ignoreDetached && !view.inDocument) {
_views.remove(view); //ignore detached
continue;
}
...
So, when the if is triggered, a child is removed from _views and thus the for-each throws the error.
I will try to submit a pull request if I have time. I suggest just making a copy of the set before iterating (possible optimization: if _ignoreDetached==false and _ignoreSubviews==false no copy is needed).
call _left.hidden=true; _right.hidden=false; then requestLayout, expect _right to show(which was original hidden) but it does not.
B0003.dart
#import('../../client/app/app.dart');
#import('../../client/view/view.dart');
#import('../../client/model/model.dart');
#import('../../client/event/event.dart');
class B0003 extends Activity {
View _left, _right;
void onCreate_() {
mainView.layout.type = "linear";
mainView.layout.orient = "vertical";
//hlayout
View hlayout = new View();
hlayout.layout.type = "linear";
hlayout.layout.orient = "horizontal";
hlayout.profile.width = "100%";
hlayout.profile.height = "content";
mainView.addChild(hlayout);
//left text
TextView left = new TextView("LEFT TEXT");
hlayout.addChild(left);
_left = left;
//right text
TextView right = new TextView("RIGHT TEXT");
right.hidden = true;
hlayout.addChild(right);
_right = right;
_left.on.click.add((event) {_left.hidden = true; _right.hidden = false; mainView.requestLayout();});
_right.on.click.add((event) {_left.hidden = false; _right.hidden = true; mainView.requestLayout();});
}
}
main() {
new B0003().run();
}
B0003.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="../../resources/css/view.css" />
</head>
<body>
<script type="application/dart" src="B0003.dart"></script>
<script src="../../resources/js/dart.js"></script>
</body>
</html>
Currently, requestLayout(immediate: true) will wait if there is a pending model rendering (i.e., modelRenderer is not empty). It is not correct since the caller of requestLayout will assume everything is ready (otherwise, it is hard to write the code).
Example,
class Issue11 extends Activity {
void onCreate_() {
mainView.layout.text = "type: linear; orient: vertical";
//prepare data
final DefaultListModel<String> model
= new DefaultListModel(["apple", "orange", "lemon", "juice"]);
model.addToSelection("orange");
model.addToDisables("juice");
final rg = new RadioGroup();
mainView.addChild(rg);
final btn = new Button("test");
btn.on.click.add((event) {
rg.model = model;
mainView.requestLayout(immediate: true);
mainView.addChild(
new TextView(rg.node.query('input') != null ?
"Success!":
"Wrong! requestLayout+immediate shall force model to render immediately"));
mainView.requestLayout();
});
mainView.addChild(btn);
}
}
creating multiple easingmotions with different durations seem to conflict with one another, either the longer time will cause the shorter to repeat, or worse, the _animator object gets an out of bounds error when trying to remove a task
Issue6.dart
#import('../../client/app/app.dart');
#import('../../client/view/view.dart');
#import('../../client/model/model.dart');
#import('../../client/event/event.dart');
#import('../../client/util/util.dart');
class Issue6 extends Activity {
void onCreate_() {
TextView btn = new TextView("show");
btn.profile.anchor = "parent";
btn.profile.location = "top center";
TextView btn2 = new TextView("hide");
btn2.profile.anchor = "parent";
btn2.profile.location = "top right";
mainView.addChild(btn);
mainView.addChild(btn2);
View myView = new View();
mainView.addChild(myView);
myView.layout.text = "type: linear; orient: vertical";
myView.addChild(new Image("res/search.png"));
btn2.on.click.add((event) {
log("click hide");
myView.hidden = true;
myView.requestLayout();
});
btn.on.click.add((event) {
log("click show");
myView.hidden = false;
myView.requestLayout();
});
}
}
void main() {
new Issue6().run();
}
For sake of convenience, it is better to use any name found in the dart:html and other standard libraries.
Right TextView expected to be place at "center, right" corner but was at "top, left".
B0000.dart
#import('../../client/app/app.dart');
#import('../../client/view/view.dart');
#import('../../client/model/model.dart');
#import('../../client/event/event.dart');
class B0000 extends Activity {
void onCreate_() {
mainView.layout.type = "linear";
mainView.layout.orient = "vertical";
//hlayout
View hlayout = new View();
hlayout.layout.type = "linear";
hlayout.layout.orient = "horizontal";
hlayout.profile.width = "100%";
hlayout.profile.height = "content";
mainView.addChild(hlayout);
//left text
TextView left = new TextView("LEFT TEXT");
left.profile.width = "flex";
left.style.lineHeight = "30px";
hlayout.addChild(left);
//right text
TextView right = new TextView("RIGHT TEXT");
right.profile.anchor = "parent";
right.profile.location = "center, right";
hlayout.addChild(right);
}
}
main() {
new B0000().run();
}
B0000.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="../../resources/css/view.css" />
</head>
<body>
<script type="application/dart" src="B0000.dart"></script>
<script src="../../resources/js/dart.js"></script>
</body>
</html>
If every subclass extend Element class it will be possible to add the new Shadow DOM and Custom Tags features.
The mobile device (supporting touch) doesn't support the dblclick event. It is better to have DoubleClickGesture to handle it transparently.
Expect right text to be positioned at "right" but was positioned at "left top". Note that if we remove this line:
...
right.profile.width="50px";
...
then things work as expected.
B0002.dart
#import('../../client/app/app.dart');
#import('../../client/view/view.dart');
#import('../../client/model/model.dart');
#import('../../client/event/event.dart');
class B0002 extends Activity {
void onCreate_() {
mainView.layout.type = "linear";
mainView.layout.orient = "vertical";
//hlayout
View hlayout = new View();
hlayout.layout.type = "linear";
hlayout.layout.orient = "horizontal";
hlayout.profile.width = "100%";
hlayout.profile.height = "content";
mainView.addChild(hlayout);
//left text
TextView left = new TextView("LEFT TEXT");
left.profile.width = "flex";
left.style.lineHeight = "30px";
hlayout.addChild(left);
//right text
TextView right = new TextView("RIGHT TEXT");
right.profile.width="50px"; //<----------- if remove this line, then things work well
hlayout.addChild(right);
}
}
main() {
new B0002().run();
}
B0002.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="../../resources/css/view.css" />
</head>
<body>
<script type="application/dart" src="B0002.dart"></script>
<script src="../../resources/js/dart.js"></script>
</body>
</html>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.