Re: Single Page Web Web Apps -- WEB400

Kevin,

What I think Aaron means is that in EXT JS we have something called a Data
Store. A Data Store is an object that not only holds the data but also has
a lot of functionality like any other OO javascript object.

When you define a new Data Store you have to configure it with metadata
that describes the JSON object it receives.

In an EXTJS Grid you point the grid to a Data Store but you also have to
define your columns in the grid and in that process point to the Data
Stores description of the JSON object that is within the Data Store Object.

So what you do is (very simplified) …

myDataStore = new ExtDataStore(ServerResource,JSONMetaData);

myGrid = new ExtGrid(JSONGridColumnDescription,myDataStore);

show(myGrid);

You have now coupled the Grid to the Data Store and thereby to the
ServerResource so anything you do in the Grid will automatically be coupled
to the Data Store that then communicates with the server without you need
to do anything.

Let’s try to define the special elements in the above code:

ServerResource = URL to the REST/CRUD service on the server

JSONMetadata = a JSON metadata definition of the data that is communicated
between the server and the Data Store

JSONGridColumnDescription = a JSON metadata definition that describes the
columns in the grid (header, width, type etc.)

Now let’s try to make the above code into generic code:

First we don’t describe the metadata in the Data Store in the javascript
code. In order to do so, we let the server describe the data it sends. So
the server sends a JSON object with a Metadata section and a Data (row)
section.

We also let the server send the URL to the Server Resource in a
configuration object when it launches the initial code:

myDataStore = new ExtDataStore(Config(‘serverResource’,’URLerror’));

function Config(property,pdefault) {

switch (property) {

case
'serverResource' : return '/pextcgi/pxsvpxwa.pgm';

default : return
pdefault;

}

}

We also let the server send a grid column description in an OO Javacript
object that returns the JSON Grid Column description with a fixed function
name, let’s call it “ServerGenGridDesc”

Now we can launch the grid with the following generic code:

myDataStore = new ExtDataStore(Config(‘serverResource’,’URLerror’));

myGrid = new ExtGrid(ServerGenGridDesc(),myDataStore);

show(myGrid);

// generated by server at launch

function Config(property,pdefault) {

switch (property) {

case
'serverResource' : return '/pextcgi/pxsvpxwa.pgm';

default : return
pdefault;

}

}

function ServerGenGridDesc() {

return ([

// work around
error in Crome 16+17+??? with LockingGridView

{

"header":""

,"width":1

,"hidden":false

,"locked":true

,"dataIndex":"*NONE*"

}

,

{header :
"Web User Id."

,locked : true

,width : 195

,dataIndex :
"WAWUSR"

,align :
"left"

,sortable : true

}

,

{header :
"Web User Name"

,locked : true

,width : 325

,dataIndex :
"WAWUNA"

,align :
"left"

,sortable : true

}

,

{header :
"Language Code"

,width : 84

,dataIndex :
"WALNGC"

,align :
"left"

,sortable : true

}

,

{header :
"Mail Address"

,width : 500

,dataIndex :
"WAMAIL"

,align :
"left"

,sortable : true

}

,

{header :
"Web User Class"

,width : 91

,dataIndex :
"WAWUSC"

,align :
"left"

,sortable : true

}

,

{header :
"Web User No."

,width : 80

,dataIndex :
"WAWUSN"

,align :
"right"

,sortable : true

,renderer :
function(v)

{return Ext.util.Format.formatNumber(v,{

decimalSeparator : "."

,decimalPrecision : 0

,groupingSeparator : ","

,groupingSize : 3

,currencySymbol : ""

})}

}

]);

}

By doing the above we can now put the javascript code – the controller in a
generic javascript file and just refer to it in the page and we have also
separated the Model (that runs on the server), The View and the Controller
that runs in the Client:



<script
src="/powerEXT/pxStandardGridForm.js"></script>

This is of course not the PUSH technology (which should be the only reason
for switching to websockets) but it is both SOA and extreme MVC since I
have lifted EXT JS from predefined configurable UI components to predefined
configurable Function components.

On Sat, Jan 12, 2013 at 11:53 AM, Kevin Turner <kevin.turner@xxxxxxxxxxxxxxx

wrote:

I must be being stupid, because your point is still completely lost on me.
I don't know how one would talk about ExtJS (which is a feature rich UI
library with model based functionality built in) in the same context as
dedicated MVC-type frameworks with a tiny footprint (like ember.js,
backbone.js and knockout.js).

Either you are using an MVC framework or you aren't - but if you are, I
still don't understand where the "lots of extra typing and chances for
things to get out of sync structurally" comes into play?

That said - the point is moot I guess. It is proving very useful and
efficient for us to use something that allows updates to a model to be
automatically reflected in the UI (and vice versa) without bloating the
JavaScript with bespoke code per function. Not everyone will see this as a
good thing for their own solutions.

