Last few problems converting browser project to JS

classic Classic list List threaded Threaded
22 messages Options
12
Reply | Threaded
Open this post in threaded view
|

Last few problems converting browser project to JS

doug777
I have almost finished converting my old Flex browser app to FlexJS (js
only), but I have 4 problems left that I can't find a way to convert. Can
anyone help to suggest a way to go with these items?

1. Application.parameters - I need to pass variables into the app on
creation.

2. container.stage.stageWidth/stageHeight - I need to find the browser
window's size.

3. [Embed(systemFont ... etc)]

4. This one I'm sure is straightforward but I can't work out how to do it -
        Convert a skin for ButtonBar. I assume I need to create a renderer for the
firstButton, middleButton and lastButton that are specified in the existing
skin. But how do I connect the renderers to the individual buttons in the js
ButtonBar?

Doug



--
Sent from: http://apache-royale-users.20374.n8.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: Last few problems converting browser project to JS

Alex Harui-2
Hi Doug,

Great to hear about your progress.  My responses in-line.

On 3/6/18, 7:35 PM, "doug777" <[hidden email]> wrote:

>I have almost finished converting my old Flex browser app to FlexJS (js
>only), but I have 4 problems left that I can't find a way to convert. Can
>anyone help to suggest a way to go with these items?
>
>1. Application.parameters - I need to pass variables into the app on
>creation.

I don't think we have a generic bead for this, but ASDoc is using the
EscapedFragmentBead because it is looking for a particular pattern in the
parameters.  You can probably copy it and tune it for your needs and even
contribute the results back to the framework.
>
>2. container.stage.stageWidth/stageHeight - I need to find the browser
>window's size.

I think you can use BrowserResizeListener.
>
>3. [Embed(systemFont ... etc)]

What is your goal with embedding the font for JS?  What benefit did it
give you in Flex?

>
>4. This one I'm sure is straightforward but I can't work out how to do it
>-
> Convert a skin for ButtonBar. I assume I need to create a renderer for
>the
>firstButton, middleButton and lastButton that are specified in the
>existing
>skin. But how do I connect the renderers to the individual buttons in the
>js
>ButtonBar?

We haven't created a Factory for having a different renderer for first and
last items.  ButtonBar is a List.  Lists use a DataItemRendererFactory*
class depending on the data type.  The DataItemRendererFactory classes
currently only take one itemRendererFactory. I suggest copying the one you
want, adding two more itemRendererFactories and modifying the code inside
that to create the right renderer at the right time.  That would also be a
great thing to contribute back to the framework.

Let us know if you need help or have questions.

HTH,
-Alex
>
>
>--
>Sent from:
>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapache-roy
>ale-users.20374.n8.nabble.com%2F&data=02%7C01%7Caharui%40adobe.com%7Cccd8f
>ffc20a440ff7f4908d583dc8555%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C6
>36559905520366798&sdata=RWf%2FRdzo1uguwXOFjt102DcXJj9Oi6iPUC2MXmaX8O8%3D&r
>eserved=0

Reply | Threaded
Open this post in threaded view
|

Re: Last few problems converting browser project to JS

doug777
OK I'll take a look as suggested.

Re EmbedFont : Actually it's not that important. We use it to get special
characters e.g.

[Embed(systemFont="Arial", fontName="currencyFont",
mimeType="application/x-font", fontFamily="Arial Regular",
unicodeRange="U+20A1-20B9", embedAsCFF="false")]

And some similar things from foreign language fonts.

All the characters can be replaced with a standard letter equivalent. Not
quite as nice, but no big deal.

Doug



--
Sent from: http://apache-royale-users.20374.n8.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: Last few problems converting browser project to JS

Alex Harui-2
For problems like these, the first question is:  How do you do it in the
browser at all (without Royale)?

I think the answer is @font-face.  If that's true, the way we handle this
right now is to have you use a custom html template.  The ASDoc example is
using one.

HTH,
-Alex

On 3/6/18, 8:30 PM, "doug777" <[hidden email]> wrote:

