What kind of styling should I set to two Grids in order the one to stand next to the other? In the way I have created them in the xml file, the second stands below the other and it does not comply with the style of the general Page:
<div>
<z:StaticDataGrid ui:field="staticDataGrid" />
<z:DataGrid ui:field="displayedDataGrid" />
</div>
StaticDataGrid and DataGrid are class representing Grid.
Place the grids inside a HorizontalPanel to place them side by side.
<z:HorizontalPanel>
<z:StaticDataGrid ui:field="staticDataGrid" />
<z:DataGrid ui:field="displayedDataGrid" />
</z:HorizontalPanel>
Related
How would I set the default properties of server controls that I'll always use?
For example I have combos all over my pages which almost always look the same in the mark up text (e.g. CSS CLasses for PopUp, TextBox, Button, etc.)
I thought of putting the control inside an user control and set the properties there.
But then I would have to access the control itself with a property of the UC.
I want to get rid of these repeating tags:
<Appearance>
<AnyRecordFieldCell CssClass="SFGridAnyRecord"></AnyRecordFieldCell>
<AlternateRecordFieldCell CssClass="SFGridAlternateRecord"></AlternateRecordFieldCell>
<RecordPreviewCell CssClass="SFGridRecordPreview" />
<GroupIndentCell CssClass="SFGridGroupIndentCell" />
<GroupCaptionCell CssClass="SFGridGroupCaption" />
<AnySummaryCell CssClass="SFGridAnySummary" />
<GroupCaptionPlusMinusCell CssClass="SFGridPlusMinus" />
<TopLeftHeaderCell CssClass="SFGridTopLeftHeaderCell" />
<RowHeaderCell CssClass="SFGridRowHeaders" />
<ColumnHeaderCell CssClass="SFGridColumnHeaders" />
<GroupHeaderRowHeaderCell CssClass="SFGridGroupedColumnHeaders" />
<FilterBarCell CssClass="SFGridFilterBarCell" />
</Appearance>
Any ideas?
Consider using ASP.NET Themes, you can use them to set mark-up for controls.
You could go with a purely CSS solution if these elements are almost always the same - i.e. have styles for input and button elements.
Where styles differ the enclosing div, for example, can be referenced to change the style.
I have a JSF 1.2 dataTable using ICEfaces 1.8. In one column, I would like to display the text from a backing bean, and then to the right of it, display a small image on the same line without it wrapping to a new line.
The image is actually a ice:commandButton component with the image attribute set. The action of clicking on the image is to display a ice:panelPopup panel.
Here is the relevant code of the column within the dataTable:
<ice:column id="col1">
<ice:outputText escape="false" value="#{document.column1Value}" />
<ice:form>
<ice:commandButton actionListener="#{bean1.open}" image="images/popup.gif">
<f:attribute name="docParam" value="#{document.parameter}" />
</ice:commandButton>
...
</ice:form>
</ice:column>
I have tried all sorts of adding CSS style information to various tags, including white-space:nowrap and float but have been unable to get the desired effect.
The <ice:form> generates a HTML <form>, which is by default a block level element, so it always starts at a new line. You need to set the style of the <form> to display: inline.
<ice:form style="display: inline;">
Alternatively, you can also just move that text into the form.
<ice:form>
<ice:outputText escape="false" value="#{document.column1Value}"/>
<ice:commandButton actionListener="#{bean1.open}" image="images/popup.gif">
<f:attribute name="docParam" value="#{document.parameter}" />
</ice:commandButton>
...
</ice:form>
Either way, you only still need to prevent the cell's content from being whitespace-wrapped when there's little room left in the cell's width. You could achieve that by setting white-space: nowrap on the common parent element of the both elements. In case of the first approach (setting the form to display: inline), that would be the <td> element and in case of the second approach (putting the text inside the same form), that would be the <form> element. E.g.
<ice:form style="white-space: nowrap;">
<ice:outputText escape="false" value="#{document.column1Value}"/>
<ice:commandButton actionListener="#{bean1.open}" image="images/popup.gif">
<f:attribute name="docParam" value="#{document.parameter}" />
</ice:commandButton>
...
</ice:form>
(note, the style attribute is in the above examples exemplary, in real you should be using CSS files instead with style classes)
In an ASP.NET project I have the following HTML:
<asp:PlaceHolder ID="plcTitle" runat="server"></asp:PlaceHolder>
<div id="divStrapline" runat="server" />
which are populated with this code:
if (this.TitlePanel != null)
{
plcTitle.Controls.Add(this.TitlePanel);
}
if (this.Strapline != null)
{
divStrapline.Controls.Add(this.Strapline);
}
Are they both the same thing? Is either better than the other? Why?
The <asp:PlaceHolder /> does not generate a div tag.
The PlaceHolder Web server control does not have any visible output and is used as a place holder when we add controls at run time.
Empty div tags (and other container tags like p etc) closed in the opening element itself (as in <div/> instead of <div></div>) might lead to issues in some browsers. Browsers might ignore the fact that it is closed with a / and consider it as a new div and thus break the subsequent mark up.
I once had this issue with Firefox: I was generating html with minidom xml library in python which represented empty div as <div /> - it broke the remainder of my mark up messing up with the subsequent divs. I ended up adding comment nodes to empty elements to make sure that they have a separate closing tag.
I have a repeater of div's that look a little bit like this:
<div class="header_div">
<!-- Content -->
</div>
I want to have the background color of the divs change based on a dynamic property of the content of the div (lets call it the category), but I still want the "header_div" style to be assgined in cases where I dont have a css class for that category. Whats the best way of doing this?
The best way I can think of is to render the category as the "id" of the div and apply styles based on the id, but that strikes me as really messy - standards dictate that the id should uniquenly identify the element on the page and there will definitely be repeats of each category.
The simple answer would be to use multiple classes for the <div> so that
<div class="header_div header_red">
<!-- Content -->
</div>
<div class="header_div header_green">
<!-- Content -->
</div>
You're correct about the need for IDs to be unique.
There's nothing stopping you from specifying more than one value per class attribute - just separate them with a space.
<div class="header_div category">
<!-- Content -->
</div>
Just be careful to check what happens when both classes specify different values for the same style - I can't say whether the first or the second would take precedence.
You could supply multiple styles for the div class:
<div class="header_div mystyle">
<!-- Content -->
</div>
I believe styles declared later in the declaration override earlier ones. As long as you ensure your custom styles "shadow" those of the header-div, you can always include the header-div element, and it will only have an effect when any secondary style is absent (or empty).
If it's going to be used repeatedly on the page, it should be a class.
If it's unique on the page, use an id.
Without knowing more about your content, can you not use one of the header tags (<h1> etc)?
You are correct, IDs should be unique and if you want to use the same style more than once then use a class.
You can't have duplicate IDs so if you had multiple divs of the same category you would have an issue. Classes should be used when the style needs to be applied for 1 or more items on a single page.
Why not assign the class on databinding of the div based on the category? As your repeater is getting bound, find your div for the item you are binding and assign it.
You could also substitute the div for an asp:Panel and use it's onDataBinding method. It should look exactly like your div.
I have some HTML that is generated via a Rich Text Editor outside of my Flex application but would like to display it inside Flex.
The HTML is simple HTML tags, things like styles, anchors, and possibly image tags, is there a control that would let me render this HTML in flex or am I going to have to roll up my sleeves and roll my own?
Any ideas appreciated...Thanks.
If the HTML is really simple, you can display it in a normal label or textarea component, If it is more complex, I'll quote what I answered in this question. The discussion there also has a little more info.
If it is complex HTML and Javascript, one possible way is HTMLComponent, a method that uses an iframe over your flash to make it appear like the HTML is in your app. There are a few downsides to this method however - most of them described in detail at Deitte.com.
If this can move offline, you could use Air (it has an mx:HTML component built in). Deitte.com has a detail of this technique as well.
Check out the documentation on mx.controls.Label and flash.text.TextField (which is what displays the text in a Text or Label control in Flex). The TextField documentation states that
The <img> tag lets you embed external image files (JPEG, GIF, PNG), SWF files, and movie clips inside text fields. Text automatically flows around images you embed in text fields. To use this tag, you must set the text field to be multiline and to wrap text.
Which means that you can display an image in a Text component in Flex by setting its htmlText property to some HTML which contains an <img> tag. You can't use Label, because it is not multiline.
I've noticed that text fields have trouble with properly measuring their heights if the images displayed in them are left or right aligned with text flowing around them (e.g. align="left"). You may have to add some extra spacing below to counter that if you plan to use aligned images.
You will have to use flex iFrame control.
It is not an 100% flash solutions, and combines a bit of js calls but works perfectly for me.
You can grab latest source code from github https://github.com/flex-users/flex-iframe
Here is some sample code from the component author.
<!---
A basic example application showing how to embed a local html page in a Flex application.
#author Alistair Rutherford
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:flexiframe="http://code.google.com/p/flex-iframe/"
horizontalAlign="center"
verticalAlign="middle"
viewSourceURL="srcview/index.html">
<!-- Example project presentation -->
<mx:ApplicationControlBar dock="true">
<mx:Text selectable="false">
<mx:htmlText><![CDATA[<font color="#000000" size="12"><b>flex-iframe - Simple html example</b><br>This example shows how to embed a simple Html page in a Flex application.</font>]]></mx:htmlText>
</mx:Text>
</mx:ApplicationControlBar>
<!-- HTML content stored in a String -->
<mx:String id="iFrameHTMLContent">
<![CDATA[
<html>
<head>
<title>About</title>
</head>
<body>
<div>About</div>
<p>Simple HTML Test application. This test app loads a page of html locally.</p>
<div>Credits</div>
<p> </p>
<p>IFrame.as is based on the work of</p>
<ul>
<li>Christophe Coenraets</li>
<li>Brian Deitte</li>
</ul>
</body>
</html>
]]>
</mx:String>
<!-- Example using the 'source' property -->
<mx:Panel title="A simple Html page embedded with the 'source' property"
width="80%"
height="80%">
<flexiframe:IFrame id="iFrameBySource"
width="100%"
height="100%"
source="about.html"/>
</mx:Panel>
<!-- Example using the 'content' property -->
<mx:Panel title="A simple Html page embedded with the 'content' property"
width="80%"
height="80%">
<flexiframe:IFrame id="iFrameByContent"
width="100%"
height="100%"
content="{iFrameHTMLContent}"/>
</mx:Panel>
</mx:Application>
#mmattax
Indeed you can display images in a TextArea component. The approach is not entirely without problems though...