cocoa: custom text in NSCell for NSTableView - nstableview

I have problems for customizing the text in the NSCell for the NSTableView. Below is the main window:
The window has a table view which shows an icon, a title,a progress indicator and a message.As my computer is 10.6, I implement it with cell-based tableview. The custom cell is based on the ImageAndTextCell which is provided by the Apple. The message is drawn like:
- (void)drawWithFrame:(NSRect)cellFrame inView:(NSView *)controlView {
NSMutableDictionary *fontAttributes = [NSMutableDictionary dictionaryWithCapacity:1];
[fontAttributes setObject:[NSFont fontWithName:#"Hei" size:12] forKey:NSFontAttributeName];
if (!self.msg) {
self.msg = #"default";
}
CGRect textFrame = cellFrame;
textFrame.origin.x += 20;
textFrame.origin.y += 20;
[self.msg drawAtPoint:textFrame.origin withAttributes:fontAttributes];
}
msg is a copy NSString property of the cell.
I met two problems:
1 when I select one cell, the message will dismissed,just like:
Only you unselect it, will it show again. How should I do to fix it?
2 I need to custom the title. As you can see, each cell has a title, sae or IBM.
It is the value returned from the delegate:
- (id)tableView:(NSTableView *)aTableView objectValueForTableColumn:(NSTableColumn *)aTableColumn row:(NSInteger)rowIndex;
Can I change the position, color, or font of it?

Try like this and for setting the font you can use setfont api for nscell:-
-(void)awakeFromNib
{
cellArray=[[NSMutableArray alloc]init];
NSCell *cell=[[NSCell alloc]initTextCell:#"firstCellValue"];
NSCell *cell2=[[NSCell alloc]initTextCell:#"secondCellValue"];
mutableDictionary=[NSMutableDictionary dictionary];
[mutableDictionary setObject:cell forKey:#"FirstColumn"];
[mutableDictionary setObject:cell2 forKey:#"secondColumn"];
[cellArray addObject:mutableDictionary];
}
- (NSInteger)numberOfRowsInTableView:(NSTableView *)tableView
{
return [cellArray count];
}
- (id)tableView:(NSTableView *)aTableView objectValueForTableColumn:(NSTableColumn *)aTableColumn row:(NSInteger)rowIndex
{
if ([[aTableColumn identifier] isEqualToString:#"FirstColumn"])
{
NSCell *cell1=[mutableDictionary objectForKey:#"FirstColumn"];
[aTableColumn setDataCell:cell1];
return [cell1 objectValue];
}
else if ([[aTableColumn identifier] isEqualToString:#"secondColumn"])
{
NSCell *cell2=[mutableDictionary objectForKey:#"secondColumn"];
[aTableColumn setDataCell:cell2];
return [cell2 objectValue];
}
else
{
return nil;
}
}

Related

How to make cell color change on double click tornadofx

I need to make cells color in my tableview be changed by right mouse click. My code:
cellFormat { _ ->
graphicProperty().addListener { _ ->
setOnMouseClicked {
if (it.button == MouseButton.SECONDARY)
style {
backgroundColor += c("darkred")
}
}
}
}
second variant:
cellFormat { _ ->
style {
setOnMouseClicked { button ->
if (button.button == MouseButton.SECONDARY) {
backgroundColor += c("darkred")
}
}
} }
I understand that I need to make cell format listener, however I tried different ways and have no result. Can anyone give me a tip?
This sounds like you are marking selections for a later operation. Have you considered a multi-select list with a CSS style applied to selected items?
A checkbox could also be used to mark off records if you have need for a parallel selection mechanism.

Tornadofx Custom Table Cell

how to insert a button or any other kind of component in javafx tableview cell using tornadofx ?
I am in a situation where i have a column header "Action". I need to render several action buttons in the table view .
Use the cellFormat function and assign a container with the buttons to the graphic property of the cell:
column("Name", SomeObject::someproperty).cellFormat {
graphic = hbox(spacing = 5) {
button("Action 1").action { doSomething() }
button("Action 2").action { doSomethingElse() }
}
}

Is it possible to arrows on a pageable container (visual composer)?

I'm working on my WordPress website with Visual Composer.
I need to include a pageable container but it would be great if it can be like a slideshow.
This is my pageable container
Thanks in advance,
Regards :)
Based upon the current version of WP Bakery Page Builder the below works for me:
To build it I created a row with 3 columns, with the pageable container in the middle column and the left and right arrow images in the columns on either side.
Both arrow images and the pageable container were given IDs. In my example the IDs of the arrows were #arrow_prev and #arrow_next respectively. You can give your pageable container any unique ID.
(function ($) {
$(document).ready(function(){
$( '#arrow_prev' ).click( function( e ) {
var pageable_container = $(this).closest(".vc_row").find(".vc_tta-panels-container");
move_pageable_container(pageable_container,'prev');
});
$( '#arrow_next' ).click( function( e ) {
var pageable_container = $(this).closest(".vc_row").find(".vc_tta-panels-container");
move_pageable_container(pageable_container,'next');
});
function move_pageable_container(pageable_container,direction){
// Make a list of the panel IDs
var panel_ids = $(pageable_container.find(".vc_tta-panel"))
.map(function() { return this.id; }) // convert to set of IDs
.get();
// Find position of the active panel in list
var current_active_pos = panel_ids.indexOf($(pageable_container).find(".vc_tta-panel.vc_active").attr('id'));
var new_pos = 0;
switch(direction) {
case 'prev':
if (current_active_pos > 0){
new_pos = current_active_pos-1;
}else{
new_pos = panel_ids.length-1;
}
break;
case 'next':
if (current_active_pos < panel_ids.length-1){
new_pos = current_active_pos+1;
}else{
new_pos = 0;
}
break;
}
// Clear active panels
$(pageable_container.find(".vc_tta-panel")).each(function(i,a) {
$(this).removeClass("vc_active");
});
var new_active_panel = $(pageable_container).find('#'+ panel_ids[new_pos]);
$(new_active_panel).addClass("vc_animating");
$(new_active_panel).addClass("vc_active");
setTimeout(
function(){
$(new_active_panel).removeClass("vc_animating");
}, 350);
}
}
);
})(jQuery);
If you want a pseudo fading-in effect then you can use this additional CSS in your style sheet:
#id_of_pageable_container .vc_tta-panel.vc_animating {
opacity: 0!important;
}
Where #id_of_pageable_container is the ID that you gave your pageable container
A simpler solution with vanilla js only:
The idea is to find the target page button and press it programmatically, so that there is no need to mimic the plugin's animations as in Chaz's solution.
Add js (via Raw JS widget / other means):
function prevSlide () {
const slides = document.getElementsByClassName('vc_pagination-item');
for (let i = 0; i < slides.length; i++) {
if (slides[i].className.includes('vc_active')) {
if (i - 1 < 0) return;
slides[i - 1].firstChild.click();
return;
}
}
}
function nextSlide () {
const slides = document.getElementsByClassName('vc_pagination-item');
for (let i = 0; i < slides.length; i++) {
if (slides[i].className.includes('vc_active')) {
if (i + 1 >= slides.length) return;
slides[i + 1].firstChild.click();
return;
}
}
}
Add button widgets and set href to call js:
For left arrow button,
javascript:prevSlide();
For right arrow button,
javascript:nextSlide();
Hope this helps.
I prefer to use the Post Grid widget for that. Keep in mind that the pageable container is not totally responsive, it doesn't react to swipe touching, but the Post Grid does.
Post Grid is really powerful, although it also has its caveouts. You can create your content with posts and pages, or a custom post type and then filter what you want to show in your slider from the widget options.
In "advanced mode" you can use the Grid Builder to create your own template and control the output.
The only problems that I've found with this method is to set a variable height in sliders and that sometimes it is slow loading content and is not possible to do a lazyload.

Conditional display of QComboBox in QTCreator

I am new to QT and GUI related programming and looking to do a 2 tier selection menu in a project. I appreciate the time taken to help.
Example: Combo box 1 has options like: 1. Screen size - Medium 2. Screen size - large and depending on that I would like to display different options for screen resolution in combo box 2.
The user can change the combo box 1 selection any number of times and box 2 should show the appropriate options.
I have tried using QComboBox.setEnabled(False) and True as was suggested in Disabling QComboBox in pyqt
but it has not worked for me and I am certainly missing something.
Snippet of my code:
void interface::changeFunctionx(int index)
{
delete f;
switch(index)
{
case 0:
version = 1;
functionSely->setVisible(1);
break;
case 1:
version = 1;
//some other function call still seeing how gui works
break;
}
}
The Data of the QComboBox can be re-filled using below logic
QComboBox::clear()
QComboBox::insertItems(0,QStringList);
//Declare the variable needed in the class
class myclass : public QMainWindow {
QList<QString> lst;
QStringList ql1,ql2;
}
Two combo box used in this example. i.e, cbo1 (2 items) (user selection) & cbo2 (re-fill data)
//Combo box fill Data Preparation
//In this example, the below function called only one time (called from the end line of constructor) (to initialize)
void fnPrepareStaticData(){
lst.push_back("Option-1");
lst.push_back("Option-2");
lst.push_back("Option-3");
ql1 = (QStringList(lst));
lst.clear();
lst.push_back("New-1");
lst.push_back("New-2");
lst.push_back("New-3");
ql2 = (QStringList(lst));
}
//slot added to the QComboBox (currentIndexChanged(int index))
void MainWindow::on_cbo1_currentIndexChanged(int index)
{
ui->cbo2->clear();
switch (index) {
case 0:
ui->cbo2->insertItems(0,ql1);
break;
case 1:
ui->cbo2->insertItems(0,ql2);
break;
default:
break;
}
}

How is this navigation control created

The second image on this page from Apple's user interface design guide show a segmented control inside of a tall navigation bar:
https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/Anatomy.html#//apple_ref/doc/uid/TP40006556-CH24-SW1
How has this been done? It seems to me that a UINavigationBar is always 64 pixels high, so I don't understand how they made this taller.
Is it a custom element (which would be surprising in this document), or is there an easy way to achieve this? I'm wondering if it's a UIToolbar... are they merged with the UINavigationBar under iOS 7? If so, how do we do this?
Note that I need to do this in a iPad app, where the UINavigationController is inside a split view controller.
I finally found the solution to this.
I had to override UINavigation bar with my custom subclass in order to change the height. By using the appearance proxy the title and navigation items can be repositioned correctly. Unfortunately the proxy can't be used to shift the back button's arrow up (on iOS 7), so we have to override layoutSubview to handle that.
#define kAppNavBarHeight 66.0
#implementation TATallNavigationBar
- (id)initWithCoder:(NSCoder *)aDecoder {
self = [super initWithCoder:aDecoder];
if (self) {
[self setupAppearance];
}
return self;
}
- (id)init
{
self = [super init];
if (self) {
[self setupAppearance];
}
return self;
}
- (void)setupAppearance {
static BOOL appearanceInitialised = NO;
if (!appearanceInitialised) {
// Update the appearance of this bar to shift the icons back up to their normal position
CGFloat offset = 44 - kAppNavBarHeight;
[[TATallNavigationBar appearance] setTitleVerticalPositionAdjustment:offset forBarMetrics:UIBarMetricsDefault];
[[UIBarButtonItem appearanceWhenContainedIn:[RRSNavigationBar class], nil] setBackgroundVerticalPositionAdjustment:offset forBarMetrics:UIBarMetricsDefault];
[[UIBarButtonItem appearanceWhenContainedIn:[RRSNavigationBar class], nil] setBackButtonBackgroundVerticalPositionAdjustment:offset forBarMetrics:UIBarMetricsDefault];
[[UIBarButtonItem appearanceWhenContainedIn:[RRSNavigationBar class], nil] setBackButtonTitlePositionAdjustment:UIOffsetMake(0, offset) forBarMetrics:UIBarMetricsDefault];
appearanceInitialised = YES;
}
}
- (CGSize)sizeThatFits:(CGSize)size {
return CGSizeMake(self.superview.frame.size.width, kNavBarheight);
}
- (void)layoutSubviews {
static CGFloat yPosForArrow = -1;
[super layoutSubviews];
// There's no official way to reposition the back button's arrow under iOS 7. It doesn't shift with the title.
// We have to reposition it here instead.
for (UIView *view in self.subviews) {
// The arrow is a class of type _UINavigationBarBackIndicatorView. We're not calling any private methods, so I think
// this is fine for the AppStore...
if ([NSStringFromClass([view class]) isEqualToString:#"_UINavigationBarBackIndicatorView"]) {
CGRect frame = view.frame;
if (yPosForArrow < 0) {
// On the first layout we work out what the actual position should be by applying our offset to the default position.
yPosForArrow = frame.origin.y + (44 - kAppNavBarHeight);
}
// Update the frame.
frame.origin.y = yPosForArrow;
view.frame = frame;
}
}
}
#end
Note that it's easy to specify your subclass in XCode: clicking on the UINavigationController gives you access to the UINavigationBar in the left hand column. Click that and change it's subclass in the inspector.
I've also created a Gist for this:
https://gist.github.com/timothyarmes/7080170

Resources