Weird bug with native HTML and zk-if - html-table

I'm trying to omit a table row when a boolean condition is false:
<zk if="${vm.visible}">
<n:tr>
<n:td>
<label value="Should be visible, too" />
</n:td>
</n:tr>
</zk>
When visible is true, the following HTML is rendered:
<tr> </tr>
Why is that?
ZK Fiddle: http://zkfiddle.org/sample/3ikg0ch/3-Weird-bug-with-native-HTML-and-zk-if
The full ZUL:
<zk xmlns:n="native">
<window border="normal" title="hello" viewModel="#id('vm') #init('pkg$.TestComposer')">
<div>
visible=${vm.visible}
</div>
<n:table style="border: 1px solid green;">
<n:tr>
<n:td>
<label value="Visible" />
</n:td>
</n:tr>
<zk if="${vm.visible}">
<n:tr>
<n:td>
<label value="Should be visible, too" />
</n:td>
</n:tr>
</zk>
</n:table>
<n:table style="border: 1px solid red;">
<n:tr>
<n:td>
<label value="Table 2" />
</n:td>
</n:tr>
<zk if="${vm.hidden}">
<n:tr>
<n:td>
<label value="Should be hidden" />
</n:td>
</n:tr>
</zk>
</n:table>
</window>
</zk>
View model:
package pkg$;
import org.zkoss.zk.ui.*;
import org.zkoss.zk.ui.event.*;
import org.zkoss.zk.ui.util.*;
import org.zkoss.zk.ui.ext.*;
import org.zkoss.zk.au.*;
import org.zkoss.zk.au.out.*;
import org.zkoss.zul.*;
public class TestComposer extends GenericForwardComposer{
public boolean isVisible() {
return true;
}
public boolean isHidden() {
return false;
}
}

