I´m trying to populate a CustomListItem cell in SAPUI5 with an image from my project´s source folder, but it is not showing on the cell. It is placed directly in the WebContent folder: App/WebContent/TEST.jpg, and the view code:
<Page title="View" showNavButton="true" navButtonPress="onBack">
<content>
<CustomListItem type="Inactive">
<Image src="{TEST.jpg}" class="content" />
<Button text="Press me!" class="content" />
</CustomListItem>
</content>
</Page>
the button is being shown in the first cell of the list (where the image should be), but not the image, does anyone know how can I fix it?
You need to change the url path in the src property. If you enclose it in the brackets ({}), SAPUI5 expects a property binding path which in you case is invalid.
So replace this,
<Image src="{TEST.jpg}"
with
<Image src="TEST.jpg"
Related
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.
Below is my sublayout called SectionWrapper
<section>
<sc:Placeholder ID="phSectionWrapper" runat="server" Key="phSectionWrapper" />
check this
</section>
I want to achieve is multiple "sections" with different placeholders like
<section>
<caraousal 1 />
check this
</section>
<section>
<caraousal 2 />
check this
</section>
But it's now rendering as
<section>
<caraousal 1 />
check this
<caraousal 2 />
</section>
<section>
check this
</section>
My presentation details are configured on item as below:
SectionWrapper (with some placeholder)
caraousal1 (with placeholder as phSectionWrapper)
SectionWrapper (with some placeholder)
caraousal2 (with placeholder as phSectionWrapper)
Placeholder keys must be unique on the page. You cannot have 2 placeholders on the same page with the same key - Sitecore will not know in which of them should put the components.
Check Sitecore Dynamic Placeholders - from what I remember there are multiple implementations ready to use, e.g.:
https://marketplace.sitecore.net/en/Modules/I/Integrated_Dynamic_Placeholders.aspx
http://johnnewcombeuk.blogspot.com/2012/06/sitecore-part-3-dynamic-placeholders.html
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'm pretty new to umbraco but found the system pretty easy to use and have done alot in a short space of time. One difficulty I have come accross is displaying an image.
In the document type I have added an "upload" where an image is selected.
In my XSLT I loop through the pages, this loop displays the other fields such as description or title. I am trying to display the image here.
Here is my XSLT for displaying my image, this displays nothing. The field "promothumbImage" is defined in the document type, as I said everything else is working fine.
<xsl:value-of select="promothumbImage"/>
Does anyone have any ideas as to where I am going wrong?
EDIT:
promothumbimage is defined in the document of type "upload"
My XSLT:
<!-- The fun starts here -->
<div class="promoitems">
<xsl:for-each select="umbraco.library:GetXmlNodeById($source)/* [#isDoc and
string(umbracoNaviHide) != '1']">
<div class="promoitem">
<a href="{umbraco.library:NiceUrl(#id)}">
<xsl:value-of select="#nodeName"/>
</a>
<div class="promosmalldesc">
<xsl:value-of select="promoSmallDesc"/>
</div>
<xsl:copy-of select="promothumbImage/*"/>
</div>
</xsl:for-each>
Upload means that the element promothumbImage returns the URL of the image, thus the following should display it on the page:
<img src="{promothumbImage}" alt=""/>
I found the answer, use:
<img src="{promothumImage}" />
to display the image from the "upload" set in the document type
use may simply in your template using your image field throght Media picker Data Type:
<img class="className" src='<umbraco:Item field="infoGraphic" runat="server" Xslt="umbraco.library:GetMedia({0},false())/umbracoFile"/>'/>
I want to display a carousel and two banners at the top of each page content of my site.
I’ve created a custom reference starting from the footer block in page.xml.
So this is what it looks like:
<block type="page/html" name="topcontent" as="topcontent" template="page/html/topcontent.phtml">
<block type="page/html_wrapper" name="topcontent.container" as="topcontentContainer" translate="label">
<label>Page Top Content</label>
<action method="setElementClass"><value>topcontent-container</value></action>
</block>
<block type="core/template" name="topcontent.book.carousel" as="topcontentCarousel" template="callouts/book-carousel.phtml"/>
<block type="core/text_list" name="topcontent.left" as="topcontentLeft" />
<block type="core/text_list" name="topcontent.right" as="topcontentRight" />
</block>
Then I created a topcontent.phtml file where I put
<div class="topcontent-container">
<div class="topcontent">
<?php echo $this->getChildHtml('topcontentContainer') ?>
<?php echo $this->getChildHtml('topcontentCarousel') ?>
<?php echo $this->getChildHtml('topcontentLeft') ?>
<?php echo $this->getChildHtml('topcontentRight') ?>
</div>
</div>
I have my carousel displayed correctly, but when I try to put a block in topcontentLeft or topcontentRight, it is not displayed ad all.
I think I’m doing something wrong with the block type parameter, but I can’t figure out what: can someone provide me some help?
Thanks.
Depends on what you need to display in banner. If it's just some text you could use text block:
<block type="core/text" name="topcontent.right" as="topcontentRight">
<action method="addText"><text>Test text</text></action>
</block>
If you need placeholder block to show some CMS static block content, then you're right, cote/text_list is appropriate type for such block. It takes all it's nested blocks and render them one by one. So next you need to do is to put cms/block placeholder, its content could be added later from backend. All together it may looks like:
<block type="core/text_list" name="topcontent.right" as="topcontentRight">
<block type="cms/block" name="topcontent.right.cms" as="topcontentRightCms">
<action method="setBlockId"><block_id>topcontent_right_static</block_id></action>
</block>
</block>
Now you could create new static bloc in admin backend with 'topcontent_right_static' id and it'll be rendered in place where you output it.
I think the problem is in the #type attribute for topcontentLeft and topcontentRight
type="core/text_list" need to be changed to type="core/template"