In XUL, how do I make my listbox fill the screen? - xul

I have the following xul file:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="main" title="MY TEST" width="640" height="480" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<listbox id="mainList">
<listitem label="Butter Pecan"/>
<listitem label="Chocolate Chip"/>
<listitem label="Raspberry Ripple"/>
<listitem label="Squash Swirl"/>
</listbox>
</window>
..and I would like this listbox to fill the screen (currently it is just on the top).
Any idea?

Use the flex attribute
<listbox id="mainList" flex="1">

Related

How to set the checkbox label width in the xul file?

I am developping an zotero plugin, and would like to draw a dialog. The width of dialog, groupbox, hbox, checkbox etc have been tried, minwidth, maxwidth have also been tried, but it doesn't work. I would like to get a line break at proper position of the labels.
Many thanks!
code:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/preferences.css"?>
<!DOCTYPE window SYSTEM "chrome://zoteroupdateifs/locale/options.dtd">
<!--给作者加粗加星-->
<dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml"
id="updateifs-test"
title="&author-process-win;"
width="200"
height="300"
style="padding: 10px;"
buttons="accept,cancel"
ondialogaccept=" window.close();"
ondialogcancel="window.close();">
<stringbundleset id="stringbundleset">
<stringbundle id="updateifs-options" src="chrome://zotero-updateifs/locale/options.properties"/>
</stringbundleset>
<groupbox width="200">
<caption label="&update-abbr;"/>
<separator class='thin'/>
<description style="width: 220px">&update-journal-abbr;</description>
<separator class='thin'/>
<hbox style="margin: 0" width="200">
<checkbox id="id-updateifs-add-update" label="&add-update;" />
</hbox>
<separator class='thin'/>
<hbox style="margin: 0" maxwidth="200">
<checkbox id="id-updateifs-en-abbr" minwidth ='200' label="&en_abbr;"/>
</hbox>
<separator class='thin'/>
<hbox style="margin: 0" maxwidth="200">
<checkbox id="id-updateifs-ch-abbr" minwidth ='200' label="&ch_abbr;" />
</hbox>
</groupbox>
<script src="options.js"/>
<script
type="application/x-javascript"
src="chrome://zoteroupdateifs/content/scripts/options.js"/>
<script src="chrome://zotero/content/include.js"/>
</dialog>
it is weird, now it works, when I set the width of checkbox by using width ='250' .

Why the "Hamburger" is not showing? I want to be able to access the Menu page by clicking on the hamburger icon

This is the code I have written to create the Master Detail Page:
Please check it out
<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="DemoApp.MenuPage" xmlns:local="clr-namespace:DemoApp.Views" MasterBehavior="Default">
<MasterDetailPage.Master>
<ContentPage Title="MenuPage" Icon="menuIcon.png" Padding="0,50,0,0">
<ContentPage.Content>
<StackLayout VerticalOptions="Start">
<Button Text="Home" />
<Button Text="Login" />
<Button Text="Logout" />
<Button Text="Exit" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<local:Login/>
</MasterDetailPage.Detail>
</MasterDetailPage>
From Xamarin 4.0, this MasterDetailPage feature can implemented much easier using Shell. David has made a video on showing how to use Shell. His Youtube video
I've checked your code in a plain project and no errors so far, to check further the Detail page code would be needed. I mean the content of
<MasterDetailPage.Detail>
<local:Login/>
</MasterDetailPage.Detail>

Appcelerator Alloy TableView click event is not firing up on parent tableview

Im building a app that i have a tableview inside a tableview row.
i have a click event in the main tableview, that i wish to keep.
<Alloy>
<Collection src="orders" />
<Window onAndroidback="closeWindow" id="activeorderswindow" class="maincontainer_noactionbar">
<View class="topcontainer">
<ImageView class="topbackbutton" onClick="closeWindow"></ImageView>
<Label class="topheadinglabel">Aktive ordre</Label>
<ImageView class="topmenubutton" onClick="closeWindow"></ImageView>
</View>
<View class="maindatacontainer">
<TableView class="orderstable" id="activeorderstable" dataTransform="transformFunction" dataCollection="orders" dataFunction="updateUI" onDragEnd="refreshTable" >
<!-- Also can use Require -->
<TableViewRow class="activeordersrow" oid="{oid}" touchEnabled="true" >
<Label class="rowOid" text="{oid}"/>
<Label class="rowCust" text="{cust}"/>
<Label class="rowScode" text="{scode}"/>
<Label class="rowVehicle" text="{vehicle}"/>
<Label class="rowOrdertime" text="{ordertime}"/>
<ImageView class="imgOrdertime" image='/images/clock_green.png'/>
<ImageView class="imgDeadline" image='/images/clock_red.png'/>
<Label class="rowDeadline" text="{deadline}"/>
<View class="addresstablewrapper" backgroundColor="#000"/>
<TableView touchEnabled="false" scrollType="vertical" class="activeorders_addresses" data="{orders_addresses}" backgroundColor="yellow" />
</TableViewRow>
</TableView>
</View>
</Window>
The problem is that because i have another within the table with its own rows (without a click event) it seems like the click on the main does not fire.
Help appreciated :)
Thanks
Tom
Maybe the nested TableView should have touchEnabled="true" so the click bubbles up to the parent (tableviewrow).

