Titanium 2.0 Issues.

[iantearle]

Ok, so I may be early on this one, but I have been testing with the latest build:

I have a ScrollView with a view inside that is offset to allow for the drop shadow. Works brilliantly until I add an image to the view. As soon as I do the drop shadow is no longer visible.

Appcelerator have clearly done something different here, as before the image would not obey the rounded corners on the view, now they do. Go figure.

Let me know if you want me to create an app.js test case.

[omorandi]

Yes please, let's start creating some test case. I've just added a tests directory to the repo and some quick guidelines on how a test case should be created, just for smoothing the process. Btw 2.0 will change a lot in how views are handled. I still have to check out how things work there.

[jaraen]

I've been working on this issue for a while without success :(

First, on iOS, Titanium 2 clips the views to their bounds, since shadows are drawn out of the natural bounds of a view, they are cutted off. My first thought was to force in xCode not to clip nor mask a view to its bounds

        self.layer.masksToBounds = NO; 
        self.clipsToBounds = NO;
       // self.superview.layer.masksToBounds = NO; //trying to avoid be clipped by parent view, but does not work
      //  self.superview.clipsToBounds = NO;

Which is not enough. Something strange happens in the draw cycle. Now a simple view can drop a shadow. But if we add some children view to it, then the shadow does not work in the parent IF the view has a solid background (a color or image). If the background is transparent, the shadow is dropped correctly in the children.

But in some cases, closing and reopening the window in titanium draws the shadow correctly.

Appart of this, if the parent uses Ti.UI.SIZE for the width or height, it clips the children shadow, as we can expect with the new titanium 2 behavior. Hope this helps.

I've sent a pull request with a comment in the readme file about the titnaium 2 behavior, among other updates.

[iantearle]

Sounds perfect sense to me. I'm really not convinced by Ti2.

[robinmajor]

Hi, what is the status on this module with Titanium 2.x? Should version 0.4 address the issues noted above by jaraen or is a new version still being worked on to address outstanding issues? I'm having an issue where putting a shadow on a button with borderColor, borderRadius, and backgroundGradient properties draws the button with square corners instead of rounded.

[jaraen]

the status has not changed. I'm using the module correctly with Titanium 2, but requires a few precautions. I haven't found a final solution, so here is my workaround. I'm using this module intensively with Ti2 following these rules:

• Always set up all shadow properties (shadowOpacity, shadowRadius and shadowOffset). Do not leave null or undefined any of them.
• When you add or remove a child from a view, the parent view will lose the shadow. So, for parent views, assign shadow when the children have been added. You can do this with the setShadow method. I use to use a setTimeout function in some exceptional cases, but probably the postLayout event is also ok to do this.

I should study carefully the draw cycle of Ti.Views to understand better what is happening but, by now, I haven't time to do it and these tricks are working pretty fine.

[jaraen]

just one more note, I've never tried to shadow a view with backgroundGradient, but I know that backgroundGradients and borderRadius use to be incompatibles in some cases. I.e. if you use backgroundGradient in the rows of a grouped tableview (with round corners), the corners turn rect. I do not know if this case is related but, if setting the shadow after the button is drawn does not work for you, consider using an image with the gradient for the background instead of the backgroundGradient property.

[robinmajor]

Thanks Javier. I tried lots of variations and finally got it working by calling setShadow() for the button on the window open event listener. One minor issue is that the selected/pressed state of the button displays with square corners, but I can live with this. I'm using borderRadius, borderColor, and backgroundImage (instead of backgroundGradient).

[jaraen]

just a small note to confirm that postLayout event is the best way to add a shadow to a view with children views in Titanium 2. As easy as

    var postLayoutCallback  = function(e) {
        view.removeEventListener('postlayout', postLayoutCallback);
        view.setShadow({
             shadowOffset:{x:0, y:6},
             shadowRadius:4,
             shadowOpacity:0.5
         });            
    }

    view.addEventListener('postlayout', postLayoutCallback);

I think I'll add this comment to the readme file...