28 Answers

• Accepted Answer

  Ok, something is fishy in Titanium. But I made it work.
  You need to add a "wrapper" view that holds all your labels, and add only this wrapper to the scrollableview.views[idx].

  It works even without the postInit trick.

  You might want to take in account the fact that scroll event triggers when the scroll stops, so a fast scroll will leave you with empty views :)

  Let me know.

  BTW, let me know when ur app is in Appstore :)

  function drawHealthText(index, posTop, caption, captionValue, postInit, v)
  {
      var textColor = 'white';
  
      if (caption == 'ERROR') {
          textColor = 'orange';
      }
  
      var labelCaption = Titanium.UI.createLabel({
          color:textColor,
          text:caption + ':',
          font:{fontSize:14,fontFamily:'Helvetica Neue',fontWeight:'bold'},
          textAlign:'right',
          width:'auto',
          height:25,
          left:140,
          top:posTop
      });
  
  
  
      var labelValue = Titanium.UI.createLabel({
          color:textColor,
          text:captionValue,
          font:{fontSize:14,fontFamily:'Helvetica Neue',fontWeight:'bold'},
          textAlign:'right',
          width:'auto',
          height:25,
          right:10,
          top:posTop
      });
  
  
      if (postInit) {
          Titanium.API.info(index+' ' + postInit)
          v.add(labelCaption); 
          v.add(labelValue); 
      }
      else {
          v.add(labelCaption);
          v.add(labelValue);
      }
  }
  
  function drawPage(index, postInit)
  {
      var v  =  Titanium.UI.createView({
          backgroundColor:'#f00'
      });
  
      var label = Titanium.UI.createLabel({
          color:'white',
          text:'Page ' + index,
          font:{fontSize:22,fontFamily:'Helvetica Neue',fontWeight:'bold'},
          textAlign:'right',
          width:'auto',
          height:30,
          right:10,
          top:5
      });
  
      v.add(label);
  
  
  
      var posTop = 100;
  
        drawHealthText(index, posTop, 'Logon', '1 user', postInit, v);
        drawHealthText(index, posTop + 20, 'Services', 'OK', postInit, v);
        drawHealthText(index, posTop + 40, 'Ping', '3ms', postInit, v);
        drawHealthText(index, posTop + 60, 'Uptime', '3 days', postInit, v);
        drawHealthText(index, posTop + 80, 'Uptime Max', '100', postInit, v);
        drawHealthText(index, posTop + 100, 'Test', '12', postInit, v);
  
  
     if (postInit) {
          scrollView.views[index].add(v); 
  
      }
      else {
          scrollViews[index].add(v); 
  
      }
  
  }
  

• That warning happens because of a bug in the image resizing that takes place when you set a backgroundImage in a label. I am playing with the Objective-C to look for a fix.

  Changing the code to this will stop that error. IDK if that will help the crash you are seeing, please give it a try.

      var labelGauge = Titanium.UI.createLabel({
          align:'left',
          top:posTop,
          left:posLeft,
          height:12,
          width:percentage,
          borderWidth:1,
          borderColor:'gray'
      });
  
      labelGauge.backgroundImage = 'KS_nav_ui.png';
  

  BTW - Note to Appcelerator. This is happening because setBackgroundImage is being called during the constructor of the label and at that moment in time it has a height and width of 0,0 and the resize call fail.

• Can you supply sample code that demonstrates the crash? Does it happen in the simulator, on the device, both?

