I am working on a Nativescript-vue app, and am having a strange problem with the Image component not sizing correctly.
I am trying to use stretch="aspectFill" to correctly size an image for a component. It works initially when live previewing in the ios simulator, but when you next render the component it reduces size to fit the space rather than aspectFill. My component code is below.
<StackLayout>
<Image :src="promo.image" stretch="aspectFill" height="200" />
<StackLayout class="promocontainer" row="1" padding="0">
<GridLayout columns="*,*" class="region">
<Label col="0" :text="promo.region" />
<Label col="1" :text="'$' + promo.price" textAlignment="right" />
</GridLayout>
<Label :text="promo.inclusions_heading" class="heading" />
<Label :text="promo.heading" padding="10" textWrap="true" class="tagline" />
<Label :text="promo.introText" padding="10" textWrap="true" class="text" />
</StackLayout>
</StackLayout>
When you change the strech option, the live preview in ios show the intended behavior as shown below
When interacting with the app, navigating away from this page and back, or previewing on a physical ios device, the image is show as below, instead of the intended aspect filled image as above.
I am hoping someone has run into this before and might be able to assist with working out a solution.
The component was being added to a ListView, which was causing the rendering issues above. I resolved this by instead wrapping the components in a ScrollView and StackLayout. This solved the stretch rendering issue straight away.
Original code with stretch bug:
<ListView for="promo in promos" #itemTap="onPromoTap">
<v-template>
<PromoListItem :promo="promo" />
</v-template>
</ListView>
Solution:
<ScrollView>
<StackLayout>
<PromoListItem margin="10" v-for="promo in promos" :key="promo.heading" :promo="promo" />
</StackLayout>
</ScrollView>
It looks like ListView calculates it's item sizing differently, and is not compatible with Image stretch, at least when there is other content involved.
Related
I am fairly new to UWP but I am familiar with Android programming in XML and Java/Kotlin.
I want to create a button which has its corners cut out and basically looks like this:
.
I have created this shape above using Polygon XAML element and its Points attribute as following:
<Polygon Points="10,0,100,0,110,10,110,50,100,60,10,60,0,50,0,10" />.
Can I use this Polygon or can I achieve this another way?
Thanks for your help in advance!
Can I use this Polygon
Sure, UWP contains Polygon class, and you could use it directly. And this is sample tutorial that you could refer.
And if you want to make Polygon as content for Button, you could refer the following code
<Button Background="Transparent" Visibility="Visible">
<Button.Resources>
<SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="Transparent" />
<SolidColorBrush x:Key="ButtonForegroundPressed" Color="Transparent" />
<SolidColorBrush x:Key="ButtonBorderBrushPointerOver" Color="Transparent" />
</Button.Resources>
<Grid>
<Polygon Fill="Red" Points="10,0,100,0,110,10,110,50,100,60,10,60,0,50,0,10" />
<TextBlock Text="Hello Btn" TextAlignment="Center" VerticalAlignment="Center" FontSize="22"/>
</Grid>
</Button>
as is defined as An element type to render as (string or function). in the most of the components in semantic-UI-react. What does that mean?
My understanding is that it somehow changes the component in whatever is as is.
Example:
https://react.semantic-ui.com/modules/sidebar
has Sidebar as={Menu} then the children are <Menu.Item name='...'> without typical <Menu/> that is required to start the menu.
This feature is called augmentation, you can control the rendered HTML tag or render one component as another component. Extra props are passed to the component you are rendering as. It allows to compose component features and props without adding extra nested components.
Your example with Sidebar shows that Sidebar will render its children to Menu. This can also be written in the following way, but this procudes extra markup, which is not always correct and possibly can break styling.
<Sidebar>
<Menu>
<Menu.Item />
</Menu>
</Sidebar>
Basic example with tags:
<Button /> // will produce <button class='ui button' />
<Button as='a' /> // will produce <a class='ui button' />
Example with react-router:
<Menu.Item as={Link} to='/home' /> // will produce <a class="item" href="/home">
moving from actionscript (flex) to titanium and I'm experimenting with the xml markup. What I have is a template that I picked up from the doc
<ItemTemplate name="template">
<ImageView left="0" bindId="pic" id="icon" />
<Label bindId="info" id="title"/>
</ItemTemplate>
</Templates>
my question is if someone clicks on the pic or a listitem itself, how does one handle the events. through xml markup? Then how do you reference any of the control wrap in the template?
I have tried
<ImageView left="0" bindId="pic" id="icon" onclick="doClick()" />
function doClick(e) {
alert($.info.text);
}
This just produces a error and I still would not know what pic was clicked.
any help would be great..
thanks Mike
Have you checked out the Alloy Quick Start? I think many of your questions can be answered there.
Anyway, for ListViews, you cant add an event listener to an item in the template, its just a template not an actual thing on the screen (yet), refer here, and look at the alloy section.
Instead you need the itemclick event listener on the ListView itself. Check , below for a simple example of what the XML markup looks like.
<ListView id="listView" defaultItemTemplate="template" onitemclick="yourEvent" >
<!-- The Templates tag sets the ListView's templates property -->
<Templates>
<!-- Define your item templates within the Templates tags or use the
Require tag to include a view that only contains an ItemTemplate -->
<ItemTemplate name="template">
<ImageView bindId="pic" id="icon" />
<Label bindId="info" id="title" />
<Label bindId="es_info" id="subtitle" />
</ItemTemplate>
</Templates>
<ListSection headerTitle="Fruit / Frutas">
<!-- You can specify any ListItem or ListDataItem properties in ListItem -->
<!-- Specify data to bind to the item template with inline attributes
defined as <bindId>:<Ti.UI.Component.property> -->
<ListItem info:text="Apple" es_info:text="Manzana" pic:image="/apple.png" />
<ListItem info:text="Banana" es_info:text="Banana" pic:image="/banana.png" />
</ListSection>
</ListView>
Also, you need any JavaScript to be in the controller files, not in the XML markup files. *.js has javascript that is behind the view, which is *.xml.
I have template like here:
http://www.mkyong.com/jsf2/jsf-2-templating-with-facelets-example/
i add menu navigation:
<h:form id="form">
<div id="page">
<div id="header">
<ui:insert name="header" >
<ui:include src="/pages/template/header.xhtml" />
</ui:insert>
<f:ajax render="ContentLoader">
<h:commandLink actionListener="#{contentPage.setPage('/pages/first.xhtml')}" value="About Us" />
<h:commandLink actionListener="#{contentPage.setPage('/pages/login.xhtml')}" value="Contact Us" />
</f:ajax>
</div>
<h:panelGroup id="ContentLoader" >
<div id="content">
<ui:insert name="content" >
<ui:include src="#{contentPage.page}" />
</ui:insert>
</div>
</h:panelGroup>
</div>
</h:form>
links are working fine, but i have problem with redirect content by useing <h:commandButton action="link"> which is in content
how can i fix this problem?
maybe it's something wrong with my layout?
or how to correctly redirect from content to another content, useing buttons which are in contents?
As to your concrete problem, it's likely caused by the combination <ui:include src="#{...}"> and a view scoped bean. This construct works only if you upgrade to at least Mojarra 2.1.18. Otherwise, the view scoped bean will fail to restore and be newly recreated and therefore the default value of #{contentPage.page} will be considered when any form actions inside the page are to be decoded. Upgrading to at least Mojarra 2.1.18 should fix your problem. You can get it at http://javaserverfaces.java.net. It's currently already at 2.1.25.
As to your concrete functional requirement, using command links/buttons for plain page-to-page navigation is a poor practice. You should be using output links/buttons for this.
<h:button value="navigate" outcome="link" />
or
<h:link value="navigate" outcome="link" />
On CF9, this CFGRID worked fine, at least, it displayed fine (I had other issues with it).
After the update to 9.0.1, its completely blank. I even tried the hotfix, no change. I am dumping the query named "financedetails" above this code and it is showing data. Any ideas? Did cfgrid change substantially in 9.0.1? Or can I no longer use the query attribute for an html cfgrid?
<cfform action="financials.cfm?showid=#url.showid#" style="margin-top:15px;" method="post">
<cfinput type="hidden" name="showid" value="#url.showid#">
<cfgrid query="financedetails" name="finance_grid" format="html" selectmode="edit" insert="yes" delete="yes">
<cfgridcolumn name="Date" type="date">
<cfgridcolumn values="chargeid" name="chargeid" display="false">
<cfgridcolumn values="Setup Fee,blahh,blah,Custom Changes" name="Description">
<cfgridcolumn name="Amount">
<cfgridcolumn name="InvoiceDate" type="date">
<cfgridcolumn name="PaidDate" type="date">
<cfgridcolumn name="Notes">
</cfgrid>
<p><input type="submit" value="Save Changes"></p>
</cfform>
This might because coldfusion 9 was using ExtJs 3.0 which is upgraded to ExjtJs 3.1 for coldfusion 9.0.1.
Check following should resolve it.
If you just updated to 9.0.1 then it may possible that js taking from browser cache which is version 3.0 causing this issue. Try to clear browser cache and try again.
Make sure you are not not using dflat/gzip on server side if so then clear file from server as well.
If you modified grid to add header or footer then you need to look for compatibility. check http://www.cfminds.com/post.cfm/updating-coldfusion-9-0-0-to-9-0-1
To make sure correct version of extjs.js is downloading, open firebug script tab and check the source of extjs.js and look into comment it should say version 3.1.0 instead of 3.0.0.
I think above four check will solve your issue.
-Pritesh