Scribd Logo
Hochladen

Willkommen bei Scribd!

  • UKIJS

    Hochgeladen von

    anilkumar_singam
    30 Ansichten11 Seiten
    Uki js details

    Copyright

    © © All Rights Reserved

    Verfügbare Formate

    PPT, PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    Uki js details

    Copyright:

    © All Rights Reserved
    Als PPT, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    30 Ansichten11 Seiten

    UKIJS

    Hochgeladen von

    anilkumar_singam
    Uki js details

    Copyright:

    © All Rights Reserved
    Als PPT, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 11

    UKIJS

    What Is UKIJS

    UKI Simple UI Kit for complex web apps.


    JavaScript Framework.
    The main goal and the promise behind the project is that you can
    create desktop-class apps with less code and less magic.
    UKI is an application framework. So theres no HTML. All interfaces
    are build with JavaScript. And js will manage focus, selection,
    Scrolling, layout, events for you.
    Reduces duplication of the code.

    UKI is an application framework


    Therere 4 common parts of an application: views, layouts, models and controllers.
    Views are the basic building blocks of the interface. Uki comes with a collection of
    core views but you can add more or extend existing. Examples of views
    are: Slider, SplitPane or Table.
    Layouts define how your views are placed on a page. Mostly the same way as HTML
    defines how your DOM nodes are placed within each other. But since youre building
    the page from a complete interface components it is usually much much shorter.
    Models store, load and transform the data from the server. You can stick to plain
    JavaScript objects but it is more convenient to add some behavior to your models .

    Controllers bind everything together with events. You find views in the layout
    with css like selectors and then bind event handler to them.

    Create a sample UKIJS script

    Container
    First we have to create container HTML page, Name it test.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='test.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 well make it fixed sized and small.
    Application script tag (test.js) .

    Layout
    Well start from building widget layout.
    Create test.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

    Tab Container

    Adding Tab Container

    Property of Tab Container

    Adding controls in TabContent

    Find Active tab

    Delete active tab

    Get content of active tab

    Ukijs Events
    Click
    Change
    CellMouseEnter
    CellMouseLeave
    CellClick
    KeyPress
    KeyDown
    Keyup
    Blur
    OnActive
    Mousemove
    Mousedown
    DblClick
    CellOnContextMenu

    Das könnte Ihnen auch gefallen