• I have not run this application on the phone yet, I was planning on doing that once the basic functionality works in the simulator.

  I was able to reproduce the problem in a sample app. I am posting the contents of a .js file. All you need to do is create a new empty project in Titanium, and change the default app.js file to use a separate file, e.g. scrollview.js.

  var scrollViews = [];
  
  function drawHealthWidget(index, posTop, posLeft, percentage)
  {
      var gaugeBackground = Titanium.UI.createImageView({
          align:'left',
          image:'KS_nav_views.png',
          top:posTop,
          left:posLeft,
          height:12,
          width:100
      });
      scrollViews[index].add(gaugeBackground);
  
      var labelGauge = Titanium.UI.createLabel({
          align:'left',
          top:posTop,
          left:posLeft,
          height:12,
          width:percentage,
          borderWidth:1,
          borderColor:'gray',
          backgroundImage:'KS_nav_ui.png'    
      });
      scrollViews[index].add(labelGauge);
  }
  
  function drawPage(index)
  {
      var label = Titanium.UI.createLabel({
          color:'white',
          text:'Page ' + index,
          font:{fontSize:22,fontFamily:'Helvetica Neue',fontWeight:'bold'},
          align:'right',
          width:'auto',
          height:30,
          right:10,
          top:5
      });
      scrollViews[index].add(label);
  
      var posTop = 100;
  
      drawHealthWidget(index, posTop, 10, 30);
      drawHealthWidget(index, posTop + 70, 10, 3);
      drawHealthWidget(index, posTop + 105, 10, 78);
      drawHealthWidget(index, posTop + 140, 10, 71);
  }
  
  var maxPages = 30;
  
  // Create all empty views
  for (var i = 0; i < maxPages; i++)
  {
      scrollViews[i] = Titanium.UI.createView({backgroundColor:'gray'});
  }
  
  viewStart = 0;
  viewEnd   = 4;
  
  for (var i = viewStart; i <= viewEnd; i++)
  {
      drawPage(i);
  }
  
  var scrollView = Titanium.UI.createScrollableView
  ({
      showPagingControl:false,
      currentPage:2
  });
  scrollView.views = scrollViews;
  
  Ti.UI.currentWindow.add(scrollView);
  
  // Dynamically draw views as user scrolls through
  scrollView.addEventListener('scroll', function(e)
  {
      var boundaryDown = e.currentPage - 1;
      var boundaryUp   = e.currentPage + 1;
  
      if (boundaryDown < 0) 
          { boundaryDown = 0 };
      if (boundaryUp > maxPages) 
          { boundaryUp = maxPages };
  
      if (boundaryDown < viewStart)
      {
          Ti.API.debug('Draw view ' + boundaryDown);
          drawPage(boundaryDown);
  
          viewStart = boundaryDown;
      }
      else if (boundaryUp > viewEnd)
      {
          Ti.API.debug('Draw view ' + boundaryUp);
          drawPage(boundaryUp);
  
          viewEnd = boundaryUp;
      }
  });
  

  This will create a scroll view. Now, simply scroll/swipe to the right and the application will freeze after 3 or 4 swipes.

  As the code runs you will notice a lot of "invalid context 0x0" errors in the output window. I believe that those are relevant and have something to do with it.

  The offending code seems to be in the drawHealthWidget() function. This function creates an image and a label. If either one is commented out, the application will not freeze.

  Please note that I'm using different images, which end up drawing a health gauge with a percentage.

  I was able to reproduce it right away, I hope you can reproduce it too and provide a fix or work-around

  Thank you.

• I have noticed a couple odd behaviors so far. The first is it sometimes does not draw a page. It knows the page exists but draws nothing at all. The next is it throws quite a few errors to the console in Titanium Developer.

  Are you also seeing errors in the console?

  When the app crashes in the simulator, does Titanium Developer crash as well?

  Does it crash if you launch the app in the simulator directly? By directly I mean do not use Titanium Developer to restart the app, just click on the app in the simulator and it crashes?

  I'm not done looking, these are just some questions I have.