Add view under the tabgroup

<Alloy>
<TabGroup backgroundColor="white" id="mainTabGroup">
<Tab id="byFav" title="fav" icon="KS_nav_views.png">
<Window title='fav'>
<TableView id="tableByFav" />
</Window>
</Tab>
<Tab id="byLatest" title="latest" icon="KS_nav_views.png">
<Window title='latest'>
<TableView id="tableByLatest" />
</Window>
</Tab>
</TabGroup>
</Alloy>
Currently I have tabgroup which has two tab.
I am planning to add view at the bottom of the screen height=50 width=100%.
This view must be still however tab changes.
I have tried this
<Alloy>
<TabGroup backgroundColor="white" id="mainTabGroup">
.
.
.
</TabGroup>
<view>
</view>
</Alloy>
or this.
<Alloy>
<TabGroup backgroundColor="white" id="mainTabGroup">
.
.
.
</TabGroup>
<window>
</window>
</Alloy>
But it shows the message like this
invalid method (createwindow) passed to UIModule
I might not understand the basic thought of alloy.
Is it possible to add the view under the tablegroup?
If not, I would like to add the fixed view in each tab.
Does anyone give me the first hint?
I am suffering from the shortage of alloy documents.
you can't do such thing, because TabGroup uses windows and a "Window" in Alloy means the entire screen. I suggest making another view/controller (yourView) for your bottom view and then require it in all your tabs.
<Alloy>
<TabGroup backgroundColor="white" id="mainTabGroup">
<Tab id="byFav" title="fav" icon="KS_nav_views.png">
<Window title='fav'>
<TableView id="tableByFav" />
<Require type="view" src="yourView"/>
</Window>
</Tab>
<Tab id="byLatest" title="latest" icon="KS_nav_views.png">
<Window title='latest'>
<TableView id="tableByLatest" />
<Require type="view" src="yourView"/>
</Window>
</Tab>
</TabGroup>

XAML Context Menu not closing

I've got a "popup" context menu on a list box, and there are two behaviors that would seem "out-of-the-box" but I am having a tough time getting the XAML ContextMenu to behave the way I would expect...
One is that, when I pick a sub-menu (e.g. "One" or "Two"), the initial menu continues to stay open (e.g. "Menu" does not go away once I've made a selection).
Second is that the menu margins seem odd. Left justifying Horizontally does not seem to make the main menu (e.g. "Menu") left justify... I can work around this by tweaking the margin - but thats painful for dynamic text..
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<StackPanel>
<ListView>
<ListView.ContextMenu>
<!-- StaysOpen="False" -->
<ContextMenu>
<!-- Background="Transparent" Margin="-8,0,-8,0" -->
<Menu>
<!-- StaysOpenOnClick="False" -->
<MenuItem Header="Menu">
<MenuItem Header="One" />
<MenuItem Header="Two" />
</MenuItem>
</Menu>
</ContextMenu>
</ListView.ContextMenu>
<ListViewItem Content="Red" />
<ListViewItem Content="Orange" />
<ListViewItem Content="Black" />
<ListViewItem Content="Blue" />
<ListViewItem Content="Green" />
</ListView>
</StackPanel>
</Page>
Any thoughts on how to make the Main menu of this popup behave?
Thanks in advance,
T
Try this:
<ContextMenu>
<MenuItem Header="Menu">
<MenuItem Header="One" />
<MenuItem Header="Two" />
</MenuItem>
</ContextMenu>
you are not supposed to have a menu inside a context menu.
you should put menuitem directly.