>OK I'll take a look as suggested.
>
>Re EmbedFont : Actually it's not that important. We use it to get special
>characters e.g.
>
>[Embed(systemFont="Arial", fontName="currencyFont",
>mimeType="application/x-font", fontFamily="Arial Regular",
>unicodeRange="U+20A1-20B9", embedAsCFF="false")]
>
>And some similar things from foreign language fonts.
>
>All the characters can be replaced with a standard letter equivalent. Not
>quite as nice, but no big deal.
>
>Doug
>
>
>
>--
>Sent from:
>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapache-roy
>ale-users.20374.n8.nabble.com%2F&data=02%7C01%7Caharui%40adobe.com%7Cbed36
>cf0ce554a46467f08d583e41e22%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C6
>36559938135665620&sdata=G7mOf1z0IFJYo7l82yLHagUhMbL7H7Yxe7U%2FtZFIaCo%3D&r
>eserved=0

Reply | Threaded
Open this post in threaded view
|

Re: Last few problems converting browser project to JS

doug777
Ok that is all very helpful.

Thanks so much, Alex. Much appreciated.

Doug



--
Sent from: http://apache-royale-users.20374.n8.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: Last few problems converting browser project to JS

Piotr Zarzycki
Hi Doug,

Great to hear that! Once you finished and if it will be possible share with us link, screens etc. Maybe we can place it somewhere as a great news. :)

Thanks,
Piotr

On Wed, Mar 7, 2018, 05:47 doug777 <[hidden email]> wrote:
Ok that is all very helpful.

Thanks so much, Alex. Much appreciated.

Doug



--
Sent from: http://apache-royale-users.20374.n8.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: Last few problems converting browser project to JS

Justin Mclean
In reply to this post by doug777
Hi,

Sorry this bounced, so my emails will be out of order, trying again.

> Re EmbedFont : Actually it's not that important. We use it to get special
> characters

In that case something like this may work:

<js:Application ... xmlns:fonts="fonts.*”>

  <js:valuesImpl>
      <js:SimpleCSSValuesImpl id="vi" />
  </js:valuesImpl>

   <js:beads>
       <fonts:Catamaran />
   </js:beads>
...    

In fonts/Catamara.as

package fonts {
import org.apache.flex.core.BeadViewBase;

public class Catamaran extends BeadViewBase {
/**
 *  <inject_html>
 *  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Catamaran:400,500,600,700">
 *  </inject_html>
 */
public function Catamaran() {
   super();
   }
}
}

Thanks,
Justin
Reply | Threaded
Open this post in threaded view
|

Re: Last few problems converting browser project to JS

doug777
I'll certainly give that a try. Thanks very much Justin.

Doug



--
Sent from: http://apache-royale-users.20374.n8.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: Last few problems converting browser project to JS

doug777
In reply to this post by Piotr Zarzycki
Hi Piotr,

I hope I can do that but I think I'm still some way from finishing. Although
I've been testing snippets as I've gone along, I'm pretty sure there will
still be lots of problems once it all has to work together. But I can't test
that till I can get the whole thing to compile.

But having got this far I am very confident that it will all work
eventually. I'm really keen to see how close it will be in looks and
functions to the original Flex project.

And I have to say how much I'm enjoying doing it all in Moonshine. It's
still a little bit buggy, but I love using it and it keeps getting better
and better. Really hope to see version 1.10 soon!!

Doug





--
Sent from: http://apache-royale-users.20374.n8.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: Last few problems converting browser project to JS

Piotr Zarzycki
Doug,

We are open for improvements in case of Moonshine! Shoot us anything what you have on GitHub :) Just one more thing, because you have mentioned in your first email in that chain FlexJS, so are you not using Royale but older FlexJS ?

Thanks a lot!,
Piotr


2018-03-07 7:02 GMT+01:00 doug777 <[hidden email]>:
Hi Piotr,

I hope I can do that but I think I'm still some way from finishing. Although
I've been testing snippets as I've gone along, I'm pretty sure there will
still be lots of problems once it all has to work together. But I can't test
that till I can get the whole thing to compile.

