Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Upload

Welcome to Scribd!

  • 48 views

    Frames Runtime HTML5: For Developers

    Uploaded by

    Paulo R Vieira
    The document provides an overview of the tools, technologies, source code files/structure, and core objects needed to develop Frames Runtime HTML5 applications. It describes JavaScript libraries like jQuery, tooling like Node.js and Grunt/Bower, HTML/CSS frameworks like Twitter Bootstrap, and core Frames objects like View, Widget, Task, and Item. It also outlines the structure of widget, chart, dialog, and mode source code files, and explains the processing flow from actions to views and models.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Frames Runtime HTML5: For Developers

    Uploaded by

    Paulo R Vieira
    48 views36 pages
    The document provides an overview of the tools, technologies, source code files/structure, and core objects needed to develop Frames Runtime HTML5 applications. It describes JavaScript libraries like jQuery, tooling like Node.js and Grunt/Bower, HTML/CSS frameworks like Twitter Bootstrap, and core Frames objects like View, Widget, Task, and Item. It also outlines the structure of widget, chart, dialog, and mode source code files, and explains the processing flow from actions to views and models.

    Original Description:

    morphis

    Original Title

    morphis

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document provides an overview of the tools, technologies, source code files/structure, and core objects needed to develop Frames Runtime HTML5 applications. It describes JavaScript libraries like jQuery, tooling like Node.js and Grunt/Bower, HTML/CSS frameworks like Twitter Bootstrap, and core Frames objects like View, Widget, Task, and Item. It also outlines the structure of widget, chart, dialog, and mode source code files, and explains the processing flow from actions to views and models.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    48 views36 pages

    Frames Runtime HTML5: For Developers

    Uploaded by

    Paulo R Vieira
    The document provides an overview of the tools, technologies, source code files/structure, and core objects needed to develop Frames Runtime HTML5 applications. It describes JavaScript libraries like jQuery, tooling like Node.js and Grunt/Bower, HTML/CSS frameworks like Twitter Bootstrap, and core Frames objects like View, Widget, Task, and Item. It also outlines the structure of widget, chart, dialog, and mode source code files, and explains the processing flow from actions to views and models.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 36

    Frames Runtime HTML5 For Developers

    What’s Needed
    Tools and Technologies
    What’s Needed?
    JavaScript Tooling
    • JQuery • Node JS
    • JQuery UI - Widgets • Grunt
    • Bower
    • Browser - Developer Tools
    HTML/CSS • Debug
    • Twitter Bootstrap • Console
    • SASS • Network
    • Webfont (for icons)
    Source Code
    Files and Structure
    Source Code
    chart Important:
    dialogs • application.js
    mode • core.js
    objects • validation.js
    services • utils/format.js
    utils • objects/*
    widgets • widgets/*
    Core Objects
    Source Code – Core Objects
    objects/
    block.js
    canvas.js
    item.js
    paging.js
    task.js
    view.js
    Source Code – Core Objects
    Window
    Control

    View
    Widget
    Canvas

    Task Bindable
    Control
    Info
    Item
    Instance
    Record

    Block
    Item
    Paging
    Widgets
    Source Code – Widgets
    widgets/ editinput.js text.js
    fileinput.js textarea.js
    accordion.js
    framepanel.js textfield.js
    button.js
    image.js textinput.js
    buttoninput.js
    listbox.js tree.js
    checkbox.js
    lovinput.js
    collapsiblepanel.js
    menu.js
    combobox.js
    panel.js
    component.js
    radiogroup.js
    datagrid.js
    repeater.js
    datefield.js
    tabpanel.js
    Source Code – Widgets
    A Widget is:
    • JQuery UI Widget
    • Bindable
    • Multiple or Single Item/record
    • Textbox is a single Item (binded to selected record)
    • Repeater and Datagrid are multiple Item and records
    • There are Items and Instances
    Source Code – Widgets
    $.widget("namespace.widgetname", Frames.WidgetClass = $.inherit(
    { Frames.Item,
    options:{}, {
    input: function()
    _create: function() {
    { return this._call('input');
    this._inp = $('input', this.element); }
    }, };

    input: function()
    { Frames.regtype(”widgetname", Frames. WidgetClass);
    return this._inp;
    }
    });
    Core
    Source Code – Core
    core.js
    config.js (config.xml)
    locale.js
    logger.js
    Application and Service
    Source Code – Application and Service
    services/
    msmvc.js
    service.js

    application.js _commands_pre_viewready: function(task)


    _viewReady: function(task, view, status)
    _commands_post_viewready: function(task)
    _messages: function(task)

    execute: function(
    action, task, model,
    block, item, validation,
    kind, delay)
    Focus and Navigation
    Source Code – Focus and Navigation
    focus.js
    _itemUnknownNavigation: function(event)

    needsServer: function(curr, next)

    execute: function(item, next, action)

    navigation.js nextFocusKey: function (ev, item)


    Format and Validation
    Source Code – Format and Validation
    utils/
    format.js
    format.number.js
    format.date.js

    validation.js rules: function(item, frm, req)

    validate: function(item)
    Other
    Source Code - Charts
    chart/
    barchart.js
    linechart.js
    piechart.js
    Source Code - Dialogs
    dialog/
    edit.js
    lov.js
    Source Code - Modes
    Frames.Modes.NAME = $.inherit(
    modes/ {
    Frames.Modes.BaseMode,

    __constructor: function(item)
    base.js {
    this.item = item;
    edit.js },

    enter: function()
    new.js {
    // store current properties
    // change something
    read.js },

    search.js leave: function()


    {
    // restore properties
    }
    });

    Frames.Modes.regtype(”<MODE>", Frames.Modes.NAME);
    Message
    Message - Control
    <ns3:MessageResponse xmlns="" xmlns:ns3="urn:schemas:morphis:message">
    <header>
    <control block="SPBPERS" isChanged="false" isSuspended="false" item="PERS_SEX" modal="false" mode="SERVER"
    task="543f689a-d47b-4859-a711-da59893be9ff" view="/net/hedtech/banner/payroll/Ppaiden/views/ViewMainWindow">

    <windowCtrl canvas="G$_IDEN_TAB_CANVAS" name="MAIN_WINDOW”></windowCtrl>

    <blockCtrl blockMode="EDIT" name="KEY_BLOCK”></blockCtrl>

    <commands></commands>

    <messages></messages>

    <profile language="en-US"/>
    </control>
    </header>
    <body></body>
    </ns3:MessageResponse>
    Message – Window Control
    <windowCtrl canvas="G$_IDEN_TAB_CANVAS" name="MAIN_WINDOW">
    <properties CloseButton="true" Title="Identification PPAIDEN 8.10 (GVUDB)” />
    <canvas name=“TAB_CANVAS" tabPage="BIO_TAB" tabPageChanged="false">
    <properties Visible="true"/>
    <pages>
    <page index="0" name="CURRENT_ID_TAB">
    <properties Enabled="true" Visible="true"/>
    </page>
    </pages>
    </canvas>
    </windowCtrl>
    Message – Block Control
    <blockCtrl blockMode="EDIT" name="KEY_BLOCK">
    <item name="ID">
    <properties Enabled="false" Navigable="true"/>
    </item>
    <item name="FULL_NAME">
    <properties Enabled="false" Navigable="false"/>
    </item>
    <item name="EXECUTE_BTN">
    <properties Enabled="true" Navigable="true"/>
    </item>
    </blockCtrl>
    Message – Commands
    <commands>
    <command name="CANVAS_SHOW">
    <param name="task">543f689a-d47b-4859-a711-da59893be9ff</param>
    <param name="view">/net/hedtech/.../Ppaiden/views/ViewMainWindow</param>
    <param name="canvas">G$_IDEN_TAB_CANVAS</param>
    </command>
    </commands>
    Message – Messages
    <messages>
    <message
    message_string="*ERROR* Invalid citizenship ..."
    message_type="ERROR”
    user_response="NO_ACKNOWLEDGE"/>
    </messages>
    Message – Block
    <body>
    <block hasChanges="true" name="BUTTON_CONTROL_BLOCK">
    <record hasChanges="true" id="" serverStatus="INSERTED"/>
    </block>

    <block hasChanges="true" name="KEY_BLOCK">


    <page pageNumber="1" pageSize="20" recordIndex="4" totalPages="7"
    totalRecords="123"/>
    <record hasChanges="true" id="" serverStatus="INSERTED">
    <item name="ID" type="value">SYS000001</item>
    <item name="FULL_NAME" type="value">Terry Akers</item>
    </record>
    </block>
    </body>
    Action Flow
    Action Flow
    (application.js) execute (action) {
    task.model()
    } ->
    (service.js) execute (create message and execute service) ->
    (application)_success ->
    _success_after_locale / _loadapp {
    create Task (if not found)
    if @view exists then:
    _commands_pre_viewopen ->
    task.openView ->
    _viewPreReady (on success)
    }
    Processing Flow
    _viewPreReady {
    _commands_pre_viewready(task)
    _viewReady(task, view, status)
    _commands_post_viewready(task)
    _messages(task)
    }

    _viewReady {
    task.windowInfo(task.control)
    task._preModelControlInfo(task.control)
    task.model(task.data)
    task.controlInfo(task.control);
    }
    Browser Debug Console
    Browser Debug Console
    • Internet Explorer (Tools > Developer Tools)
    • Mozilla Firefox (Tools > Web Developer > Browser Console or Firebug)
    • Google Chrome (Tools > More Tools > Javascript Console)
    • Safari (Develop > Show Error Console)
    • Opera (…)

    You might also like