IconItemRenderer planned?

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

IconItemRenderer planned?

pynenburgad
Hi,

I am considering porting a Flex mobile app to web/Apache Royale. The Flex
mobile app makes extensive use of (customized) AS iconitemrenders, so I am
wondering if there are plans to develop an Apache Royale IconItemRenderer,
preferably to be used with the Jewel theme? I couldn’t find any references
in the Github source code repositories.

I’ve experimented with a Jewel List using an MXML renderer to display
graphics in list items, finding that when the number of list items times row
height exceeds list height, row heights are diminished to fit list items
inside the list viewport.

Thanks in advance,
Ad



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

Re: IconItemRenderer planned?

Carlos Rovira-2
Hi

I did Icons recently. You have a library "Icons" with "FontIcon" and "ToggleFontIcon". Jewel Button already supports now "icon" property through "IIcon" interface in core. ToggleFontIcon is an ISelectable component and it's used as well with ToggleButton as well recently done.

About ItemRenderer there's an example in JewelExample in NavigationIconLinkItemRenderer.mxml. It's done in MXML and not AS3 since in Royale, mxml seems to be as performant as AS3, so not need to make it AS3. But if you're more happy you can create it your own in AS3.

The renderer is like this:

<j:NavigationLinkItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:j="library://ns.apache.org/royale/jewel"
xmlns:js="library://ns.apache.org/royale/basic"
xmlns:html="library://ns.apache.org/royale/html"

<fx:Script>
        <![CDATA[
            import vos.NavigationLinkVO;
[Bindable("dataChange")]
public function get navlink():NavigationLinkVO
{
return data as NavigationLinkVO;
}
        ]]>
    </fx:Script>

<mdl:beads>
<js:ItemRendererDataBinding />
</mdl:beads>
<js:FontIcon text="{navlink.icon}" material="true" visible="{navlink.icon != null}"/>

<html:Span text="{navlink.label}"/>
</j:NavigationLinkItemRenderer>

So it's using Binding. 

FontIcon are icons that use font icons like Material Design, you should be able to use as well FontAwesome or others.

The list using this is:

<j:Navigation change="changeHandler(event)" className="navIconLinkItemRenderer">
<j:beads>
<js:ConstantBinding
sourceID="mainNavigationModel"
sourcePropertyName="containerDrawerNavigation"
destinationPropertyName="dataProvider"/>
</j:beads>
</j:Navigation>

and in CSS:

.navIconLinkItemRenderer
{
IItemRenderer: ClassReference("itemRenderers.NavigationIconLinkItemRenderer");
}


As a bonus, buttons con icons are like this:

<j:Button click="topappbar.visible = !topappbar.visible">
<j:icon>
<js:FontIcon text="{MaterialIconType.VISIBILITY}" material="true"/>
</j:icon>
</j:Button>

<j:ToggleButton click="toggleTopAppBarFixed()">
<j:icon>
<js:ToggleFontIcon text="{MaterialIconType.LOCK}" selectedText="{MaterialIconType.LOCK_OPEN}" material="true"/>
</j:icon>
</j:ToggleButton>

You can take into account that a j:Button used in a TopBarApp will look without chrome and only as an icon. You can look into the CSS

As well I want to give you a warning. This code is what I'm doing this days, so while it seems finished, I can't guarantee that will not change tomorrow until it settles it a bit, if this happens will be during the next few days and before that I expect it to be pretty final

I have to do some blog example as well as I consider this finished.

Best,

Carlos




2018-07-06 14:53 GMT+02:00 pynenburgad <[hidden email]>:
Hi,

I am considering porting a Flex mobile app to web/Apache Royale. The Flex
mobile app makes extensive use of (customized) AS iconitemrenders, so I am
wondering if there are plans to develop an Apache Royale IconItemRenderer,
preferably to be used with the Jewel theme? I couldn’t find any references
in the Github source code repositories.

