Generic ListView

I am trying to display a list of entries to the user in a generic way, so he can select one.

With "Menu" there is "MAX_SIZE = 16", so anything with more entries needs a "<more>" entry at the end.

A solution with Picker looks like this:

What a joke... A lot of space to only display 6 chars (of the much longer entry) on the Fenix 5. Why does it not use the whole screen??? It is only one factory.

On the Edge it would even be possible to display a scrollable list. Where is the Cancel icon, btw?

Very disappointed. So sad. Bad SDK.

Is there any better solution, where I don't have to write different layouts and code paths for all of the devices?

Former Member over 8 years ago

I'm wondering the same thing... Would also like to let the user make a choice from a dynamic list of strings that are longer than just a few characters, so the limited space that Picker offers does not cut it. A Menu with items added programmatically appears to be the closest thing to a solution, but as said by OP it has the max size of 16 limitation, plus it just really does not seem to be designed for this purpose.

What would be the best way to achieve this (other than writing a custom Picker implementation from scratch)? It does seem like some other apps managed to do this rather nicely.

dududu13 over 8 years ago

I have developp my own class for menus, where you can personalize everythings :
class MenuView extends Ui.View {
var _tab;
var _tailleFont;
var _nbre;
var _x;
var item;
var itemString; // when outputing the menu, you can recupere the item (number of the line) or itemstring

function initialize(tab,tailleFont,pos) {
_tab = tab; // tab of strings : tab[0] = title, the others = lines of the menu
_tailleFont = tailleFont; //size of the font
item = pos; // actual position in the menu
_nbre = tab.size()-1; // number of items in the menu
View.initialize();
//Sys.println("Init menu "+_tab[0]);
}

function onUpdate(dc) {
dc.setColor( Settings.ForegroundColor, Settings.BackgroundColor );
dc.clear();
_x = dc.getWidth()/2;

//Title
if (_tab[0].find("\n") != null) {
dc.drawText(_x, 12, _tailleFont-1, _tab[0] , Gfx.TEXT_JUSTIFY_CENTER);
}
else {
dc.drawText(_x, 25, _tailleFont, _tab[0] , Gfx.TEXT_JUSTIFY_CENTER);
}

var y=73;

if (item < 1) { item = _nbre; }
if (item > _nbre) {item = 1;}

// first line
if (item > 1) {
dc.drawText(_x, y, _tailleFont, _tab[item-1] , Gfx.TEXT_JUSTIFY_CENTER);
}

// followings lines
if (item < _nbre) {
dc.drawText(_x, y+(_tailleFont * 20), _tailleFont, _tab[item+1], Gfx.TEXT_JUSTIFY_CENTER);
}
if (item < _nbre-1) {
dc.drawText(_x, y+(_tailleFont * 30), _tailleFont,_tab[item+2], Gfx.TEXT_JUSTIFY_CENTER);
}
if (item < _nbre-2) {
dc.drawText(_x,y+(_tailleFont * 40), _tailleFont, _tab[item+3], Gfx.TEXT_JUSTIFY_CENTER);
}
dc.drawLine(0,y,dc.getWidth(),y);
dc.drawLine(0,y+(_tailleFont * 30),dc.getWidth(),y+(_tailleFont * 30));
dc.drawLine(0,y+(_tailleFont * 40),dc.getWidth(),y+(_tailleFont * 40));

// actual line inversed
dc.setColor(Settings.BackgroundColor, Settings.ForegroundColor);
dc.drawText(_x, y+(_tailleFont * 10), _tailleFont," ", Gfx.TEXT_JUSTIFY_CENTER);
dc.drawText(_x, y+(_tailleFont * 10), _tailleFont,_tab[item], Gfx.TEXT_JUSTIFY_CENTER);
itemString = _tab[item];
}

function next() {
item++;
Ui.requestUpdate();
}

function prev() {
item = item -1;
Ui.requestUpdate();
}

}

Exemple of use in a delegate :
var _menualerteWP = new MenuView([Ui.loadResource( Rez.Strings.menualerteWP_titre), // load the title
Ui.loadResource( Rez.Strings.menualerteWP0), //load the lines of menu
Ui.loadResource( Rez.Strings.menualerteWP1),
Ui.loadResource( Rez.Strings.menualerteWP2),
Ui.loadResource( Rez.Strings.menualerteWP3),
Ui.loadResource( Rez.Strings.menualerteWP4),
Ui.loadResource( Rez.Strings.menualerteWP5),
Ui.loadResource( Rez.Strings.menualerteWP6)], 4,Settings.pos_menuAlerts+1);
Ui.pushView(_menualerteWP, new menualerteWPDelegate(_menualerteWP), Ui.SLIDE_LEFT);

Backslashhh over 8 years ago

I have developp my own class for menus, where you can personalize everythings :
[…]

Well, and then you want a delegate, which copes with the touchscreen, or not.... :(