So, I'm going nuts with this one. Using latest 5.2.0GA, I'm not able to get the Alloy ListView to show on Android. In iOS, it shows fine, but when I run the same in an Android emulator (4.1.1 and also 5.0) as well as an android device (4.4.2) the ListItem(s) all show blank. If I add a HeaderView/FooterView they show but not the ListItem.
Going back to basics, using code from the docs, same thing.
Alloy>
<Window class="container">
<ListView id="elementsList">
<ListSection name="elements">
<ListItem title="Hydrogen"/>
<ListItem title="Helium"/>
<ListItem title="Lithium"/>
<ListItem title="Beryllium"/>
<ListItem title="Boron"/>
<ListItem title="Carbon"/>
<ListItem title="Nitrogen"/>
<ListItem title="Oxygen"/>
<!-- Abbreviated... -->
</ListSection>
</ListView>
</Window>
iOS shows it as expected, Android shows only an empty white space.
What am I missing that is head-hurting obvious? I've installed Android SDK 4.0 as well as that's a minimum version for 5.2.0GA.
Thanks
I have tired changing the color of the items and it works fine. The list items appears without any problem.
<Alloy>
<Window class="container">
<ListView id="list" >
<ListSection name="elements" >
<ListItem title="Hydrogen" color="black"/>
<ListItem title="Helium" color="black"/>
<ListItem title="Lithium" color="black"/>
<ListItem title="Beryllium" color="black"/>
<ListItem title="Boron" color="black"/>
<ListItem title="Carbon" color="black"/>
<ListItem title="Nitrogen" color="black"/>
<ListItem title="Oxygen" color="black"/>
</ListSection>
</ListView>
</Window>
</Alloy>
Related
Why does this following code produce this result: https://imgur.com/a/lQhLs8o ?
However, if I move the BottomNavigatorBar component to top position before CountryListComponent, it produces the desired result that looks like this: https://imgur.com/a/23z7bb2 ?
<template>
<Page actionBarHidden="true">
<DockLayout height="100%">
// first
<CountryListComponent dock="top">
// second
<BottomNavigationBar dock="bottom" activeColor="pink"
inactiveColor="yellow"
backgroundColor="black"
verticalAlignment="bottom"
#tabSelected="this.changeTab"
row="1">
<BottomNavigationTab title="Fiaarst" icon="icon-29.png" />
<BottomNavigationTab title="Second" icon="icon-29.png" />
<BottomNavigationTab title="Third" icon="icon-29.png" />
</BottomNavigationBar>
</DockLayout>
</Page>
</template>
CountryListComponent
<template>
<StackLayout backgroundColor="blue">
</StackLayout>
</template>
Refer the DockLayout documentation, by default stretchLastChild will be true which means BottomNavigationBar will take entire space if it's last child and vice versa.
I've this problem using GridLayout, tested on two Samsung devices.
This is an excerpt from the layout:
<GridLayout
a:layout_width="0dp"
a:layout_weight="2"
a:layout_height="match_parent"
a:rowCount="5"
a:columnCount="4">
<TextView
a:id="#+id/tvDescentsFemaleCount"
style="#style/dataPanelControlLabels"
a:layout_width="0dp"
a:layout_row="0"
a:layout_column="0"
a:layout_columnWeight="3"
a:layout_columnSpan="3"
a:text="#string/pnlVisitDescentsFemaleDescentNumber" />
<Button
a:id="#+id/bDescentsFemaleCount"
style="#style/dataButton"
a:layout_width="0dp"
a:layout_row="1"
a:layout_column="0"
a:layout_columnWeight="3"
a:layout_columnSpan="3"
a:layout_marginLeft="3dp"
a:layout_marginRight="3dp" />
<ImageView
a:id="#+id/ivDescentsMoveLeft"
a:layout_width="0dp"
a:layout_row="1"
a:layout_column="3"
a:layout_columnWeight="1"
a:src="#drawable/freccia_indietro"
a:adjustViewBounds="true"
a:scaleType="centerInside" />
<TextView
a:id="#+id/tvDescentsMaleCount"
style="#style/dataPanelControlLabels"
a:layout_width="0dp"
a:layout_row="2"
a:layout_column="0"
a:layout_columnSpan="3"
a:layout_columnWeight="3"
a:text="#string/pnlVisitDescentsMaleDescentNumber" />
<Button
a:id="#+id/bDescentsMaleCount"
style="#style/dataButton"
a:layout_width="0dp"
a:layout_row="3"
a:layout_column="0"
a:layout_columnSpan="3"
a:layout_columnWeight="3"
a:layout_marginLeft="3dp"
a:layout_marginRight="3dp" />
<ImageView
a:id="#+id/ivDescentsMoveRight"
a:layout_width="0dp"
a:layout_row="3"
a:layout_column="3"
a:layout_columnWeight="1"
a:src="#drawable/freccia_avanti"
a:adjustViewBounds="true"
a:scaleType="centerInside" />
<ImageView
a:id="#+id/ivDescentsAdd"
a:layout_width="0dp"
a:layout_row="4"
a:layout_column="0"
a:layout_columnWeight="1"
a:layout_margin="3dp"
a:src="#drawable/add"
a:adjustViewBounds="true"
a:scaleType="centerInside"
a:padding="6dp" />
<ImageView
a:id="#+id/ivDescentsRemove"
a:layout_width="0dp"
a:layout_height="wrap_content"
a:layout_columnWeight="1"
a:layout_row="4"
a:layout_column="1"
a:layout_margin="3dp"
a:padding="6dp"
a:src="#drawable/meno"
a:adjustViewBounds="true"
a:scaleType="centerInside" />
<ToggleButton
a:id="#+id/tbDescentsFemaleSelect"
style="#style/toggleButtonPv"
a:layout_width="0dp"
a:layout_row="4"
a:layout_column="2"
a:layout_columnWeight="1"
a:layout_height="wrap_content"
a:layout_margin="3dp"
a:textOn="#string/pnlVisitDescentsFemaleShort"
a:textOff="#string/pnlVisitDescentsFemaleShort"
a:padding="4dp" />
<ToggleButton
a:id="#+id/tbDescentsMaleSelect"
style="#style/toggleButtonPv"
a:layout_width="0dp"
a:layout_row="4"
a:layout_column="3"
a:layout_columnWeight="1"
a:layout_height="wrap_content"
a:layout_margin="3dp"
a:textOn="#string/pnlVisitDescentsMaleShort"
a:textOff="#string/pnlVisitDescentsMaleShort"
a:padding="4dp" />
</GridLayout>
On the complete layout there is another GridLayout, where the only difference is the absence of the a:layout_columnSpan attribute (I've shortened the classic namespace declaration from xmlns:android... to xlmns:a...).
This is the less-significant screenshot from my PC designer :
This is the screenshot from an SM-T535, API level 21 Samsung tablet :
On the upper left corner there is a GridLayout, on the middle right there is an android.support.v7.widget.GridLayout. I've left the layout limits only to show how the widgets are rendered.
This is the screenshot from an SM-T585, API level 24 Samsung tablet:
The GridLayout is rendered correctly, whereas the android.support.v7.widget.GridLayout on the right is rendered almost in the same way.
This is the screenshot from the same SM-T585, where all the two widgets are the standard GridLayout:
Please note also the switch bank under the GridLayout on the right; they are android.support.v7.widget.SwitchCompat, because originally I was porting the app on a GT-N800 Samsung tablet, and the standard Switch widget was not so customizable. In the Activity code I'm substituting the standard typeface with a font from an asset. Only on the SM-T585 the font is shown correctly.
The activity inherits from Activity, but inheriting from AppCompatActivity doesn't change a single pixel.
The entire project is a Xamarin app (I'm porting the same app developed for IOS, so I've to recycle a great part of the code), and the IDE is VS2017 Community edition.
The same layout (GridLayout widgets) works correctly on a Nexus 7, although the screen is too small.
Any suggestion appreciated.
Thanks.
Rodolfo.
How to make tag categories like above, i tried using the code below
<View height="Ti.UI.SIZE" width="Ti.UI.SIZE" layout="horizontal">
<View height="Ti.UI.SIZE" width="Ti.UI.SIZE" right="10dp">
<Label height="Ti.UI.SIZE" width="Ti.UI.SIZE" left="10dp" right="10dp" top="5dp" bottom="5dp" text="Tidak ada layanan pesan antar"/>
</View>
<View height="Ti.UI.SIZE" width="Ti.UI.SIZE" right="10dp">
<Label height="Ti.UI.SIZE" width="Ti.UI.SIZE" left="10dp" right="10dp" top="5dp" bottom="5dp" text="Makan di tempat"/>
</View>
<View height="Ti.UI.SIZE" width="Ti.UI.SIZE" right="10dp">
<Label height="Ti.UI.SIZE" width="Ti.UI.SIZE" left="10dp" right="10dp" top="5dp" bottom="5dp" text="Alkohol Tidak Tersedia"/>
</View>
<View height="Ti.UI.SIZE" width="Ti.UI.SIZE" right="10dp">
<Label height="Ti.UI.SIZE" width="Ti.UI.SIZE" left="10dp" right="10dp" top="5dp" bottom="5dp" text="Tempat duduk di luar"/>
</View>
</View>
The result is
The view is not falling down if the size is too long, but keep filling the blank space of view parent. I dont know how to make it automatically falling down like the first image. Thanks
You have to set a fix height. With that, there is no line break
first of all: I am practicing with titanium, this are just my first "Hello World" apps to get confident with the framework, so any suggestion would be strongly appreciated.
I have this simple view:
<ScrollView id="grid" dataCollection="pictures">
<View class="single-item" title="{title}" author="{author}" desc="{desc}" onClick="showPic">
<ImageView class="thumb" image="/images/thumb-stock-1.jpg" />
<Label class="title" text="{title} by {author}" />
<Label class="desc" text="{desc}" />
</View>
</ScrollView>
Clicking on each item I call the function showPic() defined in my controller, and that's ok. But I would like to pass some parameters to that function, that are {title}, {author} and {desc}, so that I can handle them and "print" them on a new detail view for each specific item. With TableView it was easy (I just put: event.source -> title, event.source -> author ... inside my controller and I could read that table row data), but with my view that seems not work.
so my questions are:
1) how can I pass that parameters from VIEW: to CONTROLLER showPic()
2) generally speaking, if there is a better view to list some objects and opening each one with a click, just tell me how so that I can learn something more :D (PS: I cannot use tableView because my layout does not fit with this kind view)
---- EDIT: here follows my full code
index.xml:
<Alloy>
<Collection src="pictures"/>
<NavigationWindow id="navGroupWin">
<Window class="container" title="La mia galleria">
<View class="arrow arrow-up"><Label text="UP" /></View>
<ScrollView id="grid" dataCollection="pictures">
<View class="single-item" title="{title}" author="{author}" desc="{desc}" onClick="showPic">
<ImageView class="thumb" image="/images/thumb-stock-1.jpg" />
<Label class="title" text="{title} by {author}" />
<Label class="desc" text="{desc}" />
</View>
</ScrollView>
<View class="arrow arrow-down"><Label text="DOWN" /></View>
</Window>
</NavigationWindow>
</Alloy>
showPic from index.js:
function showPic(event) {
var pic = event.source;
var args = {
title: pic.title,
desc: pic.desc,
author: pic.author
};
var picView = Alloy.createController("detail", args).getView();
if (OS_IOS) {$.navGroupWin.openWindow(picView);}
if (OS_ANDROID) {picView.open();}
}
detail.xml:
<Alloy>
<Window class="container">
<View layout='vertical'>
<Label id="titleLabel"></Label>
<Label id="descLabel"></Label>
<Label id="authorLabel"></Label>
</View>
</Window>
</Alloy>
detail.js
var args = arguments[0] || {};
$.titleLabel.text = args.title || 'Default Title';
$.descLabel.text = args.desc || 'Default desc';
$.authorLabel.text = args.author || 'Default author';
when I click on each item of the index, my source.title, source.author and source.desc seems to be empty, and on the detail window I got back only 'Default' values
I am not sure if you can do this on the view file level.
What I would try is to assign ids to every view element (this is a general technique) and fully deploy all my click listeners inside the controller file, removing all onClick commands from view.
So:
Set id="myview" along with class="single-item" in your View
In your controller try
$.myview.addEventListener('click', function(e){
showPic(e.title, e.author, e.desc)
});
Not sure if it goes wrong somewhere else, but stripped down like this it works:
index.html
<Alloy>
<Window id="test">
<ScrollView id="grid" layout="vertical">
<View class="single-item" width="250" height="250" backgroundColor="blue" title="title" author="author" desc="desc" onClick="showPic">
</View>
<View class="single-item" width="250" height="250" backgroundColor="red" title="red" author="red" desc="red" onClick="showPic">
</View>
<View class="single-item" width="250" height="250" backgroundColor="yellow" title="yellow" author="yellow" desc="yellow" onClick="showPic">
</View>
<View class="single-item" width="250" height="250" backgroundColor="green" title="green" author="green" desc="green" onClick="showPic">
</View>
</ScrollView>
</Window>
</Alloy>
index.js
function showPic(event) {
Ti.API.info(JSON.stringify(event.source));
}
$.test.open();
I'm working with XUL, and below is abasic slider/scale implementation:
<scale value="1" min="1" max="10" increment="1"/>
However I want a numbox next to it which displays the value selected in the slider, and maybe I didn't look hard enough in the XUL tutorial, but I couldn't find a feasible answer.
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="yourwindow"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<scale value="1" min="1" max="10" increment="1" id="a"/>
<textbox readonly="true" observes="a"/>
</window>