Amber Cordova - and Richards Tutorial

On 2 Mar 2016, at 21:57, [hidden email] <[hidden email]> wrote:

ide is not in the.js so the loading step fails but without consrquences.

no big deal.

grunt devel
grunt deploy

is the way to go.

Phil

On Mar 2, 2016 10:14 PM, "Tim Mackinnon" <[hidden email]> wrote:

Actually - I’m thick, I’ve noticed what he’s talking about - in the actual body of index.html it has:

 <script type='text/javascript'>
      require(['app'], function (amber) {
          amber.initialize({
            //used for all new packages in IDE
            'transport.defaultAmdNamespace': "amber-richardengtutorial"
          }).then(function () {
              require(["amber-ide-starter-dialog"], function (dlg) { dlg.start(); });
              amber.globals.RichardEngTutorial._start();
          });
      });
  </script>

This is what he was referring to.

So given your answer - how does grunt devel/deploy handle this? I just ran grunt deploy on my other example, it churned away for a few minutes and when i run amber serve and view my page - it still prompts for the helios browser and then gives a javascript exception error:

resignal
        "Resignal the receiver without changing its exception context"

        <
                self.amberHandled = false;
                throw(self);
        >


I thought that grunt deploy was going to strip out the bit about launching the ide? So I’m a bit confused about what it does and how you handle this? Which I think is why Richard had a script to flip between two files - which it sounds like you’ve solved somehow???

Tim

> On 2 Mar 2016, at 20:54, Herby Vojčík <[hidden email]> wrote:
>
>
>
> Dňa 2. marca 2016 21:38:17 CET používateľ Tim Mackinnon <[hidden email]> napísal:
>> Hi guys - as I excitedly try and see what’s possible with Amber, I’ve
>> hit the first bit of Richard’s tutorial where I can’t work out what he
>> means.
>>
>> I’m not sure about “deletes the dialog line
>> (“amber-die-starter-dialog”) “ where he writes:
>>
>> I created two different index.html files, one for development and one
>> for deployment on the device/emulator. The latter deletes the dialog
>
> Don't do that. Use only one. Do not bother about IDE dialog at all. It won't load in deployment.
>
> Two index.html is antipattern. You have `grunt devel` and `grunt deploy` there to switch between the two modes, and index.html is reused without changes (only the.js changes).
>
>> line (“amber-die-starter-dialog”) for starting Helios, because you
>> can’t run it in Android, and runs the Amber startup code within the
>> onDeviceReady()function.
>>
>> All I see in my generated index file is a <script
>> type=‘text/javascript' src='the.js'></script>
>>
>> I recall years ago reading about all kinds of require things - but that
>> seems to have gone away now, so I’m wondering if 15.x has changed
>> things since that tutorial?
>>
>> Has anyone tried Cordova recently?
>>
>> Tim
>

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.

On 2 Mar 2016, at 23:53, Herby Vojčík <[hidden email]> wrote:

Herby Vojčík wrote:

Herby Vojčík wrote:

