royale-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Alex Harui <aha...@adobe.com.INVALID>
Subject Re: Need help with CSS class selector (font-family is always Arial)
Date Thu, 04 Jan 2018 10:35:39 GMT
Answers inline...

On 1/4/18, 1:47 AM, "Olaf Krueger" <mail@olafkrueger.net> wrote:

>Thanks for this helpful answer Alex, I'll probably start working on this
>tonight.
>
>Two question are left for now:
>
>1)
>The TypeDef is a class that holds methods that represents the JS API.
>My understanding is that there's no code implemented for each particular
>method on AS3 side.
>We just implement the method signatures to be able call the 'origin' JS
>functions through AS3.
>Those empty AS3 TypeDef method bodies confuses me: How does it work that a
>call of such a method calls the JS counterpart at the end without any
>implementation on AS3 side?

Typedef SWCs are put on the external-library-path.  The code in a SWC on
the external-library-path is not linked in.  The promise is that those
APIs will be there when you call them.  All of the Flash/AIR APIs are in
playerglobal.swc/airglobal.swc and placed on the external-library-path.
Again, no Flash/AIR code is linked into your SWF.  Instead the Flash
Runtime provides them automatically.  Same is true in the browser for
Window, document (and document.getElementById and friends), HTMLElement
and more.  And in your case, the ace class/object.
>
>2)
>If we outsource the JS API to ace.js which is the TypeDef and we would
>like
>to provide its methods through the ACEEditor.as class. What is the best
>way
>to achieve this?`
>If we create e.g. a public var 'editor' in ACEEditor.as which holds the
>ace
>instance the usage would be a bit ugly [1]:
>
>[1] Implementation and usage:
>
>// Implementation
>package { 
>
>  import ....ace;
>
>  public class ACEEditor()
>  { 
>     public var editor:ace;
>
>     public function ACEEditor() {
>          // Wherever the id comes from, maybe we have to create a
>surrounding div at first here?
>          this.editor = ace.edit(id);
>     }
>  }
>}    
>
>// AS3 Usage
>var aceEditor:ACEEditor = new ACEEditor();
>aceEditor.id = foo;
>// I guess this should not the goal
>aceEditor.editor.setTheme(ace.THEME_MONOKAI);

Royale components typically wrap the JS implementation.  So we wrap
HTMLElements and you will be wrapping a Div (HTMLDivElement) and calling
ace to turn that div into an editor.  Because the implementation is
wrapped, then APIs on the component surface proxy to the wrapped
implementation.  I'll show you the code further down, but first one other
thing to consider.

I think ACEEditor should extend UIBase.  UIBase creates a Div by default
and has an id property.  So by the time addedToParent() gets called on
ACEEditor, the id property should be populated.

So, back to your original question, because of wrapping, then your
ACEEditor is probably going to have an editor instance property to save
the wrapped editor implementation.  So in ACEEditor.as you are going to
probably have:

private var editor:ace;

And in addedToParent() you would set editor:

override public function addedToParent():void
{
   super.addedToParent();
   editor = ace.edit(id);
}

Then the simple answer is that you would implement setTheme like:

public function setTheme(theme:String):void
{
   editor.setTheme(id);
}

You will see this pattern in other Royale components, but before you go
and do that, consider that in Flex and Royale, "functions are ok, but
properties are better".  That's because MXML is property oriented.  So
instead of the setTheme function I just showed above, especially for APIs
that start with the word "set" you want to implement a getter/setter
property:

private var _theme:String;
public function get theme():String
{
    return _theme;
}
public function set theme(value:String):void
{
   _theme = value;
   editor.setTheme(value);
}

That way, in MXML you can do:

  <ace:ACEEditor id="foo" theme="{ACEEditor.THEME_MONOKAI}" />

HTH,
-Alex
>
>--
>Sent from: 
>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapache-roy
>ale-development.20373.n8.nabble.com%2F&data=02%7C01%7Caharui%40adobe.com%7
>C84b2fe3641834d59e3b108d553581f68%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7
>C0%7C636506560314359166&sdata=Y5srDlR4GBi4sB8sWwtIPYR0wfYuZbM06faIVxD4C20%
>3D&reserved=0

Mime
View raw message