Here's my simple code; I'm expecting my atom1 widget (row:0, column:0) to be righ aligned; but can't get it! Any suggestions?
var layout = new qx.ui.layout.Grid();
layout.setRowFlex(0, 1); // make row 0 flexible
layout.setColumnWidth(1, 200); // set with of column 1 to 200 pixel
var container = new qx.ui.container.Composite(layout);
this.getRoot().add(container, {left:200, top:200});
var atom1 = new qx.ui.basic.Atom("Icon Right1", "").set({alignX:'right', alignY:'middle'});
var atom2 = new qx.ui.basic.Atom("Icon Right2", "");
var button1 = new qx.ui.form.Button("First Button", "test/test.png");
container.add(atom1, {row: 0, column: 0});
container.add(atom2, {row: 0, column: 1});
container.add(button1, {row: 1, column: 0});
you have to prevent the atom from growing or it will just fill the cell and have no room to move.
add allowGrowX: false ...
see the qooxdoo playground for an example
Related
**I have no idea what should I do for this error since I'm am really noob at codding
{
var MovieClip(this.root)
var pieces = root.pieces;
var slots = root.slots;
var restart = root.restart;
var winMessage = root.winMessage;
var positions = [];
};
root.setup = function()
{
document.body.style.backgroundColor = lib.properties.color;
createjs.Touch.enable(stage);
stage.mouseMoveOutside = true;
root.drawStart = stage.on("drawstart", root.start, null, true);
};
enter image description here
I am trying to split a sentence in to words and show them into sprite()
var sentence:String = "My name is Subhadip.";
var txt:Array = new Array();
var splittedSentence:Array = sentence.split(" ");
var myArraySprites:Array = new Array();
var myTextImage:Array = new Array();
var div = 40;
for (var i:int = 0; i < splittedSentence.length; i++)
{
var v = 300 - (div * i);
//...
txt[i] = new TextField();
txt[i].autoSize = TextFieldAutoSize.CENTER;
txt[i].text = splittedSentence[i];
var format1:TextFormat = new TextFormat();
format1.size = 24;
txt[i].setTextFormat(format1);
trace(txt[i]);
myArraySprites[i] = new Sprite();
myArraySprites[i].graphics.lineStyle(1, 0x000000, 1);
myArraySprites[i].buttonMode = true;
myArraySprites[i].graphics.beginFill( 0xfffffff );
myArraySprites[i].graphics.drawRect(50, v, 150, div);
myTextImage[i] = new BitmapData(100,v,true,0xffffff);
myTextImage[i].draw(txt[i]);
trace(myTextImage[i]);
//myArraySprites[i].graphics.beginBitmapFill(myTextImage[i]);
//myArraySprites[i].graphics.endFill();
myArraySprites[i].addChild(new Bitmap(myTextImage[i]));
addChild(myArraySprites[i]);
myArraySprites[i].addEventListener(MouseEvent.CLICK, removeThis);
}
function removeThis(e:MouseEvent):void
{
var clickTarget:int = myArraySprites.indexOf(e.currentTarget);
trace("Clicked sprite (id): " + clickTarget);
}
[enter image description here][1]
trying to split a sentence into words and show them in sprite.and also need which sprite i clicked
[1]: https://i.stack.imgur.com/RzHUQ.png
The problem is that you're dealing with screen positions in two different places:
myArraySprites[i].graphics.drawRect(50, v, 150, div);
and
myTextImage[i] = new BitmapData(100,v,true,0xffffff);
Think of it in a more object-oriented way. Each Sprite instance you want to be clickable is a single object. As such it also holds the main properties e.g. the on-screen position determined by it's x and y properties.
Each of those sprites have equal width & height, so make this a global property.
var wid:Number = 150;
var hei:Number = 40;
If we look at your .png, we can see that you want to have a single word centered inside such a sprite. To make things easier, we can use the .align property of the TextFormat class, set it to "center" and make each TextField 150 x 40 by using the wid and hei properties.
Finally each sprite's vertical screen position is shifted up by hei == 40 pixels. So let's determine a start position:
var yPos:Number = 300;
assign it to a sprite instance:
myArraySprites[i].x=50;
myArraySprites[i].y=yPos;
and decrement it by hei inside the for-loop.
Everything put together:
var yPos:Number = 300;
var wid:Number = 150;
var hei:Number = 40;
var sentence:String = "My name is Subhadip.";
var txt:TextField = new TextField();
txt.width = wid;
txt.height = hei;
var format1:TextFormat = new TextFormat();
format1.size = 24;
format1.align = "center";
var splittedSentence:Array = sentence.split(" ");
var myTextImage:Array = new Array();
for (var i:int = 0; i<splittedSentence.length; i++)
{
txt.text = splittedSentence[i];
txt.setTextFormat(format1);
myArraySprites[i] = new Sprite();
myArraySprites[i].x = 50;
myArraySprites[i].y = yPos;
myArraySprites[i].graphics.lineStyle(1, 0x000000, 1);
myArraySprites[i].buttonMode = true;
myArraySprites[i].graphics.beginFill(0xfffffff);
myArraySprites[i].graphics.drawRect(0, 0, wid, hei);
myTextImage[i] = new BitmapData(wid, hei, true, 0xffffff);
myTextImage[i].draw(txt);
myArraySprites[i].addChild(new Bitmap(myTextImage[i]));
addChild(myArraySprites[i]);
myArraySprites[i].addEventListener(MouseEvent.CLICK, removeThis);
yPos -= hei;
}
I want to add a border line below the row whenever column C value changes.
I haven’t touched macro for a long time, this is a script I put together but it doesn’t work as expected. Anyone know where the problem is? Thanks!
function underline() {
var spreadsheet = SpreadsheetApp.getActive();
var sheet = spreadsheet.getActiveSheet();
for (var i = 1; i < 10; i++) {
if (sheet.getRange(spreadsheet.getCurrentCell().getRow() + i, 3) != sheet.getRange(spreadsheet.getCurrentCell().getRow() + i+1, 3)) {
sheet.getRange(spreadsheet.getCurrentCell().getRow() + i, 1, 1, sheet.getMaxColumns()).activate();
spreadsheet.getActiveRangeList().setBorder(null, null, true, null, null, null, '#000000', SpreadsheetApp.BorderStyle.SOLID);
}
}
};
Your original code is a bit convoluted, doing a lot with a single if statement. I took the liberty to separate the complicated bit into a distinct function, findOriginal(cell). The following code adds one line:
function findOriginal(cell) { //offsets given cell until finds new content
while (cell.getValue() == cell.offset(1,0).getValue()) cell = cell.offset(1,0);
return cell;
}
function underline() {
var spreadsheet = SpreadsheetApp.getActive(),
cell = spreadsheet.getSelection().getCurrentCell();
cell = findOriginal(cell);
var sheet = spreadsheet.getActiveSheet();
sheet.getRange(cell.getRow(), 1, 1, sheet.getLastColumn()) // setting the range to border
.setBorder(null, null, true, null, null, null,
'#000000', SpreadsheetApp.BorderStyle.SOLID); // you wrote this line
};
what I'm doing is using jsPDF to create a PDF of the graph I generated. However, I am not sure how to wrap the title (added by using the text() function). The length of the title will vary from graph to graph. Currently, my titles are running off the page. Any help would be appreciated!
This is the code i have so far:
var doc = new jsPDF();
doc.setFontSize(18);
doc.text(15, 15, reportTitle);
doc.addImage(outputURL, 'JPEG', 15, 40, 180, 100);
doc.save(reportTitle);
Nothing to keep the reportTitle from running off the page
Okay I've solved this. I used the jsPDF function, splitTextToSize(text, maxlen, options). This function returns an array of strings. Fortunately, the jsPDF text() function, which is used to write to the document, accepts both strings and arrays of strings.
var splitTitle = doc.splitTextToSize(reportTitle, 180);
doc.text(15, 20, splitTitle);
You can just use the optional argument maxWidth from the text function.
doc.text(15, 15, reportTitle, { maxWidth: 40 });
That will split the text once it reaches the maxWidth and start on the next line.
Auto-paging and text wrap issue in JSPDF can achieve with following code
var splitTitle = doc.splitTextToSize($('#textarea').val(), 270);
var pageHeight = doc.internal.pageSize.height;
doc.setFontType("normal");
doc.setFontSize("11");
var y = 7;
for (var i = 0; i < splitTitle.length; i++) {
if (y > 280) {
y = 10;
doc.addPage();
}
doc.text(15, y, splitTitle[i]);
y = y + 7;
}
doc.save('my.pdf');
To wrap long string of text to page use this code:
var line = 25 // Line height to start text at
var lineHeight = 5
var leftMargin = 20
var wrapWidth = 180
var longString = 'Long text string goes here'
var splitText = doc.splitTextToSize(longString, wrapWidth)
for (var i = 0, length = splitText.length; i < length; i++) {
// loop thru each line and increase
doc.text(splitText[i], leftMargin, line)
line = lineHeight + line
}
If you need to dynamically add new lines you want to access the array returned by doc.splitTextToSize and then add more vertical space as you go through each line:
var y = 0, lengthOfPage = 500, text = [a bunch of text elements];
//looping thru each text item
for(var i = 0, textlength = text.length ; i < textlength ; i++) {
var splitTitle = doc.splitTextToSize(text[i], lengthOfPage);
//loop thru each line and output while increasing the vertical space
for(var c = 0, stlength = splitTitle.length ; c < stlength ; c++){
doc.text(y, 20, splitTitle[c]);
y = y + 10;
}
}
Working Helper function
Here's a complete helper function based on the answers by #KB1788 and #user3749946:
It includes line wrap, page wrap, and some styling control:
(Gist available here)
function addWrappedText({text, textWidth, doc, fontSize = 10, fontType = 'normal', lineSpacing = 7, xPosition = 10, initialYPosition = 10, pageWrapInitialYPosition = 10}) {
var textLines = doc.splitTextToSize(text, textWidth); // Split the text into lines
var pageHeight = doc.internal.pageSize.height; // Get page height, well use this for auto-paging
doc.setFontType(fontType);
doc.setFontSize(fontSize);
var cursorY = initialYPosition;
textLines.forEach(lineText => {
if (cursorY > pageHeight) { // Auto-paging
doc.addPage();
cursorY = pageWrapInitialYPosition;
}
doc.text(xPosition, cursorY, lineText);
cursorY += lineSpacing;
})
}
Usage
// All values are jsPDF global units (default unit type is `px`)
const doc = new jsPDF();
addWrappedText({
text: "'Twas brillig, and the slithy toves...", // Put a really long string here
textWidth: 220,
doc,
// Optional
fontSize: '12',
fontType: 'normal',
lineSpacing: 7, // Space between lines
xPosition: 10, // Text offset from left of document
initialYPosition: 30, // Initial offset from top of document; set based on prior objects in document
pageWrapInitialYPosition: 10 // Initial offset from top of document when page-wrapping
});
When we use linebreak in jsPDF we get an error stating b.match is not defined, to solve this error just unminify the js and replace b.match with String(b).match and u will get this error twice just replace both and then we get c.split is not defined just do the same in this case replace it with String(c).match and we are done. Now you can see line breaks in you pdf. Thank you
Here's my ScrollView:
middle: SC.ScrollView.design({
layout: { top: 36, bottom: 32, left: 0, right: 0 },
backgroundColor: '#ccc',
contentView: SC.ListView.design({
contentBinding: 'Spanish.wordsController.arrangedObjects',
selectionBinding: 'Spanish.wordsController.selection',
contentValueKey: "word",
contentDisplayProperties: 'word english'.w(),
selectOnMouseDown: YES,
exampleView: Spanish.CustomListItemView
})
})
and here is my custom listView row:
Spanish.CustomListItemView = SC.View.extend({
render: function(context, firstTime){
var content = this.get('content');
var word = content.get('word');
var english = content.get('english');
context = context.begin().push(' %# (%#)'.fmt(word,english)).end();
return sc_super();
}
});
The above works as expected, except that I can no longer select views. When I comment out "exampleView: Spanish.CustomListItemView" I can select rows, but they are no longer formatted properly. Why can I no longer select rows when I use exampleView?
Subclass SC.ListItemView instead.
Remove the return sc_super(); line.
Change the context = context.begin().push(' %# (%#)'.fmt(word,english)).end(); line to:
context.push(' %# (%#)'.fmt(word,english));
It should work now.
After getting help on IRC, I made the following changes which fixed the problem:
Spanish.CustomListItemView = SC.ListItemView.extend({
render: function(context, firstTime){
var content = this.get('content');
var word = content.get('word');
var english = content.get('english');
context.push(' %# (%#)'.fmt(word,english));
}
});
I was subclassing the wrong class (note the first line)