But having got this far I am very confident that it will all work
eventually. I'm really keen to see how close it will be in looks and
functions to the original Flex project.

And I have to say how much I'm enjoying doing it all in Moonshine. It's
still a little bit buggy, but I love using it and it keeps getting better
and better. Really hope to see version 1.10 soon!!



--

Piotr Zarzycki 

Patreon: https://www.patreon.com/piotrzarzycki

Reply | Threaded
Open this post in threaded view
|

Re: Last few problems converting browser project to JS

doug777
Piotr

I guarantee everything is Royale  - I just wanted to indicate that it's a js
only project. Should I say Royale JS?

Doug



--
Sent from: http://apache-royale-users.20374.n8.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: Last few problems converting browser project to JS

Piotr Zarzycki
Cool! I just wanted to have clarification. Maybe Royale JS only ;) Not sure. I'm really happy that you were able to goes so far and you are using Moonshine. :)

Thanks, Piotr

2018-03-07 7:10 GMT+01:00 doug777 <[hidden email]>:
Piotr

I guarantee everything is Royale  - I just wanted to indicate that it's a js
only project. Should I say Royale JS?



--

Piotr Zarzycki 

Patreon: https://www.patreon.com/piotrzarzycki

Reply | Threaded
Open this post in threaded view
|

Re: Last few problems converting browser project to JS

Alex Harui-2
In reply to this post by doug777
It will work, but IMO it is a bit of a hack.  No real need to add a class
to your app just to inject HTML in your app.  That's why we have the
-html-template compiler option.  Normally inject_html is used to inject
HTML needed to operate the rest of the code in the class.

Not sure it makes sense to subclass BeadViewBase either since it isn't a
View.

My 2 cents,
-Alex

On 3/6/18, 9:54 PM, "doug777" <[hidden email]> wrote:

>I'll certainly give that a try. Thanks very much Justin.
>
>Doug
>
>
>
>--
>Sent from:
>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapache-roy
>ale-users.20374.n8.nabble.com%2F&data=02%7C01%7Caharui%40adobe.com%7C4bca0
>15eb65d43b9edac08d583efee63%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C6
>36559988881213108&sdata=Twjb06WPYmUxcYX65TUFQGvyoZtXUOXrUeGWO5vzaUA%3D&res
>erved=0

Reply | Threaded
Open this post in threaded view
|

Re: Last few problems converting browser project to JS

Justin Mclean
Hi,

> It will work, but IMO it is a bit of a hack.  No real need to add a class
> to your app just to inject HTML in your app.

It reads well in the application I think which counts for something, I’m sure there are many other ways of doing the same thing.

> That's why we have the -html-template compiler option.  Normally inject_html is used to inject
> HTML needed to operate the rest of the code in the class.
>
> Not sure it makes sense to subclass BeadViewBase either since it isn't a
> View.

That code was written in the FLexJS days so there may be a better way to do it. I recall playing with the html-template compiler option but I couldn't get it to do what I wanted but can’t recall why. Is it supported in maven?

Thanks,
Justin
Reply | Threaded
Open this post in threaded view
|

Re: Last few problems converting browser project to JS

Piotr Zarzycki
Justin,

Yes it supported through maven. You are using:  <htmlTemplate>${basedir}/src/resources/mdl-js-index-template.html</htmlTemplate>

2018-03-07 7:58 GMT+01:00 Justin Mclean <[hidden email]>:
Hi,

> It will work, but IMO it is a bit of a hack.  No real need to add a class
> to your app just to inject HTML in your app.

It reads well in the application I think which counts for something, I’m sure there are many other ways of doing the same thing.

> That's why we have the -html-template compiler option.  Normally inject_html is used to inject
> HTML needed to operate the rest of the code in the class.
>
> Not sure it makes sense to subclass BeadViewBase either since it isn't a
> View.

That code was written in the FLexJS days so there may be a better way to do it. I recall playing with the html-template compiler option but I couldn't get it to do what I wanted but can’t recall why. Is it supported in maven?

Thanks,
Justin



--

Piotr Zarzycki 

Patreon: https://www.patreon.com/piotrzarzycki