-----Original Message-----
From: web400-bounces@xxxxxxxxxxxx [mailto:web400-bounces@xxxxxxxxxxxx] On
Behalf Of Aaron Bartell
Sent: 11 January 2013 20:46
To: Web Enabling the IBM i (AS/400 and iSeries)
Subject: Re: [WEB400] Single Page Web Web Apps

ExtJS. Basically I won't want to have to redefine my columns to any
extent in json stores except for mapping them to a column.

Aaron Bartell
www.MowYourLawn.com/blog
www.OpenRPGUI.com
www.SoftwareSavesLives.com

On Fri, Jan 11, 2013 at 2:38 PM, Kevin Turner
<kevin.turner@xxxxxxxxxxxxxxx>wrote:

I don't think I quite follow you Aaron. Under what circumstances do
you have to keep recreating model structures? Perhaps more to the
point, which model framework has caused you to do so?

On 11 Jan 2013, at 19:32, "Aaron Bartell"
<aaronbartell@xxxxxxxxxxxxxxx>
wrote:

The thing I don't like about some of the Javascript "model"
frameworks is that it isn't reflective in nature and instead I have
to recreate my

model

structure within Javascript (i.e. lots of extra typing and chances
for things to get out of sync structurally).

Aaron Bartell
www.MowYourLawn.com/blog
www.OpenRPGUI.com
www.SoftwareSavesLives.com

On Fri, Jan 11, 2013 at 1:18 PM, Kevin Turner
<kevin.turner@xxxxxxxxxxxxxxx>wrote:

Ajax = XHR = xmlhttprequest

To be honest I would be surprised to see any app these days that
don't

use

it,

Knockout looks similar to ember by the looks of it.

On 11 Jan 2013, at 17:56, "Vernon Hamberg"
<vhamberg@xxxxxxxxxxxxxxx>
wrote:

This can be done nicely with Ajax - a former colleague does it all
the time, as I recall.

On 1/11/2013 11:52 AM, Bradley Stone wrote:

Sounds like another case of complicating something to make it

easier.

:)

Brad
www.bvstools.com

On Fri, Jan 11, 2013 at 8:06 AM, Kevin Turner
<kevin.turner@xxxxxxxxxxxxxxx>wrote:

If you mean a web app that only has one initial page, then just

replaces

the "viewport" area of the page as the user navigates around
(using

xhr or

websockets) then yes, Renaissance works that way. If you don't
mean

that,

then I don't know what you mean (until I read up on something
like

knockout

of course).

