I am trying to create a panel with different color header than the regular one. Since there are going to be panels with different header colors, I decided to create different uis for each of them. Here is a sample code for one of them:
#include extjs-panel-ui(
$ui: 'darkgreen',
$ui-border-color: $panel-light-border-color,
$ui-body-border-color: $panel-light-body-border-color,
$ui-header-border-color: $panel-light-header-border-color,
$ui-header-font-family: $panel-light-header-font-family,
$ui-header-font-size: $panel-light-header-font-size,
$ui-header-font-weight: $panel-light-header-font-weight,
$ui-header-color: $panel-light-header-color,
$ui-header-background-color: #666,
$ui-header-text-transform: $panel-light-header-text-transform,
$ui-tool-background-image: $panel-light-tool-background-image
);
after creating it and building my application I included a panel with ui: 'darkgreen' but there is no effect. On the contrary the panel has no css applied. Can someone point out where is the issue?
When your component has framed: true (which is the case of the panel) you should create your UI as -framed.
Try the code below:
* Just a quick note, you should change the name of your UI, but in the panel declare ui: 'darkgreen'
#include extjs-panel-ui(
$ui:"darkgreen-framed",
$ui-border-color: $panel-frame-border-color,
$ui-border-radius: $panel-frame-border-radius,
$ui-border-width: $panel-frame-border-width,
$ui-padding: $panel-frame-padding,
$ui-header-color: #FFF,
$ui-header-font-family: $panel-header-font-family,
$ui-header-font-size: $panel-header-font-size,
$ui-header-font-weight: $panel-header-font-weight,
$ui-header-line-height: $panel-header-line-height,
$ui-header-border-color: $panel-frame-border-color,
$ui-header-border-width: $panel-frame-header-border-width,
$ui-header-border-style: $panel-header-border-style,
$ui-header-background-color: #666,
$ui-header-background-gradient: $panel-header-background-gradient,
$ui-header-inner-border-color: $panel-frame-header-inner-border-color,
$ui-header-inner-border-width: $panel-frame-header-inner-border-width,
$ui-header-text-padding: $panel-header-text-padding,
$ui-header-text-margin: $panel-header-text-margin,
$ui-header-text-transform: $panel-header-text-transform,
$ui-header-padding: $panel-frame-header-padding,
$ui-header-icon-width: $panel-header-icon-width,
$ui-header-icon-height: $panel-header-icon-height,
$ui-header-icon-spacing: $panel-header-icon-spacing,
$ui-header-icon-background-position: $panel-header-icon-background-position,
$ui-header-glyph-color: $panel-header-glyph-color,
$ui-header-glyph-opacity: $panel-header-glyph-opacity,
$ui-header-noborder-adjust: $panel-header-noborder-adjust,
$ui-tool-spacing: $panel-tool-spacing,
$ui-tool-background-image: $panel-tool-background-image,
$ui-body-color: $panel-body-color,
$ui-body-border-color: $panel-body-border-color,
$ui-body-border-width: $panel-frame-body-border-width,
$ui-body-border-style: $panel-body-border-style,
$ui-body-background-color: $panel-frame-background-color,
$ui-body-font-size: $panel-body-font-size,
$ui-body-font-weight: $panel-body-font-weight,
$ui-body-font-family: $panel-body-font-family,
$ui-background-stretch-top: $panel-background-stretch-top,
$ui-background-stretch-bottom: $panel-background-stretch-bottom,
$ui-background-stretch-right: $panel-background-stretch-right,
$ui-background-stretch-left: $panel-background-stretch-left,
$ui-include-border-management-rules: $panel-include-border-management-rules,
$ui-wrap-border-color: null,
$ui-wrap-border-width: null,
$ui-ignore-frame-padding: $panel-ignore-frame-padding
);
I've done this, and it worked for me
Related
I want to display data from Parse in a list from GamesScores class using Container in Codename One, this is what I've tried so far and it's not showing anything nor giving any errors:
Container container = findListCont();
container.setLayout(BoxLayout.y());
container.setScrollableY(true);
ParseQuery<ParseObject> query = ParseQuery.getQuery("GameScore");
List<ParseObject> results = (List<ParseObject>) query.find();
System.out.println("Size: " + results.size());
container.addComponent(results, f);
Please help me out, I'm a new in Codename One. If there tutorials on it, please share or anything to help me achieve the desired results.
I'm actually shocked this isn't failing. You are using the add constraint to place the object result as a constraint and you add the form object into the container...
You need to loop over the results and convert them to components to add into the layout. It also seems that you are using the old GUI builder which I would recommend against.
Generally something like this rough pseudo code should work assuming you are using a box Y layout:
for(ParseObject o : results) {
MultiButton mb = new MultiButton(o.getDisplayValue());
f.add(mb);
}
f.revalidate();
In Ext JS 4, they added a way to override the default coloring scheme by using SASS/Compass, so what I'm trying to do is create a new button style, using extjs-button-ui, and then applying that style to a button. The button's code is as follows:
xtype: 'button',
text: 'should be orange',
ui: 'orange'
My SASS code is as follows:
$button-default-background-color: mix(blue, red);
$orange-button-background-color: mix(yellow, red);
#import 'compass';
#import 'ext4/default/all';
#include extjs-button-ui(
'orange',
$button-small-border-radius,
$button-small-border-width,
$button-default-border-color,
$button-default-border-color-over,
$button-default-border-color-focus,
$button-default-border-color-pressed,
$button-default-border-color-disabled,
$button-small-padding,
$button-small-text-padding,
$orange-button-background-color,
$button-default-background-color-over,
$button-default-background-color-focus,
$button-default-background-color-pressed,
$button-default-background-color-disabled,
$button-default-background-gradient,
$button-default-background-gradient-over,
$button-default-background-gradient-focus,
$button-default-background-gradient-pressed,
$button-default-background-gradient-disabled,
$button-default-color,
$button-default-color-over,
$button-default-color-focus,
$button-default-color-pressed,
$button-default-color-disabled,
$button-small-font-size,
$button-small-font-size-over,
$button-small-font-size-focus,
$button-small-font-size-pressed,
$button-small-font-size-disabled,
$button-small-font-weight,
$button-small-font-weight-over,
$button-small-font-weight-focus,
$button-small-font-weight-pressed,
$button-small-font-weight-disabled,
$button-small-font-family,
$button-small-font-family-over,
$button-small-font-family-focus,
$button-small-font-family-pressed,
$button-small-font-family-disabled,
$button-small-icon-size
);
I have a couple of questions/observations. When I compile this, I get no errors and the standard Ext JS theme with purple buttons, but the button I defined above, has no style... it's just text. These variables are all included in the _all.scss file, which imports the _variables.scss file, which includes the variable definitions that are in variables/_button.scss, and if the vars were undefined, the compiler would whine.
My first question is, why is this not working/what am I missing?
And my second, more broad SASS question, how do I inherit from a mixin? The orange include is actually inheriting all of those variables from the default-small extjs-button-ui. So I want the background-color and name to be orange, but I want everything else to be inherited from the default-small include. Is this possible? I thought something like:
#include extjs-button-ui(
#include extjs-button-ui('default-small'),
'orange',
$button-default-background-color: mix(yellow, red)
}
would be the ticket, but I was apparently horribly wrong. I can inherit a mixin by doing something like:
.orange {
#include extjs-button-ui('default-small', $icon-size: 16px);
$button-default-background-color: mix(yellow, red);
}
But that's not creating an orange ui that I can use in Ext JS... just an orange CSS class that has the button values, but not my background-color. So what am I doing wrong? I've tried looking all over for ways to accomplish this, but nothing's working. Does anyone have any insight?
I am facing an issue where my graph is tree layout and looks fine initially. However, if I choose to change GraphSource upon user input/ clicks using PopulateGraphSource like in the OrgChart example, I get all the nodes stacked on top of each other with no links and all in corner.
I tried resetting graphSource by creating a new one
this.graphSource = new GraphSource();
I also tried to use the Clear method for GraphSource. Neither did solve the problem, I keep having the same issue.
I am using
ObservableCollection<Node> hierarchicalDataSource;
to fill up my GraphSource object.
All I do is create a new one and then call
PopulateGraphSource();
method.
Similar issues: question in telerik support , telerik support different question
Try calling the Layout method on the diagram control. Here is a little fragment of code
TreeLayoutSettings settings = new TreeLayoutSettings()
{
TreeLayoutType = TreeLayoutType.TreeDown,
VerticalSeparation = 60,
HorizontalSeparation=30
};
if (this.diagram.Shapes.Count > 0)
{
settings.Roots.Add(this.diagram.Shapes[0]);
this.diagram.Layout(LayoutType.Tree, settings);
this.diagram.AutoFit();
//this.diagram.Zoom = 1;
}
In Qt Designer I'm creating multiple labels (for instance):
my_label1
my_label2
my_label3
...
my_label n
Then if I want to hide them I do this:
ui->my_label1->hide();
ui->my_label2->hide();
ui->my_label3->hide();
...
ui->my_labeln->hide();
However I would like to define the labels like
my_label[n]
So then I would be able to do this:
for(i=0;i<n;i++)
{
ui->my_label[n]->hide();
}
I read that I can define the widget like:
QLabel* my_label[5];
but is there any way to do the same from Qt Designer?
Thanks in advance!
Finally I decided to do direct assignment:
QLabel* my_label_array[5];
my_label_array[0] = ui->my_label1;
my_label_array[1] = ui->my_label2;
my_label_array[2] = ui->my_label3;
my_label_array[3] = ui->my_label4;
my_label_array[4] = ui->my_label5;
Then I can do for instance:
for(idx=0;idx<6;idx++) my_label_array[idx]->show();
for(idx=0;idx<6;idx++) my_label_array[idx]->hide();
for(idx=0;idx<6;idx++) my_label_array[idx]->setEnabled(1);
for(idx=0;idx<6;idx++) my_label_array[idx]->setDisabled(1);
etc...
Then I was able to perform iterations. I believe is not the cleanest way to do it but given my basic knowledge of Qt is ok for me.
Thank you very much for your answers and your support! This is a great site with great people.
Instead of creating an explicit array, you may be able to name your widgets using a particular scheme and then use QObject::findChildren() on the parent widget to get a list of the widgets you are after.
If you only want to hide widgets, you can put all the widgets you want to hide in an invisible QFrame (set frameShape to NoFrame) and hide them all by calling setVisible(false) on the QFrame. This may cause some unwanted side effects with layouts so you may have to tweak some size policy settings.
In case you are wanting to hide controls so that you can simulate a wizard type UI, you may want to check into QStackedWidget.
I have another dirty workaround for this:
in header file
// .hpp
class UiBlabla : public QWidget {
...
QLabel** labels;
};
in source file
// constructor
ui->setupUi(this);
labels = new QLabel*[10]{ui->label_0, ui->label_1, ui->label_2, ui->label_3,
ui->label_4, ui->label_5, ui->label_6,
ui->label_7, ui->label_8, ui->label_9};
I haven't seen anything in QtDesigner to do that, but there are a couple of relatively easy ways to get that behavior.
1) Simply store the my_labelx pointers (from QtDesigner) in an array (or better, a QVector):
QVector<QLabel*> my_labels;
my_labels.push_back(ui->my_label1);
my_labels.push_back(ui->my_label2);
Then you can iterate through the QVector.
for(int i=0; i < my_labels.size(); ++i) {
my_labels[i]-> hide();
}
// or with QFOREACH
foreach(QLabel* label, my_labels)
label->hide();
There is a little setup needed in terms of adding all the labels to the QVector, but on the plus side you only do that once.
2) Depending on the layout of your gui, you could have all your labels be children of a container object and iterate through the children
When populating my treeview I would like to use the same images that I use in my toolbar etc which are stored in a resource file.
The treeview seems to on accept images via an image list.
I was thinking of reflecting and adding the resources to an image list on load...
How do you guyz n girlz generally do this?
Just for completeness, that "sledge hammer" approach to add all images from a resource
foreach (var propertyInfo in
typeof(Resources).GetProperties(BindingFlags.Static | BindingFlags.NonPublic)
.Where(info => info.PropertyType == typeof (Bitmap))) {
mainImageList.Images.Add(
propertyInfo.Name,
(Bitmap)propertyInfo.GetValue(null, null));
}
I usually have an image list that I populate using images from the resource file. This can easily be done when initializing the form.
Example (with three images in Resources.resx, called one, two and three):
private void PopulateImageList()
{
_treeViewImageList.Images.Add("one", Resources.one);
_treeViewImageList.Images.Add("two", Resources.two);
_treeViewImageList.Images.Add("three", Resources.three);
}