Reply | Threaded
Open this post in threaded view
|

Re: Last few problems converting browser project to JS

Harbs
In reply to this post by doug777

> On Mar 7, 2018, at 5:35 AM, doug777 <[hidden email]> wrote:
>
> I have almost finished converting my old Flex browser app to FlexJS (js
> only), but I have 4 problems left that I can't find a way to convert. Can
> anyone help to suggest a way to go with these items?
>
> 1. Application.parameters - I need to pass variables into the app on
> creation.

Here’s how I do it:

I have the following markup in the html template I’m using for my app:

My main application class has a parameter setter which does the “right” thing with the parameters (very similar to how it works in Flex).

<body>
  <script type="text/javascript">
    function queryURL() {
      // This function is anonymous, is executed immediately and
      // the return value is assigned to QueryString!
      var query_string = {};
      var query = window.location.search.substring(1);
      if(!query){return {};}
      var vars = query.split("&");
      for (var i=0;i<vars.length;i++) {
        var pair = vars[i].split("=");
            // If first entry with this name
        query_string[pair[0]] = decodeURIComponent(pair[1]);
      }
      return query_string;
    }
    var app = new MyRoyaleApp();
    app.parameters = queryURL();
    app.start();
  </script>

</body>
Reply | Threaded
Open this post in threaded view
|

Re: Last few problems converting browser project to JS

doug777
That's brilliant almost the same as the old flex way.

Thanks so much for that.

Doug



--
Sent from: http://apache-royale-users.20374.n8.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: Last few problems converting browser project to JS

doug777
Hi Harbs,

I don't understand how to access these parameters in the app's main file
since Application.parameters.anything won't compile.

Doug



--
Sent from: http://apache-royale-users.20374.n8.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: Last few problems converting browser project to JS

Harbs
Just add the following to your main class:

public var parameters:Object;

Also: Make sure you use bracket access (i.e. this.parameters[“anything”] instead of this.parameters.anything) to the parameters var to prevent renaming problems when it’s minified.

HTH,
Harbs

> On Mar 8, 2018, at 3:48 AM, doug777 <[hidden email]> wrote:
>
> Hi Harbs,
>
> I don't understand how to access these parameters in the app's main file
> since Application.parameters.anything won't compile.
>
> Doug
>
>
>
> --
> Sent from: http://apache-royale-users.20374.n8.nabble.com/

Reply | Threaded
Open this post in threaded view
|

Re: Last few problems converting browser project to JS

Alex Harui-2
It would be great to identify a bead from this pattern so others can just
drop a bead in their code instead of having to add a parameter and use
bracket access.

I forgot that EscapedFragmentBead extends URLParameterBead.  The
URLParameter bead currently just returns the entire query string, but some
other API could have it generate a ValueObject which would prevent naming
problems or have a query API like getParameter that would force you to use
string IDs that wouldn't be renamed.

We want to try to package just about any solution as a bead so others
don't have to repeat the same set of steps.

My 2 cents,
-Alex

On 3/8/18, 1:50 AM, "Harbs" <[hidden email]> wrote:

>Just add the following to your main class:
>
>public var parameters:Object;
>
>Also: Make sure you use bracket access (i.e. this.parameters[“anything”]
>instead of this.parameters.anything) to the parameters var to prevent
>renaming problems when it’s minified.
>
>HTH,
>Harbs
>
>> On Mar 8, 2018, at 3:48 AM, doug777 <[hidden email]> wrote:
>>
>> Hi Harbs,
>>
>> I don't understand how to access these parameters in the app's main file
>> since Application.parameters.anything won't compile.
>>
>> Doug
>>
>>
>>
>> --
>> Sent from:
>>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapache-ro
>>yale-users.20374.n8.nabble.com%2F&data=02%7C01%7Caharui%40adobe.com%7C13c
>>a54a2853147d8382808d584d9fe48%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
>>7C636560994180269800&sdata=3XoMuxOTZ60XBW85rNwRklOqyspeMbKjhntwyW7O3v0%3D
>>&reserved=0
>

12