3

I want to use real-time CSS styling in a Titanium app with Pixate. In their documentation, they mention a video which demonstrates how to setup this in XCode.

Another video demonstrates this within a Titanium App, but I didn't find an explanation on how to achieve this.

How can I enable real-time CSS styling?

nanoman
  • 1,069
  • 12
  • 27
  • Yeah I tried this but It doesn't look like it monitors the `default.css`. Also, from looking at the css in the bundle, it symlinks it from your project `Resources` dir. – Josiah Hester Apr 18 '13 at 15:01
  • Can you be more specific as to what you mean by real-time styling? – aceofspades Jun 28 '13 at 14:44
  • @ aceofspades: changing a parameter in the css changes the styling in realtime, without recompiling. This is possible because of the Objective-C runtime – brainray Jul 07 '13 at 14:29

2 Answers2

0

Pixate maintains a Titanium module for this very purpose.

https://github.com/Pixate/Titanium-Pixate

Dawson Toth
  • 5,580
  • 2
  • 22
  • 37
  • This doesn't answer the question - there is no documentation on how to use real-time CSS styling with Pixate-Titanium, meaning immediate re-rendering of the views when saving the CSS file. – nanoman Jan 13 '14 at 21:48
  • Actually that's not true. That link shows you how to use and by digging deeper into the docs you will see the monitor changes parameter or method. – Nick Turner May 29 '14 at 14:21
0

After some digging I did find the way to do it. I'm not sure if this is the intended way, however it works fine.

Put this code in your app.js and the simulator will instantly refresh with changes when saving the CSS file.

var PX = require('com.pixate.framework');
PX.styleSheetFromFilePathWithOrigin({ 
    monitor: true,
    origin: 0,
    filename: '/absolute/path/to/app.css'
});
    // you can add multiple css files to monitor
PX.styleSheetFromFilePathWithOrigin({ 
    monitor: true,
    origin: 0,
    filename: '/absolute/path/to/another_file.css'
});
nanoman
  • 1,069
  • 12
  • 27