Application Type: mobile
Titanium SDK: 3.1.0.GA
Platform & version: iOS 6.1
Device: iOS Simulator
Host Operating System: OSX 10.8.3
Titanium Studio: 3.1.0.201304151600
I'd like to conditionally show/hide a textfield in a TableViewRow. In order to do this I need to expand the height of the row. The following code doesn't work, though. The TableViewRow is actually an Alloy controller. I first tried animating it before I realized that it can't be animated. Now I'm just trying to change the height and that isn't even working. I've tried using the setHeight method along with just setting the height property directly to no avail.
Any ideas?
var notesVisible = false;
function notes_click() {
if(notesVisible == false) {
Ti.API.info('expanding');
$.row.height = 200;
// $.notes_container.setHeight(124);
notesVisible = true;
} else {
Ti.API.info('contracting');
$.row.height = 75;
$.notes_container.setHeight(0);
notesVisible = false;
}
};
There are two good ways of doing this, both should be done from the click event listener.
Method 1) One way is to directly change the "height" variable of the row
Method 2) The second is to create a new row and replace the current row with the new row
Method 1 is more straightforward but I found it to be glitchy depending on what version of the SDK you are using, but with 3.1.0 it should work. Both methods should be called from the 'click' eventListener as its easier to tell Titanium which row to act on based on the click
So here is an example
currentTableview.addEventListener('click',function(e)
{
// DO whatever your row is supposed to do when clicked
// Now lets change the height of the row to a new height, 200 in this example
e.row.height = 200
}
With Method two, it involves creating a new row and then replacing the current row with this call
currentTableview.updateRow(e.index,newlyCreatedUpdatedRow);
I know its an old question asked by some one but the solution provided will not work and i think best solution for this is by making a recursive function and changes the height of your row and need to play with the visibility of views inside that row hopefully will help someone :)
Related
Following the example on the website: https://vega.github.io/editor/#/examples/vega-lite/interactive_bar_select_highlight
I want to programmatically set the selections via signals. I realize that I could emulate a click by doing the following
VEGA_DEBUG.view.signal("select_tuple", {"unit":"","fields":[{"type":"E","field":"_vgsid_"}],"values":[1]})
However, I cannot proceed to select another, e.g., the shift select of the 2
VEGA_DEBUG.view.signal("select_tuple", {"unit":"","fields":[{"type":"E","field":"_vgsid_"}],"values":[2]})
This makes sense, since only shift-click accumulates the state.
I tried modifying the accumulated signal
VEGA_DEBUG.view.signal("select", {"_vgsid_":[1,2],"vlMulti":{"or":[{"_vgsid_":1},{"_vgsid_":2}]}})
However, this does not help. Is this not possible? I understand that a custom solution may be possible in hand-rolled vega, as opposed to that compiled from vega-lite.
Thanks.
Just need to set VEGA_DEBUG.view.signal("select_toggle", true) before adding the new select!!
After much research I made this example of how to change the vega-lite brush programmatically
https://observablehq.com/#john-guerra/update-vega-lite-brush-programmatically
Using #koaning example this stack overflow question I figured that you can change the brush by updating "brush_y" (assuming that your selection is called brush) or change the selection using "brush_tuple" (which doesn't seem to update the brush mark)
viewof chart = {
const brush = vl.selectInterval("brush").encodings("y");
const base = vl
.markBar()
.select(brush)
.encode(
vl.x().count(),
vl.y().fieldQ("Horsepower"),
vl.color().if(brush, vl.value("steelblue")).value("gray")
)
.height(maxY);
return base.data(data).render();
}
update = {
// From https://codepen.io/keckelt/pen/bGNQPYq?editors=1111
// brush_y -> brush_tuple -> brush
// Updates on pixels
chart.signal("brush_y", [by0, maxY / 2]);
await chart.runAsync();
}
Crossposting here in case it might be useful for anyone
I'm trying to create functionality very similar to most websites these days.
The concept is 3 sections the size of the browser, the background images are supposed to be fixed positioned and revealed by the div scrolling up and down.
We need this to function as beautifully on mobile as it does on desktop, and it looks like Famous/angular is the solution.
Here is a pen.
http://codepen.io/LAzzam2/pen/XJrwbo
I'm using famous' Scroll.sync, firing javascript that positions the background image on every start / update / end.
scrollObject.sync.on("update", function (event) {
console.log('update');
test(event);
});
here is the function positioning the backgrounds.
function test(data){
var scroller = document.getElementsByClassName('famous-group');
styles = window.getComputedStyle(scroller[0], null);
tr = styles.getPropertyValue("-webkit-transform").replace('matrix(1, 0, 0, 1, 0,','').replace(')','');
var distanceTop = -(parseInt(tr));
var sections = document.getElementsByClassName('section');
sections[3].style.backgroundPosition="50% "+distanceTop+"px";
sections[4].style.backgroundPosition="50% "+(-(window.innerHeight)+distanceTop)+"px";
sections[5].style.backgroundPosition="50% "+(-(window.innerHeight*2)+distanceTop)+"px";
};
Any input / suggestions / advice would be wonderful, really just looking for a proof of concept with these 3 background images scrolling nicely.
That jittery-ness is unfortunate, I can't tell what would be causing the issue, except maybe the order in which events are fired?
**There are known issues, only works in -webkit browsers as of now
I think your idea to use Famous is good, but probably what I would do, would be taking a different approach to the problem.
You are solving this by touching the DOM, that is exactly what both Angular and Famous are meant to avoid.
If I had to face the same goal, I would probably use a Famous surface for the background instead of changing the property of the main one and synchronize its position with the scrolling view.
So, in your code, it would be something like this:
function test(data){
var scrollViewPosition = scrollObject.getAbsolutePosition();
var newBackgroundPosition = // Calculate the new background position
var newForegroundPosition = // Calculate the new foreground position
var backgroundSurface = backgroundSurface.position.set(newBackgroundPosition);
var foregroundSurface = foregroundSurface.position.set(newForegroundPosition);
};
I am trying to get my brain around what I can and can't reasonably do UI-wise in a multi-platform app. Initially we are only concerned about iOS and Android, but may need a mobile Windows version eventually.
The specific question is: How do I replicate the Android ExpandableListView functionality in iOS? I've tried a few searches, but haven't found a hint. The key I need is collapsible sections. Is that doable with an iOS listview? If so, do you have/know of an example?
The related non-specific question is: What advice do you have for someone just starting out developing in multimobilemono? I've been working from Greg Shackles' excellent book, "Mobile Development in C#" (which has been wildly helpful!), so I've got some basics. But I'm sure there are some hidden landmines when you get into more complex UI design. Any advice would be greatly appreciated.
Thank you!
You can use the UITableView, and merely change the size of your cell to display more content as needed.
Let us discuss DialogViewController (part of MonoTouch.Dialog) which simplifies the setup of a UITableView.
What you could do is create a UIView that contains both the content, and the expanded content. It would be controller with some property, for example:
bool expanded;
public bool Expanded { get { return expanded; }}
set {
if (expanded == value)
return;
Frame = ComputeSize (value);
expanded = value;
}
}
Then, create a UIViewElement:
new RootElement ("My Root") {
new Section () {
new UIViewElement (new MyView ());
}
}
For your first question, perhaps you could try :
https://github.com/OliverLetterer/SLExpandableTableView
i want to show the thumbnail of the previous image taken by camera instead of the cancel button while camera is running ...
Is that possible ?? Need help ..
Yep. Just capture the last image, keep it in memory (or save it to disk), then use it as one of the controls. We can do this using the overlay property of the Titanium.Media.showCamera function. Here is a quick example:
First we need an overlay view to show the image.
var overlayView = Ti.UI.createView();
var imageView = Ti.UI.createImageView({
width:44,
height:44,
left : 5
});
overlayView.add(imageView);
Now this is the function we use to open the camera with the overlay view. Note that we don't have controls so you need to add those (for closing etc). All we do right now is set the overlays image.
Titanium.Media.showCamera({
success:function(event) {
// called when media returned from the camera
imageView.image = event.media;
},
cancel:function() {},
error:function(error) {},
saveToPhotoGallery:true,
allowEditing:true,
mediaTypes:[Ti.Media.MEDIA_TYPE_PHOTO],
overlay : overlayView,
showControls: false // This is important!
});
To really make this work, you may need to save the event.media in a global variable, or use a similiar technique make sure overlayView will not be nulled out / garbage collected.
Also this is a barebones solution, not very robust, but this is the basic method I would use!
What is the equivalent to removeMovieClip() in AS3?
Apparently many have the same question:
StackOverflow:
How to completely remove a movieclip in as3
Remove movie clip as3
How to remove childmovieclip and add to new parent movieclip
Others:
removeMovieClip(this) in AS3?
Destroy/Delete a Movieclip???
Remove movie clip
But none of their solutions seem to work, for me:
Im working on flash CS4 with AS3:
I have a very simple movie with a single button called click. On pressing the button, a new instance of coin is created:
this.click.addEventListener(MouseEvent.CLICK,justclick);
function justclick(e:MouseEvent){
var money=new coin
this.addChild(money)
money.x=e.stageX
money.y=e.stageY
}
It might not be the best code, but it works fine. Now, the coin MovieClip is supposed to show a small animation and remove itself. In good old AS2 I would have added:
this.removeMovieClip()
in the last frame of the animation. But this doesn't exist in AS3.
I have tried, without success:
this.parent.removeChild(this) // 'Cannot access a property or method of nullobject reference'...
this.removeMovieClip() // 'removeMovieClip is not a function'
removeMovieClip(this) //'call to possibly undefined method removeMovieClip'
unloadMovie(this)//'call to possibly undefined method removeMovieClip'
Solutions?
Thanks,
this.parent.removeChild(this);
This one should be working; it's what I use. One problem I had when I switched to AS3 is that sometimes it wouldn't be added as a child right, so you might want to check that. You also have to import flash.display via putting this at the top if you're not already:
import flash.display.*
You should also remove the event listener on it before removing it.
If your animation is ending on frame 20.
note: using 19 because flash count frames from zero(0) similar to array index.
class animatedCloud
{
public function animatedCloud(){
addFrameScript(19, frame20);
}
private function frame20(){
parent.removeChild(this);
}
}
Always ensure that those self removing movieclips can get garbage collected.
This solution wiped away all my instances from a loaded swf's library symbol:
var mc:MovieClip = new definition() as MovieClip;
addChild(mc);
mc.x = 1000 * Math.random();
mc.y = 1000 * Math.random();
mc.addFrameScript(mc.totalFrames - 1, function onLastFrame():void
{
mc.stop();
mc.parent.removeChild(mc);
mc = null;
});
public static function removeDisplayObject(displayObject:DisplayObject):void {
/* normal code
if(displayObject && displayObject.parent){
displayObject.parent.removeChild(displayObject);
}
*/
displayObject ? displayObject.parent ? displayObject.parent.removeChild(displayObject) : null : null;
}
I use, in an extra blank keyframe at the end of the MovieClip which should remove itself:
stop();
MovieClip(parent).removeChild(this);
Found it to be the proper and best solution.