I'm currently rebuilding my QTreeWidget every time it updates. The problem with this is my selection gets thrown away. Is there a work around for this or is it just best to find a way to update the values instead of rebuilding the tree? I would like to keep the selection from the previous time the method was called.
This method is called every second.
void insertIntoTree(QTreeWidget *tree) {
tree->clear();
tree->setSelectionMode(QAbstractItemView::SingleSelection)
for (int i = 0; i < tree.members(); i++) {
tree->addTopLevelItem(parent);
parent->addChild(variousData); // Re-adds all the items into the tree, this is done every iteration
}
//Here I would like to save something that tells which Item in the widget is selected.
}
ui code for widget
<widget class="QTreeWidget" name="treeWidget">
<property name="focusPolicy">
<enum>Qt::ClickFocus</enum>
</property>
<property name="styleSheet">
<string notr="true">QTreeView::branch:has-siblings:!adjoins-item {
border-image: url(:/img/res/stylesheet-vline.png) 0;
}
QTreeView::branch:has-siblings:adjoins-item {
border-image: url(:/img/res/stylesheet-branch-more.png) 0;
}
QTreeView::branch:!has-children:!has-siblings:adjoins-item {
border-image: url(:/img/res/stylesheet-branch-end.png) 0;
}
QTreeView::branch:has-children:!has-siblings:closed,
QTreeView::branch:closed:has-children:has-siblings {
border-image: none;
image: url(:/img/res/stylesheet-branch-closed.png);
}
QTreeView::branch:open:has-children:!has-siblings,
QTreeView::branch:open:has-children:has-siblings {
border-image: none;
image: url(:/img/res/stylesheet-branch-open.png);
}</string>
Related
This is a simple website that consists of finding some objects, when you click on each one of them a sweetalert pops up. What I want is to disable onclick when clicked once. There is a counter that tells you how many objects you have found but it won't work properly until I disable doble click. This is the link to replit: https://replit.com/#IzanLabrado/buscandoobjetos#index.html
You can unbind an onclick event as outlined in this stackoverflow question in your callback.
function general1() {
alert("I'll only be clicked once");
document.getElementById('image1').onclick=null;
}
#image1 {
background: lightblue;
width: 250px;
height: 50px;
border: 1px solid black;
cursor: pointer;
}
<button id="image1" onclick="general1()">Clicking me works once</button>
Setting onclick to null as part of your callback will prevent the function being called through a click event.
The more maintainable way to code this though would be to have a "state" object of some kind. Like a list of ids that starts empty and you add to each time the item gets clicked. This would allow you to only need to write one function, and you would call it from your html with a different id. Instead of list, you could simplify it further by using set so that duplicate ids can be added without increasing the size of your set.
const foundImages = new Set();
function foundImage(id) {
if (!foundImages.has(id)) {
alert("Congratulations you clicked a new one");
}
foundImages.add(id);
document.getElementById("count").innerHTML=foundImages.size;
}
<div id="1" onclick="foundImage(1)">Item1</div>
<div id="2" onclick="foundImage(2)">Item2</div>
<div id="3" onclick="foundImage(3)">Item3</div>
<p>You have found <span id="count">0</span> images </p>
I'm trying to assign some dynamic variable names using less (using it for the first time) ... but nothing I've tried seems to work. After looking through all the documentation, I came up with this, but it's still not working:
// jellybeans
#opacity: 1;
#black-jellybeans: rgba(59,59,59,#opacity); // #3b3b3b
#red-jellybeans: rgb(207,106,76,#opacity); // #cf6a4c
#green-jellybeans: rgba(153,173,106,#opacity); // #99ad6a
#yellow-jellybeans: rgba(216,173,76,#opacity); // #d8ad4c
#blue-jellybeans: rgba(89,123,197,#opacity); // #597bc5
#magenta-jellybeans: rgba(160,55,176,#opacity); // #a037b0
#cyan-jellybeans: rgba(113,185,248,#opacity); // #71b9f8
#white-jellybeans: rgba(173,173,173,#opacity); // #adadad
// the palette to use
#palette: "jellybeans";
#black: "black-#{palette}";
#red: "red-#{palette}";
#green: "green-#{palette}";
#yellow: "yellow-#{palette}";
#blue: "blue-#{palette}";
#magenta: "magenta-#{palette}";
#cyan: "cyan-#{palette}";
#white: "white-#{palette}";
Any suggestions?
use:
#cyan: "cyan-#{palette}";
p{
color: ##cyan;
}
or
#whitename: "white-#{palette}";
#white: ##whitename;
p{
color: #white;
}
I created a map using mapbox of team member locations per state for my company. The number of team members by state ranges from 1 - 10. The map pin (marker) symbols only go to nine.
I started to mess with Tilemill and saw a post saying it is possible to put the numbers inside of the markers, https://www.mapbox.com/tilemill/docs/guides/advanced-map-design/ (scroll to 'Text Labels' section, it is exactly what I am trying to do).
The database column with the numbers I want is called 'marker-symbol'. Here is the code so far in the default styles.mss:
Map {
background-color: #b8dee6;
}
#countries {
::outline {
line-color: #85c5d3;
line-width: 2;
line-join: round;
}
polygon-fill: #fff;
}
#features {
marker-width:20;
marker-fill:#f45;
marker-line-color:#813;
marker-allow-overlap:true;
}
Any help is greatly appreciated!
Thank you.
I actually had it right in some of the code I was testing. I just put the code in the wrong spot so it was behind the marker instead of in front of it. Here is the fix:
Map {
background-color: #b8dee6;
}
#countries {
::outline {
line-color: #85c5d3;
line-width: 2;
line-join: round;
}
polygon-fill: #fff;
}
#features {
marker-width:20;
marker-fill:#f45;
marker-line-color:#813;
marker-line-opacity:2;
marker-allow-overlap:true;
::labels {
text-name:"[marker-symbol]";
text-face-name:"Arial Bold";
text-allow-overlap:true;
}
}
I am using this http://www.primefaces.org/showcase-labs/ui/selectManyCheckbox.jsf
primefaces componenent to get dynamic booleanCheckboxes values
<p:selectManyCheckbox value="#{bean.selectedMovies}"
layout="pageDirection">
<f:selectItems value="#{bean.movies}" />
</p:selectManyCheckbox>
I need to apply different colors to all boolean checkboxes as shown in below image
if id=1 then color will be red if id=2 then color will be orange and
so on.
As we know these are the dynamic values in movies, so how can I set background-color to these dynamic checkboxes from backing bean ?
I tried to apply style to selectManyCheckbox but it applies as a background color to whole selectManyCheckbox panel.
so how should I set color from backing bean to selectManyCheckbox values dynamically ?
May be Doable with Pure CSS3
Depending on your actual requirements. Assuming the same html structure for the final check boxes is the default structure as in the example you link to, then the following should be a pure css3 way to accomplish it.
Note that this method does not specifically tie the color to a particular movie/id, it always sets the first movie to red, the second to orange, etc. It also has a practical limitation. If you plan to list 100 movies, each with a unique individual color, then this is not the method for you.
But if you are listing a small set (10 max?), or you don't mind if the colors repeat after a certain small sampling, then this may well be your best choice.
Here's a fiddle showing both of the following
Small Set
.ui-selectmanycheckbox tr:nth-of-type(1) .ui-state-default {
background-color: red;
}
.ui-selectmanycheckbox tr:nth-of-type(2) .ui-state-default {
background-color: orange;
}
.ui-selectmanycheckbox tr:nth-of-type(3) .ui-state-default {
background-color: red;
}
.ui-selectmanycheckbox tr:nth-of-type(4) .ui-state-default {
background-color: orange;
}
Repeating 4-Colors
.ui-selectmanycheckbox tr:nth-of-type(4n+1) .ui-state-default {
background-color: red;
}
.ui-selectmanycheckbox tr:nth-of-type(4n+2) .ui-state-default {
background-color: orange;
}
.ui-selectmanycheckbox tr:nth-of-type(4n+3) .ui-state-default {
background-color: green;
}
.ui-selectmanycheckbox tr:nth-of-type(4n+4) .ui-state-default {
background-color: blue;
}
This isn't possible with a standard <p:selectManyCheckbox>, at least not with this kind of dynamics. If it were static values, you could just have used the CSS3 nth-child() selector for this. With dynamic values in a <p:selectManyCheckbox>, you'd basically need to override its renderer (which is not a trivial job) or to post a feature request (which might take longer than you want).
Your best bet is using <ui:repeat> or <h:dataTable> instead wherein you render a single <p:selectBooleanCheckbox> on a per-row basis. This allows you specifying a styleClass on a per-checkbox basis. This only also requires a technical change in how the selectedMovies property is populated.
Here's a concrete kickoff example with <h:dataTable> (note: the <p:selectManyCheckbox> itself also generates a <table>, so layout-technically there's not so much difference, you can always choose for <ui:repeat> if the table bothers you semantically):
<h:dataTable value="#{bean.movies}" var="movie" styleClass="ui-selectmanycheckbox ui-widget">
<h:column>
<p:selectBooleanCheckbox id="checkbox" converter="javax.faces.Boolean"
value="#{bean.checkedMovieIds[movie.id]}" styleClass="#{movie.type}" />
</h:column>
<h:column>
<p:outputLabel for="checkbox" value="#{movie.title}" />
</h:column>
</h:dataTable>
<p:commandButton value="Submit" actionListener="#{bean.collectMovies}" action="#{bean.submit}" />
Notes:
The <h:dataTable styleClass> uses exactly the same CSS as <p:selectManyCheckbox>, so the checkbox table look'n'feel is exactly the same.
The converter="javax.faces.Boolean" is (actually, to my surprise) mandatory, because it would otherwise set checked values true and false as String instead of Boolean; this problem doesn't exist in <h:selectBooleanCheckbox>, perhaps a PF bug?
The styleClass="#{movie.type}" made in this particular use case more sense than styleClass="#{movie.id}", because it seems a ridiculuous task to specify a separate style class for every individual "id" value which usually represents an unique auto-assigned DB identifier; you can always change it in your actual code if you want.
The actionListener does the job of collecting the selectedMovies before the actual action method. You can of course also do the job in the actual action method, but this it's then not so cleanly separated anymore.
The backing bean look like this (the checkedMovieIds assumes that Movie has a Long id property):
private List<Movie> movies;
private Map<Long, Boolean> checkedMovieIds;
private List<Movie> selectedMovies;
#PostConstruct
public void init() {
movies = populateItSomehow();
checkedMovieIds = new HashMap<Long, Boolean>();
}
public void collectMovies(ActionEvent event) {
selectedMovies = new ArrayList<Movie>();
for (Movie movie : movies) {
if (checkedMovieIds.get(movie.getId())) {
selectedMovies.add(movie);
}
}
}
public void submit() {
System.out.println(selectedMovies);
// ...
}
// +getters (note: no setters necessary for all those three properties)
Assuming that #{movie.type} can have the values action, comedy, fantasy and horror (it's by the way a perfect enum type candidate), then you can style the individual checkboxes as follows:
.action .ui-chkbox-box {
background-color: red;
}
.comedy .ui-chkbox-box {
background-color: orange;
}
.fantasy .ui-chkbox-box {
background-color: green;
}
.horror .ui-chkbox-box {
background-color: blue;
}
I know this solution is a little bit hacky, but it works :)
Xhtml file :
<p:selectManyCheckbox binding="#{requestScope.movieSelect}" layout="pageDirection">
<f:selectItems value="#{bean.movies}" />
</p:selectManyCheckbox>
<script>
(function() {
var selectName = '#{requestScope.movieSelect.clientId}';
var kids = jQuery("input[id*="+selectName+"]");
var index = 0;
<ui:repeat value="#{bean.movies}" var="movie">
jQuery(kids[index++]).parent().next().css('background-color', '#{movie.description}');
</ui:repeat>
}());
</script>
Backing bean :
public class Bean {
private List<SelectItem> movies = Arrays.asList(
new SelectItem("Scarface", "Scarface", "green"),
new SelectItem("Goodfellas", "Goodfellas", "red"),
new SelectItem("Godfather", "Godfather", "blue"),
new SelectItem("Carlito's Way", "Carlito's Way", "yellow"));
public List<SelectItem> getMovies() {
return movies;
}
}
Css file :
.ui-chkbox-box {
background-image : none;
}
p.s. : the css file may not be neccessary.
not sure what your browser targets are, but why not use attribute selectors?
ui-selectmanycheckbox input[value=1] {
color: red;
}
That's just the general idea... I'm not familiar with those controls, but the documentation makes it look like you should be able to make this work...
Using the Ajax helper for CakePHP (currently 1.2.3.8166) to provide an $ajax->autoComplete list of results, and giving a result list back as the rendered view, if you use the mouse (and even the mouse wheel) to scroll results, all is well. Using the arrow keys, on the other hand, has the nasty effect of awkwardly scrolling the view: if I press down, the select box and the whole page move to the bottom of the browser's view pane; pressing up has the opposite effect of moving it to the top.
Has anyone else noticed this behaviour, and thought of something? the resulting list is provided by, e.g., this code (this gets $people from the autoComplete() function in the controller):
<ul>
<?php foreach($people as $person): ?>
<li><?php echo $person['Person']['id']; ?></li>
<?php endforeach; ?>
</ul>
(Just an example, I actually show the id and name / surname / commercial name).
The CSS for the list is as follows:
div.auto_complete {
position: absolute;
width: 250px;
background-color: white;
border: 1px solid #888;
margin: 0px; padding: 0px;
}
div.auto_complete ul{
list-style: none;
margin: 0px;
}
I received the answer to this problem on the cake-php newsgroup (available on http://groups.google.com/group/cake-php ).
The poster pointed to this page with the solution, and I copy it here:
Open the controls.js file (should be in app/webroot/js)
Search for the markPrevious function and change it to:
markPrevious: function() {
if (this.index > 0) {
this.index--;
} else {
this.index = this.entryCount-1;
this.update.scrollTop = this.update.scrollHeight;
}
selection = this.getEntry(this.index);
selection_top = selection.offsetTop;
if (selection_top < this.update.scrollTop) {
this.update.scrollTop = this.update.scrollTop-
selection.offsetHeight;
}
},
Search the markNext function and change it to:
markNext: function() {
if(this.index < this.entryCount-1) {
this.index++;
} else {
this.index = 0;
this.update.scrollTop = 0;
}
selection = this.getEntry(this.index);
selection_bottom = selection.offsetTop+selection.offsetHeight;
if(selection_bottom > this.update.scrollTop+this.update.offsetHeight) {
this.update.scrollTop = this.update.scrollTop + selection.offsetHeight;
}
},
Search for the updateChoices function and change lines
this.stopIndicator();
this.index = 0;
to
this.stopIndicator();
this.update.scrollTop = 0;
this.index = 0;
Finally, try the behavior. If it doesn't work at first, try deleting the cache files in app/tmp/cache (or clear your favorite server-side cache), your browser cache, and try again. Clearing app/tmp/cache worked for me.