I am attempting to use the CardTableView, and I am able to render cards from my API call. However, I am trying to load multiple UILabels and lay them out using UIStackViews within the content area of the card. The toolbar and bottom bar already have icons and will be used appropriately.
When I embed the stackView and dont set translatesAutoresizingMaskIntoConstraints = false the cards are spaced correctly, as shown in this picture:
However there is none of my labels visible. The following picture shows that when i set translatesAutoresizingMaskIntoConstraints = false the labels show up, but the card spacing is all ruined.
Here is my method for preparing the Content:
private func prepareCardContent() {
contentLabelStackView = UIStackView()
contentLabelStackView.axis = UILayoutConstraintAxis.vertical
contentLabelStackView.distribution = UIStackViewDistribution.equalSpacing
contentLabelStackView.alignment = UIStackViewAlignment.leading
contentLabelStackView.spacing = 0
contentLabelStackView.addArrangedSubview(invitedLabel)
contentLabelStackView.addArrangedSubview(teeUpTitle)
contentLabelStackView.translatesAutoresizingMaskIntoConstraints = false
}
And this is my code for preparing the card itself:
private func preparePresenterCard() {
card.toolbar = toolbar
card.contentView = contentLabelStackView
card.contentViewEdgeInsetsPreset = .vertically5
card.bottomBar = bottomBar
card.depthPreset = .depth3
contentView.addSubview(card)
}
I am unsure what is conflicting with the spacing and layout of the cards with using a nested StackView.
Set a height value to the UIStackView :)
Related
I have created a VirtualList to display books information. My renderer presents each book information as an accordion, where first panel is generic book information (author, title, etc.) and it might have three more panels: annotation, commentary, reviews.
It is working as expected, but I do have formatting problems.
Here is my book renderer:
private final ComponentRenderer<Component, Book> bookRenderer = new ComponentRenderer<>(
book -> {
//info panel
Accordion bookPresentation = new Accordion();
HorizontalLayout bookInfo = new HorizontalLayout();
bookInfo.getStyle().set("background-color", book.getHighlight());
bookInfo.setWidth("100%");
UnorderedList authorsList = createAuthorsList(book.getAuthors());
authorsList.setMinWidth("24%");
VerticalLayout taggedTitle = createTaggedTitle(book);
VerticalLayout stars = createStarRating(book);
VerticalLayout readerRating = createReaderRating(book);
VerticalLayout bookStatus = createStatusField(book);
bookInfo.add(authorsList, taggedTitle, stars, readerRating, bookStatus);
AccordionPanel summary = new AccordionPanel(bookInfo);
summary.addThemeVariants(DetailsVariant.SMALL);
summary.addClassName("book-item");
bookPresentation.add(summary);
//annotation panel
if (book.getAnnotation() != null && !book.getAnnotation().isBlank()) {
TextArea annotation = new TextArea();
annotation.setWidth("75%");
annotation.setValue(book.getAnnotation());
annotation.setReadOnly(true);
annotation.setMaxHeight(MAX_HIGHT);
bookPresentation.add("Аннотация", annotation);
}
if (book.getCommentary() != null && !book.getCommentary().isBlank()) {
TextArea comment = new TextArea();
comment.setValue(book.getCommentary());
comment.setReadOnly(true);
comment.setMaxHeight(MAX_HIGHT);
bookPresentation.add("Комментарий", comment);
}
if (book.getReadersReviews() != null && !book.getReadersReviews().isEmpty()) {
Accordion reviews = new Accordion();
for (ReadersReview review : book.getReadersReviews()) {
TextArea reviewText = new TextArea();
reviewText.setMaxHeight(MAX_HIGHT);
reviewText.setValue(review.getReaderComment());
if(user == null || !user.getReaderName().equalsIgnoreCase(review.getReviewerName())) {
reviewText.setReadOnly(true);
}
reviews.add(review.getReviewerName(), reviewText);
}
bookPresentation.add("Мнение читателей", reviews);
}
return bookPresentation;
});
And here is what I am getting on the screen:
I have separation line between accordion panels, but no separation between two items (books) in the list. I'd prefer to have it otherwise. At least I do need to separate one book from another. I did search Vaadin documentation but didn't find any settings that can display such separator between VirtualList items. I'd like to have this separator to be of a different color and line width than accordion panel separator. I followed Joel advise and added border to the styles.css file and added CSS class to the accordion or to its first panel, but it didn't have any effect.
The gap between items in the displayed VirtualList varies significantly as it can be seen on the screenshot. Sometimes items go one after another, and sometimes distance between them can reach 2+ inches. How can I set a fixed distance between these items?
I have set the width of bookInfo panel to 100% but as you can see, it occupies significantly less. I also specify the width of every component and sum of them should be equal to 100%, but as you can see they aren't aligned. What I am missing there?
To put a separator line between items, you'll want to use CSS. One way to do it is to set a CSS class name on your VirtualList items (via your renderer), say "book-item", and then use some CSS like the following:
.book-item {
border-top: 3px solid darkgray;
}
.book-item:first-of-type {
border-top: none;
}
Is it possible to present a SwiftUI view from a SpriteKit scene?
I have various sprites in the game scene. When certain one receive touch data I want a SwiftUI view to pop up.
In the past I have used something like this to present another UI view.
if bloqsLogo.contains(location) {
if instructionsOn == false {
let pop = InstructionsPopUp()
pop.tag = 104
self.view?.addSubview(pop)
instructionsOn = true
} else
if instructionsOn == true {
if let viewWithTag = self.view!.viewWithTag(104) {
viewWithTag.removeFromSuperview()
instructionsOn = false
}else{
print("nah")
}
}
}
My SKScene is an instance of another SwiftUI view and presented there. A good part of my GUI is done in SwiftUI. I am basically wanting to code as much of my App as I can in SwiftUI while keeping the physics and sprites in a SKScene. All of which is going rather well besides this!
I need to add a new button to existing IG toolbar, which will set a specific value in the table column and then save the record.
Is there any way to create new buttons/change the behavior of existing Interactive Grid toolbar buttons?
I see you are using APEX 5.1. Yes, you can customise toolbar buttons in an interactive grid. For example, you can modify the look and feel of the Save and Add Row buttons and also add a Delete button. Select your interactive grid region and in the property editor, enter a value for Advanced > Static ID. Select Attributes > Advanced > JavaScript Initialization Code and input the following:
function(config) {
let $ = apex.jQuery,
toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),
toolbarGroup = toolbarData.toolbarFind("actions3");
addrowAction = toolbarData.toolbarFind("selection-add-row"),
saveAction = toolbarData.toolbarFind("save"); // Save button
// adding a "Delete" button
toolbarGroup.controls.push({type: "BUTTON",
action: "selection-delete",
icon: "icon-ig-delete",
iconBeforeLabel: true,
hot: true
});
// Modifying the buttons
addrowAction.icon = "icon-ig-add-row";
addrowAction.iconBeforeLabel = true;
addrowAction.hot = true;
saveAction.iconBeforeLabel = true;
saveAction.icon ="icon-ig-save-as";
saveAction.hot = true;
//storing the config
config.toolbarData = toolbarData;
return config;
}
Now run the page to see the customisation.
Here's a nice video that shows how to customise IG toolbar.
https://www.youtube.com/watch?v=_PBdBAfPBfQ
I am using an Infragistics NetAdvantage WebDataGrid with filtering set.
On page load, I would like to open the first filter’s textbox, and set the focus there, so that it is ready for the user to start typing the text with which to filter.
I have seen an example online of how to do this for the jQuery grid, but not for the WebDataGrid
I want something along the lines of:
myWebDataGrid.Behaviors.Filtering.ColumnFilters[2].RuleTextNode.focus;
I am using Infragistics35.Web.v11.2, Version=11.2.20112.2025
To do this you can call enterEditMode on the filter row when your page loads, passing in the specific cell you want edit:
function enterEditFilter() {
var grid = $find('<%= grid.ClientID %>');
var filtering = grid.get_behaviors().get_filtering();
var filterRow = filtering._row;
var cell = filterRow.get_cellByColumnKey('Text');
filtering.enterEditMode(cell);
}
Please note that to do this you have to be able to get access to the filter row. It doesn't appear that there is a way to access this through the public API so I use the private variable _row. This is not a recommended approach as that variable may change, so I suggest that you submit a new product idea to have the filter row added to the public API. You can do this on the following page:
http://ideas.infragistics.com/
Another thing to note is that the default filter type is "All" so you'll also want to change this. You can do this by handling the client side filtering event and setting the rule there:
function grid_filtering(sender, eventArgs) {
var filters = eventArgs.get_columnFilters();
for (var i = 0; i < filters.length; i++) {
var condition = filters[i].get_condition();
if (condition.get_rule() === 0) {
var columnType = filters[i].get_columnType();
if (columnType == 'string') {
condition.set_rule($IG.TextFilterRules.Equals);
}
else if (columnType == 'number') {
condition.set_rule($IG.NumericFilterRules.Equals);
}
}
}
}
I need a select box with options and an on select / on change so i can populate a second select box.
My first instinct was to just create one using a surface with a click event and a renderController / scrollview to make my drop down appear. This works wonderfully except that if I leave and come back to the page the zindex of the scrollview breaks and it scrolls over the container size.
Its a bug I need to deal with but my other problem is that with the small Iphone screen size conventional drop downs just eat to much screen real-estate.
This stackoverflow famo.us: how to handle textbox.onchange events had some great hints on how to edit an InputSurface. I thought using that and looking at the code for a Surface I could do it but no luck.
Any Ideas on how to deal with the lack of a select surface?
You can access the value property from inside the callback function:
function SelectSurface(options) {
Surface.apply(this, arguments);
this.onchange = options.onchange;
this._superDeploy = Surface.prototype.deploy;
SelectSurface.prototype.elementType = 'select';
}
SelectSurface.prototype = Object.create(Surface.prototype);
SelectSurface.prototype.constructor = SelectSurface;
SelectSurface.prototype.deploy = function deploy(target) {
target.onchange = this.onchange;
this._superDeploy(target);
};
var regionSelector = new SelectSurface({
size:[140,40],
onchange: regionSelect(),
content: '<option disabled selected style="display:none;">REGION</option><option value="central">CENTRAL</option><option value="northern">NORTHERN</option><option value="pacific">PACIFIC</option><option value="southern">SOUTHERN</option><option value="western">WESTERN</option>',
});
var regionSelect = function(){
return function() {
alert(this.value);
}
};