I'm working on a custom cell for a cell list that displays product information including an image and several text fields, similar to the one in the CellList sample. The images are not resources that are packaged with my app, they are on an external image server. I'd like to use UiBinder for the layout of the cell. Eventually the cell will be more complicated, but for now here is a my template that just shows a product description and image:
<ui:UiBinder
xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style>
</ui:style>
<ui:with field="imageSource" type="java.lang.String"/>
<ui:with field="product" type="com.mydomain.ProductProxy" />
<div ui:field="root">
<span><ui:text from="{product.getDescription}" /></span>
<ui:image url="{imageSource}" />
</div>
The CellList displays a list of descriptions but no products. If I inspect the element with Chrome I can see that the ui:image is not being compiled into an img element:
<div onclick="" __idx="0" class="GPROKKBAB" style="outline:none;" tabindex="0">
<div gwtuirendered="gwt-uid-17">
<span>E03351 </span>
<ui:image url="http://images.mydomain.com/image/product_id.jpg"></ui:image> </div></div>
Any suggestions? I'm sure it's something obvious but I've been at it for a while and I've tried a number of things with no luck.
How about simply using an HTML img?
<img src="{imageSource}" />
Related
Hey guys and Happy Easter,
I am working on an extension for the backend and would like to have the standard toolbar with save and cancel options in my own extension.
So I would like to have sth. like this:
I am kind of an newbie and would like to have a little more detailed answer.
Found something about addToolbarItem on the internet but don't know how to use it.
Edit:
Unfortunately I have to work with TYPO3 v4.5 and pibase extension and don't have enough time to change the version to 6.2.9...
Thanks!
Assuming you're using TYPO 6.x+ and Extbase!
You can put additional elements from your view to the layout by additional sections. most probably your view now looks like:
<f:layout name="Default"/>
<f:section name="content">
<h1>Foo</h1>
</f:section>
so add new section i.e.:
<f:layout name="Default"/>
<f:section name="myButtons">
<f:be.buttons.icon icon="actions-document-new" title="Create new Foo" />
</f:section>
<f:section name="content">
<h1>Foo</h1>
</f:section>
And finally in your Default.html layout render your section in proper place (set it as optional, otherwise you'll get an exception if missing!)
....
<div class="typo3-docheader-buttons">
<div class="left">
<f:render section="myButtons" optional="true"/>
</div>
<div class="right">
<span title="Reload" class="t3-icon t3-icon-actions t3-icon-actions-system t3-icon-system-refresh"> </span>
<f:be.buttons.shortcut />
</div>
</div>
....
Of course this way you can also set other elements like <f:be.menus.actionMenu>, <f:be.pageInfo /> etc, or even just your text labels.
Check ViewHelpers in typo3/sysext/fluid/Classes/ViewHelpers/Be/ for some ready to use elements.
Currently, DataGrid doesn't include a SimplePager. One must create a composite and wrap a grid and a pager into a FlowPanel. Is there a way you can create a wrapper CDataGrid (that extends DataGrid) that includes SimplePager?
I think that you can use UiBinder to make this possible, you can check at the showcase sample here that shows this:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder
xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui"
xmlns:c="urn:import:com.google.gwt.user.cellview.client">
<g:DockLayoutPanel
unit="EM">
<!-- DataGrid. -->
<g:center>
<c:DataGrid
ui:field='dataGrid' />
</g:center>
<!-- Pager. -->
<g:south
size="3">
<g:HTMLPanel>
<table
style="width:100%">
<tr>
<td
align='center'>
<c:SimplePager
ui:field='pager' />
</td>
</tr>
</table>
</g:HTMLPanel>
</g:south>
</g:DockLayoutPanel>
</ui:UiBinder>
You can wrap a DataGrid with SimplePager or whatever do you wish, and make a new "Widget" called "CDataGrid" (as you said) that not extends DataGrid but can extends Composite.
I hope I can give you a little help with this.
Best Regards,
iVieL.
It does integrate with DateGrid.
Take a look at the showcase for an example:
http://gwt.google.com/samples/Showcase/Showcase.html#!CwDataGrid
Adding pager as a part of the Grid, eliminates extra markup and steps in Compositve View. My solution was to create a new composite and provide callbacks.
I have create a DecoratedTabPanel in GWT
<g:HorizontalPanel ui:field="hpnlTab">
<g:DecoratedTabPanel animationEnabled="true" ui:field="tabQuran" width="499px" height="281px">
<g:Tab text="Quran">
<g:HTMLPanel width="249px" height="262px" ui:field="quranTab">
<!-- <div class="{style.qFrameMiddle}" id="middleFrame">-->
<div ui:field="quranText" class="{style.quranText}">
</div>
</g:HTMLPanel>
</g:Tab>
<g:Tab text="Translation">
<g:HTMLPanel width="7cm" height="249px"/>
</g:Tab>
</g:DecoratedTabPanel>
</g:HorizontalPanel>
Its working fine , showing the word Testing, when i click on testing, its also opens the HtmlPanel , but the problem is , its not showing TABS, just a simple text, see the image
thanks
Make sure in your ModuleName.gwt.xml has inherited standard theme or another one:
<inherits name="com.google.gwt.user.theme.standard.Standard"/>
Or you are somewhere overriding its default styles.
I am having a problem using fancybox with expression engine.
Basically I have different galleries set-up using matrix plugin. Each gallery has around 10 images. Basically I want the thumbnail to open up fancybox and fancybox to be able to scroll through the images in that matrix entry/gallery.
Sounds simple but I can’t seem to get fancybox to scroll through the images, it just stays on the first image.
This is my code for the thumbnails:
<ul id="image_gallery">
{exp:channel:entries channel="gallery_images"}
<li>
<a class="grouped_elements" href="{title_permalink='gallery/view'}" rel="{title}">
{gallery_image limit="1"}
{exp:imgsizer:size src="{image}" width="200px" height="180px"}
<img src="{sized}" width="{width}" height="{height}" alt="" />
{/exp:imgsizer:size}
{/gallery_image}
</a>
<h1>{title}</h1>
</li>
{/exp:channel:entries}
</ul>
This is my code for the fancybox template:
{exp:channel:entries channel="gallery_images"}
<ul id="img_gallery">
{gallery_image}
<li>
{exp:imgsizer:size src="{image}" width="650px" height="500px"}
<img src="{sized}" width="{width}" height="{height}" alt=""/>
{/exp:imgsizer:size}
</li>
{/gallery_image}
</ul>{/exp:channel:entries}
Everything works fine except for the image scrolling.
I’d appreciate any help!
Without seeing the output of your ExpressionEngine tags, it's difficult to understand where the problem is. However, your problem may be as simple as making sure all of the images in a gallery share the same HTML relationship attribute.
Fancybox Galleries are created from elements who share the same rel="" attribute:
<a class="gallery" rel="set_1" href="#"><img src="1.jpg" alt=""/></a>
<a class="gallery" rel="set_1" href="#"><img src="2.jpg" alt=""/></a>
<a class="gallery" rel="set_1" href="#"><img src="3.jpg" alt=""/></a>
<script>
$('a.gallery').fancybox();
</script>
In looking over your code, you're using the ExpressionEngine {title} tag as the rel="" attribute.
Since the title of your channel entry likely contains spaces and other special characters, a better choice would be to use the URL Title field, {title_permalink}.
The {title_permalink} tag converts the channel entry title to be URL-safe using either hyphens or underscores as character separators (using the Word Separator for URL Titles setting in the Global Channel Preferences).
Your updated thumbnail code would then be:
<a class="grouped_elements" href="{title_permalink='gallery/view'}" rel="{title_permalink}">
<img src="{sized}" width="{width}" height="{height}" alt="" />
</a>
If this doesn't work, perhaps you can provide a more complete code sample such as a jsFiddle or Pastie to help us understand where the problem may be.
I am building a widget with UiBinder, and I need to have it enclosed in a <span /> but UiBinder only gives me <div />. E.g. <g:HTMLPanel /> => <div />. HorizonPanel, FlowPanel, VerticalPanel also give out only <div />.
Does any one know a solution?
Try this:
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<g:HTMLPanel tag="span">
<!-- your stuff -->
</g:HTMLPanel>
</ui:UiBinder>
You can keep using a <div> but just add display: inline to its CSS, which will make it display as though it were a <span>.
Edit: fixed place at the end where I said 'div' but meant 'span'.
With regards to the answer above by Robert (sorry I can't figure out how to comment that directly)
This won't work out of the box, as widgets can't be placed inside plain HTML (the compiler will give you "error: found widget in html context"). But there's a simple workaround:
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<g:HTMLPanel>
<span>
<!-- Your content with widgets goes here -->
</span>
</g:HTMLPanel>
</ui:UiBinder>
One other useful thing to mention is InlineHTML and InlineLabel widgets capable of holding arbitary html or plain text respectively in a <span>