I’ve experimented with a Jewel List using an MXML renderer to display
graphics in list items, finding that when the number of list items times row
height exceeds list height, row heights are diminished to fit list items
inside the list viewport.

Thanks in advance,
Ad



--
Sent from: http://apache-royale-users.20374.n8.nabble.com/



--
Reply | Threaded
Open this post in threaded view
|

Re: IconItemRenderer planned?

pynenburgad
Thanks for the reply and the examples, although I'm not sure I completely
understand how a Navigation compoment relates to a List component, but that
might be caused by me just having started looking into the Royale framework
and coming from a Flex Mobile/Spark List experience.

I rather thought I could try to adapt your 'Adding an item to a Jewel List'
example [1]. Actually, I've taken this example List and specified as its
itemRenderer property an MXML Itemrenderer that adds a graphic to each of
the list items (with the graphic to the left, text label to the right),
using the dataproviding Arraylist data items to specify the graphic to be
displayed in a list item (out of a set of custom .png graphics provided with
the application). The items are renderered OK, but the problem with this
MXML Itemrenderer I've constructed is that whenever the list contains more
items than the list height can contain, the list doesn't handle this by
adding scroll bars enabling the extra items to be scrolled into and out of
view (as it should), but instead each of the list items are rendered to
lower item heights so as to still fit within the list window. But this could
well be caused by flaws in the MXML Itemrenderer I've cooked up:

<js:MXMLItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                xmlns:js="library://ns.apache.org/royale/basic"
                xmlns:j="library://ns.apache.org/royale/jewel"
                                xmlns:svg="library://ns.apache.org/royale/svg"
                                width="100%" height="36">
    <fx:Script>
       
    </fx:Script>
   
    <j:beads>
        <j:BasicLayout/>
        <js:ItemRendererDataBinding />
    </j:beads>
    <js:Image src="{'assets\\' + placeFlag + '.png'}" y="6" x="10"
height="20" width="30"/>
    <j:Label text="{placeName}" y="6" x="60" />
    <j:Label text="{placeCountry}" y="6" x="180"/>

</js:MXMLItemRenderer>

That is not to say I coudln't use any of your examples, because the app I'm
hoping to migrate also contains icon buttons like those in the TopBarApp
component you've just constructed. Thanks also for the heads up about the
under construction state of code, I'll take that into account.

Best regards,
Ad

[1]  Adding an item to a Jewel List
<https://royale.apache.org/adding-an-item-to-a-jewel-list/>  



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

Re: IconItemRenderer planned?

pynenburgad
Again the MXML Itemrenderer code, now including the missing <fx:Script> code:

<js:MXMLItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                xmlns:js="library://ns.apache.org/royale/basic"
                xmlns:j="library://ns.apache.org/royale/jewel"
                                xmlns:svg="library://ns.apache.org/royale/svg"
                                width="100%" height="36">
    <fx:Script>
       
        [Bindable]
            [Bindable]
                        private var placeName:String;
                       
                        [Bindable]
                        private var placeCountry:String;

            [Bindable]
            private var placeFlag:String;
                       
                        override public function set data(value:Object):void
                        {
                                super.data = value;
                               
                                placeName = value["name"];
                                placeCountry = value["country"];
                placeFlag = value["flag"];

                        }    
       
    </fx:Script>
   
    <j:beads>
        <j:BasicLayout/>
        <js:ItemRendererDataBinding />
    </j:beads>
    <js:Image src="{'assets\\' + placeFlag + '.png'}" y="6" x="10"
height="20" width="30"/>
    <j:Label text="{placeName}" y="6" x="60" />
    <j:Label text="{placeCountry}" y="6" x="180"/>

</js:MXMLItemRenderer>




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

Re: IconItemRenderer planned?

Carlos Rovira-2
Hi

Navigation component is extending List component, so its a specialized List for navigation.

But to test that the List component is fully working just uploaded a working Icon ListItemRenderer example to Jewel Example in this commit [1]

The screenshot with the result is [2].

Is mostly the same as you did, but using a typed Object "IconListVO", The renderer extends "ListItemRenderer" and is set with CSS

