Tuesday, February 9th, 2010
Category: JavaScript
If you know you think you know your objects from your arrays and your null from your undefined, here’s a quiz for you from Perfection Kills.
I was recently reminded about Dmitry Baranovsky’s Javascript test, when N. Zakas answered and explained it in a blog post. First time I saw those questions explained was by Richard Cornford in comp.lang.javascript, although not as thoroughly as by Nicholas.
I decided to come up with my own little quiz. I wanted to keep question not very obscure, practical, yet challenging. They would also cover wider range of topics.
There are fourteen questions in all, starting here:
(function(){
return typeof arguments;
})();
“object”
“array”
“arguments”
“undefined”
Monday, February 8th, 2010
Category: Canvas, Fun, Games, JavaScript
It is quite interesting to see how technology moves in circles. With canvas being the new fun toy to play with for creating browser-based games we have to find solutions to fake a 3D environment to be really fast (sure there is Canvas 3D but it is overkill for most games). The trick is to dig into the tricks arsenal of old-school game development on machines full of win like the Commodore 64 or Amiga.
Louis Gorenfeld some very detailed explanations on how to fake 3D including some of the formulas used in the days of 8 bit.
He is also working on some demo code which you can help him with by providing some JS/Canvas demos:
CODE:
-
current_x = 160 // Half of a 320 width screen
-
dx = 0 // Curve amount, constant per segment
-
ddx = 0 // Curve amount, changes per line
-
-
for each line of the screen from the bottom to the top:
-
if line of screen's Z Map position is below segment.position:
-
dx = bottom_segment.dx
-
else if line of screen's Z Map position is above segment.position:
-
dx = segment.dx
-
end if
-
ddx += dx
-
current_x += ddx
-
this_line.x = current_x
-
end for
-
-
// Move segments
-
segment_y += constant * speed // Constant makes sure the segment doesn't move too fast
-
if segment.position <0 // 0 is nearest
-
bottom_segment = segment
-
segment.position = zmap.length - 1 // Send segment position to farthest distance
-
segment.dx = GetNextDxFromTrack() // Fetch next curve amount from track data
-
end if
Thursday, February 4th, 2010
Category: JavaScript
Fan of Eiffel or the design by contract pattern that it espouses?
Øyvind Kinsey is, and he just created jsContract an alpha library to give you some pre and post condition abilities.
Here is an example:
JAVASCRIPT:
-
-
function _internalMethod(a, b){
-
Contract.expectNumber(a);
-
Contract.expectNumber(b);
-
Contract.expectWhen(config.mode === "divide", b> 0, "Divisor cannot be 0");
-
Contract.expectWhen(config.mode === "multiply", a> 0 && b> 0, "The multiplicands cannot be 0");
-
Contract.guaranteesNumber();
-
Contract.guarantees(function(result){
-
return result> 0;
-
}, "Result must be> 0");
-
-
if (config.mode == "divide") {
-
return a / b;
-
}
-
// At this point config.mode must be "multiply"
-
return a * b;
-
}
-
A lot of contract code for little functionality.... good old contracts ;)
It is interesting to read how Øyvind instruments the code. Run a test through the translator tool and you get:
JAVASCRIPT:
-
-
function _internalMethod(a, b){
-
arguments.callee.isInstrumented = true;
-
/*preconditions*/
-
Contract.expectNumber(a);
-
Contract.expectNumber(b);
-
Contract.expectWhen(config.mode === "divide", b> 0, "Divisor cannot be 0");
-
Contract.expectWhen(config.mode === "multiply", a> 0 && b> 0, "The multiplicands cannot be 0");
-
var __return = (function(a, b){
-
if (config.mode == "divide") {
-
return a / b;
-
}
-
// At this point config.mode must be "multiply"
-
return a * b;
-
}(a, b));
-
/*postconditions*/
-
Contract.guaranteesNumber(__return);
-
Contract.guarantees(__return, function(result){
-
return result> 0;
-
}, "Result must be> 0");
-
return __return;
-
}
-
Friday, January 29th, 2010
Category: Examples, Geo, Google, JavaScript, Mapping, Yahoo!
As part of an upcoming article on geo location I am putting together a few Geo Toys for myself and here is the first one. Addmap.js is a JavaScript that analyses an elements text content, finds geographical locations and links them to Google Maps. It also adds a map preview and a list of the found locations to the element.
See addmap.js in action below - all the content in the green box is generated from the paragraph of text above it. You can try it out for yourself by clicking the screenshot.
Using addmap.js is easy - sign up for a Google Maps Key and provide it as a configuration parameter. Then call the analyse function with the ID of the element to analyse as the parameter:
XML:
-
<script src="http://github.com/codepo8/geotoys/raw/master/addmap.js"></script>
-
<script>
-
addmap.config.mapkey = 'YOUR_API_KEY';
-
addmap.analyse('content');
-
</script>
The script uses YQL and Yahoo PlaceMaker under the hood, for more info and updates on this, check the blog.
Friday, January 22nd, 2010
Category: JavaScript, Library
John-David Dalton has released Fusebox, a library that allows you to sandbox natives:
Extending JavaScript natives gives you the power to customize the language to fit your needs. You can add convenience methods like "hello world".capitalize() or implement missing functionality like [1,2,3].indexOf(2) in JScript. The problem is that frameworks / libraries / third-party scripts may overwrite native methods or each other's custom methods resulting in unpredictable outcomes. Fusebox, a limited version of the sandboxing component found in FuseJS, avoids these issues by creating sandboxed natives which can be extended without affecting the document natives.
For example:
JAVASCRIPT:
-
-
var fb = Fusebox();
-
fb.Array.prototype.hai = function() {
-
return "Oh hai, we have " + this.length + " items.";
-
};
-
-
fb.Array(1,2,3).hai(); // "Oh hai, we have 3 items."
-
typeof window.Array.prototype.hai; // undefined
-
John has a series of short screencasts to introduce the topic of sandboxed natives, how to use them, and the techniques used to make it all happen:
- Sandboxed Natives 101: Screencast One
- How to create a sandbox: Screencast Two
- How to create a Fusebox: Screencast Three
- The Final Countdown: Screencast Four
Great to learn from. It is a shame that you have to remember to use a very different way to access the types of course and that you have to do all of this magic.... but with JavaScript, it is what it is!
Thursday, January 21st, 2010
Category: HTML, JavaScript
There have been a few HTML builder APIs out there, but Ed Spencer (new lead of Ext JS) has put together something that looks and feels similar to Haml from the Ruby side.
Jaml lets you write HTML like this:
JAVASCRIPT:
-
-
div(
-
h1("Some title"),
-
p("Some exciting paragraph text"),
-
-
br(),
-
-
ul(
-
li("First item"),
-
li("Second item"),
-
li("Third item")
-
)
-
);
-
You can also use templates like this:
JAVASCRIPT:
-
-
Jaml.register('product', function(product) {
-
div({cls: 'product'},
-
h1(product.title),
-
-
p(product.description),
-
-
img({src: product.thumbUrl}),
-
a({href: product.imageUrl}, 'View larger image'),
-
-
form(
-
label({'for': 'quantity'}, "Quantity"),
-
input({type: 'text', name: 'quantity', id: 'quantity', value: 1}),
-
-
input({type: 'submit', value: 'Add to Cart'})
-
)
-
);
-
});
-
Check it all out on his Github repo.
Tuesday, January 19th, 2010
Category: JavaScript
We have a new bible. ECMAScript Edition 5 was voted (despite annoying folk like IBM who seem to only get in the way) in. So, when do we get to play?
Over on the Qt blog, Kent has posted on the progress that has been made, and what there is to go, for this to be seen in JavaScriptCore (normally the V8 team releases once the language is out there):
Features implemented in JavaScriptCore
This is stuff that’s already in WebKit trunk. I’ve included links to relevant Bugzilla tasks in case you’d like more information (e.g. have a look at the patches).
- “Array extras”: Array.prototype.{indexOf,lastIndexOf,every,some,forEach,map,filter,reduce,reduceRight}:
These have been in JSC for years. I’m not sure how conformant the implementations are, though.
Features not implemented in JavaScriptCore
- Strict mode: I’m not aware of any work that’s been done to support strict mode yet. It involves making the parser/compiler recognize the “use strict” directive and adapting execution according to the rules given in annex C of the ES5 specification. (The annex lists 20 restrictions/exceptions that apply to strict mode.)
Hopefully work is moving fast for Mozilla, Opera, Google and Microsoft too!
Monday, January 18th, 2010
Category: CSS, JavaScript, Library, Testing
Geuis Teses has released an enjoyable library called Helium that has the goal of testing your stylesheets for unused style.
You inject helium into your site (e.g. put it in an included footer) and then when you hit the first page you will have a popup asking for the pages you want to test. Helium will find the style sheets that you use and will store that information and the page information inside of localStorage. Then it will XHR around (so your styles need to be on the same host), test each page, and finally give you results.
I put up a trivial example to give it a ride and ended up with:
I ran into a minor issue with regards to relative stylesheets so I did the Github thing and forked, fixed, and pull requested. I love Github :)
Friday, January 15th, 2010
Category: CSS, JavaScript, PHP, Performance
I am right now working on a high-traffic project that will run in a sandbox that doesn't allow me to pull third party JavaScript or use canvas/Flash. Yet I need to generate bar charts from a set of data.
The solution to me was to create the charts from HTML using CSS. There have been some solutions for this problem already but I wanted something very simple and easy to maintain. Hence all the markup I am using is this:
XML:
-
<ul>
-
<li><span>400</span></li>
-
<li><span>20</span></li>
-
<li><span>30</span></li>
-
<li><span>233</span></li>
-
</ul>
Instead of hard-coding any of the trickery necessary I wrote a PHP script to generate the HTML, the styles and do all the math. So all that is needed to render one of the charts is the following code:
PHP:
-
<?php
-
$values = '400,20,30,233,312,78,20,67';
-
$height = 100;
-
$width = 600;
-
$bargap = 0;
-
include('csscharts.php');
-
?>
Of course, this can also be turned into a web service - you can get the chart with the following URL:
http://icant.co.uk/csscharts/csscharts.php?values=400,20,30,233,312,78,20,67&height=100&width=600&bargap=0
And if you specify JSON as the format you get it with a callback to a function called csscharts:
http://icant.co.uk/csscharts/csscharts.php?values=400,20,30,233,312,78,20,67&format=json
JAVASCRIPT:
-
csscharts(
-
{
-
chart:"<ul class=\"barchart\" [… the rest of the html …]</ul>"
-
}
-
)
That way you can use it in JavaScript:
JAVASCRIPT:
-
<script>
-
function csscharts(o){
-
var container = document.getElementById('container');
-
c.innerHTML = o.chart + c.innerHTML;
-
}
-
</script>
-
<script src="http://icant.co.uk/csscharts/csscharts.php?values=400,20,30,233,312,78,20,67&format=json"></script>
You can see some demos here, get detailed info about the CSS trickery used and of course download the code on GitHub.
Category: JavaScript, Library, jQuery
The incredibly popular jQuery library has released jQuery 1.4 on a new website that will celebrate 14 days of jQuery.
There are a lot of new features, and as usual performance gains are showcased.
- Easy Setter Functions: For a while now, you’ve been able to pass a function into .attr() and the return value of that function is set into the appropriate attribute. This functionalilty has now been extended into all setter methods
- Ajax: A lot of enhancements to the various remoting functions including support for native JSON parsing, etags, request context, and more
- .css and .attr have been improved
- Per property easing on effects
- If you want to ensure that “this” inside a function will be permanently bound to a particular value, you can use jQuery.proxy to return a new function with that scope
- New events: focusin and focusout
And Joe Walker will be really excited to see that dojo.create has made it in! :)
JAVASCRIPT:
-
-
jQuery("<div />", {
-
id: "foo",
-
css: {
-
height: "50px",
-
width: "50px",
-
color: "blue",
-
backgroundColor: "#ccc"
-
},
-
click: function() {
-
$(this).css("backgroundColor", "red");
-
}
-
}).appendTo("body");
-
Congrats to the jQuery team. I look forward to seeing posts over the next 2 weeks that go into more detail on the new coolness.
3.7 rating from 108 votes
Wednesday, January 13th, 2010
Category: Flash, JavaScript
This was quite a surprise! Tobias Schneider has built a Flash runtime that works right in the browser. It's implemented in pure Javascript and HTML5, and the whole thing is open source, MIT-licensed, and hosted on GitHub.
See Gordon in action (demos hosted by Paul Irish).
It works like a charm in recent versions of Firefox, Chrome, and Safari (and, yes, iPhone Safari, though the "blue" demo runs at tedious pace on my 3G). To install it yourself, use "git clone git://github.com/tobeytailor/gordon.git". I found the demos don't work from a file:/// URI due to the script dependency system, so point your web server at the root and point your browser at demos/.
There's not yet any docs, so it's not clear how broadly compatible Gordon is or where it's headed. But if nothing else, it makes a bold statement about the maturity of open web technologies.
HTML:
-
-
<body onload="new Gordon.Movie('trip.swf', {id: 'stage', width: 500, height: 400})">
-
-
</body>
-
(Update: After much twitter love, someone finally figured out the name. How did we miss it?!!)
Update 2: There's a SWF tag support table and a browser support table. (thanks @tuxified)
Category: JavaScript
I am a big fan of using custom events where it makes sense in applications. I took it too far in the early days of Bespin, but I really enjoy them where they make sense.
Chris Vanrensburg was talking to me about Virtual DOM events, and when I asked him about them he told me this:
there are not enough juicy real DOM events, and the DOM standards process is slow moving. It's long been a bone of contention that the mouseover and mouseout DOM events will fire for a node for which a handler is wired - even when the user mouses around inside the node and is mousing over and mousing out of child nodes. Internet Explorer was a pioneer in supporting the onmouseenter and onmouseleave events, and mouseenter and mouseleave are part of the DOM Level 3 events spec. Until browsers universally support these incredibly useful events, various frameworks abstract them into existence via their event wiring methods. This is a most basic case of frameworks presenting virtual DOM events as real DOM events to an application developer. In this case, of course, the events in question are likely to become real DOM events for all browsers.
However, another interesting case is a mouse rest type of event. Requiring a node to remain in a specific event state for a set amount of time before firing an event is a helpful indicator of the user being truly interested in something (as opposed to just "wandering through"). Consider the classic case of the user mousing over a node and then resting the mouse for a certain period of time over that node. You might like to know if the user does this for a specific node, because this may be an indication that the user is interested in what clicking the node might do, and one may wish to present them with a helpful tooltip that is implemented using HTML and that provides them more information about what they're considering clicking on.
In such cases, you probably don't want to trigger the display of an elaborate info tooltip based merely upon the user mousing over the node, since this may hamper the page's performance - especially if displaying the tooltip requires an Ajax request - and displaying and hiding chunky tooltips as the user moves the mouse across the page may be a dreadful user experience, in any event. In such cases, it would be really nice to have an event that fires only when the user has actually stopped the mouse over a node. Back in August of 2008, a mouserest event was added to UIZE. This event accepts a duration parameter, to let you tune how long the user needs to keep the mouse rested over the node before the event is fired. Problem is, this was just one special-cased virtual event that was hacked deep into the event abstraction code.
The interesting leap that was made recently was to codify this pattern and create a formal construct in the framework of a virtual DOM event, with an extensibility foundation to allow modules to define new sets of these virtual DOM events. This opens up all sorts of possibilities for implementing more complex interaction logic and expressing patterns of user interaction using the event paradigm, and allowing the application developer to think of these interactions as events, just like any other events. Some of the more sophisticated kinds of user interactions that could be expressed using the event paradigm wander into the territory of gestures. For example, one might implement virtual DOM events such as "shake", "flick", "whack", "crossOut", etc. A "shake" gesture may involve clicking on a node, holding down the mouse key, and then vigorously moving the mouse back and forth. A "flick" gesture may involve clicking on a node, holding down the mouse key, rapidly moving the mouse in one direction, and then quickly releasing the mouse button before the motion is completed. A "whack" gesture may involve rapidly moving the mouse over a node at one edge, and then rapidly moving the mouse in the opposite direction and out of the node, as if to whack it on one of its edges in order to budge it. A "crossOut" gesture may involve moving the mouse diagonally from top right to bottom left, and then from top left to bottom right, without too much of a pause between the two diagonal motions, as if to gesture that an object should be removed.
To get the ball rolling, I implemented some of the more basic kinds of virtual DOM events, such as parameterized remain-in-state events like mouseRemainDown, keyRemainDown, remainFocused, etc. Also, I created some click-with-modifier-key dedicated events. These can all be previewed here...
Then, as part of my further exploration of this construct, I implemented a suite of edge virtual DOM events, such as mouseEnterLeft, mouseEnterTop, mouseExitLeft, mouseExitRight, etc. These can be seen in action here...
I'm quite excited by the potential of this construct to provide a way to encapsulate wiring logic for more sophisticated user interactions with DOM nodes, and provide a model for re-usability of such logic, which often otherwise spills out into the application code and doesn't have a good place that it can call home.
What do you think about the idea? Would you like to see events like this?
Monday, January 11th, 2010
Category: JSON, JavaScript, XmlHttpRequest, Yahoo!, jQuery
OK, this is nothing shockingly new, but I found it pretty useful. Using jQuery, Ajax has become more or less a one-liner:
JAVASCRIPT:
-
$(document).ready(function(){
-
$('.ajaxtrigger').click(function(){
-
$('#target').load($(this).attr('href'));
-
return false;
-
});
-
});
This loads the document any link with a class of "ajaxtrigger" points to and updates the content of the element with the ID "target". If the link is a third party link on another domain it fails though - and silently at that. Normally you'd work around that with a server-side proxy, but you can actually do without it.
YQL is a hosted web service that can scrape HTML for you. It also runs the HTML through HTML Tidy and caches it for you. For example to load http://bbc.co.uk you'd use the following statement:
CODE:
-
select * from html where url='http://bbc.co.uk'
As a URL this turns into:
CODE:
-
http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D'http%3A%2F%2Fbbc.co.uk'%0A&format=xml
-
You could request JSON-P by setting the output format to json and define a callback, but that would give the HTML back as a massive object which is not nice. YQL also offers JSON-P-X as an alternative which is a JSON object with a callback and the HTML as a string inside a simple Array. See it by clicking the following URL:
http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%27http%3A%2F%2Fbbc.co.uk%27%0A&format=xml&diagnostics=false&callback=foo
Now, using jQuery's getJSON() we can load this even without a named callback function. That way we can use one method for content that is third party and simply use load() for the other:
JAVASCRIPT:
-
$(document).ready(function(){
-
var container = $('#target');
-
$('.ajaxtrigger').click(function(){
-
doAjax($(this).attr('href'));
-
return false;
-
});
-
function doAjax(url){
-
if(url.match('^http')){
-
$.getJSON("http://query.yahooapis.com/v1/public/yql?"+
-
"q=select%20*%20from%20html%20where%20url%3D%22"+
-
encodeURIComponent(url)+
-
"%22&format=xml'&callback=?",
-
function(data){
-
if(data.results[0]){
-
container.html(data.results[0]);
-
} else {
-
var errormsg = '<p>Error: could not load the page.</p>';
-
container.html(errormsg);
-
}
-
}
-
);
-
} else {
-
$('#target').load(url);
-
}
-
}
-
});
You can see the demo in action here, more details are available on my blog and the source is available on GitHub.
Category: JavaScript
If you have ever wanted to create your own "language" (or DSL if you want to play 2008 buzzword word bingo) then you may have delved into the worlds of yacc/bison (and their siblings: lex/flex) to get this done in a more declarative manner.
Jison lets you play in this world thanks to Zach Carter:
Jison generates bottom-up parsers in JavaScript. Its API is similar to Bison's, hence the name. It supports many of Bison's major features, plus some of its own. If you are new to parser generators such as Bison, and Context-free Grammars in general, a good introduction is found in the Bison manual.
A brief warning before proceeding: the API is ridiculously unstable right now. The goal is to mirror Bison where it makes sense, but we're not even there yet. Also, optimization has not been a main focus as of yet.
Briefly, Jison takes a JSON encoded grammar specification and outputs a JavaScript file capable of parsing the language described by that grammar specification. You can then use the generated script to parse inputs and accept, reject, or perform actions based on the input.
At the end of the day, you can then declare your language like this:
JAVASCRIPT:
-
-
{
-
"comment": "Parses end executes mathematical expressions.",
-
-
"lex": {
-
"rules": [
-
["\\s+", "/* skip whitespace */"],
-
["[0-9]+(?:\\.[0-9]+)?\\b", "return 'NUMBER';"],
-
["\\*", "return '*';"],
-
["\\/", "return '/';"],
-
["-", "return '-';"],
-
["\\+", "return '+';"],
-
["\\^", "return '^';"],
-
["\\(", "return '(';"],
-
["\\)", "return ')';"],
-
["PI\\b", "return 'PI';"],
-
["E\\b", "return 'E';"],
-
["$", "return 'EOF';"]
-
]
-
},
-
-
"operators": [
-
["left", "+", "-"],
-
["left", "*", "/"],
-
["left", "^"],
-
["left", "UMINUS"]
-
],
-
-
"bnf": {
-
"S" :[[ "e EOF", "print($1); return $1;" ]],
-
-
"e" :[[ "e + e", "$$ = $1+$3;" ],
-
[ "e - e", "$$ = $1-$3;" ],
-
[ "e * e", "$$ = $1*$3;" ],
-
[ "e / e", "$$ = $1/$3;" ],
-
[ "e ^ e", "$$ = Math.pow($1, $3);" ],
-
[ "- e", "$$ = -$2;", {"prec": "UMINUS"} ],
-
[ "( e )", "$$ = $2;" ],
-
[ "NUMBER", "$$ = Number(yytext);" ],
-
[ "E", "$$ = Math.E;" ],
-
[ "PI", "$$ = Math.PI;" ]]
-
}
-
}
-
and then use it, even within the world of CommonJS:
JAVASCRIPT:
-
-
// mymodule.js
-
var parser = require("./calculator").parser;
-
-
function exec (input) {
-
return parser.parse(input);
-
}
-
-
var twenty = exec("4 * 5");
-
Zach scratched an itch and created a real world example.... an Orderly parser.
Thursday, December 31st, 2009
Category: CSS, Examples, Fun, JavaScript
When I talked about some snow related CSS3 experiment, I could not imagine @Natbat was already preparing something like snowflakes, an almost fully CSS3 featured snow FX created for clearleft, specially suited for Chrome and Safari.
And what about @zacharyjohnson? He put snow all over the network via its Winternetizer, the first snow proxy I have ever seen.
Am I missing anybody? ... sure, me!
Above FX is dedicated to all Ajaxian readers and created via some CSS3 rule handled via JavaScript for a partial cross browser implementation. WebKit based browsers, included Android and iPhone, plus Firefox 3.6, should render properly, while the most interesting thing, snow a part, is that for the first time rather than browser sniffing, I have implemented a sort of "screen resolution to power computation" sniff:
JAVASCRIPT:
-
-
var totalSnowFlakes = Math.max(
-
Math.min((
-
document.documentElement.offsetWidth *
-
document.documentElement.offsetHeight /
-
15000
-
)>> 0, 40), 10
-
);
-
Probably not perfect, the aim is to avoid same number of flakes in mobile devices, netbooks, or desktop PCs.
I guess one day we'll have exposed CPU model and RAM amount as read only userAgent properties, so that all new effects could avoid stress for web surfers.
Something like System namespace in ActionScript, with capabilities for audio and video and extra info about the current navigator ... maybe just an AS to JS bridge 'till that day? We'll see, today the important thing is simply one: Have Fun!
Category: JavaScript, Library
Want to show how to use your layout library? Why not mimic a well known layout and show how easy it is? That is what Volodya Kolesnikov has done with his Google Wave layout in 100 lines of code sample.
It is powered by uki (shorted from "ui kit") and Volodya told us more about it:
UKI is a fast and simple JavaScript user interface toolkit for desktop-like web applications. It comes with rich view-component library ranging from Slider to List and SplitPane. Here are some examples:
Simple example:
JAVASCRIPT:
-
-
uki({
-
view: 'Button', text: 'Click me',
-
rect: '10 10 100 24' , anchors: 'top left'
-
}).attachTo( document.getElementById('container') );
-
-
uki('Button[text^=Click]').click(function() { alert(this.text()); });
-
Here is a more complex example:
JAVASCRIPT:
-
-
uki(
-
{ // create a split pane...
-
view: 'SplitPane', rect: '1000 600', anchors: 'left top right bottom',
-
handlePosition: 300, leftMin: 200, rightMin: 300,
-
// ...with button on the left
-
leftChildViews: { view: 'Button', rect: '10 10 280 24', anchors: 'top left right', text: 'Clear text field' },
-
// ...and a vertical split pane on the right...
-
rightChildViews: [
-
{ view: 'SplitPane', rect: '693 600', anchors: 'left top right bottom', vertical: true,
-
// ...with text field in the top part
-
topChildViews: { view: 'TextField', rect: '10 10 280 24', anchors: 'top left', value: '0', id: 'field' },
-
// ...and a slider in the bottom
-
bottomChildViews: { view: 'Slider', rect: '10 10 673 24', anchors: 'top right left' }
-
}
-
]
-
}).attachTo( window, '1000 600' );
-
-
// on slider change update text field
-
uki('SplitPane Slider').bind('change', function() {
-
uki('TextField').value(this.value())
-
});
-
-
// on button click clear the text field
-
uki('Button[text~="Clear"]').bind('click', function() {
-
uki('#field').value('') // find by id
-
});
-
Uki works with IE6+, Opera 9+, FF 2+, Safari 3+, Chrome. And it looks the same on any of them.
Uki is still in its infancy. There may be bugs. No docs available. Certain features like disabled are still missing. Nevertheless it is already capable of build complex layouts in hours.
Next Page »
