I found a nice looking app made by Kap Lab. I like the components on the left, especially the grey background with rounded corners. It feels like one solid piece of GUI, despite it's made of four different components. I tried to put VBox, make its background grey, round corners and put other components with sligtly less width on the top of it, but it doesn't seem to work. The corners are not rounded and whole thing looks rather ugly :)
It looks like a panel with a tab navigator inside it. CSS for the panel like this:
Panel {
borderStyle: solid;
borderColor: #d2d2d2;
borderThickness: 1;
roundedBottomCorners: true;
backgroundColor: #e1e1e1;
dropShadowEnabled: false;
}
I used Flex 3 Style Explorer to generate that. You could try messing around with it to get the styles you want.
If you mean the box titled "LAYOUT", then it must be a Panel component, which can be easily customized using styles to look that way:
<mx:Style>
.panelTitle
{
font-weight: bold;
color: #ffffff;
}
</mx:Style>
<mx:Panel x="300" title="LAYOUT" headerHeight="20" backgroundColor="#CCCCCC" titleStyleName="panelTitle"
headerColors="[#333333, #333333]" highlightAlphas="[0, 0]"
borderThicknessLeft="3" borderThicknessRight="3" borderThicknessBottom="3" borderThicknessTop="3">
<mx:VBox height="300" width="200" backgroundColor="#FFFFFF" />
</mx:Panel>
Top component is just a VBox.
Inside it, you first have a TabNavigator then a DataGrid and the last component is also a VBox which contains a Hbox with a simple Label and an Accordion
Vbox
TabNavigator
DataGrid
VBox
Hbox
Label
Accordion
Related
I'm using QTableView class in my GUI and I would like the selected row to have the same color whether the TableView is active or inactive.
I tried to set this CSS stylesheet to achieve this:
QTableView:!active {
selection-background-color: palette(Highlight);
selection-color: palette(HighlightedText)
}
On Linux, it works just fine, but on Windows 7, when the TableView loses its focus, the text turns black instead of staying white (the background stays blue, so that part is OK). Am I missing something here ?
You also have to style text color, for example just add:
QTableView:!active {
...
selection-color: white;
}
This works well in python
pal = tbl_list.palette()
pal.setColor(QPalette.Inactive, QPalette.Highlight, pal.color(QPalette.Active, QPalette.Highlight))
tbl_list.setPalette(pal)
<mx:Button id="callButton" x="35" y="6" width="202" height="45" label="Call" alpha="1.0"
borderColor="#FFF600" click="callOneClick(event)"
fillAlphas="[0.94, 1.0, 0.47, 0.47]" fillColors="[#FEDC00, #FEBC00]" fontSize="16"/>
This is the button I'm using in my mxml file. How can I set .png background image to my button and still have button label?
Flex 3 mx buttons allow you to set an image as the background for a button by setting the skin attributes in MXML. You can set different states using the up/over/down values. Your label will appear above the images you set but fillColours and fillAlphas will no longer have any effect.
<mx:Button id="callButton"
label="Call"
overSkin="#Embed(source='../assets/over_skin.png')"
upSkin="#Embed(source='../assets/up_skin.png')"
downSkin="#Embed(source='../assets/down_skin.png')"/>
http://livedocs.adobe.com/flex/3/html/help.html?content=skinning_3.html
You could also assign them using styles in your CSS and setting the styleName property of the button. Your CSS would look like this:
.myButtonStyle {
upSkin: ClassReference("../assets/up_skin.png");
overSkin: ClassReference("../assets/over_skin.png");
downSkin: ClassReference("../assets/down_skin.png");
}
I have a widget class 'BlockWidget' subclass of QLabel, in the ctor I set its qss qss_1, and I want animated effect that when the mouse move on it, it will change its background-color, so I set its qss qss_2, but it seems not working... My code like this:
BlockWidget::BlockWidget(const QString &objname)
{
this->setObjectName(objname);
setAlignment(Qt::AlignCenter);
setStyleSheet(tr("BlockWidget#%1{color:white; background-color: gray; font-size:18px;"
"font-family:'Consolas';}").arg(objectName()));
}
void BlockWidget::mouseMoveEvent(QMouseEvent *ev)
{
setStyleSheet(tr("BlockWidget#%1{color:white; background-color: blue; font-size:18px;"
"font-family:'Consolas';}").arg(objectName()));
repaint();
}
And I have a mainwindow, I instantiated 81 instances of BlockWidget. when my mouse move to one of them, nothing happened. but if I click on it some times, it do change its qss style(its background turns blue)
As stated by the documentation, mouse move events are only sent when you click, drag or release the buttons, if mouse tracking isn't enabled for the widget.
You can detect the mouse entering and leaving the labels by redefining QWidget::enterEvent and QWidget::leaveEvent in your BlockWidget class.
Or you can simply use the :hover QSS pseudo-state without having to redefine any mouse related function:
setStyleSheet("BlockWidget {"
" color:white;"
" background-color: gray;"
" font-size:18px;"
" font-family:'Consolas';"
"}"
"BlockWidget:hover {"
" background-color: blue;"
"}");
PS:
According to Qt style sheet documentation, QLabel doesn't support the :hover pseudo-state, however changing the background or the borders seems to be working fine.
Since your BlockWidget widgets don't have themselves BlockWidget children, and because you set the stylesheet individually to all of them, it should be safe to omit the object name from the QSS selector.
You must enable mouse tracking for your widget http://qt-project.org/doc/qt-4.8/qwidget.html#mouseTracking-prop
Do you know any collapsible flex container that can handle dynamic content that works when pre-collapsed?
I tried the CollapsiblePanel component by Arc90 for Flex, but it did not work when pre-collapsed.
If I have a VBox inside the panel, and I set the "collapsed" property of the CollapsiblePanel to true, the size of the CollapsiblePanel cannot be restored. It seems like this is what is happening:
The CollapsiblePanel's collapsed property is pre-set to true in the MXML markup.
The VBox auto-adjusts its height to 0 since the CollapsiblePanel is collapsed.
When the CollapsiblePanel's collapsed property changes to false (i.e., it is expanded by the user), the VBox does not expand itself because its parent's content area is 0.
Therefore the CollapsiblePanel remains at the same height because its content's height is 0.
Therefore...
Note: This occurs only when the CollapsiblePanel is pre-collapsed, as seen in the markup below.
I've already tried this (didn't work):
<containers:CollapsiblePanel minimize="pnl_minimize(event)"
restore="pnl_restore(event)" height="100%" width="100%" collapsed="true">
<mx:VBox width="100%" height="100%" verticalGap="0">
<mx:LinkButton id="lnkSales1" label="Sales 1" />
<mx:LinkButton id="lnkSales2" label="Sales 2" />
</mx:VBox>
</containers:CollapsiblePanel>
private function pnl_restore(event:Event):void
{
var objPanel:CollapsiblePanel = event.target as CollapsiblePanel;
var objChildArray:Array = objPanel.getChildren();
for each (var obj:Object in objChildArray)
{
obj.invalidateSize();
}
objPanel.invalidateSize();
}
Is there anyone who has succeeded in doing something like this? What component did you use?
Finally got a solution, though it's a bit of a workaround. I allow all the panels to be loaded and then collapse them programmatically instead of pre-collapsing them in the markup. This way their size is already computed and can be restored without any issues when the user restores them.
Does anyone have a better solution?
I have a HorizontalList control that uses a custom ItemRenderer to represent each item as a toggle-button. The list allows drag and drop, and I used this method to rotate the drop feedback (line) into a vertical position instead of horizontal, but with the buttons mashed together, the drop feedback is pretty subtle. I'd like to space out the buttons somehow, so that the drop feedback is more obvious.
I've looked through the properties and nothing stands out. There are padding and margin properties, but their descriptions say they affect the list control itself, not the items.
Below is the code of my ItemRenderer. I've added padding to it, but that doesn't seem to change anything. If I add padding, that affects the inside of the button, not the space between them, and the button control doesn't have margin properties.
I suppose I could base my ItemRenderer on a canvas in order to get a margin, but then I wouldn't inherit all of the functionality of a button.
<?xml version="1.0" encoding="utf-8"?>
<mx:Button
xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="go();"
toggle="true"
>
<mx:Script>
<![CDATA[
private var _val:int = -1;
private function go():void {
this.label = data.title;
_val = data.index;
}
override protected function clickHandler(event:MouseEvent):void{
//todo: bubble an event that causes all other
//buttons in the list to un-toggle
//now do the default clickHandler
super.clickHandler(event);
}
]]>
</mx:Script>
</mx:Button>
How about writing your item renderer as a container (either Canvas or HBox) and placing the Button element inside?
Make a custom skin for your buttons that includes the spacing you need. You may need to combine it with padding styles to ensure that text or icons don't go outside the skin.
It's a bit on the hacky side, but you can also lie about your columnWidth for the actual HorizontalList object. Set it to something larger than your actual itemRenderer width.