If you really need to customize things for devel / deploy, maybe do it
inside Gruntfile.js, where the main magic is done - in devel mode "app"
is defined as "load deploy" and in deploy mode it is defined as "load
deploy" (and the packaging is different and other things, but it does
not matter). There you can redefine "app" for deploy mode to actually
wait for onDeviceReady and only then allow initialize to run (with 0.15
line where initialize actually returns a promise, this is actually much
easier to accomplish than before - just do something like

define("app", ["deploy"], function (amber) {
var oldInitialize = amber.initialize.bind(amber);
amber.initialize = function () {
var args = arguments;
return new Promise(function (resolve, reject) {
function onDeviceReady() { resolve(oldInitialize.apply(args)); }
document.addEventListener(“device ready”, onDeviceReady, false);
};
};
return amber;
});

Alternatively, you need not to write it all in Gruntfile itself; you may
want to put the "deviceready transformation" in a little module of your
own, and only change definition in Gruntfile.js slightly, to be
something like:

define("app", ["deploy", "device-wait"], function (amber, transform) {
return transform(amber);
});

You can even release the device-wait.js file as a micro library for amber users on cordova, as the transformation will always be the same.

and this definition is packed into the.js in deploy mode.

Tim Mackinnon wrote:

Ahhh - I just wasn’t reading the tutorial properly - you do need some
subtle differences for a Cordova app, because you can’t start amber
until the device is ready - hence you have to put the normal startup
code in a deviceReady listener… duh.

So - here’s a question - if I run grunt deploy, is there anything in
the.js that I could use to detect I am in deploy mode such that I
could put something in my index.html<script> to detect this and add
that listener conditionally? I’m thinking something like

if(globals.isDeploy) { document.addEventListener(“device ready”,
onDeviceReady, false) };

Tim

On 2 Mar 2016, at 22:05, Tim Mackinnon<[hidden email]> wrote:

So - are we saying that if using Cordova, to develop I run grunt
level (which is the default), and the embedded script in index.html
will happily work because the.js has the right bits in. If I want to
try the simulator, I ru

n grunt deploy, and then the cordova emulate iOS (which packages up all
my stuff) and because the.js is stripped - the script reference in
index.html will just silently fail with no harm done? (so there is no
need to include/exclude it)?

Tim

On 2 Mar 2016, at 21:57,
[hidden email]<[hidden email]> wrote:

ide is not in the.js so the loading step fails but without
consrquences.

no big deal.

grunt devel
grunt deploy

is the way to go.

Phil

On Mar 2, 2016 10:14 PM, "Tim Mackinnon"<[hidden email]> wrote:
Actually - I’m thick, I’ve noticed what he’s talking about - in the
actual body of index.html it has:

<script type='text/javascript'>
require(['app'], function (amber) {
amber.initialize({
//used for all new packages in IDE
'transport.defaultAmdNamespace': "amber-richardengtutorial"
}).then(func

tion () {

require(["amber-ide-starter-dialog"], function (dlg) { dlg.start();
});
amber.globals.RichardEngTutorial._start();
});
});
</script>

This is what he was referring to.

So given your answer - how does grunt devel/deploy handle this? I
just ran grunt deploy on my other example, it churned away for a few
minutes and when i run amber serve and view my page - it still
prompts for the helios browser and then gives a javascript exception
error:

resignal
"Resignal the receiver without changing its exception context"

<
self.amberHandled = false;
throw(self);
>


I thought that grunt deploy was going to strip out the bit about
launching the ide? So I’m a bit confused about what it does and how
you handle this? Which I think is why Richard had a script to flip
between two files - which it

sounds like you’ve solved somehow???

Tim

On 2 Mar 2016, at 20:54, Herby Vojčík<[hidden email]> wrote:



Dňa 2. marca 2016 21:38:17 CET používateľ Tim
Mackinnon<[hidden email]> napísal:

Hi guys - as I excitedly try and see what’s possible with Amber,
I’ve
hit the first bit of Richard’s tutorial where I can’t work out
what he
means.

I’m not sure about “deletes the dialog line
(“amber-die-starter-dialog”) “ where he writes:

I created two different index.html files, one for development and
one
for deployment on the device/emulator. The latter deletes the dialog

Don't do that. Use only one. Do not bother about IDE dialog at all.
It won't load in deployment.

Two index.html is antipattern. You have `grunt devel` and `grunt
deploy` there to switch between the two modes, and index.html is
reused without changes (only the.js changes).

line (“amber-die-starter-dialog”) for starting Helios, because you

can’t run it in Android, and runs the Amber startup code within the
onDeviceReady()function.

All I see in my generated index file is a<script
type=‘text/javascript' src='the.js'></script>

I recall years ago reading about all kinds of require things - but
that
seems to have gone away now, so I’m wondering if 15.x has changed
things since that tutorial?

Has anyone tried Cordova recently?

Tim

--
You received this message because you are subscribed to the Google
Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it,
send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google
Groups "amber-lang" group.
To unsubscribe from this group

and stop receiving emails from it, send an email to
[hidden email].

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google
Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it,
send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.

-- 
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.

On 3 Mar 2016, at 13:23, Norbert Hartl <[hidden email]> wrote:

We are using ionic and not cordova directly but the problem should be the same in both environments. 

The web page should work regardless if in devel or deploy mode. The real issue seems to be if you are running on a device or on a desktop browser. We detect in which environment the app is running and start the app differently

        var isCordovaApp = (typeof window.cordova !== "undefined");

        var startApp = function(amber, angular) {

            amber.initialize({

                //used for all new packages in IDE

                'transport.defaultAmdNamespace': "port1-app"

            });

            angular.element(document).ready(function () {

                angular.bootstrap(document, ['starter']);

            });

            amber.globals.Port1App._start();

        }

        require(['app', 'googlemaps', 'ionic', 'app-main'], function (amber, googlemaps, ionic, appMain) {

            var start = function () {

                startApp(amber, angular);

            };

            if(isCordovaApp) {

                document.addEventListener("deviceready", start, false);

            } else {

                start();

            }

        }, function (err) {

…

});

The window.cordova property is created early in the process so it should be reliable.

Hope that helps,

Norbert

Am 03.03.2016 um 11:33 schrieb [hidden email]:

Maybe Norbert can chime in as he has working mobile apps with Cordova and Amber.

Maybe not a 0.15 version...

Tim,

A writeup of what you have is welcome once working!

Phil

On Thu, Mar 3, 2016 at 1:42 AM, Herby Vojčík <[hidden email]> wrote:

Dňa 3. marca 2016 1:33:32 CET používateľ Tim Mackinnon <[hidden email]> napísal:
>Thanks Herby - I’m not quite at that level of sophistication (but I can
>see where I need to learn more).
>
>I can’t get the inline method to work - it took me a while to realise I
>need to back tick a multiline js string, but now i get some esprema
>error, so I must have got a type somewhere…. you just can’t avoid all
>the js knowledge overhead you need - when I just want a simple
>smalltalk life  ;)

Well, not true. This scenario is a bit special. Don't throw cordova and waiting for deviceready in, and you don't need any of this.

>
>I’m assuming I’m doing this in the right place - mine looks like this:
>
>           deploy: {
>                options: {
>                    mainConfigFile: "config.js",
>                    rawText: {
>                        "amber/compatibility": "/*stub*/",
>                        "amber/Platform": "/*stub*/",
>                        "app": `define(["deploy"],function(amber){
>                                                       var oldInitialize = amber.initialize.bind(amber);
>                                                       amber.initialize = function(){
>                                                       var args = arguments;
>                                                       return new Promise(function(resolve, reject){
>                                                               function onDeviceReady(){resolve(oldInitialize.apply(args));}
>                                                               document.addEventListener(“deviceready”, onDeviceReady, false);
>
>                                                               };
>                                                       };
>                                                       return amber;
>                                               });`
>                    },
>                    pragmas: { …..
>
>
>> On 2 Mar 2016, at 23:53, Herby Vojčík <[hidden email]> wrote:
>>
>>
>>
>> Herby Vojčík wrote:
>>>
>>>
>>> Herby Vojčík wrote:
>>>> If you really need to customize things for devel / deploy, maybe do
>it
>>>> inside Gruntfile.js, where the main magic is done - in devel mode
>"app"
>>>> is defined as "load deploy" and in deploy mode it is defined as
>"load
>>>> deploy" (and the packaging is different and other things, but it
>does
>>>> not matter). There you can redefine "app" for deploy mode to
>actually
>>>> wait for onDeviceReady and only then allow initialize to run (with
>0.15
>>>> line where initialize actually returns a promise, this is actually
>much
>>>> easier to accomplish than before - just do something like
>>>>
>>>> define("app", ["deploy"], function (amber) {
>>>> var oldInitialize = amber.initialize.bind(amber);
>>>> amber.initialize = function () {
>>>> var args = arguments;
>>>> return new Promise(function (resolve, reject) {
>>>> function onDeviceReady() { resolve(oldInitialize.apply(args)); }
>>>> document.addEventListener(“device ready”, onDeviceReady, false);
>>>> };
>>>> };
>>>> return amber;
>>>> });
>>>
>>> Alternatively, you need not to write it all in Gruntfile itself; you
>may
>>> want to put the "deviceready transformation" in a little module of
>your
>>> own, and only change definition in Gruntfile.js slightly, to be
>>> something like:
>>>
>>> define("app", ["deploy", "device-wait"], function (amber, transform)
>{
>>> return transform(amber);
>>> });
>>
>> You can even release the device-wait.js file as a micro library for
>amber users on cordova, as the transformation will always be the same.
>>
>>>
>>>>
>>>> and this definition is packed into the.js in deploy mode.
>>>>
>>>> Tim Mackinnon wrote:
>>>>> Ahhh - I just wasn’t reading the tutorial properly - you do need
>some
>>>>> subtle differences for a Cordova app, because you can’t start
>amber
>>>>> until the device is ready - hence you have to put the normal
>startup
>>>>> code in a deviceReady listener… duh.
>>>>>
>>>>> So - here’s a question - if I run grunt deploy, is there anything
>in
>>>>> the.js that I could use to detect I am in deploy mode such that I
>>>>> could put something in my index.html<script> to detect this and
>add
>>>>> that listener conditionally? I’m thinking something like
>>>>>
>>>>> if(globals.isDeploy) { document.addEventListener(“device ready”,
>>>>> onDeviceReady, false) };
>>>>>
>>>>> Tim
>>>>>
>>>>>> On 2 Mar 2016, at 22:05, Tim Mackinnon<[hidden email]>
>wrote:
>>>>>>
>>>>>> So - are we saying that if using Cordova, to develop I run grunt
>>>>>> level (which is the default), and the embedded script in
>index.html
>>>>>> will happily work because the.js has the right bits in. If I want
>to
>>>>>> try the simulator, I ru
>>>> n grunt deploy, and then the cordova emulate iOS (which packages up
>all
>>>> my stuff) and because the.js is stripped - the script reference in
>>>> index.html will just silently fail with no harm done? (so there is
>no
>>>> need to include/exclude it)?
>>>>>>
>>>>>> Tim
>>>>>>
>>>>>>> On 2 Mar 2016, at 21:57,
>>>>>>> [hidden email]<[hidden email]> wrote:
>>>>>>>
>>>>>>> ide is not in the.js so the loading step fails but without
>>>>>>> consrquences.
>>>>>>>
>>>>>>> no big deal.
>>>>>>>
>>>>>>> grunt devel
>>>>>>> grunt deploy
>>>>>>>
>>>>>>> is the way to go.
>>>>>>>
>>>>>>> Phil
>>>>>>>
>>>>>>> On Mar 2, 2016 10:14 PM, "Tim Mackinnon"<[hidden email]>
>wrote:
>>>>>>> Actually - I’m thick, I’ve noticed what he’s talking about - in
>the
>>>>>>> actual body of index.html it has:
>>>>>>>
>>>>>>> <script type='text/javascript'>
>>>>>>> require(['app'], function (amber) {
>>>>>>> amber.initialize({
>>>>>>> //used for all new packages in IDE
>>>>>>> 'transport.defaultAmdNamespace': "amber-richardengtutorial"
>>>>>>> }).then(func
>>>> tion () {
>>>>>>> require(["amber-ide-starter-dialog"], function (dlg) {
>dlg.start();
>>>>>>> });
>>>>>>> amber.globals.RichardEngTutorial._start();
>>>>>>> });
>>>>>>> });
>>>>>>> </script>
>>>>>>>
>>>>>>> This is what he was referring to.
>>>>>>>
>>>>>>> So given your answer - how does grunt devel/deploy handle this?
>I
>>>>>>> just ran grunt deploy on my other example, it churned away for a
>few
>>>>>>> minutes and when i run amber serve and view my page - it still
>>>>>>> prompts for the helios browser and then gives a javascript
>exception
>>>>>>> error:
>>>>>>>
>>>>>>> resignal
>>>>>>> "Resignal the receiver without changing its exception context"
>>>>>>>
>>>>>>> <
>>>>>>> self.amberHandled = false;
>>>>>>> throw(self);
>>>>>>> >
>>>>>>>
>>>>>>>
>>>>>>> I thought that grunt deploy was going to strip out the bit about
>>>>>>> launching the ide? So I’m a bit confused about what it does and
>how
>>>>>>> you handle this? Which I think is why Richard had a script to
>flip
>>>>>>> between two files - which it
>>>> sounds like you’ve solved somehow???
>>>>>>>
>>>>>>> Tim
>>>>>>>
>>>>>>>> On 2 Mar 2016, at 20:54, Herby Vojčík<[hidden email]> wrote:
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>> Dňa 2. marca 2016 21:38:17 CET používateľ Tim
>>>>>>>> Mackinnon<[hidden email]> napísal:
>>>>>>>>> Hi guys - as I excitedly try and see what’s possible with
>Amber,
>>>>>>>>> I’ve
>>>>>>>>> hit the first bit of Richard’s tutorial where I can’t work out
>>>>>>>>> what he
>>>>>>>>> means.
>>>>>>>>>
>>>>>>>>> I’m not sure about “deletes the dialog line
>>>>>>>>> (“amber-die-starter-dialog”) “ where he writes:
>>>>>>>>>
>>>>>>>>> I created two different index.html files, one for development
>and
>>>>>>>>> one
>>>>>>>>> for deployment on the device/emulator. The latter deletes the
>dialog
>>>>>>>> Don't do that. Use only one. Do not bother about IDE dialog at
>all.
>>>>>>>> It won't load in deployment.
>>>>>>>>
>>>>>>>> Two index.html is antipattern. You have `grunt devel` and
>`grunt
>>>>>>>> deploy` there to switch between the two modes, and index.html
>is
>>>>>>>> reused without changes (only the.js changes).
>>>>>>>>
>>>>>>>>>
>>>> line (“amber-die-starter-dialog”) for starting Helios, because you
>>>>>>>>> can’t run it in Android, and runs the Amber startup code
>within the
>>>>>>>>> onDeviceReady()function.
>>>>>>>>>
>>>>>>>>> All I see in my generated index file is a<script
>>>>>>>>> type=‘text/javascript' src='the.js'></script>
>>>>>>>>>
>>>>>>>>> I recall years ago reading about all kinds of require things -
>but
>>>>>>>>> that
>>>>>>>>> seems to have gone away now, so I’m wondering if 15.x has
>changed
>>>>>>>>> things since that tutorial?
>>>>>>>>>
>>>>>>>>> Has anyone tried Cordova recently?
>>>>>>>>>
>>>>>>>>> Tim
>>>>>>> --
>>>>>>> You received this message because you are subscribed to the
>Google
>>>>>>> Groups "amber-lang" group.
>>>>>>> To unsubscribe from this group and stop receiving emails from
>it,
>>>>>>> send an email to [hidden email].
>>>>>>> For more options, visit https://groups.google.com/d/optout.
>>>>>>>
>>>>>>> --
>>>>>>> You received this message because you are subscribed to the
>Google
>>>>>>> Groups "amber-lang" group.
>>>>>>> To unsubscribe from this group
>>>> and stop receiving emails from it, send an email to
>>>> [hidden email].
>>>>>>> For more options, visit https://groups.google.com/d/optout.
>>>>>>
>>>>>> --
>>>>>> You received this message because you are subscribed to the
>Google
>>>>>> Groups "amber-lang" group.
>>>>>> To unsubscribe from this group and stop receiving emails from it,
>>>>>> send an email to [hidden email].
>>>>>> For more options, visit https://groups.google.com/d/optout.
>>>>>
>>>>
>>>
>>
>> --
>> You received this message because you are subscribed to the Google
>Groups "amber-lang" group.
>> To unsubscribe from this group and stop receiving emails from it,
>send an email to [hidden email].
>> For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.