• If I just launch the iPhone simulator from the SDK, then the Titanium applications aren't in there. However, I launched the KitchenSink, then switched to the test app, and it did freeze as well.

  Titanium Developer does not crash.

  The errors that I'm seeing in 'debug' mode are these:

  Thu Nov 4 21:30:02 IJFKMacBook.local StackedFreeze[17168] <Error>: CGContextSetInterpolationQuality: invalid context 0x0
  Thu Nov 4 21:30:02 IJFKMacBook.local StackedFreeze[17168] <Error>: CGContextDrawImage: invalid context 0x0
  Thu Nov 4 21:30:02 IJFKMacBook.local StackedFreeze[17168] <Error>: CGBitmapContextCreateImage: invalid context 0x0
  Thu Nov 4 21:30:02 IJFKMacBook.local StackedFreeze[17168] <Error>: CGContextConcatCTM: invalid context 0x0
  Thu Nov 4 21:30:02 IJFKMacBook.local StackedFreeze[17168] <Error>: CGContextSetInterpolationQuality: invalid context 0x0
  Thu Nov 4 21:30:02 IJFKMacBook.local StackedFreeze[17168] <Error>: CGContextDrawImage: invalid context 0x0
  Thu Nov 4 21:30:02 IJFKMacBook.local StackedFreeze[17168] <Error>: CGBitmapContextCreateImage: invalid context 0x0
  Thu Nov 4 21:30:02 IJFKMacBook.local StackedFreeze[17168] <Error>: CGContextConcatCTM: invalid context 0x0
  Thu Nov 4 21:30:02 IJFKMacBook.local StackedFreeze[17168] <Error>: CGContextSetInterpolationQuality: invalid context 0x0
  Thu Nov 4 21:30:02 IJFKMacBook.local StackedFreeze[17168] <Error>: CGContextDrawImage: invalid context 0x0
  Thu Nov 4 21:30:02 IJFKMacBook.local StackedFreeze[17168] <Error>: CGBitmapContextCreateImage: invalid context 0x0
  

  There are a lot more of these, but they all pretty much say the same thing over and over again.

  As soon as I change the drawHealthWidget() function and remove the creation of the label in there, it works and no errors are thrown in the console.

  Any ideas?

• Hi John,

  I tried to set the background image after, per your suggestion, but I'm still seeing the same error messages in the console, and it's still freezing. Sorry.

  I remember playing around with the code before that, removing things like images and borders etc.. It didn't help - I think I even created an empty label. I'm not sure what the issue is exactly, but it seems to have something to do with both things being used together.

• What version of the mobile SDK are you using?

• I'm using:

  Titanium Developer: 1.2.1,
  Titanium SDK: 1.4.1.1,
  iPhone SDK: 4.1

  I also tried using the iPhone SDK 3.2 which is also installed on my computer, with the same results. I can't use Titanium SDK 1.2.0 (which is also installed), since it can't locate any of the iPhone SDKs (just displays "loading …").

• Have you tried a nightly 1.5 build? That's how I do most of my testing.

• I just played around a bit more. What is a bit odd is this. If I change the DrawHealthWidget() function to this, then it will still freeze (though no errors on the console):

  function drawHealthWidget(index, posTop, posLeft, percentage)
  {
      var gaugeBackground = Titanium.UI.createImageView({
      });
      scrollViews[index].add(gaugeBackground);
  
      var labelGauge = Titanium.UI.createLabel({
      });
      scrollViews[index].add(labelGauge);
  }
  

  Maybe it has something to do with the scroll views?

• OK, I downloaded & installed the latest build (rd3357271), reconfigured my project(s) to use 1.5.0.

  Unfortunately, none of my projects launch now. This is the error I'm getting in the console:

  [INFO] Skipping JS compile, running from simulator
  [ERROR] Error: Traceback (most recent call last):
  File "/Library/Application Support/Titanium/mobilesdk/osx/1.5.0/iphone/builder.py", line 869, in main
  execute_xcode("iphonesimulator%s" % iphone_version,["GCC_PREPROCESSOR_DEFINITIONS=__LOG__ID__=%s DEPLOYTYPE=development TI_DEVELOPMENT=1 DEBUG=1 TI_VERSION=%s" % (log_id,sdk_version)],False)
  File "/Library/Application Support/Titanium/mobilesdk/osx/1.5.0/iphone/builder.py", line 792, in execute_xcode
  output = run.run(args,False,False,o)
  File "/Library/Application Support/Titanium/mobilesdk/osx/1.5.0/iphone/run.py", line 31, in run
  sys.exit(rc)
  SystemExit: 1
  

  Not sure what is wrong?

• Hi John,

  Not sure if you saw my comments. The application is crashing now instead of freezing? Are you able to reproduce any of my findings?

  I've spent quite some time creating this app, and it's essentially ready - only that I can't publish it since it's freezing/crashing etc. - so I'm in Limbo here …

  Thank you.

