How to make the icons work in tableview and listview (Template)?

[daveeel]

I have something like this:

I could only display the string "S", if it's blank, it's blank, no icon is displayed. Any hint?
Is there a working example for ListView?

[daveeel]

Err. code doesn't show. Basically I couldn't make the icon to display in listview as labels. Both plain listview and with template. So any working example is appreciated. Thanks!

[MattMcFarland]

Hi,

The Image you're sharing looks blank for some reason. Please answer the following so I can help:

1. Are you seeing icons anywhere else?
2. Can you share the code you are using to instantiate the icons? (there are multiple ways to do it)

Thanks

[daveeel]

Thanks for the prompt response.

1. Yes, the icons could be displayed in another window's label view
2. The alloy code got filtered by this comment system. So here's the screen capture of my template way:
   
   The icon class is properly styled, such that if I put a non-empty string, it will be displayed at the desired location. i.e. at the left side of each list item.

[MattMcFarland]

There seems to be issues with ListItems and TableRows. Especially because the parser can start before everything is finished loading.

Here are a couple things you can try:

1. After the loading is done and listview is populated, call a $.fontAwesome.refresh()
2. try creating a <View> inside <ListSection> and create a new <Label> above <ListItem>; - that way, you’ll have a place label specifically for icons and then the data to the right of it.
3. You might have to create the icons by using Titanium methods listed here: http://mattmcfarland.github.io/com.mattmcfarland.fontawesome/Widget.html#toc8

Let me know if this works.

[daveeel]

1. I have glossary.xml & glossary.js. Thus I added $.fontAwesome.refresh() at the end of glossary.js. However I got "'undefined' is not a function (evaluating '$.fontAwesome.refresh())..." from iphone simulator.
2. Since I'm using template with data binding and such method doesn't support section yet. I shall try a hand code list and let you know.
3. I prefer alloy to avoid this way. Anyway, shall try after pt. 2.

Thanks.

[MattMcFarland]

Interesting. 1. Shouldn't be undefined. I need to investigate and see
what's happening. I'll try to recreate the issue.
On Jun 20, 2014 1:32 AM, "davelam" notifications@github.com wrote:

1. I have glossary.xml & glossary.js. Thus I added
   $.fontAwesome.refresh() at the end of glossary.js. However I got
   "'undefined' is not a function (evaluating '$.fontAwesome.refresh())..."
   from iphone simulator.
2. Since I'm using template with data binding and such method doesn't
   support section yet. I shall try a hand code list and let you know.
3. I prefer alloy to avoid this way. Anyway, shall try after pt. 2.

Thanks.

—
Reply to this email directly or view it on GitHub
#6 (comment)
.

[MattMcFarland]

Can't seem to recreate. Question, how are you instantiating glossary.xml?

[daveeel]

glossary.xml is a child window from a table view row. Data is using the standard way of Alloy models with sql data binding. The app is fine using the usual display elements.

[MattMcFarland]

Ok, so what is the id of glossary.xml? If you give it an ID, youi'll be
able to call refresh() for it's containing widget.

Something like:

$.gallerysID.$widgetID.refresh();

hope this helps.

On Sun, Jun 22, 2014 at 6:18 PM, davelam notifications@github.com wrote:

glossary.xml is a child window from a table view row. Data is using the
standard way of Alloy models with sql data binding. The app is fine using
the usual display elements.

—
Reply to this email directly or view it on GitHub
#6 (comment)
.

Matt McFarland
www.mattmcfarland.com

[daveeel]

I set the Window of glossary.xml id as "glossaryWindow" and the ListView id as "list". So at best I could call $.glossaryWindow.list.refresh(); in glossary.js . However this gave "undefined is not an object" error.

In non-template based code, it's okay to have an id down to each ListItem. However in template based code, there's no way to have id for each to-be-binded item ... right ?

[MattMcFarland]

Hey,

Yeah if listItems are created 'on the fly' - then you can't use them with id. The good news is you don't have to. What we're trying to achieve is obtaining the fontAwesome Widget's ID. Since $.fontAwesome does not work, I figure we could try getting its parent element, which should be $.glossaryWindow.

That way, we can select its parent and the widget itself as a child of said parent.

Try $.glossaryWindow.fontAwesome.refresh();

Another thing is, what is the parent of $.glossaryWindow ? If it is $.index or something similar, you could try putting $.glossaryWindow.fontAwesome.refresh(); in index.js.

Another thing, is that the object could be undefined because it has not been instantiated yet.

Perhaps you could create a button for debug purposes to prove this that calls refresh.

Also what does console.log($.glossaryWindow) show? is it defined?

[daveeel]

Matt, really appreciate your patience. :)
I tried various combinations in my code but still get similar errors.
Suddenly I though why not make things simple to start with your Working Sample? So in your sample code index.xml. Firstly I first added the following at top of your first view.

<Label class="font-xs" icon="fa-flag" />

That works as expected to have a small flag at top of the index.xml view.

Then I just changed the code to:

<ListView >
   <ListSection><ListItem title="Test"><Label class="font-xs" icon="fa-flag" /></ListItem></ListSection>
</ListView>

Now I got: "'undefined' is not a function (evaluating '$.__views.__alloyId2197.add($.__views.__alloyId2198)')"

Nothing else changed in your sample code. I tried a bit more by deleting the Label item then no such error but the ListView just covers the whole window. The same error occurs in my app without calling your .refresh(). So I'm not sure if it's me not knowing the correct way of using ListView or it's actually a ListView bug?

Sure it's best if you could have some working listview or tableview in your future sample code.

Many thanks!

[daveeel]

Just re-read the Alloy doc. Where it says: "To create a custom list view, you need to define an ItemTemplate". I tried added hard coding a label in the Alloy test/app/ui/listview, getting the same error. So I can now confirm using template is the only way to use label in listview. A working sample is badly needed :)

[MattMcFarland]

Dave,

Looks like listview is being ignored by the parser. This can be done with Tableview like so:

<Alloy>
    <Window>
        <TableView top="60">
            <TableViewRow>
                <View layout="horizontal">
                    <Label color="black" icon="fa-file"/>
                    <Label icon="fa-star" color="black">Hello</Label>
                    <Widget src="com.mattmcfarland.fontawesome" />
                </View>
            </TableViewRow>
            <TableViewRow>
                <View layout="horizontal">
                    <Label color="black" icon="fa-file"/>
                    <Label icon="fa-star" color="black">Hello</Label>
                    <Widget src="com.mattmcfarland.fontawesome" />
                </View>
            </TableViewRow>
            <TableViewRow>
                <View layout="horizontal">
                    <Label icon="fa-star" color="black">Hello</Label>
                    <Widget src="com.mattmcfarland.fontawesome" />
                </View>
            </TableViewRow>
        </TableView>

    </Window>
</Alloy>

[daveeel]

That works. Then I shall stick to table view if I need fontAwesome icons, at least for now. Thanks for your kind help!

[churde]

Hi Matt,

I really like your widget but it's a shame that it does not work with listViews. Are you planning to support them in a near future.

Thanks.

[MattMcFarland]

Listview support is on the horizon, and it'll require a lot of refactoring to work. Sadly, I just haven't had the spare time.

In the meantime, you may try this workaround: #9