I have been using uibinder for a while and got pretty good at it. I know all about the use of HTMLPanel and Anchor for adding click handlers. However, there are cases where this design approach simply doesn't fit the bill.
say I have a unordered list, and each list has some anchor elements.
<ul><li><a ...></li>...</ul>
it is good to make each li as a component (java class) so you can add multiple instances of the component inside the ul. this means inside the ui.xml, you start with li (no other way that I can see). but then there is no way to insert Anchor inside. you can not replace li with HTMLPanel since that would create a div which you don't want.
by leave the anchor as a in this uibinder, there would be no way to detect the anchor click event.
any ideas?
In your HTML, set ID to the anchor :
<a id='testachor'>...</a>
In your GWT code, wrap the anchor into a widget:
Anchor testAnchor = Anchor.wrap(Document.getElementById('testanchor'));
Then add click handler to it:
testAnchor.addDomHandler(new ClickHandler(){...}, ClickEvent.getType());
You can add Anchor widget inside <li> tag:
<g:HTMLPanel>
<ul>
<li>
<g:Anchor ui:field="link" />
</li>
</ul>
</g:HTMLPanel>
Related
We upgraded from JSSOR 26.5.2 to 27.5.0, and found that we are no longer able to use "link slides" as described in the JSSOR documentation here:
https://www.jssor.com/development/define-slides-html-code.html
The issue seems to be a DOM change in JSSOR 27. Now there is a new DIV element, the one with data-events=auto and data-display=block, that acts as a kind of "glass" in front of the actual image (the one with u=image). As a result, any ... that surrounds the actual IMG can never be clicked, because the z-index of this "glass" prevents the click on the .
In our case, we've always been using a construct like this:
<a u="image" href="..." style="display: block;">
<img src="..." alt="..."/>
</a>
It's always worked until now. Is this a bug in JSSOR?
Your code is correct.
Anyway, here is an example, hope this helps.
https://www.jssor.com/jssordev/problems/image-slider.slider
https://www.jssor.com/jssordev/problems/image-slider.slider/=edit
The output code is as below,
<a href="#">
<img data-u="image" src="//jssorcdn7.azureedge.net/demos/img/gallery/980x380/004.jpg" />
<div data-t="0" style="position:absolute;top:30px;left:30px;width:500px;height:40px;font-family:Oswald,sans-serif;font-size:32px;font-weight:200;line-height:1.2;text-align:center;background-color:rgba(255,188,5,0.8);">responsive, scale smoothly</div>
</a>
Edit
I got the problem, the new version improved to use <a> element as whole slide.In this manner, you can add anything inside without hiding the link area.
That's to say, as <a> is a slide, you can remove the parent <div> element.
I have a 'container' component for housing child components. Essentially, a container for holding tabs of content, where the user can drag in as many 'tabs' as they choose.
The code is as such:
<!--/* Tab Container Component */-->
<div data-sly-test="${wcmmode.edit}"><h2>Drag a 'Tab Panel' below:</h2></div>
<ul data-sly-list.tab="${list of children in the tab-container parsys}">
<li>${tab.tabName}</li> //these will be the tabs using jQuery-UI
</ul>
<div data-sly-resource="${ #path='tab-container',resourceType='wcm/foundation/components/parsys'}" data-sly-unwrap></div>
And the 'tab' component:
<!--/* Tab Panel Component */-->
<div class="tab-panel">
<div data-sly-resource="${ #path='tab- panel',resourceType='wcm/foundation/components/parsys'}" data-sly-unwrap></div>
</div>
What I want to achieve is to use the container component to loop through the items in its parsys and pull out the property 'tabName' of each item. The node structure ends up as shown:
This might work in your case:
<ul data-sly-list.tab="${resource.listChildren}">
<li>${tab.name}</li> //these will be the tabs using jQuery-UI
</ul>
Basically, the tab-container is your parsys and resource.listChildren will list all the child resources/nodes. tab.name is provided by HTL which will give you tab_panel, tab_panel_1134.., etc.. Other properties inside of each tab-panel (tab) too can be accessed.
Another way to get directly to a resource is with data-sly-use:
with this you can reach any resource in AEM. Docs here (look for data-sly-use with resources).
Good Luck...
Im building a nav menu and am struggling with something really simple here. In my UI binder i have this
<header class="{res.css.mainHeader}">
<a href="#{res.css.mainNav}" class="{res.css.openMenu}">
open
</a>
<a href="#" class="{res.css.closeMenu}">
close
</a>
<h1>new header</h1>
</header>
So when I write and test this in html, it works fine. you click on the word open, and everything animates, shows all the cool stuff, the world is a happy place. But i can't figure out how to translate this into GWT.
When I run the above code, I get this error
[WARN] [itrgwtprototype] - Escaping unsafe runtime String expression used for URI with UriUtils.fromString(). Use SafeUri instead: <a class='{res.css.openMenu}' href='#{res.css.mainNav}'> (:20)
But I have a sneaking suspicion that GWT has a better way to do it than SafeUri. How do i make this work? The CSS stuff is correct, but the anchor click is whats messed up.
thanks.
You are setting the anchor href property with a css value (href="#{res.css.mainNav}").
If you want to translate it entirely in GWT you should listen to ClickEvent on you open menu and then do something like open a panel or something else. In order to do so you can replace the anchor with a Label (or InlineLabel) and listen on click events on it.
I'm in a situation where I want a whole Widget to be a link to another page. Both Anchor and Hyperlink only accept Strings or SafeHTML as visual representation. However, I need e.g. a <div>...</div> to be a link.
This would be similar to:
<div><p>This whole thing is a link</p></div>
Is there a way to do this withou custom coding my own SafeHTML? To be more concrete, I want a GXT HBoxLayoutContainer to be clickable and bookmarkable.
The easiest solution would be using UiBinder:
<ui:UiBinder
xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:container="urn:import:com.sencha.gxt.widget.core.client.container">
...
<g:HTMLPanel>
<a href="somesite">
<container:HBoxLayoutContainer>...</container:HBoxLayoutContainer>
</a>
</g:HTMLPanel>
I am trying to add 3 buttons in a div which has "info" class as shown
below( this is basically footer section). Code is shown below
<div class='info'>
<a class="button" href="#">Full Site</a>
<a class="button" href="#">Feedback</a>
<a class="button" href="#">Contact Us</a>
</div>
I want to show these 3 buttons at left, center and right.
(Above code just shows "Contact Us" button on top of the page). How do
I fix this?
I'm no jQTouch/CSS expert, but I believe this is related to the button class you're using for each link.
The button class absolutely positions items at the top, which is why your buttons aren't appearing in the footer. Additionally all three buttons are being positioned in the exact same spot, but you're only seeing the last/latest one - the Contact Us button.
The CSS file that contains this class is located within each of the theme folders (apple, default or jqt). Each one has a theme.css file.
Again, not being a strong CSS person... my advice would be to create a new class. Keep the attributes you like from the existing button class, but maybe remove the position aspects of it. This will largely depend on what kind of look and feel you want to keep/maintain.
Additionally, it may be easier for you to place your buttons within an unordered list. This gives you some more flexibility when trying to position things through CSS.
<div class='info'>
<ul class="newULClass">
<li><a class="newButtonClass" href="#">Full Site</a></li>
<li><a class="newButtonClass" href="#">Feedback</a></li>
<li><a class="newButtonClass" href="#">Contact Us</a></li>
</ul>
</div>