How to set <aui:button> icon in Liferay without using Javascript? - liferay

I'm trying to set icon to <aui:button> like on this tutorial.
But solution described there doesn't work well in my case, because I have a table and on each row I have a button with different resourceUrl. Like this:
<portlet:resourceURL id="saveReport" var="saveReportURL">
<portlet:param name="reportId" value="${report.reportId}" />
</portlet:resourceURL>
<aui:button onclick="location.href = '${saveReportURL}'">
Is it possible to set icon in <aui:button> without using JavaScript as described in tutorial?
Thanks

You can write this below code for setting icon in liferay alloy button
<aui:button type="cancel" cssClass="btn-info" icon="icon-upload-alt" iconAlign="right" value="upload" />
you need to use the icon attribute for this setting "Icon glyphs"
you need to use cssClass for adding extra design button class for the designing
you need to set iconAlign attribute for left or right side of the button text value

You should be able to add an icon to a button without using JavaScript by adding one of these Icon CSS classes to your button. For example, if you wanted to create a button with a calendar icon, your code should look something like this:
<aui:button class="icon-calendar" ... />

Related

Richfaces: menu key binding

I got a richface issue that rather looks very easy, but i can't find the answer.
I want to acces a (dropdown)menu with keybindings. Once the menu has focus i can use the arrow buttons without a problem. I just cant get the 'focus' on my menu with a hotkey
XHTML:
<rich:dropDownMenu
binding="#{menuBarBean.menuBar}"
id="main-menu"
showEvent="mouseup"
onclick="showMenu();"
/>
<rich:hotKey enabledInInput="true" key="ctrl+M" onkeyup="displayMenu()" preventDefault="true" />
JavaScript:
function displayMenu(){
#{rich:component('main-menu')}.show();
**// Do something that sets focus on the richface menu component**
}
In short:
How to get the focus on
#{rich:component('main-menu')}
with:
<rich:hotKey />
jQuery has a .focus() method that focuses things:
#{rich:component('main-menu')}.element.focus();

XPages: Add a button to a data view custom control

I'm using the Extension Library for creating XPages and I want to use a view, where i can use some inline buttons (buttons in every row of the view) and I also want to use the functionality of the data view where I can expand the content of the current row.
I want to use one of those inline buttons, to expand the content of this row, because before the functionality of this button can be executed, the user has to enter some data in an inputText-field.
So the questions are?
- How can I add inline buttons (using SSJS) to a data view?
- Do you know any other way to solve my problem?
Thanks!
In the Extlib database the expansion with a custom form was done using a link. I would stick to the links -> gives you the most options (client side, server side). Stick to those. If you really need that "buttony" look (which does IMHO not look very much like a web application), use CSS to style the link to look like a button. The OneUI has instructions for that (or steal them from Twitter bootstrap).
The OneUI is worth another look suggesting a different visual clue for expand/collapse.
You should be able to do this within the confines of a dataView by adding a facet for "detail" and using collapsible detail.
For the dataView, set collapsibleDetail="true", add in a panel to the detail facet, then put the elements you want to display when they click to expand in that panel.
<xe:dataView id="dataView1" collapsibleDetail="true" detailsOnClient="true">
<xp:this.facets>
<xp:panel xp:key="detail">
<xp:button id="Mybutton" value="My button"></xp:button>
<xp:label value="This is the label" id="label1" for="Mybutton"></xp:label>
</xp:panel>
</xp:this.facets>
<xe:this.summaryColumn>
<xe:viewSummaryColumn columnName="lastname"></xe:viewSummaryColumn>
</xe:this.summaryColumn>
<xe:this.extraColumns>
<xe:viewExtraColumn columnName="city"></xe:viewExtraColumn>
<xe:viewExtraColumn columnName="state"></xe:viewExtraColumn>
<xe:viewExtraColumn columnName="zip"></xe:viewExtraColumn>
</xe:this.extraColumns>
<xe:this.data>
<xp:dominoView var="view2" viewName="ByName-First"></xp:dominoView>
</xe:this.data>
</xe:dataView>
Now, I'm not positive on how to bind it to the contents of the documents displayed, but I'm sure there's a way. I know how to access the document in a repeat, but not in a dataView, so I would probably do it in a repeat (unless you figure it out and post it to us here!)
Hopefully, that moves you in the right direction.

How to set Hint to a Button in android

I have an app, which collects person's info, in that i have button for showing datepicker for collecting Person's DOB, now I need to display hint on that button. I set the hint s to all UI components, i can see the hints in edit text but not in button. How to refactor this problem, Any Help is appreciated... Thanks
Use a custom button by layering a text view over a button, check schematic below:
<FrameLayout>
<Button></Button>
<TextView></TextView>
</FrameLayout>
I got corrected, I used the following attribute in the <button> tag as follows :
<Button
.
.
android:hint="01/02/1999"
android:ellipsize="start" />
The Hint appears on the button.

Is there a way to change behavior of rich:panelMenu collapse/expand?

http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=panelMenu&skin=blueSky
The above link has a demo which is similar to what we have on our application, but we would like for the collapse/expand behavior to act a little differently.
We have our menu starting completely expanded, but we basically want the user to have complete control over collapsing and expanding the menus. For example if you open the top one in the demo and then open the second one the first one closes. Is there a way to only collapse and expand onclick? This seems like it should be the default behavior.
So basically here is what I have:
<rich:panelMenu>
<a4j:repeat>
<rich:panelMenuGroup>
<a4j:repeat>
<h:link />
</a4j:repeat>
</rich:panelMenuGroup>
</a4j:repeat>
</rich:panelMenu>
I want to be able to open and close each rich:panelMenuGroup without it affecting the rest of the other rich:panelMenuGroup elements.
It's as simple as: <rich:panelMenu expandSingle="false">

How to open a modal aspx page from the devexpress aspxpopupcontrol

I have a button which should open a web form from my project in a modal window. How can I achieve that with the devexpress popup control?
Use the Popup Control - Content URL to show another webform in the control. open popup on the button's client click event.
example:
<dx:ASPxPopupControl ID="popup" runat="server" ContentUrl="~/ContentPageWithTextBox.aspx"
Top="100" ClientInstanceName="clientPopup" CloseAction="CloseButton">
<ClientSideEvents Shown="OnShown" />
</dx:ASPxPopupControl>
Check this search Result
Reference:
How to manipulate client-side objects within a ASPxPopupControl with the specified ContentUrl - check example also.
Hope this help...
Here is sample code:
<input id="openBtn" type="button" value="Open popup"
onclick="myPopup.SetContentUrl('http://www.google.com');myPopup.Show();" />
<dx:ASPxPopupControl runat="server" ClientInstanceName="myPopup" Modal="True"
CloseAction="CloseButton" Width="500px" Height="400px"/>
ASPxClientPopupControl members
ASPxPopupControl members
See ASPxPopupControl Online Demos and the Code Central Examples to learn more on how accomplish this task.

Resources