I have an extrange case with JMesa..
When I'm doing tests without a form element as parent (to apply filters and pages) JMesa table is rendered.
But when I put the Jmesa element as form's child, the style disappears and is rendered as a basic table without colors or borders ._.
<fieldset>
<s:form action="listUsers">
<jmesa:tableModel id="test" items="${users}" var="bean">
<jmesa:htmlTable caption="${pageScope.caption}" width="100%">
<jmesa:htmlRow>
... Rows ....
</jmesa:htmlRow>
</jmesa:htmlTable>
</jmesa:tableModel>
</s:form>
</fieldset>
On head tags I have the css refered and jmesa/jquery.jmesa ..
Since the table renders with correct styles when not wrapped in a form tag but renders with no styling when it is inserted into the body of a form tag, my first thought is that there is a style somewhere at the form tag level that is causing the table styles to be lost or overridden. Another possibility is that if your CSS Selectors are configured with very specific parent/child relationships, the introduction of another tag could conceivably prevent styles from being applied.
Without more information as to what styles are present, the best suggestion I can offer is to use a tool that allows you to interactively assess your styles. Internet Explorer 8 has the Developer Tools feature. Conveniently, you can use a feature to click on an item on your Web page and it will load that element along with its styles. You can then analyze the styles or dynamically tweak styles to immediately see results.
I'd recommend loading the page that works and screen capturing the styles for the table when it looks good. Then you can do the same for when the styles are not being applied to the table and compare the two as a starting point to determining what's causing the difference.
Related
I'm having a paragraph system (parsys) in my page, and inside that I'm dragging one component; that component has two paragraph systems inside it. So now I will be dragging a rich text component in both of the two paragraph systems which are present in the component. However, after dragging the rich-text components in the two paragraph systems, I'm not able to edit the those two rich text components, as they got overlapped. Can you tell me whether we can have a parsys inside a parsys and will that support content authoring.
Yes it is possible to have a parsys inside a parsys. The overlapping problem would be a CSS issue, and can be solved most of the time by adding the following div at the end of your component code.
<div style="clear:both"></div>
Also, to prevent adding additional div styles to your page, this should be done only in author mode:
<% if (WCMMode.fromRequest(request) == WCMMode.EDIT) { %>
<div style="clear:both"></div>
<% } %>
When Struts(2)' UI tags are used, more HTML elements are generated automatically.For example, when defining <s:form ... > it includes form within a table(even though such table is not declared by us). So, if any CSS is used(lets say, a div tag is only used and located input elements according to the CSS), all elements are not viewed as expected because of auto generated elements and their postions. Even if the struts is allowed to generate such elements and we add CSS to them, then another weight must be bored to add css to design auto generated html elements because more elements are generated in various positions and sizes. Also as I feel, more html codes may effect the browser page loading time.
So is there a way to avoid generating such elements when struts UI tags are used
OR ELSE
is there a convenient way to work with CSS in Struts UI tags ? (I read a question in Stackoverflow and it had said for an answer that, to add css finally which the struts generated. But it is not that much easy when compare to normal jsp html designing level..)
In short Struts2 work on the concept of themes and it provides certain theme out of the box. Based on the theme selected it will generate some HTML code for the used tags when rendering the view.
Themes are really a very nice and beautiful concept of Struts2 and it even provides you the way to create a custom themes are per your requirement.
coming to your Question by default Struts2 use xhtml theme which means it will generate some HTML (which includes tables as name suggested) while rendering the HTML for the used tags.
you can control the HTML generation by specifying simple theme either in struts.properties file or in struts.xml file
Struts Properties file
struts.ui.theme=simple
Struts.xml file
<constant name="struts.ui.theme" value="simple" />
Other theme being provided by S2 out of the box are
css_xhtml: generate div based HTML
ajax: for ajax tags
Note that simple theme will not generate any extra HTML but only tags equivalent HTML code and you have full control to customize ur view by providing your own CSS and any other properties.
Above settings in properties file as well in struts.xml will be applicable to entire application which means each and every tag will generate same HTML for whole appllication.beside that if you want to control per tag HTML generation each S2 tag as a property namely theme, provide value to this property like simple,css_xhtml etc to control per tag HTML generation.
There is one more way to control the theme per request basis by using the following code
<s:set name="theme" value="'simple'" scope="page" />
or
<s:set name="theme" value="%{myTheme}" scope="page" />
Choice is all yours which way you want to go
Add theme="simple" to the Tag.
Sample Code:
<s:select id="..." list="..." theme="simple">
I'm running test automation software that will rely on "id" tags to recognize controls.
I'm developing in java on eclipse using the GWT plugin and have tried using both of the below methods to set the id tag for a button "add".
add.setId("addId");
DOM.setElementAttribute(add.getElement(), "id", "addId");
neither of these are modifying the id property correctly. Have you had this problem before or do you know a workaround?
Thank you for any help!
Jerry
If I remember correctly, several browsers (or probably just Internet Explorer) won't let you set a DOM element's ID after it has been appended to the DOM. This limitation would be there even if you are directly doing this hand coded javascript. The browser won't show any error on setting id attribute but won't update the attribute either.
So you need to set the ID before appending the element to the DOM.
EDIT
From discussion below it appears that you were assuming that setting ID on Button widget's DOM element will set the ID on a <input type="button"> DOM element. But this assumptions is not proving to be correct because Button widget wraps the <input type="button"> DOM element in other DOM elements (like table or div).
EDIT
You may want to try Button.wrap(element) method if you want to customize the input type="button"> element. First create (DOM.createButton()) or locate a DOM element, set it's id, and wrap it using Button.wrap(element)
Long time ago I had Selenium test suite for a GWT app and I used ensureDebugId method to set the ID.
Edit - It still seems to be part of the API
I'm working on a web project which uses JSF 2.0, PrimeFaces and PrettyFaces as main frameworks / libraries. The pages have the following (common) structure: Header, Content, Footer.
Header:
The Header always contains the same menu. This menu is a custom component, which generates a recursive html <ul><li> list containing <a href="url"> html links, this is all rendered with a custom renderer. The link looks like 'domain.com/website/datatable.xhtml?ref=2'. Where the ref=2 used to load the correct content from the database. I use prettyfaces to store this request value in a backingbean.
Question 1: Is it ok to render the <a href> links myself, or should I better add an HTMLCommandLink from my UIComponent and render that in the encodeBegin/End?
Question 2: I think passing variables like this is not really the JSF 2.0 style, how to do this in a better way?
Content:
The content contains dynamic data. It can be a (primefaces) datatable, build with dynamic data from the database. It can also be a text page, also loaded from the database. Or a series of graphs. You got the point, it's dynamic. The content is based on the link pressed in the header menu. If the content is of type datatable, then I put the ref=2 variable to a DataTableBean (via prettyfaces), which then loads the correct datatable from the database. If the content is of type chart, I'll put it on the ChartBean.
Question 3: Is this a normal setup? Ideally I would like to update my content via Ajax.
I hope it's clear :)
It's ok to just output link yourself, commandLink is out of the question (it does a postback using javascript, it's not what you want);
Parameter are all in the param implicit object. You can insert them by a #ManagedProperty annotation, like this:
#ManagedProperty("#{param.ref}")
String ref
// .. getters, setters (obligatory!)
You can also use (if you are on JSF 2) the f:viewParam tag (a nice description http://blogs.oracle.com/rlubke/entry/jsf_2_0_bookmarability_view), you get the bonus of validation and conversion.
The way I understand it, your setup is rather complicated. Using a handwritten custom component for a menu is a huge overkill (at least judging from the provided description), a composite component would probably do. JSF has no special way of making ajax calls between views or embedding views one into another, so - unless you use iframes - your only choice would be to include all the possible pieces of content into a single view, wrapped in panels, and render them as required:
<h:panelGroup rendered='#{backingBean.ref == 2}'>
... content 2 ...
</h:panelGroup>
and so on. Careful, this would be heavy on resources.
You could also write your own ajax solution in javascript. This would require all the pieces of content to be fully independent views, with their own forms. Also, all their postbacks would have to go through ajax, so the main page does not get reloaded.
I have a question about styling Icefaces. I have a minimal application that can use Icefaces components, but when I use them and view the page, the components are not styled (for example the buttons have the default look and tabs have no look at all, no images, nothing). I was wondering why that is and what I should do so I would get the default Icefaces look to work.
Next thing I don't get is how do I customize the look by changing some default css style classes that get applied to the components automatically, so every component I use gets the changed style.
Thank you for your answers!
I suggest that you take one of the existing style-sheets, which are included within the ICEfaces package (check the resources folder of the downloaded ICEfaces-1.8.1-bin.zip):
rime
royale
xp
You can preview them in the ICEfaces showcase
Include it within your *.xhtml file via the <ice:outputStyle> tag:
(portlet)
<ice:outputStyle href="/xmlhttp/css/rime/rime-portlet.css"/>
(servlet)
<ice:outputStyle href="./css/demo_template.css"/>
Starting from here, feel free to either manipulate the chosen stylesheets or - which I favor - include your own stylesheets after ICEfaces' ones and overwrite the needed styles.
Regarding your second question:
Basically every ICEfaces component has its own style class. Just browse around the showcase and inspect the components with Firebug. I've not found many classes, which have been reused between different components. Therefore, you'll have to customize each and every component on your own - or apply your own common style class to every component you use via the styleClass property.
<ice:panelGrid styleClass="myCommonStyleClass">
<ice:inputField styleClass="myCommonStyleClass">
There are three predefined ICEfaces style sheets included:
(1) xp.css
(2) royale.css
(3) rime.css
Developers may also create their own custom style sheet based on a predefined ICEfaces style sheet. If the style class names match those defined in the ICEfaces style sheets, the ICEfaces components will use the specified styles by default, without the need to specify the style class names explicitly on each component.
(1) Where to find CSS class names ?
IMPORTANT : The default CSS class names associated with each component are listed in the component's TLD (taglib) description.
(2) How To use a predefined style :
<link rel="stylesheet" type="text/css" href="./xmlhttp/css/xp/xp.css" />
OR
<ice:outputStyle href="./xmlhttp/css/xp/xp.css" rel="stylesheet" type="text/css" />
(3) Is there any Advantages of using ICEFaces OutputStyle ?
The ice:outputStyle component has the following advantages over the HTML link tag:
- Automatically includes browser-specific variants of the main style sheet in the page to adapt the theme styling to account for differences in each browsers' CSS support. See the TLD (taglib) documentation for the ice:outputStyle component for details.
- Provides the ability to dynamically change the theme style sheet at runtime via a value binding on the component's `href` attribute.
(4) What is meant by xmlhttp ?
The xmlhttp->css->xp path is automatically resolved by ICEfaces and all needed resources are loaded from the ICEfaces.jar
Hope this helps..!! :)