Skip to content

Twitter tutorial

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

We’ll create a simple twitter widget. You’ll learn how to define uki layout, how to update it and how to add custom themed backgrounds to it.
Source code is in the main repository

Container

First we have to create container HTML page. Name it twitter.html and put this code into:

<html>
  <head>
    <title>Twitter Widget</title>
    <script src='http://static.ukijs.org/pkg/0.0.6/uki.js'></script>
  </head>
  <body style="background: #CCF">
      <div id="container" style="margin: 20px; width: 250px; height: 300px;"></div>
      <script src='twitter.js'></script>
  </body>
</html>

Its fairly basic. Important parts are

  • Uki script tag (http://static.ukijs.org/pkg/0.0.6/uki.js)
  • Container DOM block node (id = container). Since we need a widget we’ll make it fixed sized and small.
  • Application script tag (twitter.js)

Layout

We’ll start from building widget layout. Create twitter.js with the given code:

var widget = uki({ 
    view: 'Box', rect: '200 300', minSize: '200 300',
    anchors: 'left top right bottom', background: '#FFF',
    childViews: [
        { view: 'Box', rect: '200 51', anchors: 'left top right', background: 'theme(panel)', 
            childViews: [
            { view: 'MultilineTextField', rect: '5 5 130 42', 
                anchors: 'left top right', 
                placeholder: "What's happening?", fontSize: '12px' },
            { view: 'Button', rect: '140 5 55 24', anchors: 'right top', 
                text: 'Update' }
            ] },
        { view: 'ScrollPane', rect: '0 50 200 250',
            anchors: 'left top right bottom', childViews: [
                { view: 'VerticalFlow',  rect: '5 5 190 250', anchors: 'left top right bottom' }
            ] }
    ]
});

widget.attachTo( document.getElementById('container'), '200 300' );

Refresh a page. You should see a panel-like header at the top with a TextField and a Button. And a scrollable pane at the bottom.

Uki layout is composed of views. When you call uki( some code here ) it will create views from the given code. For every object in description a new uki.view.* is created. So the first part: { view: 'Box', rect: '200 300', minSize: '200 300', anchors: 'left top right bottom', background: '#FFF', ... } will create an instance of uki.view.Box and assign rect, minSize and anchors to it.

View layout is defined by rect (rectangle) and anchors.

  • rect accepts an instance of uki.geometry.Rect or its string representation. Format of the string is “x y width height”.
    uki({ ... rect: '10 20 100 24' });  // left = 10, top = 20, width = 100, height = 24
uki({ ... rect: '100 200' }); // top left corner (left = top = 0), width = 100, height = 200
  • anchors may be any combination of “left”, “right”, “top”, “bottom”. Distance between named anchor and parents side will remain constant on resize
    uki({ ... anchors: 'top right' });         // no resize, move with the top right corner of parent
uki({ ... anchors: 'bottom left' });       // no resize, move with the bottom left corner of parent
uki({ ... anchors: 'bottom left right' }); // resize horizontaly, move with the bottom side of parent
Add a custom footer
Add a custom sidebar

Clone this wiki locally