You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@royale.apache.org by Olaf Krueger <ma...@olafkrueger.net> on 2018/01/02 21:08:09 UTC
Need help with CSS class selector (font-family is always Arial)
Hi,
I've successfully captured the ACE editor but there's one issue left [1]:
It seems to me that the Royale default font-family is always Arial and also
'overwrites' other settings.
The ACE editor depends on the monospace font but I am not able to set it
just for the surrounding group/div by applying a CSS class.
The only thing that works for me is to set 'font-family: monospace;'
globally.
Do I miss something?
Thanks,
Olaf
[1]
https://gist.github.com/ok-at-github/86ffd5176465d1045db31d938b17da15#file-apacheroyalecssissue-mxml-L36
--
Sent from: http://apache-royale-development.20373.n8.nabble.com/
Re: Need help with CSS class selector (font-family is always Arial)
Posted by Piotr Zarzycki <pi...@gmail.com>.
When you have compiled everything, what actually are you seeing in CSS for
this Group and what, are you seeing in the children for that Group ?
Piotr
2018-01-02 22:37 GMT+01:00 Olaf Krueger <ma...@olafkrueger.net>:
> Still no success... other ideas?
>
> Thanks,
> Olaf
>
>
>
>
>
> --
> Sent from: http://apache-royale-development.20373.n8.nabble.com/
>
--
Piotr Zarzycki
Patreon: *https://www.patreon.com/piotrzarzycki
<https://www.patreon.com/piotrzarzycki>*
RE: Need help with CSS class selector (font-family is always Arial)
Posted by Yishay Weiss <yi...@hotmail.com>.
I think I figured it out. I was missing COMPILE::JS blocks around the ace objects.
From: Yishay Weiss<ma...@hotmail.com>
Sent: Sunday, February 18, 2018 10:22 AM
To: dev@royale.apache.org<ma...@royale.apache.org>
Subject: RE: Need help with CSS class selector (font-family is always Arial)
I have this in compile-app-config.xml
<royale-config>
<js-output-optimization>
<optimization>skipFunctionCoercions</optimization>
</js-output-optimization>
<compiler>
<js-external-library-path append="true">
<path-element>../../../../../../js/libs/ace-1.2.3.swc</path-element>
</js-external-library-path>
</compiler>
</royale-config>
When I change ace-1.2.3.swc to a different name that doesn’t exist then I get an error that the file can’t be opened. So I’m assuming the typedefs lib is loaded.
From: Alex Harui<ma...@adobe.com.INVALID>
Sent: Sunday, February 18, 2018 10:18 AM
To: dev@royale.apache.org<ma...@royale.apache.org>
Subject: Re: Need help with CSS class selector (font-family is always Arial)
How do you know the typedefs are being read by the example?
Did you specify the SWC on the js-external-library-path? See
RoyaleStore_jquery for how to use Jquery typedefs in Royale.
HTH,
-Alex
On 2/17/18, 11:07 PM, "yishayw" <yi...@hotmail.com> wrote:
>The issue is that the typedefs (ace-1.2.3.swc) is being read by the
>example
>app, but I can't import ace.Editor in the code.
>
>
>
>--
>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
>C05ea9f09b5b740754ad908d5769e4901%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7
>C0%7C636545344584454151&sdata=ncTxKRoJxn6cNBbToZUE5Ww1x0Ig7kIDYZtvRzzp%2BG
>c%3D&reserved=0
RE: Need help with CSS class selector (font-family is always Arial)
Posted by Yishay Weiss <yi...@hotmail.com>.
I have this in compile-app-config.xml
<royale-config>
<js-output-optimization>
<optimization>skipFunctionCoercions</optimization>
</js-output-optimization>
<compiler>
<js-external-library-path append="true">
<path-element>../../../../../../js/libs/ace-1.2.3.swc</path-element>
</js-external-library-path>
</compiler>
</royale-config>
When I change ace-1.2.3.swc to a different name that doesn’t exist then I get an error that the file can’t be opened. So I’m assuming the typedefs lib is loaded.
From: Alex Harui<ma...@adobe.com.INVALID>
Sent: Sunday, February 18, 2018 10:18 AM
To: dev@royale.apache.org<ma...@royale.apache.org>
Subject: Re: Need help with CSS class selector (font-family is always Arial)
How do you know the typedefs are being read by the example?
Did you specify the SWC on the js-external-library-path? See
RoyaleStore_jquery for how to use Jquery typedefs in Royale.
HTH,
-Alex
On 2/17/18, 11:07 PM, "yishayw" <yi...@hotmail.com> wrote:
>The issue is that the typedefs (ace-1.2.3.swc) is being read by the
>example
>app, but I can't import ace.Editor in the code.
>
>
>
>--
>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
>C05ea9f09b5b740754ad908d5769e4901%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7
>C0%7C636545344584454151&sdata=ncTxKRoJxn6cNBbToZUE5Ww1x0Ig7kIDYZtvRzzp%2BG
>c%3D&reserved=0
Re: Need help with CSS class selector (font-family is always Arial)
Posted by Alex Harui <ah...@adobe.com.INVALID>.
How do you know the typedefs are being read by the example?
Did you specify the SWC on the js-external-library-path? See
RoyaleStore_jquery for how to use Jquery typedefs in Royale.
HTH,
-Alex
On 2/17/18, 11:07 PM, "yishayw" <yi...@hotmail.com> wrote:
>The issue is that the typedefs (ace-1.2.3.swc) is being read by the
>example
>app, but I can't import ace.Editor in the code.
>
>
>
>--
>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
>C05ea9f09b5b740754ad908d5769e4901%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7
>C0%7C636545344584454151&sdata=ncTxKRoJxn6cNBbToZUE5Ww1x0Ig7kIDYZtvRzzp%2BG
>c%3D&reserved=0
Re: Need help with CSS class selector (font-family is always Arial)
Posted by yishayw <yi...@hotmail.com>.
The issue is that the typedefs (ace-1.2.3.swc) is being read by the example
app, but I can't import ace.Editor in the code.
--
Sent from: http://apache-royale-development.20373.n8.nabble.com/
Re: Need help with CSS class selector (font-family is always Arial)
Posted by Alex Harui <ah...@adobe.com.INVALID>.
If the issue is only the font-family that will likely go away when I
remove the * selector and clean up any repercussions. I am hoping to get
to it this week, but others are welcome to beat me to it.
-Alex
On 2/17/18, 8:58 AM, "yishayw" <yi...@hotmail.com> wrote:
>I've created an ace-1.2.3.swc but am not able to run a simple example that
>uses it.
>
>If anyone has time to look at the ace branches maybe they can help me
>figure
>out why the Ace example isn't compiling...
>
>Thanks.
>
>
>
>--
>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
>Ce7dd2adf59544b32e95008d57627bac5%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7
>C0%7C636544835371423956&sdata=PpsLASDHXDU5n3QzdEQA0y793xb5JbXqwE8GzFHpRlc%
>3D&reserved=0
Re: Need help with CSS class selector (font-family is always Arial)
Posted by yishayw <yi...@hotmail.com>.
I've created an ace-1.2.3.swc but am not able to run a simple example that
uses it.
If anyone has time to look at the ace branches maybe they can help me figure
out why the Ace example isn't compiling...
Thanks.
--
Sent from: http://apache-royale-development.20373.n8.nabble.com/
Re: Need help with CSS class selector (font-family is always Arial)
Posted by Olaf Krueger <ma...@olafkrueger.net>.
I just created new "feature/ace-editor" branch(es) to our Royale repos.
Anybody is invited to help with this stuff ;-)
Thanks,
Olaf
[1] https://github.com/apache/royale-asjs/tree/feature/ace-editor
[2] https://github.com/apache/royale-typedefs/tree/feature/ace-editor
[3] https://github.com/apache/royale-compiler/tree/feature/ace-editor
--
Sent from: http://apache-royale-development.20373.n8.nabble.com/
Re: Need help with CSS class selector (font-family is always Arial)
Posted by Piotr Zarzycki <pi...@gmail.com>.
Alex,
I'm pretty sure that some time ago we had discussion about that. Someone
provided some links to the projects in the Apache which share links to the
nightly builds, with appropriate statement on their website. The statement
which we have on the website has been taken from there:
"These nightly builds are generated from our development branch, which
means the distributions may not be fully functional and/or could contain
bugs. We strongly recommend not to use this nightly builds in production
environments."
I think we are not doing anything wrong here.
Thanks, Piotr
2018-01-04 18:39 GMT+01:00 Alex Harui <ah...@adobe.com.invalid>:
>
>
> On 1/4/18, 3:19 AM, "Olaf Krueger" <ma...@olafkrueger.net> wrote:
>
> >Thanks again Alex, it's getting clearer and clearer for me!
> >
> >I also thought about something similar to your suggestion [1].
> >But I thought this would be not a good idea because going this way we have
> >to implement the ace JS API twice. Once in ace.as and once in
> >ACEEditor.as.
> >But I guess this is the price we have to pay in order to get such fully
> >integrated Royale components!? ;-)
>
> IMO, very few existing JS libraries are property-oriented since properties
> (Object.defineProperty) is relatively new in JS. So our work is to
> repackage JS libraries for MXML and "harden" (strongly-type) the API by
> adding types and constants and other AS constructs. This repackaging also
> abstracts the actual platform implementation so that the component can be
> implemented on other platforms.
>
> Once you create the Typedefs SWC for "ace", someone will be able to skip
> using the Royale framework and create a "native" JS file by using the
> ace-typedefs.SWC and js.swc and more closely following the ace embedding
> example I linked to earlier. You are welcome to provide a "native"
> example for folks to use as a comparison as well. If folks were to use
> the native version, eventually there would be dozens of copies of that
> embedding snippet written and debugged by these folks. The thing we want
> to provide to our users is a more uniform usage workflow so you don't have
> to look up how to use it. You are going to write and debug that snippet
> once, and folks will not have to worry about it, they can use ACEEditor
> just like any other Royale component, and can use it from MXML as well.
>
> My 2 cents,
> -Alex
> >
> >Thanks,
> >Olaf
> >
> >
> >[1]:
> >private var _theme:String;
> >public function get theme():String
> >{
> > return _theme;
> >}
> >public function set theme(value:String):void
> >{
> > _theme = value;
> > editor.setTheme(value);
> >}
> >
> >
> >
> >--
> >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
> >C4833247d0aa54b9fae0b08d5536508ad%7Cfa7b1b5a7b34438794aed2c178de
> cee1%7C0%7
> >C0%7C636506615822957522&sdata=5FPIdOZb4NwWem%
> 2FFQKu6hMzDSjhICZhQguUh7dUT1A
> >c%3D&reserved=0
>
>
--
Piotr Zarzycki
Patreon: *https://www.patreon.com/piotrzarzycki
<https://www.patreon.com/piotrzarzycki>*
Re: Need help with CSS class selector (font-family is always Arial)
Posted by Alex Harui <ah...@adobe.com.INVALID>.
On 1/4/18, 3:19 AM, "Olaf Krueger" <ma...@olafkrueger.net> wrote:
>Thanks again Alex, it's getting clearer and clearer for me!
>
>I also thought about something similar to your suggestion [1].
>But I thought this would be not a good idea because going this way we have
>to implement the ace JS API twice. Once in ace.as and once in
>ACEEditor.as.
>But I guess this is the price we have to pay in order to get such fully
>integrated Royale components!? ;-)
IMO, very few existing JS libraries are property-oriented since properties
(Object.defineProperty) is relatively new in JS. So our work is to
repackage JS libraries for MXML and "harden" (strongly-type) the API by
adding types and constants and other AS constructs. This repackaging also
abstracts the actual platform implementation so that the component can be
implemented on other platforms.
Once you create the Typedefs SWC for "ace", someone will be able to skip
using the Royale framework and create a "native" JS file by using the
ace-typedefs.SWC and js.swc and more closely following the ace embedding
example I linked to earlier. You are welcome to provide a "native"
example for folks to use as a comparison as well. If folks were to use
the native version, eventually there would be dozens of copies of that
embedding snippet written and debugged by these folks. The thing we want
to provide to our users is a more uniform usage workflow so you don't have
to look up how to use it. You are going to write and debug that snippet
once, and folks will not have to worry about it, they can use ACEEditor
just like any other Royale component, and can use it from MXML as well.
My 2 cents,
-Alex
>
>Thanks,
>Olaf
>
>
>[1]:
>private var _theme:String;
>public function get theme():String
>{
> return _theme;
>}
>public function set theme(value:String):void
>{
> _theme = value;
> editor.setTheme(value);
>}
>
>
>
>--
>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
>C4833247d0aa54b9fae0b08d5536508ad%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7
>C0%7C636506615822957522&sdata=5FPIdOZb4NwWem%2FFQKu6hMzDSjhICZhQguUh7dUT1A
>c%3D&reserved=0
Re: Need help with CSS class selector (font-family is always Arial)
Posted by Olaf Krueger <ma...@olafkrueger.net>.
Thanks again Alex, it's getting clearer and clearer for me!
I also thought about something similar to your suggestion [1].
But I thought this would be not a good idea because going this way we have
to implement the ace JS API twice. Once in ace.as and once in ACEEditor.as.
But I guess this is the price we have to pay in order to get such fully
integrated Royale components!? ;-)
Thanks,
Olaf
[1]:
private var _theme:String;
public function get theme():String
{
return _theme;
}
public function set theme(value:String):void
{
_theme = value;
editor.setTheme(value);
}
--
Sent from: http://apache-royale-development.20373.n8.nabble.com/
Re: Need help with CSS class selector (font-family is always Arial)
Posted by Alex Harui <ah...@adobe.com.INVALID>.
Answers inline...
On 1/4/18, 1:47 AM, "Olaf Krueger" <ma...@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
Re: Need help with CSS class selector (font-family is always Arial)
Posted by Olaf Krueger <ma...@olafkrueger.net>.
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?
Maybe I got something wrong.
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);
Thanks,
Olaf
--
Sent from: http://apache-royale-development.20373.n8.nabble.com/
Re: Need help with CSS class selector (font-family is always Arial)
Posted by yishayw <yi...@hotmail.com>.
I'd like to get an idea of what the workflow would be to implement this. Is
there an example in the repo that I can play around with, compile, and see
what happens? Where's the best place to start?
Thanks.
--
Sent from: http://apache-royale-development.20373.n8.nabble.com/
Re: Need help with CSS class selector (font-family is always Arial)
Posted by Alex Harui <ah...@adobe.com.INVALID>.
Good first question.
Typedefs represent a JS Library's API. When the browser loads in the
ace.js file, new methods and APIs will be available. You should create a
Typedefs SWC for that API. IIRC, ace.js creates a global object called
"ace" that you would want to call from your ACEEditor.as.
In their example [1] there are lines of code like this:
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");
If you compile this in Royale as-is, on the first line, the compiler will
complain that there is no type specified for "var editor", and there is no
function or object called "ace". So the point of the Typedefs is to
define the classes and methods that the ACE folks would have written if
they had written their code in AS instead of JS. And thus, keep the
compiler from complaining and catch mistakes in your code. So you might
define an ace.as for a TypeDefs SWC that looks like::
package {
public class ace()
{
public static function edit(id:String):ace {}
public function setTheme(theme:String):void;
...
}
}
Bonus points for making constants for the string literals like
"ace/theme/monokai".
Then the code in ACEEditor.as can look more like AS:
var editor:ace = ace.edit(id);
//editor.setTheme("ace/theme/monokai");
editor.setTheme(ace.THEME_MONOKAI); // bonus points for making this work
because it eliminates typos.
...
Harbs mentioned that you don't "have to" create a Typedefs SWC. You could
write the AS code like this:
Var editor:Object = window["ace"].edit(id);
editor.setTheme("ace/theme/monokai");
...
But that isn't type-safe AS. You could mistype a lot of things in that
snippet and the compiler won't catch it.
IMO, all of the code in [1] should end up in your ACEEditor.as so folks
can do the typical Royale thing for UI widgets such as:
MXML: <ace:ACEEditor id="foo" width="100%" height="300"/>
AS: var aceEditor:ACEEditor = new ACEEditor();
aceEditor.id = foo;
...
addElement(aceEditor);
We want these patterns to be the patterns for declaring or dynamically
creating any and every UI widget (Button, DataGrid, etc) so folks don't
have to learn a new pattern per component.
So the challenge for you is to make it all work.
HTH,
-Alex
[1] https://ace.c9.io/#nav=embedding
On 1/3/18, 11:21 PM, "Olaf Krueger" <ma...@olafkrueger.net> wrote:
>One first question comes into my mind:
>
>We have TypeDefs and Royale components.
>In case of providing the Ace editor as Royale component, should we still
>provide an separate AS3 class or interface as TypeDef in the TypeDef repo
>that represents the JS API?
>
>Or should the needed API be part of the ACEEditor class (which extends
>UIBase) without having an separate TypeDef interface?
>
>My first idea is to create the TypeDef as an AS3 interface e.g.
>IACEEditor.as which has to be implemented by ACEEditor.as.
>
>Thanks,
>Olaf
>
>
>
>--
>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
>Cfc355b181bf543671de008d55343da8c%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7
>C0%7C636506473261178766&sdata=ytzlNQ5TxLGdrb5f0fUxuiiwFTe0dZ%2BqdJS39guL93
>0%3D&reserved=0
Re: Need help with CSS class selector (font-family is always Arial)
Posted by Olaf Krueger <ma...@olafkrueger.net>.
One first question comes into my mind:
We have TypeDefs and Royale components.
In case of providing the Ace editor as Royale component, should we still
provide an separate AS3 class or interface as TypeDef in the TypeDef repo
that represents the JS API?
Or should the needed API be part of the ACEEditor class (which extends
UIBase) without having an separate TypeDef interface?
My first idea is to create the TypeDef as an AS3 interface e.g.
IACEEditor.as which has to be implemented by ACEEditor.as.
Thanks,
Olaf
--
Sent from: http://apache-royale-development.20373.n8.nabble.com/
Re: Need help with CSS class selector (font-family is always Arial)
Posted by Olaf Krueger <ma...@olafkrueger.net>.
>Yes, I am pushing you to create ACEEditor as a fully complaint Royale
>component.
I agree that this should be the goal!
I'll give it a try soon... expect some more questions ;-)
Thanks,
Olaf
--
Sent from: http://apache-royale-development.20373.n8.nabble.com/
Re: Need help with CSS class selector (font-family is always Arial)
Posted by Alex Harui <ah...@adobe.com.INVALID>.
Hi Olaf,
Yes, I am pushing you to create ACEEditor as a fully complaint Royale
component.
You don't have to do it, but doing so would help us make sure that Royale
is capable of such things. IMO, we want all UI widgets to be usable in
MXML and AS and appear to have a consistent lifecycle. The MXML
requirement means that the widget cannot have constructor parameters.
Some other factors require you to implement IUIBase, so extending UIBase
makes sense, and UIBase as a typeNames property.
All Royale components are deployed in SWCs, and every SWC has a
defaults.css file. You should be able to copy an existing SWC or I think
I created a small SWC in that BarcodeScanner example.
Then the workflow for all Royale users for any Royale UI widget should be
as simple as: add SWC to library path then declare component in MXML or
via AS with "foo = new UIWidget();addElement(foo)". We want to try to
encapsulate any glue code as much as possible. The instructions for use
should not also have "then copy this snippet into your app". That snippet
should be part of the component's code since everybody will need to use it
and then all components will be used in the same way. Less looking in the
documentation for snippets is better, IMO.
So, it will be great if you can work towards that goal. We'll help you
get there. Don't worry if it takes extra iterations to get there. Your
work will help inform how we document the process for the next person.
Thanks,
-Alex
On 1/3/18, 1:22 PM, "Olaf Krueger" <ma...@olafkrueger.net> wrote:
>Thanks, Alex but I guess I need some more help:
>
>>If you rework ACEEditor.as to have
>> typeNames = "ACEEditor";
>
>Where comes the "typeName" property from?
>Is it enough to just create it or do I have to inherit my custom ACEEditor
>class from whatever Royale class?
>
>>And in the defaults.css add:
>What is the "default.css" and where it is located?
>
>Thanks for help,
>Olaf
>
>
>
>
>--
>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
>C978971dd5f124a92b47708d552f016a8%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7
>C0%7C636506114038150871&sdata=pSF1%2FerJ4%2BFoBivuleRHKyyuuC1x5hPibUsXSiqy
>Jco%3D&reserved=0
Re: Need help with CSS class selector (font-family is always Arial)
Posted by Olaf Krueger <ma...@olafkrueger.net>.
Thanks, Alex but I guess I need some more help:
>If you rework ACEEditor.as to have
> typeNames = "ACEEditor";
Where comes the "typeName" property from?
Is it enough to just create it or do I have to inherit my custom ACEEditor
class from whatever Royale class?
>And in the defaults.css add:
What is the "default.css" and where it is located?
Thanks for help,
Olaf
--
Sent from: http://apache-royale-development.20373.n8.nabble.com/
Re: Need help with CSS class selector (font-family is always Arial)
Posted by Alex Harui <ah...@adobe.com.INVALID>.
I could be wrong, but if we replace the * selector with a 'type' selector
per component it should work. That's because a Royale 'type' selector
isn't really a true CSS Type Selector. It is really a Class selector with
the same name as the component's typeNames property.
If you rework ACEEditor.as to have
typeNames = "ACEEditor";
And in the defaults.css add:
ACEEditor {
font-family: monospace;
}
That should apply the font-family to the actual div used by the ACEEditor
code, not its surrounding div.
-Alex
On 1/3/18, 12:56 PM, "Olaf Krueger" <ma...@olafkrueger.net> wrote:
>>...or create more TypeSelectors should work
>
>I don't understand this, what do you mean?
>My understanding is that applying Type selectors for e.g. a surrounding
>div
>don't help to fix this.
>
>Thanks,
>Olaf
>
>
>
>
>--
>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
>C57779949c0854384c24308d552ec8218%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7
>C0%7C636506098105141891&sdata=riIdDoteW%2BGuoZ8Z9hGS%2FR4hPRsgz%2B9SrH5zyv
>izsz4%3D&reserved=0
Re: Need help with CSS class selector (font-family is always Arial)
Posted by Olaf Krueger <ma...@olafkrueger.net>.
>...or create more TypeSelectors should work
I don't understand this, what do you mean?
My understanding is that applying Type selectors for e.g. a surrounding div
don't help to fix this.
Thanks,
Olaf
--
Sent from: http://apache-royale-development.20373.n8.nabble.com/
Re: Need help with CSS class selector (font-family is always Arial)
Posted by Alex Harui <ah...@adobe.com.INVALID>.
The * selector should be in the defaults.css in Basic (or maybe Core). A
* or global selector is how defaults were set up for Flash since Flash did
not make it easy to get browser default stylesheets. Like in Flex, the
app dev can have an fx:Style block and choose different values in its *
selector, but there is no way to remove the defaults. This was fine in
Flex because we weren't computing inherited values and * values correctly,
but it is an issue in the browser.
You can't just remove the * selector, because many other things are
relying on those values, so either moving them to Application or create
more TypeSelectors should work.
Of course, I could be wrong...
-Alex
On 1/3/18, 12:53 AM, "Olaf Krueger" <ma...@olafkrueger.net> wrote:
>
>> It looks like inherited properties have lower
>>priority than the * selector and that feels like the * selector is too
>>powerful.
>
>That's the case, I've created a little CodePen demo in order to validate
>this [1].
>That said I guess this issue has nothing to do with the ACE editor.
>BTW: It seems to me that using the type selector doesn't resolve this
>issue:
>Style inheritance is also blocked by the 'global' universal selector, see
>the button element in [1].
>
>Some questions left:
>- Why do we need to set those default styles in Royale?
>- Can somebody point me to line of code in asjs where those default styles
>are set ( * {font-familiy:Arial...} )?
>- Is an application developer able to overwrite or disable those default
>styles?
>
>Thanks,
>Olaf
>
>
>[1]
>https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fcodepen.i
>o%2Fanon%2Fpen%2FBJdNZY&data=02%7C01%7Caharui%40adobe.com%7Cdce88e7f3bd04d
>0b478908d5528779e4%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C6365056641
>79703956&sdata=TjELCJYkLFNIKhnSyWAzkjylgRoeIsmDDTueK0f8tRQ%3D&reserved=0
>
>
>
>
>--
>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
>Cdce88e7f3bd04d0b478908d5528779e4%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7
>C0%7C636505664179703956&sdata=x2Ga4evE4x%2BB8CayUCkRs9CQwR3bbkdNNddf6ZiHLR
>g%3D&reserved=0
Re: Need help with CSS class selector (font-family is always Arial)
Posted by Olaf Krueger <ma...@olafkrueger.net>.
This is a short summary of my quick google search and investigation, maybe
this is helpul for others (Of course, I could be wrong!):
Universal selector (*):
Applies style properties to all individual elements.
Replaces inherited style properties, blocks inheritance.
@see https://drafts.csswg.org/selectors-3/#universal-selector
--
Sent from: http://apache-royale-development.20373.n8.nabble.com/
Re: Need help with CSS class selector (font-family is always Arial)
Posted by Olaf Krueger <ma...@olafkrueger.net>.
> It looks like inherited properties have lower
>priority than the * selector and that feels like the * selector is too
>powerful.
That's the case, I've created a little CodePen demo in order to validate
this [1].
That said I guess this issue has nothing to do with the ACE editor.
BTW: It seems to me that using the type selector doesn't resolve this issue:
Style inheritance is also blocked by the 'global' universal selector, see
the button element in [1].
Some questions left:
- Why do we need to set those default styles in Royale?
- Can somebody point me to line of code in asjs where those default styles
are set ( * {font-familiy:Arial...} )?
- Is an application developer able to overwrite or disable those default
styles?
Thanks,
Olaf
[1] https://codepen.io/anon/pen/BJdNZY
--
Sent from: http://apache-royale-development.20373.n8.nabble.com/
Re: Need help with CSS class selector (font-family is always Arial)
Posted by Gabe Harbs <ha...@gmail.com>.
I don’t think moving it to Application is going to help for things like dialogs. (Or will it?)
> On Jan 2, 2018, at 8:03 PM, Alex Harui <ah...@adobe.com.INVALID> wrote:
>
> Maybe, but I hit this with my mock up of the Royale website as well.
> Since a lot of things are composed from other smaller pieces, I think we
> want defaults where the CSS applied to the outer element of a component
> applies to its children. It looks like inherited properties have lower
> priority than the * selector and that feels like the * selector is too
> powerful. I think in regular Flex we made the * selector the lowest
> priority which I think I learned today is not how CSS is supposed to work
>
> I think the font-family and font-size that is currently in * should move
> to Application. The border-width should probably be moved to the "type
> selectors" for components that have borders in their default appearance or
> it could go to Application too.
>
> Thoughts?
> -Alex
>
>
> On 1/2/18, 3:00 PM, "Gabe Harbs" <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>
>> I’m guessing that the ACE Editor has sub-elements that are picking up the
>> globals rather than the ones for the ACEEditor element. I have not looked
>> into this at all…
>>
>> Harbs
>>
>>> On Jan 2, 2018, at 5:50 PM, Alex Harui <ah...@adobe.com.INVALID> wrote:
>>>
>>> I haven't looked at his ACEEditor class, but it is also possible that
>>> the
>>> following would work.
>>>
>>> .ACEEditor {
>>> font-family: monospace;
>>> }
>>>
>>>
>>> And that should be a goal as well: to have the defaults.css for the
>>> ACEEditor class to use an "ACEEditor" selector (instead of lowercase
>>> "aceEditor"). If the ACEEditor class uses the typeNames property from
>>> UIBase properly, it would pick it up. We don't want folks to have to
>>> use
>>> ".aceEditor *" to set defaults
>>>
>>> My 2 cents,
>>> -Alex
>>>
>>>
>>> On 1/2/18, 2:29 PM, "Gabe Harbs" <harbs.lists@gmail.com
>>> <mailto:harbs.lists@gmail.com <ma...@gmail.com>>> wrote:
>>>
>>>> Did you try this?
>>>> .aceEditor * {
>>>> font-family: monospace;
>>>> }
>>>>
>>>>> On Jan 2, 2018, at 5:28 PM, Olaf Krueger <mail@olafkrueger.net <ma...@olafkrueger.net>> wrote:
>>>>>
>>>>> Hi Alex,
>>>>>
>>>>>> The key piece, I think, is that inherited properties in CSS have a
>>>>>> lower
>>>>>> importance that *...
>>>>>
>>>>> Yes, I think that's the problem:
>>>>>
>>>>> /* Generated by Apache Royale Compiler */
>>>>> * {
>>>>> font-family: Arial;
>>>>> border-width: 1px;
>>>>> font-size: 12px;
>>>>> }
>>>>>
>>>>>> IMO, that should be
>>>>> the goal, and that would provide you a "type selector"
>>>>>
>>>>> I'll give it a try!
>>>>>
>>>>> Thanks for help,
>>>>> Olaf
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>> --
>>>>> Sent from:
>>>>>
>>>>> https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapache- <https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapache->
>>>>> ro
>>>>> <https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapache <https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapache>
>>>>> -ro>
>>>>> yale-development.20373.n8.nabble.com <http://yale-development.20373.n8.nabble.com/>
>>>>> <https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fyale-d <https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fyale-d>
>>>>> evelopment.20373.n8.nabble.com <http://evelopment.20373.n8.nabble.com/>%2F&data=02%7C01%7Caharui%40adobe.com <http://40adobe.com/>%7Ca
>>>>> dcb2acdb1d64f2d712c08d55234b521%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%
>>>>> 7C0%7C636505308777859927&sdata=kxW1no86u3XllRCHvDdiry7EJLpp%2FUgXJ7Ots9
>>>>> v%2BqJQ%3D&reserved=0>%2F&data=02%7C01%7Caharui%40adobe.com <http://40adobe.com/>
>>>>> <https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2F40adob <https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2F40adob>
>>>>> e.com <http://e.com/>%2F&data=02%7C01%7Caharui%40adobe.com <http://40adobe.com/>%7Cadcb2acdb1d64f2d712c08d552
>>>>> 34b521%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636505308777859927&
>>>>> sdata=mgWjGqRA0aKqJHGR7UYls46GqGFmmlvR%2B9LUKrgmq2k%3D&reserved=0>
>>>>>
>>>>> %7Ce5a12ce075994045e87e08d5523066bd%7Cfa7b1b5a7b34438794aed2c178decee1%
>>>>> 7C
>>>>>
>>>>> 0%7C0%7C636505290225906131&sdata=1317juJwOVHYUu0mu0158YRYXgKICk8vKoQJYq
>>>>> zs
>>>>> S2A%3D&reserved=0
Re: Need help with CSS class selector (font-family is always Arial)
Posted by Alex Harui <ah...@adobe.com.INVALID>.
Maybe, but I hit this with my mock up of the Royale website as well.
Since a lot of things are composed from other smaller pieces, I think we
want defaults where the CSS applied to the outer element of a component
applies to its children. It looks like inherited properties have lower
priority than the * selector and that feels like the * selector is too
powerful. I think in regular Flex we made the * selector the lowest
priority which I think I learned today is not how CSS is supposed to work
I think the font-family and font-size that is currently in * should move
to Application. The border-width should probably be moved to the "type
selectors" for components that have borders in their default appearance or
it could go to Application too.
Thoughts?
-Alex
On 1/2/18, 3:00 PM, "Gabe Harbs" <ha...@gmail.com> wrote:
>I’m guessing that the ACE Editor has sub-elements that are picking up the
>globals rather than the ones for the ACEEditor element. I have not looked
>into this at all…
>
>Harbs
>
>> On Jan 2, 2018, at 5:50 PM, Alex Harui <ah...@adobe.com.INVALID> wrote:
>>
>> I haven't looked at his ACEEditor class, but it is also possible that
>>the
>> following would work.
>>
>> .ACEEditor {
>> font-family: monospace;
>> }
>>
>>
>> And that should be a goal as well: to have the defaults.css for the
>> ACEEditor class to use an "ACEEditor" selector (instead of lowercase
>> "aceEditor"). If the ACEEditor class uses the typeNames property from
>> UIBase properly, it would pick it up. We don't want folks to have to
>>use
>> ".aceEditor *" to set defaults
>>
>> My 2 cents,
>> -Alex
>>
>>
>> On 1/2/18, 2:29 PM, "Gabe Harbs" <harbs.lists@gmail.com
>><ma...@gmail.com>> wrote:
>>
>>> Did you try this?
>>> .aceEditor * {
>>> font-family: monospace;
>>> }
>>>
>>>> On Jan 2, 2018, at 5:28 PM, Olaf Krueger <ma...@olafkrueger.net> wrote:
>>>>
>>>> Hi Alex,
>>>>
>>>>> The key piece, I think, is that inherited properties in CSS have a
>>>>> lower
>>>>> importance that *...
>>>>
>>>> Yes, I think that's the problem:
>>>>
>>>> /* Generated by Apache Royale Compiler */
>>>> * {
>>>> font-family: Arial;
>>>> border-width: 1px;
>>>> font-size: 12px;
>>>> }
>>>>
>>>>> IMO, that should be
>>>> the goal, and that would provide you a "type selector"
>>>>
>>>> I'll give it a try!
>>>>
>>>> Thanks for help,
>>>> Olaf
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>> --
>>>> Sent from:
>>>>
>>>>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapache-
>>>>ro
>>>><https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapache
>>>>-ro>
>>>> yale-development.20373.n8.nabble.com
>>>><https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fyale-d
>>>>evelopment.20373.n8.nabble.com%2F&data=02%7C01%7Caharui%40adobe.com%7Ca
>>>>dcb2acdb1d64f2d712c08d55234b521%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%
>>>>7C0%7C636505308777859927&sdata=kxW1no86u3XllRCHvDdiry7EJLpp%2FUgXJ7Ots9
>>>>v%2BqJQ%3D&reserved=0>%2F&data=02%7C01%7Caharui%40adobe.com
>>>><https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2F40adob
>>>>e.com%2F&data=02%7C01%7Caharui%40adobe.com%7Cadcb2acdb1d64f2d712c08d552
>>>>34b521%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636505308777859927&
>>>>sdata=mgWjGqRA0aKqJHGR7UYls46GqGFmmlvR%2B9LUKrgmq2k%3D&reserved=0>
>>>>
>>>>%7Ce5a12ce075994045e87e08d5523066bd%7Cfa7b1b5a7b34438794aed2c178decee1%
>>>>7C
>>>>
>>>>0%7C0%7C636505290225906131&sdata=1317juJwOVHYUu0mu0158YRYXgKICk8vKoQJYq
>>>>zs
>>>> S2A%3D&reserved=0
>
Re: Need help with CSS class selector (font-family is always Arial)
Posted by Gabe Harbs <ha...@gmail.com>.
I’m guessing that the ACE Editor has sub-elements that are picking up the globals rather than the ones for the ACEEditor element. I have not looked into this at all…
Harbs
> On Jan 2, 2018, at 5:50 PM, Alex Harui <ah...@adobe.com.INVALID> wrote:
>
> I haven't looked at his ACEEditor class, but it is also possible that the
> following would work.
>
> .ACEEditor {
> font-family: monospace;
> }
>
>
> And that should be a goal as well: to have the defaults.css for the
> ACEEditor class to use an "ACEEditor" selector (instead of lowercase
> "aceEditor"). If the ACEEditor class uses the typeNames property from
> UIBase properly, it would pick it up. We don't want folks to have to use
> ".aceEditor *" to set defaults
>
> My 2 cents,
> -Alex
>
>
> On 1/2/18, 2:29 PM, "Gabe Harbs" <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>
>> Did you try this?
>> .aceEditor * {
>> font-family: monospace;
>> }
>>
>>> On Jan 2, 2018, at 5:28 PM, Olaf Krueger <ma...@olafkrueger.net> wrote:
>>>
>>> Hi Alex,
>>>
>>>> The key piece, I think, is that inherited properties in CSS have a
>>>> lower
>>>> importance that *...
>>>
>>> Yes, I think that's the problem:
>>>
>>> /* Generated by Apache Royale Compiler */
>>> * {
>>> font-family: Arial;
>>> border-width: 1px;
>>> font-size: 12px;
>>> }
>>>
>>>> IMO, that should be
>>> the goal, and that would provide you a "type selector"
>>>
>>> I'll give it a try!
>>>
>>> Thanks for help,
>>> Olaf
>>>
>>>
>>>
>>>
>>>
>>>
>>> --
>>> Sent from:
>>> https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapache-ro <https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapache-ro>
>>> yale-development.20373.n8.nabble.com <http://yale-development.20373.n8.nabble.com/>%2F&data=02%7C01%7Caharui%40adobe.com <http://40adobe.com/>
>>> %7Ce5a12ce075994045e87e08d5523066bd%7Cfa7b1b5a7b34438794aed2c178decee1%7C
>>> 0%7C0%7C636505290225906131&sdata=1317juJwOVHYUu0mu0158YRYXgKICk8vKoQJYqzs
>>> S2A%3D&reserved=0
Re: Need help with CSS class selector (font-family is always Arial)
Posted by Alex Harui <ah...@adobe.com.INVALID>.
I haven't looked at his ACEEditor class, but it is also possible that the
following would work.
.ACEEditor {
font-family: monospace;
}
And that should be a goal as well: to have the defaults.css for the
ACEEditor class to use an "ACEEditor" selector (instead of lowercase
"aceEditor"). If the ACEEditor class uses the typeNames property from
UIBase properly, it would pick it up. We don't want folks to have to use
".aceEditor *" to set defaults
My 2 cents,
-Alex
On 1/2/18, 2:29 PM, "Gabe Harbs" <ha...@gmail.com> wrote:
>Did you try this?
>.aceEditor * {
> font-family: monospace;
>}
>
>> On Jan 2, 2018, at 5:28 PM, Olaf Krueger <ma...@olafkrueger.net> wrote:
>>
>> Hi Alex,
>>
>>> The key piece, I think, is that inherited properties in CSS have a
>>>lower
>>> importance that *...
>>
>> Yes, I think that's the problem:
>>
>> /* Generated by Apache Royale Compiler */
>> * {
>> font-family: Arial;
>> border-width: 1px;
>> font-size: 12px;
>> }
>>
>>> IMO, that should be
>> the goal, and that would provide you a "type selector"
>>
>> I'll give it a try!
>>
>> Thanks for help,
>> Olaf
>>
>>
>>
>>
>>
>>
>> --
>> Sent from:
>>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapache-ro
>>yale-development.20373.n8.nabble.com%2F&data=02%7C01%7Caharui%40adobe.com
>>%7Ce5a12ce075994045e87e08d5523066bd%7Cfa7b1b5a7b34438794aed2c178decee1%7C
>>0%7C0%7C636505290225906131&sdata=1317juJwOVHYUu0mu0158YRYXgKICk8vKoQJYqzs
>>S2A%3D&reserved=0
>
Re: Need help with CSS class selector (font-family is always Arial)
Posted by Olaf Krueger <ma...@olafkrueger.net>.
>Did you try this?
Ha, this works!!!... and I guess it makes sense.
However, I'll check out the type selector tomorrow...
Thanks!
Olaf
--
Sent from: http://apache-royale-development.20373.n8.nabble.com/
Re: Need help with CSS class selector (font-family is always Arial)
Posted by Gabe Harbs <ha...@gmail.com>.
Did you try this?
.aceEditor * {
font-family: monospace;
}
> On Jan 2, 2018, at 5:28 PM, Olaf Krueger <ma...@olafkrueger.net> wrote:
>
> Hi Alex,
>
>> The key piece, I think, is that inherited properties in CSS have a lower
>> importance that *...
>
> Yes, I think that's the problem:
>
> /* Generated by Apache Royale Compiler */
> * {
> font-family: Arial;
> border-width: 1px;
> font-size: 12px;
> }
>
>> IMO, that should be
> the goal, and that would provide you a "type selector"
>
> I'll give it a try!
>
> Thanks for help,
> Olaf
>
>
>
>
>
>
> --
> Sent from: http://apache-royale-development.20373.n8.nabble.com/
Re: Need help with CSS class selector (font-family is always Arial)
Posted by Olaf Krueger <ma...@olafkrueger.net>.
Hi Alex,
>The key piece, I think, is that inherited properties in CSS have a lower
>importance that *...
Yes, I think that's the problem:
/* Generated by Apache Royale Compiler */
* {
font-family: Arial;
border-width: 1px;
font-size: 12px;
}
>IMO, that should be
the goal, and that would provide you a "type selector"
I'll give it a try!
Thanks for help,
Olaf
--
Sent from: http://apache-royale-development.20373.n8.nabble.com/
Re: Need help with CSS class selector (font-family is always Arial)
Posted by Alex Harui <ah...@adobe.com.INVALID>.
I ran into this the other day but dodged around it and didn't look into it
further until now.
It might be that we shouldn't set as many properties in the * selector. I
think I saw somewhere else that other "browser" stylesheets have defaults
for each component and don't rely on *.
The key piece, I think, is that inherited properties in CSS have a lower
importance that *. It might be that the CSS lookup in Flex was broken and
used * or global as the selector of lowest importance and allowed
inherited rules to override *.
So, I think the answer may be to set the font in the type-selectors.
That's more code to download, but there may not be another way.
Olaf, one thing I saw in the Gist is that you are not declaring the
ACEEditor in MXML or using it as an Royale component. IMO, that should be
the goal, and that would provide you a "type selector" to use to set the
default font. I think once you do that, your example will look more like
other Royale examples.
When we "capture" an existing JS component, we actually wrap it. And the
wrapper is where you stick most, if not all, of the the glue code you see
in the component's usage example. The key for you may be to defer calls
to the ace code until addedToParent() when you know the id of the
component. By default, the component will create a div in the constructor
and later and give it the id assigned in MXML.
HTH,
-Alex
On 1/2/18, 1:37 PM, "Olaf Krueger" <ma...@olafkrueger.net> wrote:
>Still no success... other ideas?
>
>Thanks,
>Olaf
>
>
>
>
>
>--
>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
>Caa34171fa4a548b1983608d5522905ed%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7
>C0%7C636505258502363927&sdata=j5eM1iTaU4%2FDrLMGDcwAaLcs7qyTSRYj9Bwhj2yi9P
>U%3D&reserved=0
Re: Need help with CSS class selector (font-family is always Arial)
Posted by Olaf Krueger <ma...@olafkrueger.net>.
Still no success... other ideas?
Thanks,
Olaf
--
Sent from: http://apache-royale-development.20373.n8.nabble.com/
Re: Need help with CSS class selector (font-family is always Arial)
Posted by Piotr Zarzycki <pi...@gmail.com>.
Hi Olaf,
Try inside js:Group -> https://paste.apache.org/NsUC
Thanks, Piotr
2018-01-02 22:08 GMT+01:00 Olaf Krueger <ma...@olafkrueger.net>:
> Hi,
> I've successfully captured the ACE editor but there's one issue left [1]:
> It seems to me that the Royale default font-family is always Arial and also
> 'overwrites' other settings.
> The ACE editor depends on the monospace font but I am not able to set it
> just for the surrounding group/div by applying a CSS class.
> The only thing that works for me is to set 'font-family: monospace;'
> globally.
>
> Do I miss something?
>
> Thanks,
> Olaf
>
> [1]
> https://gist.github.com/ok-at-github/86ffd5176465d1045db31d938b17da
> 15#file-apacheroyalecssissue-mxml-L36
>
>
>
> --
> Sent from: http://apache-royale-development.20373.n8.nabble.com/
>
--
Piotr Zarzycki
Patreon: *https://www.patreon.com/piotrzarzycki
<https://www.patreon.com/piotrzarzycki>*