Frames Runtime HTML5: For Developers

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
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
$.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 (…)

Frames Runtime HTML5: For Developers

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Frames Runtime HTML5: For Developers

Uploaded by

Copyright:

Available Formats

Frames Runtime HTML5 For Developers

application.js _commands_pre_viewready: function(task)

needsServer: function(curr, next)

execute: function(item, next, action)

navigation.js nextFocusKey: function (ev, item)

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

search.js leave: function()

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

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

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

You might also like