• Hello again,

  I just tried again with the latest nightly build, with the same result. At this point I'd really appreciate some guidance, just so I know where I stand.

  Should I submit an official bug? Will it help to upgrade my subscription to Titanium Professional, which I can do, to have this looked at for sure?

  Will this be addressed in v1.5 and is there an approximate release date?

  I know those are a lot of questions and you guys are busy, but being a developer myself that spent many hours creating this app, it'd be nice to get some feedback so I know where I stand and what my options are to get this app released.

  Thank you!

• We do have public bug tracking in Lighthouse - if you do want to submit a bug, please include:

  • A descriptive title
  • As much detail as possible in the description (your OS, Titanium SDK version, platforms you've verified it on, etc)
  • Tag it with "defect" and "android" and/or "ios" as appropriate
  • Attach a small Titanium project (or even just an app.js) which demonstrates the issue so a developer can quickly duplicate the issue

  You can then track the ticket to see development progress on the issue. Issues that include an example to reproduce are picked off the stack first, so be sure to include one. Also, sometimes breaking your code down into the simplest possible case reveals workarounds or other information that may help you discover what's going wrong.

  Thanks…

• Thank you, I will try that. I had a bit of trouble reproducing it at first (different SDK versions give very different behavior), but I can finally reproduce the crash.

  It's no longer crashing with the background images it seems, but instead when I create two text labels right after each other. It's quite temperamental and really difficult to figure out what exactly triggers it.

  But from all that I've done, it seems as if creating and adding two labels sequentially, inside a function, isn't working well - especially when this is done repeatedly for view objects.

• OK, I submitted the bug in lighthouse yesterday, including all the necessary project files. It should be easily reproducible.

  https://appcelerator.lighthouseapp.com/projects/32238/tickets/2326-multiple-createlabel-calls-inside-scrollableview-freezecrash#ticket-2326-1

  Sorry for the stupid question, but how do I tag my ticket? Can I only do that when I first submit it? Even when I log in and edit, I can't change the subject and can't tag it.

  So for the ticket is unassigned.

  Thank you,
  Ingmar.

• @Kevin - don't want to hijack this post, but it seems Ralf does not agree with you. LH is not public - https://appcelerator.lighthouseapp.com/projects/32238/tickets/2248-transform-parent-and-child-leads-to-flicker#ticket-2248-3

• @Ingmar

  In the drawHealthWidget function you are setting a property align to the label and to the image.
  I might be wrong but I found nothing related to "align" in the public APIs ( I was looking in the github sources, not the documentation) so maybe this breaks some internal reference used by the guys in Titanium ( like for example "parents" or "id").
  So maybe this is the guilty one. Try to set a different name if is a var you need or remove it from the image and use textAlign for the label.

  If I'm wrong let me know :)

• @Tamas

  Thanks for noticing that. Since trying out the v1.5 SDK nightly build, I have slightly updated the sample code. It now crashes even with text-based labels. The bug that I reported has the sample code, but I will report it here as well in a little bit. The latest sample code doesn't draw any images and still has the problem.

  I replaced 'align' with 'textAlign', with the same result. I even removed the aligning alltogether, and it still crashes.

  Any other ideas?

  Thank you,
  Ingmar.

• @Ingmar - can you send me an app.js file where I can see the issue? I'm curious :)

• @Tamas

  Of course. I attached the two .js files to the ticket that I created in Lighthouse (not knowing that it is not for users).

  https://appcelerator.lighthouseapp.com/projects/32238/tickets/2326-multiple-createlabel-calls-inside-scrollableview-freezecrash#ticket-2326-1

  Does that work? If not then I can post the source code here?

• @Ingmar

  I managed to download the files, and I'll try to take a look later tonite.
  Don't get me wrong with the LH - I was sarcastic - I don't really think is closed, as they are encouraging us to post bugs, maybe the guy just had a bad day :).

• @Tamas

  Thank you, I hope you can reproduce it. But even though … not sure if you can help with the bug?

  I'm a little concerned and disappointed to be honest. I submitted a bug which hasn't even been classified yet. I talked to sales, only to be told that only an "Enterprise" subscription will guarantee they will fix the bug (I was considering the Professional subscription).

  I created the app, I'm essentially 95% done, but I'm dead in the water because I can't fix the bug in Titanium …

  Thank you!