Renaissance 6.0 makes use of requirejs (http://requirejs.org/)
and

ember (

http://emberjs.com/)

-----Original Message-----
From: web400-bounces@xxxxxxxxxxxx [mailto:

web400-bounces@xxxxxxxxxxxx]

On

Behalf Of Richard Schoen
Sent: 11 January 2013 13:45
To: web400@xxxxxxxxxxxx
Subject: [WEB400] Single Page Web Web Apps

Has anyone adopted this style of developing tight web apps ?

Seems like there is a new js framework called knockout that can
be

used

for this.

jQueryMobile supports something similar.

Regards,
Richard Schoen
RJS Software Systems Inc.
Where Information Meets Innovation Document Management,
Workflow, Report Delivery, Forms and Business Intelligence
Email: richard@xxxxxxxxxxxxxxx<mailto:richard@xxxxxxxxxxxxxxx>
Web Site:
http://www.rjssoftware.com<http://www.rjssoftware.com/>
Tel: (952) 736-5800
Fax: (952) 736-5801
Toll Free: (888) RJSSOFT

--
This is the Web Enabling the IBM i (AS/400 and iSeries) (WEB400)

mailing

list To post a message email: WEB400@xxxxxxxxxxxx To subscribe,
unsubscribe, or change list options,
visit: http://lists.midrange.com/mailman/listinfo/web400
or email: WEB400-request@xxxxxxxxxxxx Before posting, please
take a moment to review the archives at
http://archive.midrange.com/web400.

NOTICE: The information in this electronic mail transmission is

intended

by CoralTree Systems Ltd for the use of the named individuals or

entity to

which it is directed and may contain information that is
privileged

or

otherwise confidential. If you have received this electronic
mail transmission in error, please delete it from your system
without

copying or

forwarding it, and notify the sender of the error by reply email
or

by

telephone, so that the sender's address records can be corrected.

----------------------------------------------------------------------
----------

CoralTree Systems Limited
25 Barnes Wallis Road
Segensworth East, Fareham
PO15 5TT

Company Registration Number 5021022.
Registered Office:
12-14 Carlton Place
Southampton, UK
SO15 2EA
VAT Registration Number 834 1020 74.
--
This is the Web Enabling the IBM i (AS/400 and iSeries) (WEB400)

mailing

list
To post a message email: WEB400@xxxxxxxxxxxx To subscribe,
unsubscribe, or change list options,
visit: http://lists.midrange.com/mailman/listinfo/web400
or email: WEB400-request@xxxxxxxxxxxx Before posting, please
take a moment to review the archives at
http://archive.midrange.com/web400.

--
This is the Web Enabling the IBM i (AS/400 and iSeries) (WEB400)

mailing

list

To post a message email: WEB400@xxxxxxxxxxxx To subscribe,
unsubscribe, or change list options,
visit: http://lists.midrange.com/mailman/listinfo/web400
or email: WEB400-request@xxxxxxxxxxxx Before posting, please take
a moment to review the archives at
http://archive.midrange.com/web400.

NOTICE: The information in this electronic mail transmission is
intended by CoralTree Systems Ltd for the use of the named
individuals or entity

to

which it is directed and may contain information that is privileged
or otherwise confidential. If you have received this electronic
mail transmission in error, please delete it from your system
without

copying or

forwarding it, and notify the sender of the error by reply email or
by telephone, so that the sender's address records can be corrected.

----------------------------------------------------------------------
----------

CoralTree Systems Limited
25 Barnes Wallis Road
Segensworth East, Fareham
PO15 5TT

Company Registration Number 5021022.
Registered Office:
12-14 Carlton Place
Southampton, UK
SO15 2EA
VAT Registration Number 834 1020 74.
--
This is the Web Enabling the IBM i (AS/400 and iSeries) (WEB400)
mailing list To post a message email: WEB400@xxxxxxxxxxxx To
subscribe, unsubscribe, or change list options,
visit: http://lists.midrange.com/mailman/listinfo/web400
or email: WEB400-request@xxxxxxxxxxxx Before posting, please take a
moment to review the archives at
http://archive.midrange.com/web400.

--
This is the Web Enabling the IBM i (AS/400 and iSeries) (WEB400)
mailing

list

To post a message email: WEB400@xxxxxxxxxxxx To subscribe,
unsubscribe, or change list options,
visit: http://lists.midrange.com/mailman/listinfo/web400
or email: WEB400-request@xxxxxxxxxxxx Before posting, please take a
moment to review the archives at http://archive.midrange.com/web400.

NOTICE: The information in this electronic mail transmission is intended
by CoralTree Systems Ltd for the use of the named individuals or entity

to

which it is directed and may contain information that is privileged or
otherwise confidential. If you have received this electronic mail
transmission in error, please delete it from your system without copying

or

forwarding it, and notify the sender of the error by reply email or by
telephone, so that the sender's address records can be corrected.

--------------------------------------------------------------------------------

CoralTree Systems Limited
25 Barnes Wallis Road
Segensworth East, Fareham
PO15 5TT

Company Registration Number 5021022.
Registered Office:
12-14 Carlton Place
Southampton, UK
SO15 2EA
VAT Registration Number 834 1020 74.
--
This is the Web Enabling the IBM i (AS/400 and iSeries) (WEB400) mailing
list
To post a message email: WEB400@xxxxxxxxxxxx
To subscribe, unsubscribe, or change list options,
visit: http://lists.midrange.com/mailman/listinfo/web400
or email: WEB400-request@xxxxxxxxxxxx
Before posting, please take a moment to review the archives
at http://archive.midrange.com/web400.

--
This is the Web Enabling the IBM i (AS/400 and iSeries) (WEB400) mailing
list
To post a message email: WEB400@xxxxxxxxxxxx
To subscribe, unsubscribe, or change list options,
visit: http://lists.midrange.com/mailman/listinfo/web400
or email: WEB400-request@xxxxxxxxxxxx
Before posting, please take a moment to review the archives
at http://archive.midrange.com/web400.

NOTICE: The information in this electronic mail transmission is intended
by CoralTree Systems Ltd for the use of the named individuals or entity to
which it is directed and may contain information that is privileged or
otherwise confidential. If you have received this electronic mail
transmission in error, please delete it from your system without copying or
forwarding it, and notify the sender of the error by reply email or by
telephone, so that the sender's address records can be corrected.

--------------------------------------------------------------------------------

CoralTree Systems Limited
25 Barnes Wallis Road
Segensworth East, Fareham
PO15 5TT

Company Registration Number 5021022.
Registered Office:
12-14 Carlton Place
Southampton, UK
SO15 2EA
VAT Registration Number 834 1020 74.
--
This is the Web Enabling the IBM i (AS/400 and iSeries) (WEB400) mailing
list
To post a message email: WEB400@xxxxxxxxxxxx
To subscribe, unsubscribe, or change list options,
visit: http://lists.midrange.com/mailman/listinfo/web400
or email: WEB400-request@xxxxxxxxxxxx
Before posting, please take a moment to review the archives
at http://archive.midrange.com/web400.