.iconListItemRenderer
{
IItemRenderer: ClassReference("itemRenderers.IconListItemRenderer");
}

and instead of set offsets with x and y I use css like this:


.iconListItemRenderer .fonticon
{
margin-right: 24px;
}

This make some room between the icon and the text label.

Hope the example help you to get this working :)

Carlos



2018-07-06 23:22 GMT+02:00 pynenburgad <[hidden email]>:
Again the MXML Itemrenderer code, now including the missing <fx:Script> code:

<js:MXMLItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                xmlns:js="library://ns.apache.org/royale/basic"
                xmlns:j="library://ns.apache.org/royale/jewel"
                                xmlns:svg="library://ns.apache.org/royale/svg"
                                width="100%" height="36">
    <fx:Script>

        [Bindable]
            [Bindable]
                        private var placeName:String;

                        [Bindable]
                        private var placeCountry:String;

            [Bindable]
            private var placeFlag:String;

                        override public function set data(value:Object):void
                        {
                                super.data = value;

                                placeName = value["name"];
                                placeCountry = value["country"];
                placeFlag = value["flag"];

                        }   

    </fx:Script>

    <j:beads>
        <j:BasicLayout/>
        <js:ItemRendererDataBinding />
    </j:beads>
    <js:Image src="{'assets\\' + placeFlag + '.png'}" y="6" x="10"
height="20" width="30"/>
    <j:Label text="{placeName}" y="6" x="60" />
    <j:Label text="{placeCountry}" y="6" x="180"/>

</js:MXMLItemRenderer>







--
Reply | Threaded
Open this post in threaded view
|

Re: IconItemRenderer planned?

Carlos Rovira-2
Here's a screenshot that looks better:


2018-07-07 10:13 GMT+02:00 Carlos Rovira <[hidden email]>:
Hi

Navigation component is extending List component, so its a specialized List for navigation.

But to test that the List component is fully working just uploaded a working Icon ListItemRenderer example to Jewel Example in this commit [1]

The screenshot with the result is [2].

Is mostly the same as you did, but using a typed Object "IconListVO", The renderer extends "ListItemRenderer" and is set with CSS

.iconListItemRenderer
{
IItemRenderer: ClassReference("itemRenderers.IconListItemRenderer");
}

and instead of set offsets with x and y I use css like this:


.iconListItemRenderer .fonticon
{
margin-right: 24px;
}

This make some room between the icon and the text label.

Hope the example help you to get this working :)

Carlos



2018-07-06 23:22 GMT+02:00 pynenburgad <[hidden email]>:
Again the MXML Itemrenderer code, now including the missing <fx:Script> code:

<js:MXMLItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                xmlns:js="library://ns.apache.org/royale/basic"
                xmlns:j="library://ns.apache.org/royale/jewel"
                                xmlns:svg="library://ns.apache.org/royale/svg"
                                width="100%" height="36">
    <fx:Script>

        [Bindable]
            [Bindable]
                        private var placeName:String;

                        [Bindable]
                        private var placeCountry:String;

            [Bindable]
            private var placeFlag:String;

                        override public function set data(value:Object):void
                        {
                                super.data = value;

                                placeName = value["name"];
                                placeCountry = value["country"];
                placeFlag = value["flag"];

                        }   

    </fx:Script>

    <j:beads>
        <j:BasicLayout/>
        <js:ItemRendererDataBinding />
    </j:beads>
    <js:Image src="{'assets\\' + placeFlag + '.png'}" y="6" x="10"
height="20" width="30"/>
    <j:Label text="{placeName}" y="6" x="60" />
    <j:Label text="{placeCountry}" y="6" x="180"/>

</js:MXMLItemRenderer>







--



--
Reply | Threaded
Open this post in threaded view
|

Re: IconItemRenderer planned?

