8000 Home · voloko/uki Wiki · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Home

Jump to bottom Edit New page
voloko edited this page Sep 13, 2010 · 8 revisions

All you have to know in 10 minutes

  1. Uki interfaces are created from Views the same way web pages are created from DOM nodes.
    Views even behave similar to DOM nodes. You can appendView, insertBefore, access parentView etc.
    panel.appendView(button)
    Examples of views: Slider, SplitPane or Table
  2. View have attributes. You can read them by calling attrname() without params and write with attrname(newValue).
    label.text('Lorem') // set text to a label
label.text() == 'Lorem' // get text
splitPane.handlePosition(300) // move the split pane handle to 300px
  3. You can create Views with uki(). Once created view can be attached to any block DOM container with attachTo()
    uki({ view: 'Label', text: 'Lorem', ... more attributes ... }).attachTo( window )
  4. You can find attached views using css-like selectors. 
    uki('Label') // find all labels on page
uki('Box[name=main] > Label') // find all immediate descendant Labels in a box with name = "main"
  5. uki() calls return Collection of Views. This is similar to jQuery('expression') result. You can access individual views with [index]. You can manipulate all views at the same time with a number of collection methods
    uki('Label')[3] // get 3-d found label
uki('Button').attr('text', 'hello world') // set text for all button to 'hello world'
  6. Events are bound to Views (not individual DOM nodes) with the bind() function
    uki('Label')[0].bind('click', function() {  handle the event here  }) // bind click to the first label
uki('Label').bind('click', function() {  handle the event here  }) // bind click to all labels
uki('Label').unbind('click') // unbind all click handlers from all labels
  7. Views are laid out with initial position and resize rules. Initial position is set with the rect property
    button.rect('50 20 100 22') // set left = 50px, top = 20px, width = 100px, height = 22px
    Resize rules are set with the anchors property:
    button.anchors('left top') // stay at the left top when container resizes
button.anchors('right bottom') // move with the bottom right corner of the container
button.anchors('left top right') // stay at the top, resize width with the container
    You can pass both rect and anchors to the uki() function:
    uki({ view: 'Button', rect: '50 20 100 22', anchors: 'left top right' })
  8. You can change visual appearance of the views with themes. Theme is basically a collection of
    resources like images, styled dom nodes and backgrounds. You can find an example of one
    at http://github.com/voloko/uki/blob/master/src/uki-theme/airport.js
  9. If your adding uki to existing project then it is better to simply add
    <script src='http://static.ukijs.org/pkg/0.1.3/uki.gz.js'></script>
    to your pages and it will work. If you start a new one you might try uki-tools
  10. See more at ukijs.org and have fun

Learning uki

There are some code examples to start from:
a) short with comments
b) simple learning uki app with comments

There are some docs. Though sparse.
a) http://ukijs.org/docs/ – API docs for uki-core
b) Twitter tutorial – Work in progress

Add a custom footer
Add a custom sidebar
Clone this wiki locally
0