I'd like to create a tree with checkboxes within YUI 3.5 like this:
|v|1
--| |1.1
--| |1.2
| |2
-- after 1.2 and 2 were checked;
|v|1
--| |1.1
--|v|1.2
-----| |1.2.1
|v|2
--| |2.1
|v| -- checked;
| | -- unchecked
Found yui3.5 docs a little bit strange because that's all i've managed to found about checkboxes. Nothing about single checkbox element nor about tree in YUI 3.5.
So, the question: where can i find some info about checkbox, checkbox's listener or checkbox-tree?
P.S.
Sorry for my English and thanks in advance.
This is not relevant as it references to yui2, extjs and jquery.
Everything was pretty easy.
Y.Node.create("html-code-here"); -- to create a selectbox.
To build described tree: observe the checkboxes for changes to hide/show nearest children.
My [show / hide] actions looked like toggling css styles for appropriate selectboxes: display: block; <-> display: none;
Though it's probably not the answer i would had been looking for i'll leave it as this was my solution.
I was searching for almost same problem , i found following solution,
Custom TreeView with Check Boxes
Related
As the title says. I tried using the Overlay item that comes with blueprint, but that had the issue of only being able to scroll within the overlay. Also tried using reflexbox but that had the issue of not being able to scroll individually within the sidenav vs main content. I'm looking for something like
a | a a a
a | a a a
a | a a a
where the sidebar and the maincontent can scroll independently
You can use CSS to do this. Simply put the two elements inside a div and assign them a class. Style it as such:
.scroll-div {
overflow-y: auto;
}
I am using FXML via Scene Builder to establish some JavaFX scenes and formatting templates. Having scanned the web and Oracle tutorials, I still find determining the 'rules' around how layouts size/wrap/fit-contents/etc. and spacing between elements and compoents to be 90% a black art to me. What I'm missing is the "layout overview" (missing chapter) that puts FXML (and JavaFX) layouts all together. If you've come across such a creature, please share link(s).
To date I've only found small bits of information. For example the:
JavaFX References
JavaFx JavaDocs
Java CSS Reference
Give some useful infomation on one attribute, parameter or characteristic. There seems to be nothing outlining the big picture nor making an effort to connect the dots between say "font-family" to (what are) "valid fonts"?
Also I'm looking for some examples that do more business or applications type work. More real-world(tm) examples like a data entry form that takes details with text fields, comboboxes, radio buttons, etc. Doing 'normal' on-screen things not just looking shiny graphics to show what JavaFX might do.
The main thing that I see as missing is a description relating the different JavaFX containers and elements and relating them together for formatted-appearance, formatted-layout, rendered-sizing relating to each other.
Forgive me for giving an example that sounds like a critism, it isn't intended to be I simply haven't found the information to let me satisfy some simple requirements:
Want a dynamic layout that will work on different sized displays/windows.
Some screne areas will need to size according to the content. More or less what I'd describe as, fit-to-content.
Other areas may need to be fixed width or height (as constraints).
The remaining parts of the formetted-layout would shrink or grow depending on the size and capacity of the window.
I want this in FXML: so that we can have a menu of layout styles with the same information (as views). That way we are expecting to match display with the best layout.
I can list the main, specific roadblocks I've come across (next). The thing I accept is that there are gaps in my knowldge and in what I'm reading about how containter work, how do min-prefered-max widths and heights work? How to they interact, etc.? That may be too large a question for now. I can give an example and some specifics to follow and leave it to the wisdom of the crowd ...
Example
| col-01 | col-02 | col-03 | col-04 | col-04 |
| | | | | |
| expand | fixed | scale | expand | fit |
| | percent |conetnet| | content |
| | | | | |
Specifics:
If I used a GridPane, there is NO properties or style field in SceneBuilder for the columns or rows.
Question: can I code style for GridPane rows and columns in the FXML file?
Percentages are not valid in most places (Java CSS Reference). Where can we use a percent and not use percent.
I want the columns with "expand" to grow/shrink according to the display size.
Fit content shouldn't expand (or only expand moderately).
Scale content should expand/shrink to suit the 'remaining space' and at the same time I want the content to 'fit-space' (which will normally be a graphic or other media)
What are the VALID CSS styles for elements.
What are the VALID values for the different JavaFX CCS styles?
Which style (path) selectors and combination work for JavaFX?
I still believe these constraints are do-able with JavaFX. I want the "outline rules" for my layout to be set-up in FXML. I feel that FXML should capable of doing what's needed provided I get the inforation about how to combine and set-up my layouts to satisfy the deploymed display constraints.
I'm expecting all these answers are not all in one place. As this is my second time (project) where I needed to know these things. I would prefer to get things working with a little less brute force this time because we want the flexibility offered with FXML definitions. I also think lots of us want to know how to do this but JavaFX styling is not the same as HTML. My thanks in advance.
see also:
FXML Guice, could be very useful.
Almost all of your specific questions can be answered by using the ColumnConstraints on a GridPane. Have a look at the "Work with layouts" chapter in the official tutorial.
Note that, unlike HTML (where CSS is used for both style and layout), in JavaFX CSS is not really intended to be used for layout, but just for the "look" of the application. (Clearly, there are some gray areas here, such as borders etc, but in my opinion there's a genuine difference in approach.) I think the question on percentages in CSS values becomes a moot point once you realize this difference.
For your specific example, and just off the top of my head, so this may not be exactly correct, you can do something like:
<GridPane>
<columnConstraints>
<ColumnConstraints hgrow="ALWAYS">
<maxWidth><Double fx:constant="POSITIVE_INFINITY" /></maxWidth>
</ColumnConstraints>
<ColumnConstraints percentWidth="20"/>
<ColumnConstraints hgrow="SOMETIMES" fillWidth="true"/>
<ColumnConstraints hgrow="ALWAYS">
<maxWidth><Double fx:constant="POSITIVE_INFINITY" /></maxWidth>
</ColumnConstraints>
<ColumnConstraints hgrow="NEVER" />
</columnConstraints>
<!-- Nodes... -->
</GridPane>
In SceneBuilder (screenshot is from 2.0, but this worked in 1.1 too), click on the "header tabs" for a column and under layout on the right you will be able to set the column constraints for that column. In this screen shot, column 1 is selected (its "header tabs" are yellow):
For your specific question 6, about css styles, I've found the CSS reference is pretty explicit about that, once you figure out how it's laid out. It lists the types and the values they take, then lists nodes, the attributes that can be used with them, and their type. The selectors are the standard css selectors, with a few pseudoclasses not being supported (documented in the introduction of the reference).
One thing that's not stated explicitly in the reference is that the "substructure" section for each Node is listing css classes. So, for example, ScrollBar (which has css class scroll-bar) has "track" listed under its substructure as a StackPane. StackPane is listed as defining a property -fx-alignment as well as inheriting all the properties of Pane, which in turn inherits all the properties of Region, such as -fx-background-color. So if I want really ugly scroll bars, I can do
.scroll-bar .track {
-fx-background-color: purple ;
}
And if I want one particular scroll bar to be ugly, I can give it a style class (say "ugly") and do
.scroll-bar.ugly .track {
-fx-background-color: purple ;
}
(So the usual selection rules for css apply.)
While the reference is pretty good, I do quite often dip into the default stylesheet source code to see how things are done there. This is a useful resource, and Oracle seem to actively encourage you to look at this. As well as the link from before, you can just extract it from the jfxrt.jar file with
jar xf JAVA_HOME/jre/lib/ext/jfxrt.jar com/sun/javafx/scene/control/skin/modena/modena.css
I have single p:message for which I want to set display: inline-block.
I've tried the following:
<p:message ... styleClass="inline-block" style="display:inline-block;/>
But when I see the sources, both style and class are NOT rendered on the div with messages.
Is there any way to specify the custom CSS attributes to the p:message directly?
I'm aware I can wrap it with div and steer the CSS of the children of that div, but I'd like to avoid superfluous wrapping, if possible.
PrimeFaces version: 3.5.
Have to disagree with Hatem Alimam
As the mykong article goes, you should add your stylesheet to override the Primefaces CSS.
!important in CSS stylesheet is seen as bad practice. Check these quick SO answers to see what the SO community thinks:
Is !important bad for performance?
What are the implications of using “!important” in CSS?
Is it bad to use !important in css property
The last one has an answer in defense of the !important but brings about the problem when several !important rules come into play (and if you start using it without reserve, you are bound to have it blow in your face and they start cascading one after the other.
The right way to do it is either to make your stylesheet have precedence over the PF sheet, to make your selectors get precedence over the ones in PF in the cascading.
Google for CSS selector Specificity for more on how to make sure your rule is picked by the browser over the PF ones (I am at work now and can't access blogs).
Onto your specific question:
The attributes do not work because they are not coded in the component. Check the PF user guide for your particular PF version (at the time of this writing, you have not stated your version). The <p:messages> component has a rather peculiar way of rendering.
for your particular case, add the following rule:
.ui-messages.ui-widget {
display: inline-block;
}
I'm trying to use jsPlumb with the YUI framework to make some divs draggable and connected. However, I find when I try to make the divs draggable but contained within their parent, using:
jsPlumb.draggable("window2", {
containment:"parent"
});
the div is still draggable outside the bounds of its parent. If I set the parent's css to "overflow: hidden" I won't see the div when it's dragged beyond the parent's bounds but I'll still see the connector to the div, which looks really awkward.
To see this all in a fiddle: http://jsfiddle.net/xXYwX/3/
Does anyone know if there is a way to use jsPlumb's draggable function with YUI and still restrict the movement of the draggable div?
Thanks!
First make the div draggable using jsPlumb:
jsPlumb.draggable("window2");
Then add necessary jsPlumb end points:
jsPlumb.addEndpoint("window2", { ----});
Then add the HTML draggable like
$('#window2').draggable({
containment: 'parent'
});
Its working for me..
No, it seems not possible with the yui version of jsPlumb. The 'dd-constrain' module is missing and i found no way to plug this module in, because you can't get access to the Y.DD.Drag object.
You can send a feature request to the creator or do a pull request on github.
Here is a plain yui example with a constrained drag:
http://yuilibrary.com/yui/docs/dd/constrained-drag.html
make your container overflow: visible in css
This is a cached map from the software: ogmaps
Please look carefully at the tiny shades below the address bar in the main window here.
On once clicking the minimize/maximize button, it gets showed up fully. Tested on firefox, and google chrome.
Can't say that this is the browser problem, since when I loaded this cached map on the Qt widget, I still had to click the minimize/maximize button, to get it gets showed up fully.
The html for the map is too long to be posted here. If there is any relevant section that you know of, then please tell me and I'll post it here.
EDIT 2
Finally I have managed to upload that html code here: http://code.google.com/p/earthhtml/source/browse/trunk/ogmap.html
Please have a look about the div tags.
Although this may seem like something trivial, it worked out for me. I had the exact same problem (among other GM problems) using GMv3 and couldn't figure it out.
I added a min-height to the div containing the map (with !important)
I removed ALL max-height & max-widths from the CSS
This fixed the 'small map' problem plus an additional problem I had with the GM pins and infowindows.
On top of that, make sure that there are NO divs with a high z-index on your page, as GM will resize the containing div not to interrupt with the top div. Another div with a higher z-index will also mess up the map and make the height and the width go crazy.
div#map{
min-height:600px !important; /* or any value that suits you */
position:relative;
margin-left:0;
margin-right:0;
left:0;
border:1px solid #979797;
}
I hope this works as good for you as it worked for me. If not, good luck!