pynenburgad
Thanks for creating the Icon Class and the Icon ListItemRenderer, that looks
really good in the screenshot. I tried to get the JewelExample working
through compile debug build in VSCode, (using the latest nightly build
Royale 0.9.3/JS-only), but the compile failed with errors (see below). I
guess I should perhaps wait for a more stable Royale build?

Apart from that, I can now get my previously fabricated IconItemRenderer
properly running by using the latest Royale 0.9.3 nightly build (see
screenshot [1]). Apparently the problems I described earlier (list items
being flattened to fit all of the list items inside the list window) were
related to compiling with a nightly 0.9.3 build I downloaded a few weeks
ago.
My own example is only for trying things out, I will be needing a bit more
complex renderers for list items with an image icon as well as a decorator
icon plus one or two labels (with the second label above or below the
'primary' label).

Thanks again,
Regards,
Ad

[1]  https://snag.gy/qG8C76.jpg <https://snag.gy/qG8C76.jpg>  

Errors when compiling JewelExample project:

C:\Users\User1\VSCodeProjects\JewelExample\src\main\resources\jewel-example-styles.css(49):
col: 22 Error: 'img' is not defined.

{
                     ^

C:\Users\User1\VSCodeProjects\JewelExample\src\main\resources\jewel-example-styles.css(49):
col: 22 Error: 'img' is not defined.

{
                     ^

C:\Users\User1\VSCodeProjects\JewelExample\src\main\resources\jewel-example-styles.css(49):
col: 22 Error: 'img' is not defined.

{
                     ^

C:\Users\User1\VSCodeProjects\JewelExample\src\main\resources\jewel-example-styles.css(49):
col: 22 Error: 'img' is not defined.

{
                     ^

C:\Users\User1\VSCodeProjects\JewelExample\src\main\royale\ButtonPlayGround.mxml(55):
col: 5 Error: This tag could not be resolved to an ActionScript class. It
will be ignored.

                                <js:FontIcon text="{MaterialIconType.PRINT}"
material="true"/>
                                ^

C:\Users\User1\VSCodeProjects\JewelExample\src\main\royale\MainContent.mxml(85):
col: 25 Error: This tag could not be resolved to an ActionScript class. It
will be ignored.

                        <ic:FontIcon text="{MaterialIconType.MENU}"
material="true"/>
                        ^

C:\Users\User1\VSCodeProjects\JewelExample\src\main\royale\MainContent.mxml(93):
col: 25 Error: This tag could not be resolved to an ActionScript class. It
will be ignored.

                        <ic:FontIcon text="{MaterialIconType.VISIBILITY}"
material="true"/>
                        ^

C:\Users\User1\VSCodeProjects\JewelExample\src\main\royale\MainContent.mxml(98):
col: 25 Error: This tag could not be resolved to an ActionScript class. It
will be ignored.

                        <ic:ToggleFontIcon text="{MaterialIconType.LOCK}"
selectedText="{MaterialIconType.LOCK_OPEN}" material="true"/>
                        ^

C:\Users\User1\VSCodeProjects\JewelExample\src\main\royale\itemRenderers\IconListItemRenderer.mxml(43):
col: 5 Error: This tag is unexpected. It will be ignored.

    <ic:FontIcon text="{iconList.icon}" material="true"
visible="{iconList.icon != null}"/>
    ^

C:\Users\User1\VSCodeProjects\JewelExample\src\main\royale\itemRenderers\NavigationIconLinkItemRenderer.mxml(42):
col: 5 Error: This tag is unexpected. It will be ignored.

    <js:FontIcon text="{navlink.icon}" material="true"
visible="{navlink.icon != null}"/>



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

Re: IconItemRenderer planned?

Carlos Rovira-2
Hi,

nice you get things working at last. You don't need to wait for stable release, but my advice is to follow the following points since that guaranteed that you'll be as close as possible to the latest working code taking into account that is what I use to code all this:

1.- use maven to build all. I use to update each day the three repos and build all three (since maven required to build all after we reach 00:00 hour). So make a mvn clean install (and if you want to skip test to go faster add -DskipTests)

2.- Use VSCode and add a .vscode folder with a tasks.json file with

{
    "version": "0.1.0",
    "command": "mvn",
    "args": ["clean", "install", "-DskipTests"],
    "isShellCommand": true,
    "showOutput": "always"
}

so you can build with SHIFT+CMD+B (on Mac and similar on Win)

I think this is the safest, quick way to work with Royale for now. 
Take into account that I don't use to worry about ant files since I don't have ANT installed and working but others do from time to time.

If you find something you want to share you can make your changes in the library you want, and do a mvn clean install on that project or if you have VSCode configured like in step 2 in that project hit SHIFT+CMD+B and build the library, then try it in an example project and test if that works. Then submit a Pull Request.

It's clear that Jewel continues to evolve daily, and I'm working  all days on this so expect continuous changes to get this better and better each day.

thanks!



2018-07-09 21:28 GMT+02:00 pynenburgad <[hidden email]>:
Thanks for creating the Icon Class and the Icon ListItemRenderer, that looks
really good in the screenshot. I tried to get the JewelExample working
through compile debug build in VSCode, (using the latest nightly build
Royale 0.9.3/JS-only), but the compile failed with errors (see below). I
guess I should perhaps wait for a more stable Royale build?

Apart from that, I can now get my previously fabricated IconItemRenderer
properly running by using the latest Royale 0.9.3 nightly build (see
screenshot [1]). Apparently the problems I described earlier (list items
being flattened to fit all of the list items inside the list window) were
related to compiling with a nightly 0.9.3 build I downloaded a few weeks
ago.
My own example is only for trying things out, I will be needing a bit more
complex renderers for list items with an image icon as well as a decorator
icon plus one or two labels (with the second label above or below the
'primary' label).

Thanks again,
Regards,
Ad

[1]  https://snag.gy/qG8C76.jpg <https://snag.gy/qG8C76.jpg

Errors when compiling JewelExample project:

C:\Users\User1\VSCodeProjects\JewelExample\src\main\resources\jewel-example-styles.css(49):
col: 22 Error: 'img' is not defined.

{
                     ^

C:\Users\User1\VSCodeProjects\JewelExample\src\main\resources\jewel-example-styles.css(49):
col: 22 Error: 'img' is not defined.

{
                     ^

C:\Users\User1\VSCodeProjects\JewelExample\src\main\resources\jewel-example-styles.css(49):
col: 22 Error: 'img' is not defined.

{
                     ^

C:\Users\User1\VSCodeProjects\JewelExample\src\main\resources\jewel-example-styles.css(49):
col: 22 Error: 'img' is not defined.

{
                     ^

C:\Users\User1\VSCodeProjects\JewelExample\src\main\royale\ButtonPlayGround.mxml(55):
col: 5 Error: This tag could not be resolved to an ActionScript class. It
will be ignored.

                                <js:FontIcon text="{MaterialIconType.PRINT}"
material="true"/>
                                ^

C:\Users\User1\VSCodeProjects\JewelExample\src\main\royale\MainContent.mxml(85):
col: 25 Error: This tag could not be resolved to an ActionScript class. It
will be ignored.

                        <ic:FontIcon text="{MaterialIconType.MENU}"
material="true"/>
                        ^

C:\Users\User1\VSCodeProjects\JewelExample\src\main\royale\MainContent.mxml(93):
col: 25 Error: This tag could not be resolved to an ActionScript class. It
will be ignored.

                        <ic:FontIcon text="{MaterialIconType.VISIBILITY}"
material="true"/>
                        ^

C:\Users\User1\VSCodeProjects\JewelExample\src\main\royale\MainContent.mxml(98):
col: 25 Error: This tag could not be resolved to an ActionScript class. It
will be ignored.

                        <ic:ToggleFontIcon text="{MaterialIconType.LOCK}"
selectedText="{MaterialIconType.LOCK_OPEN}" material="true"/>
                        ^

C:\Users\User1\VSCodeProjects\JewelExample\src\main\royale\itemRenderers\IconListItemRenderer.mxml(43):
col: 5 Error: This tag is unexpected. It will be ignored.

    <ic:FontIcon text="{iconList.icon}" material="true"
visible="{iconList.icon != null}"/>
    ^

C:\Users\User1\VSCodeProjects\JewelExample\src\main\royale\itemRenderers\NavigationIconLinkItemRenderer.mxml(42):
col: 5 Error: This tag is unexpected. It will be ignored.

    <js:FontIcon text="{navlink.icon}" material="true"
visible="{navlink.icon != null}"/>






--
Reply | Threaded
Open this post in threaded view
|

Re: IconItemRenderer planned?

pynenburgad
Hi,
I’ve already tried the Maven route using command line/clean install, but
kept encountering errors (see below), so I thought I’d try the VS
Code/Actionscript-Ant compile. I can get most of the examples running that
way, (like JewelList), JewelExample I couldn’t (see the errors quoted in my
previous post). But it is only recently that I installed Maven and had my
first steps on its long and steep learning curve.

Regards,
Ad

Errors from Maven clean install:

[ERROR] Failed to execute goal on project JewelExample: Could not resolve
dependencies for project
org.apache.royale.examples:JewelExample:swf:0.9.3-SNAPSHOT: Failed to
collect dependencies at
org.apache.royale.framework:Icons:swc:swf:0.9.3-SNAPSHOT: Failed to read
artifact descriptor for
org.apache.royale.framework:Icons:swc:swf:0.9.3-SNAPSHOT: Failure to find
org.apache.royale.framework:projects:pom:0.9.3-20180710.011820-251 in
https://repository.apache.org/content/repositories/snapshots was cached in
the local repository, resolution will not be reattempted until the update
interval of apache-snapshots has elapsed or updates are forced



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

Re: IconItemRenderer planned?

Carlos Rovira-2
Hi,

I have a extremely easy setup in Mac though homebrew, that make it very quick to be ready, I think I should make a tutorial to show it. But will help people in Mac since it uses brew... are you in Mac?
For the general use, I think Maven can be hard in the first steps, but we discussed the issues various times in this list so I think are mostly the same for all, once you know it, you can know how to bypass it, as in most of tech things we live.

did you follow this steps? [1]



2018-07-10 11:46 GMT+02:00 pynenburgad <[hidden email]>:
Hi,
I’ve already tried the Maven route using command line/clean install, but
kept encountering errors (see below), so I thought I’d try the VS
Code/Actionscript-Ant compile. I can get most of the examples running that
way, (like JewelList), JewelExample I couldn’t (see the errors quoted in my
previous post). But it is only recently that I installed Maven and had my
first steps on its long and steep learning curve.

Regards,
Ad

Errors from Maven clean install:

[ERROR] Failed to execute goal on project JewelExample: Could not resolve
dependencies for project
org.apache.royale.examples:JewelExample:swf:0.9.3-SNAPSHOT: Failed to
collect dependencies at
org.apache.royale.framework:Icons:swc:swf:0.9.3-SNAPSHOT: Failed to read
artifact descriptor for
org.apache.royale.framework:Icons:swc:swf:0.9.3-SNAPSHOT: Failure to find
org.apache.royale.framework:projects:pom:0.9.3-20180710.011820-251 in
https://repository.apache.org/content/repositories/snapshots was cached in
the local repository, resolution will not be reattempted until the update
interval of apache-snapshots has elapsed or updates are forced



--
Reply | Threaded
Open this post in threaded view
|

Re: IconItemRenderer planned?

pynenburgad
Hi,

I'm on Windows, but thanks for pointing to [1], I followed only step 1. and
2. I will try to complete the rest.

[1]
https://github.com/apache/royale-asjs/wiki/Build-Apache-Royale-with-Maven
<https://github.com/apache/royale-asjs/wiki/Build-Apache-Royale-with-Maven>  




--
Sent from: http://apache-royale-users.20374.n8.nabble.com/