• @Ingmar

  I'll try to reproduce it and maybe find a workaround :) ,only that will be later tonite or tomorrow - I still have work to do :)

• @Ingmar

  Ok
  So your issue is that you are trying to change the scrollViews[index] instead of scrollableview.views[index]

  Here is the changed code that works fine. It's messy but you should get the idea.
  You will have to find a way to separate the drawview function for the moment when u initialize the srollableview and the "scroll" moment. I did it with a flag is, and commented some stuff in drawpage - I'm lazy :)- because drawhealth needs the same treatment.

  Let me know if you see what I mean :)

  
  var scrollViews = [];
  
  function drawHealthText(index, posTop, caption, captionValue)
  {
      var textColor = 'white';
  
      if (caption == 'ERROR') {
          textColor = 'orange';
      }
  
      var labelCaption = Titanium.UI.createLabel({
          color:textColor,
          text:caption + ':',
          font:{fontSize:14,fontFamily:'Helvetica Neue',fontWeight:'bold'},
          align:'right',
          width:'auto',
          height:25,
          left:140,
          top:posTop
      });    
      scrollViews[index].add(labelCaption);
  
      var labelValue = Titanium.UI.createLabel({
          color:textColor,
           text:captionValue,
          font:{fontSize:14,fontFamily:'Helvetica Neue',fontWeight:'bold'},
          align:'right',
          width:'auto',
          height:25,
          right:10,
          top:posTop
      });    
      scrollViews[index].add(labelValue);
  }
  
  function drawPage(index, is)
  {
      var label = Titanium.UI.createLabel({
          color:'white',
          text:'Page ' + index,
          font:{fontSize:22,fontFamily:'Helvetica Neue',fontWeight:'bold'},
          align:'right',
          width:'auto',
          height:30,
          right:10,
          top:5
      });
  
      if ( is )     scrollView.views[index].add(label);
      else scrollViews[index].add(label);
  
      var posTop = 100;
  
      // drawHealthText(index, posTop, 'Logon', '1 user');
      // drawHealthText(index, posTop + 20, 'Services', 'OK');
      // drawHealthText(index, posTop + 40, 'Ping', '3ms');
      // drawHealthText(index, posTop + 60, 'Uptime', '3 days');
      // drawHealthText(index, posTop + 80, 'Uptime Max', '100');
      // drawHealthText(index, posTop + 100, 'Test', '12');
  }
  
  var maxPages = 30;
  
  // Create all empty views
  for (var i = 0; i < maxPages; i++)
  {
      scrollViews[i] = Titanium.UI.createView({backgroundColor:'gray'});
  }
  
  viewStart = 0;
  viewEnd   = 4;
  
  
  var scrollView = Titanium.UI.createScrollableView
  ({
      showPagingControl:false,
      currentPage:2
  });
  
  
  for (var i = viewStart; i <= viewEnd; i++)
  {
      drawPage(i);
  }
  
  
  scrollView.views = scrollViews;
  
  Ti.UI.currentWindow.add(scrollView);
  
  // Dynamically draw views as user scrolls through
  scrollView.addEventListener('scroll', function(e)
  {
  
  // alert(e.currentPage);
      var boundaryDown = e.currentPage - 1;
      var boundaryUp   = e.currentPage + 1;
  
      if (boundaryDown < 0) 
          { boundaryDown = 0 };
      if (boundaryUp > maxPages) 
          { boundaryUp = maxPages };
  
      if (boundaryDown < viewStart)
      {
          Ti.API.debug('Draw view ' + boundaryDown);
              drawPage(boundaryDown,true);
              viewStart = boundaryDown;
  
      }
      else if (boundaryUp > viewEnd)
      {
          Ti.API.debug('Draw view ' + boundaryUp);
              drawPage(boundaryUp,true);
              viewEnd = boundaryUp;
  
      }
  });
  

