AllAccepted answers
Jochen Roese · Mar 23, 2016

Hi Daniel,

use bootstrap and javascript. There are a lot of frameworks out there. You can use ZEN-Mojo as framework for example. I wouldn't try to work with angular.js because it's more expert-level Javascript and templating. But when you do it correctly it could be the best option out there.

Responsive apps need a lot of CSS and Javascript-Knowledge. Bootstrap gives you an idea and a good basic on how to achieve that. Maybe it's enough to redesign your old CSP-Pages to bootstrap to make it responsive enough.

The easiest way to work with an REST-API is jQuery-ajax (for http-requests in general)

I also use a Java-Class like structure for my scripts. Here is an example:

function MyClass(initParm, initListener) {
    var m_PrivateProperty = initParm || null;
    var m_EventListener = (typeof initListener === "function" ? initListener : new MyClass.OnEventListener())
    this.PublicProperty = "Hello World";
    
    this.getOnEventListener = function() {
        return m_EventListener;
    }
    this.setOnEventListener = function(EventListener) {
        m_EventListener = EventListener;
    }
    
    var privateFunc = function(parms) {
        return stuff;
    }
    this.publicFunction = function(parms) {
        return privateFunc(stuff)
    }
    
    this.getPrivateProperty = function() {
        return m_PrivateProperty;
    }
    this.setPrivateProperty = function(PrivateProperty) {
        m_PrivateProperty;
    }
    
    this.sendToServer = function() {
        var that = this;
        jQuery.ajax("/rest/do/things/", {
            method : "GET",
            asynch : true,
            data : {
                parm1 : this.getPrivateProperty()
            }
        }).done(function(a,b,c) {
            //we need "that" here. "this" is not MyClass anymore; could be jqXHR-Object or window
            that.getOnEventListener().OnThingsListener(a);
        }).error(function(a,b,c) { 
            //read jquery-doc
        })
    }
    
}
MyClass.OnEventListener = function() {
    this.OnClickListener = function(parms) { };
    this.OnThingsListener = function(parms) { };
}
 
var a = new MyClass(parm1,parm2)
Jochen Roese · Mar 17, 2016

Atelier is it's own modified Eclipse IDE. It's like Android-Studio. It's based on Eclipse but it's not the same.

I think Intersystems need to code extra libs for Eclipse to get this thing to work or modify/add another repository with the needed libs as plugin. 

The repos you added is the Atelier-Executable itself. It's not a Plugin-Repository like the Android-Plugin for Eclipse.

Jochen Roese · Mar 10, 2016

That should do it for both types:

ClientMethod StartEvent(
key,
eventType,
value) [ Language = javascript ]
{
if (zenPage.templateDispatchMode) {
var newArea = "events-" + key.split(":")[0];
if (zenPage.currArea!==newArea) {
zenPage.currArea = newArea;
zenPage.loadTemplateNS(zenPage.templateDispatchBaseNamespace+"/events",key.split(":")[0],newArea);
}
}
var st = zenPage.getTemplate();
st[eventType](key,value,'mainView');
}
Jochen Roese · Mar 9, 2016

As temp  solution you can use href:"javascript:zenPage.StartEvent('yourkey','onclick','yourvalue');"

In your Zenpage add following ClientMethod to call events (sometimes useful for handling zen-events with bootstrap-plugins):

 

ClientMethod StartEvent(
key,
eventType,
value) [ Language = javascript ]
{
var newArea = "events-" + key.split(":")[0];
if (zenPage.currArea!==newArea) {
zenPage.currArea = newArea;
zenPage.loadTemplateNS(zenPage.templateDispatchBaseNamespace+"/events",key.split(":")[0],newArea);
}
var st = zenPage.getTemplate();
st[eventType](key,value,'mainView');
}