Frames Runtime HTML5

For Developers

What’s Needed Tools and Technologies

What’s Needed? JavaScript • •

JQuery JQuery UI - Widgets

Tooling •

•

HTML/CSS • • •

Twitter Bootstrap SASS Webfont (for icons)

Node JS • Grunt • Bower Browser - Developer Tools • Debug • Console • Network

Source Code Files and Structure

Source Code chart dialogs mode objects services utils widgets

Important: • application.js • core.js • validation.js • utils/format.js • objects/* • 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/ accordion.js button.js buttoninput.js checkbox.js collapsiblepanel.js combobox.js component.js datagrid.js datefield.js

editinput.js fileinput.js framepanel.js image.js listbox.js lovinput.js menu.js panel.js radiogroup.js repeater.js tabpanel.js

text.js textarea.js textfield.js textinput.js tree.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", { options:{},

},

Frames.WidgetClass = $.inherit( Frames.Item, { input: function() { return this._call('input'); } };

input: function() {

Frames.regtype(”widgetname", Frames. WidgetClass);

_create: function() { this._inp = $('input', this.element);

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 modes/ base.js edit.js new.js read.js search.js

Frames.Modes.NAME = $.inherit( Frames.Modes.BaseMode, { __constructor: function(item) { this.item = item; }, enter: function() { // store current properties // change something }, leave: function() { // restore properties } }); Frames.Modes.regtype(”", Frames.Modes.NAME);

Message

Message - Control

Message – Window Control

Message – Block Control

Message – Commands 543f689a-d47b-4859-a711-da59893be9ff /net/hedtech/.../Ppaiden/views/ViewMainWindow G$_IDEN_TAB_CANVAS

Message – Messages