I'm surprised that doesn't work either but this does: (remove the enclosing zk if=... tag
<n:tr if="${vm.visible}">
<n:td>
<label value="Should be visible, too" />
</n:td>
</n:tr>

The official ZK issue is ZK-4055 and is supposed to be fixed in version 8.6.0
UPDATE:
ZK-4055 has been fixed for 8.6.0 -> testable in 8.6.0.FL.20180917

Related

Positioning actionbar items on android

I have this code
<template>
<Page>
<ActionBar title="Action Items">
<StackLayout orientation="horizontal">
<Image src="res://icon" width="40" height="40"
verticalAlignment="center" />
<Label text="NativeScript" fontSize="24"
verticalAlignment="center" />
</StackLayout>
<NavigationButton text="Go Back" android.systemIcon="ic_menu_back"
(tap)="onNavBtnTap()">
</NavigationButton>
<ActionItem (tap)="onShare()" ios.systemIcon="9"
ios.position="left" android.systemIcon="ic_menu_share"
android.position="actionBar">
</ActionItem>
<ActionItem (tap)="onDelete()" ios.systemIcon="16"
ios.position="right" text="delete" android.position="popup">
</ActionItem>
</ActionBar>
<ScrollView>
<StackLayout class="home-panel">
<!--Add your page content here-->
<Label textWrap="true" text="Play with NativeScript!"
class="h2 description-label">
{{first}}
</Label>
<Label textWrap="true"
text=" Write code in the editor or drag and drop components to build a NativeScript mobile application."
class="h2 description-label" />
<Label textWrap="true"
text="Scan the QR code with your mobile device and watch the changes sync live while you play with the code."
class="h2 description-label" />
</StackLayout>
</ScrollView>
</Page>
</template>
<script>
export default {
data() {
return {
first: "Once"
};
}
};
</script>
<style scoped>
.home-panel {
vertical-align: center;
font-size: 20;
margin: 15;
}
.description-label {
margin-bottom: 15;
}
</style>
which produces
My question is how come the back button aligned itself left and the others right without explicitly coding left or right?
<NavigationButton text="Go Back" android.systemIcon="ic_menu_back"
(tap)="onNavBtnTap()">
</NavigationButton>
and the other buttons are aligning to the right
<ActionItem (tap)="onShare()" ios.systemIcon="9"
ios.position="left" android.systemIcon="ic_menu_share"
android.position="actionBar">
</ActionItem>
<ActionItem (tap)="onDelete()" ios.systemIcon="16"
ios.position="right" text="delete" android.position="popup">
</ActionItem>
<NavigationButton/> is by default on the left, as it's just calls into the native setNavigationIcon api:
https://developer.android.com/reference/android/widget/Toolbar#setNavigationIcon(android.graphics.drawable.Drawable)
While the other <ActionItem> elements are added with the Menu api:
https://developer.android.com/reference/android/widget/Toolbar#getMenu()
For your other question, you can do the following:
<Label :text="`${first} Play with NativeScript!`" textWrap="true" class="h2 description-label" />
:text makes it a binding, the then you pass in a regular JavaScript string literal.
An alternative would be:
:text="first + ' Play with NativeScript!'"
Both ways should work fine.

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' .

Can I use BottomNavigation with components?

I'm trying to display a bottom navigation, in which the TabContent comes from components. Now, with the following code I can't get the tab content to show, and I don't get any errors.
PageContainer.vue:
<template>
<BottomNavigation selectedIndex="1" class="tab__container" #loaded="loaded">
<TabStrip>
<TabStripItem class="tab">
<Label :text="text.groups" />
</TabStripItem>
<TabStripItem class="tab">
<Label :text="text.mail" />
</TabStripItem>
</TabStrip>
<TabContentItem>
<GroupsScreen />
</TabContentItem>
<TabContentItem>
<MailScreen />
</TabContentItem>
</BottomNavigation>
</template>
<script >
import GroupsScreen from './GroupsScreen';
import MailScreen from './MailScreen';
export default {
components: {
GroupsScreen,
MailScreen,
},
data() {
return {
text: {
groups: 'Groepen',
mail: 'Berichten',
},
}
},
}
</script>
GroupsScreen.vue:
<template>
<Frame #loaded="loaded">
<ActionBar :title="text.groups" />
<StackLayout class="page">
<Label v-if="groupsLoading" text="Loading"></Label>
</StackLayout>
</Frame>
</template>
Is this even possible, or am I trying to do something that should be done in another way?
The hierarchy is always,
Frame
Page
Content (Layouts, ScrollView etc.,)
A Frame can only host a Page, it can not directly host Content. You need Frame only if you want to navigate within that particular container.
So your primary issue was not wrapping your BottomNavigation with a Page element.
Updated Playground

#HostListener with touch event in directive is preventing the tap event in component (Only in iOS)

I am trying to write a directive to change colour of a button on "Touchup" and "TouchDown". But when I attach this directive the (tap) event in the component is not getting called. This happens only in iOS. Is there any workarounds for this. Below is my directive and component.
import { Directive, HostBinding, HostListener, ElementRef, Renderer2 } from '#angular/core';
#Directive({
selector: '[btnTch]'
})
export class btnTchDirective {
constructor(private el: ElementRef, private renderer: Renderer2) { }
#HostListener('touch', ['$event'])
toggleColor(event){
if(event.action == "down"){
this.renderer.addClass(this.el.nativeElement, 'pressed');
// this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', "blue");
}else{
this.renderer.removeClass(this.el.nativeElement, 'pressed');
}
}
}
<ActionBar title="Login" actionBarHidden="false"></ActionBar>
<GridLayout columns="*" rows="auto, *, 130" width="100%" height="100%" class="login_bg">
<GridLayout columns="*" rows="*" verticalAlignment="center" horizontalAlignment="center">
<Label text="" style="border-radius:62; width:125; height:125; padding:0;margin-top:100; margin-bottom:10; background-color:white;opacity:0.1"></Label>
<Label text="" style="border-radius:50; width:100; height:100; padding:0;margin-top:100; margin-bottom:10; background-color:white;opacity:0.1"></Label>
</GridLayout>
<StackLayout col="0" row="1" verticalAlignment="center" style="width:80%">
<Label text="Enter Mobile Number"></Label>
<TextField hint="Enter Mobile Number" [(ngModel)]="userNum" style="border-bottom-width:1; border-style:solid; border-color: red; padding:5 0"></TextField>
<Label *ngIf="!genErrs == '' || null || undefined" text="{{genErrs}}"></Label>
</StackLayout>
<StackLayout col="0" row="2">
<Button text="SIGN IN" btnTch (tap)="Auth_for_OTP()"></Button>
<Label marginTop="15" horizontalAlignment="center" text="REQUEST FOR ACCESS" [nsRouterLink]="['/signup']" ></Label>
</StackLayout>
</GridLayout>

How do I make resizers update the item position in XUL?

I have the following code, where a button has four resizers. When I use the top left resizer for example, it button shrinks from the bottom right, as opposed to shrinking and moving so that the top left corner follows the cursor. I've looked in Mozilla's docs and on Google, and tried adding custom on mousedown event handlers to move the thing around - but to no avail. How do I make this behave correctly?
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="main" title="My App" width="300" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/javascript" src="chrome://ades/content/main.js"/>
<hbox>
<stack style="padding: 0;">
<button id="b" label="Resizable" style="margin: 0;"/>
<resizer dir="topleft" style="background: red; -moz-appearance: none;"
element="b" left="0" top="0" width="5" height="5" />
<resizer dir="topright" style="background: black; -moz-appearance: none;"
element="b" right="0" top="0" width="5" height="5"/>
<resizer dir="bottomleft" style="background: black; -moz-appearance: none;"
element="b" left="0" bottom="0" width="5" height="5"/>
<resizer dir="bottomright" style="background: black; -moz-appearance: none;"
element="b" right="0" bottom="0" width="5" height="5"/>
</stack>
</hbox>
</window>
I'm not sure how to achieve what you want but if you're resizing your button it will always reposition itself in the stack (which is at the beginning of the hbox), so it will always be at the beginning of the hbox. You might try with absolute positioning but I'm not sure if that'll work either.