• @Tamas

  Thanks for looking into it. I hope I'm not coming across as annoying, but this is still not working for me. Keep in mind that the reason it crashes for me is because of the drawHealthText() function.

  I applied your changes, including to the drawHealthText() function, and it crashes more less exactly like before. I renamed the variable to postInit, and then applied that to the drawHealthText() function as well.

  Am I doing something wrong? My code is below:

  var scrollViews = [];
  
  function drawHealthText(index, posTop, caption, captionValue, postInit)
  {
      var textColor = 'white';
  
      if (caption == 'ERROR') {
          textColor = 'orange';
      }
  
      var labelCaption = Titanium.UI.createLabel({
          color:textColor,
          text:caption + ':',
          font:{fontSize:14,fontFamily:'Helvetica Neue',fontWeight:'bold'},
          textAlign:'right',
          width:'auto',
          height:25,
          left:140,
          top:posTop
      });
      if (postInit) {
          scrollView.views[index].add(labelCaption); }
      else {
          scrollViews[index].add(labelCaption); }
  
      var labelValue = Titanium.UI.createLabel({
          color:textColor,
           text:captionValue,
          font:{fontSize:14,fontFamily:'Helvetica Neue',fontWeight:'bold'},
          textAlign:'right',
          width:'auto',
          height:25,
          right:10,
          top:posTop
      });
      if (postInit) {
          scrollView.views[index].add(labelValue); }
      else {
          scrollViews[index].add(labelValue); }
  }
  
  function drawPage(index, postInit)
  {
      var label = Titanium.UI.createLabel({
          color:'white',
          text:'Page ' + index,
          font:{fontSize:22,fontFamily:'Helvetica Neue',fontWeight:'bold'},
          textAlign:'right',
          width:'auto',
          height:30,
          right:10,
          top:5
      });
  
      if (postInit) {
          scrollView.views[index].add(label); }
      else {
          scrollViews[index].add(label); }
  
      var posTop = 100;
  
       drawHealthText(index, posTop, 'Logon', '1 user', postInit);
       drawHealthText(index, posTop + 20, 'Services', 'OK', postInit);
       drawHealthText(index, posTop + 40, 'Ping', '3ms', postInit);
       drawHealthText(index, posTop + 60, 'Uptime', '3 days', postInit);
       drawHealthText(index, posTop + 80, 'Uptime Max', '100', postInit);
       drawHealthText(index, posTop + 100, 'Test', '12', postInit);
  }
  
  var maxPages = 30;
  
  // Create all empty views
  for (var i = 0; i < maxPages; i++)
  {
      scrollViews[i] = Titanium.UI.createView({backgroundColor:'gray'});
  }
  
  viewStart = 0;
  viewEnd   = 4;
  
  for (var i = viewStart; i <= viewEnd; i++)
  {
      drawPage(i, false);
  }
  
  var scrollView = Titanium.UI.createScrollableView
  ({
      showPagingControl:false,
      currentPage:2
  });
  scrollView.views = scrollViews;
  
  Ti.UI.currentWindow.add(scrollView);
  
  // Dynamically draw views as user scrolls through
  scrollView.addEventListener('scroll', function(e)
  {
      var boundaryDown = e.currentPage - 1;
      var boundaryUp   = e.currentPage + 1;
  
      if (boundaryDown < 0) 
          { boundaryDown = 0 };
      if (boundaryUp > maxPages) 
          { boundaryUp = maxPages };
  
      if (boundaryDown < viewStart)
      {
          Ti.API.debug('Draw view ' + boundaryDown);
          drawPage(boundaryDown, true);
  
          viewStart = boundaryDown;
      }
      else if (boundaryUp > viewEnd)
      {
          Ti.API.debug('Draw view ' + boundaryUp);
          drawPage(boundaryUp, true);
  
          viewEnd = boundaryUp;
      }
  });
  

  Does it not crash for you? I'm using v1.5 from 2-3 days ago.

  Thank you,
  Ingmar.

• I don't know what to say - but you solved the problem. Pretty awesome, and I owe you one! I'm pretty sure there is something wrong with Titanium, but at least I have a work-around!

  Do you work for Appcelerator?

  Yes, I can definitely let you know when it's available, hopefully that will be soon. Keep in mind that the app is just an interface to a monitoring solution that makes that data (and more) available.

  I'll send you an email as well - I think I saw your email in another post.

  You can feel good about yourself - this has been bugging me for days but since I'm fairly new I didn't even think about doing this. How did you think of this?

  Thank you again!!