motion-pixatefreestyle 2.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: 27086a58c7cab6f92a218e9874a28d26c19d1727
4
+ data.tar.gz: 077e1555d27c761f2c843364689a7bead1ac18f0
5
+ SHA512:
6
+ metadata.gz: eca8755e6424bd8ac45c2abe49d5cf296944cd022355ca5ab3f0014007d7b7e813f095cfe707559cbba143c258e4f5958b241a95c07a412d77814ff41336d586
7
+ data.tar.gz: 261fca43cc393602e32e36d26631c8b8d571c61ee1a3cbc18b85028f6000ab618ac76c1f4412636c102e2a097d7d6ca57464f50c5da7cb673232cbd9cff600bf
@@ -0,0 +1,120 @@
1
+ RubyMotion-Pixate
2
+ =================
3
+
4
+ Pixate gem for RubyMotion.
5
+
6
+
7
+ ## Requirements
8
+
9
+ - RubyMotion 1.0 or greater (see http://www.rubymotion.com).
10
+ - The *motion-pixate* 2.1 gem requires PixateFreestyle Framework 2.1
11
+
12
+ ## Setup
13
+
14
+ 1. Download the PixateFreestyle Framework package from http://www.pixate.com/ and copy the `PixateFreestyle.framework` folder into `vendor` directory (or alternatively just create a symbolic link). Create the `vendor` directory if it does not exist. You should have something like this.
15
+ ```
16
+ $ ls vendor/PixateFreestyle.framework
17
+ /Headers/ PixateFreestyle Resources/ Versions/
18
+ ```
19
+
20
+ 2. Edit the `Rakefile` of your RubyMotion project and add the following require lines.
21
+ ```ruby
22
+ require 'rubygems'
23
+ require 'motion-pixate'
24
+ ```
25
+
26
+ 3. Still in the `Rakefile`, set up the `framework` variable in your application configuration block.
27
+ ```ruby
28
+ Motion::Project::App.setup do |app|
29
+ # ...
30
+ app.pixate.framework = 'vendor/PixateFreestyle.framework'
31
+ end
32
+ ```
33
+
34
+ 4. Note: As of Pixate 1.1 beta 4, you need to add the following line to your `app_delegate` file in the `application(application, didFinishLaunchingWithOptions:launchOptions)` method before the `@window.makeKeyAndVisible` call:
35
+ ```ruby
36
+ @window.styleMode = PXStylingNormal
37
+ ```
38
+
39
+ 5. Create the `default.css` in `resources` directory, or copy it from the pixate-blue theme.
40
+
41
+ Note: To install the motion-pixate gem, see the [RubyGems site](https://rubygems.org/gems/motion-pixate).
42
+
43
+ ## Example
44
+
45
+ We'll take the Timer example that comes with RubyMotion and add Pixate and quickly style the application. Start by following the Setup steps above to add Pixate to the Timer project.
46
+
47
+ Type `rake` to make sure everything is good so far. You should see the Timer app running.
48
+
49
+ ![Timer](https://raw.github.com/Pixate/RubyMotion-Pixate/master/Screenshots/timer_run.png)
50
+
51
+ ## Add the CSS File
52
+
53
+ In the `default.css` file you added prior, let's add a simple entry:
54
+
55
+ ```css
56
+ button {
57
+ background-color: red;
58
+ }
59
+ ```
60
+
61
+ `Rake` again and you should see this:
62
+
63
+ ![Red Button](https://raw.github.com/Pixate/RubyMotion-Pixate/master/Screenshots/red_button.png)
64
+
65
+ Let's pretty this button up with the following CSS:
66
+
67
+ ```css
68
+ button {
69
+ color : #446620;
70
+ background-color : linear-gradient(#87c44a, #b4da77);
71
+ border-width : 1px;
72
+ border-color : #84a254;
73
+ border-radius : 10px;
74
+ font-size : 15px;
75
+ font-weight : bold;
76
+ }
77
+ ```
78
+
79
+ `Rake` again and you should see this:
80
+
81
+ ![Green Button](https://raw.github.com/Pixate/RubyMotion-Pixate/master/Screenshots/green_button.png)
82
+
83
+ ## Add a Styling ID
84
+
85
+ Lastly, let's change the background color. Let's add an ID to our background view. In the `timer_controller.rb` file, add the following line before the `end` of `viewDidLoad`:
86
+
87
+ ```css
88
+ view.styleId = 'myView'
89
+ ```
90
+
91
+ What's we've done here is add a `styleId` to the view so we can style it by name. Now add the following CSS after your button CSS that was already added:
92
+
93
+ ```css
94
+ #myView {
95
+ background-color: linear-gradient(#000000, #f2f4f6);
96
+ }
97
+ ```
98
+
99
+ Now you have a beautiful interface with just a few lines of CSS!
100
+
101
+ ![Final App](https://raw.github.com/Pixate/RubyMotion-Pixate/master/Screenshots/background_view.png)
102
+
103
+ ## SASS
104
+
105
+ Pixate gem supports [Sass](http://sass-lang.com/) to generate the stylesheet. Create the `sass` directory and `default.scss` with the `rake pixate:init` command. Then, `rake pixate:sass` command generates the stylesheet from `default.scss`.
106
+
107
+ You could specify the Sass output style through `style` environment variable. For example,
108
+ ```
109
+ $ rake pixate:sass style=compressed
110
+ ```
111
+
112
+ You could use `nested`, `expanded`, `compact` and `compressed` as output style.
113
+
114
+ ## REPL
115
+
116
+ Pixate gem provides "style" method in REPL. You could change the stylesheet at the moment in REPL. For example,
117
+ ```
118
+ (main)> style "button { color : blue; }"
119
+ (main)> style "button { background-color: red; border-radius: 20pt; }"
120
+ ```
@@ -0,0 +1 @@
1
+ require "motion/project/pixatefreestyle"
@@ -0,0 +1,94 @@
1
+ unless defined?(Motion::Project::Config)
2
+ raise "This file must be required within a RubyMotion project Rakefile."
3
+ end
4
+
5
+ class PixateFreestyleConfig
6
+ attr_accessor :framework
7
+
8
+ def initialize(config)
9
+ @config = config
10
+ end
11
+
12
+ def framework=(path)
13
+ if @framework != path
14
+ @config.unvendor_project(@framework)
15
+ @framework = path
16
+ @config.vendor_project(path, :static, :products => ['PixateFreestyle'], :headers_dir => 'Headers')
17
+ create_code
18
+ end
19
+ end
20
+
21
+ private
22
+
23
+ def create_code
24
+ code = <<EOF
25
+ # This file is automatically generated. Do not edit.
26
+
27
+ def style(str)
28
+ PixateFreestyle.initializePixateFreestyle
29
+ PixateFreestyle.styleSheetFromSource(str, withOrigin:0)
30
+ PixateFreestyle.updateStylesForAllViews
31
+ end
32
+ EOF
33
+ pixate_file = './app/pixatefreestyle_code.rb'
34
+ create_stub(pixate_file, code)
35
+ add_file(pixate_file)
36
+ end
37
+
38
+ def create_stub(path, code)
39
+ if !File.exist?(path) or File.read(path) != code
40
+ File.open(path, 'w') { |io| io.write(code) }
41
+ end
42
+ end
43
+
44
+ def add_file(path)
45
+ files = @config.files.flatten
46
+ @config.files << path unless files.find { |x| File.expand_path(x) == File.expand_path(path) }
47
+ end
48
+ end
49
+
50
+ module Motion; module Project; class Config
51
+
52
+ variable :pixatefreestyle
53
+
54
+ def pixatefreestyle
55
+ @pixatefreestyle ||= PixateFreestyleConfig.new(self)
56
+ end
57
+
58
+ end; end; end
59
+
60
+ namespace 'pixatefreestyle' do
61
+ desc "Create initial stylesheet files"
62
+ task :init do
63
+ if Dir.glob("sass/default.s[ac]ss").empty?
64
+ mkdir_p "sass"
65
+ touch "sass/default.scss"
66
+ App.info 'Create', 'sass/default.scss'
67
+ end
68
+
69
+ unless File.exist?("resources/default.css")
70
+ mkdir_p "resources"
71
+ touch "resources/default.css"
72
+ App.info 'Create', 'resources/default.css'
73
+ end
74
+ end
75
+
76
+ desc "Compile SASS/SCSS file"
77
+ task :sass do
78
+ unless sass_path = Dir.glob("sass/default.s[ac]ss").first
79
+ warn "Not found `sass/default.scss'"
80
+ exit
81
+ end
82
+
83
+ unless File.exist?("resources")
84
+ mkdir_p "resources"
85
+ end
86
+
87
+ style = ""
88
+ if ENV['style'].to_s.length > 0
89
+ style = "--style #{ENV['style']}"
90
+ end
91
+ sh "sass #{sass_path} resources/default.css #{style}"
92
+ App.info 'Compile', sass_path
93
+ end
94
+ end
metadata ADDED
@@ -0,0 +1,64 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: motion-pixatefreestyle
3
+ version: !ruby/object:Gem::Version
4
+ version: '2.1'
5
+ platform: ruby
6
+ authors:
7
+ - Paul Colton
8
+ - Shizuo Fujita
9
+ autorequire:
10
+ bindir: bin
11
+ cert_chain: []
12
+ date: 2014-02-24 00:00:00.000000000 Z
13
+ dependencies:
14
+ - !ruby/object:Gem::Dependency
15
+ name: sass
16
+ requirement: !ruby/object:Gem::Requirement
17
+ requirements:
18
+ - - '>='
19
+ - !ruby/object:Gem::Version
20
+ version: '0'
21
+ type: :runtime
22
+ prerelease: false
23
+ version_requirements: !ruby/object:Gem::Requirement
24
+ requirements:
25
+ - - '>='
26
+ - !ruby/object:Gem::Version
27
+ version: '0'
28
+ description: Pixate Freestyle integration for RubyMotion projects
29
+ email:
30
+ - paul@pixate.com
31
+ - watson1978@gmail.com
32
+ executables: []
33
+ extensions: []
34
+ extra_rdoc_files: []
35
+ files:
36
+ - README.md
37
+ - lib/motion/project/pixatefreestyle.rb
38
+ - lib/motion-pixatefreestyle.rb
39
+ homepage: https://github.com/Pixate/RubyMotion-PixateFreestyle
40
+ licenses:
41
+ - Apache-2.0
42
+ metadata: {}
43
+ post_install_message:
44
+ rdoc_options: []
45
+ require_paths:
46
+ - lib
47
+ required_ruby_version: !ruby/object:Gem::Requirement
48
+ requirements:
49
+ - - '>='
50
+ - !ruby/object:Gem::Version
51
+ version: '0'
52
+ required_rubygems_version: !ruby/object:Gem::Requirement
53
+ requirements:
54
+ - - '>='
55
+ - !ruby/object:Gem::Version
56
+ version: '0'
57
+ requirements: []
58
+ rubyforge_project:
59
+ rubygems_version: 2.1.11
60
+ signing_key:
61
+ specification_version: 4
62
+ summary: motion-pixatefreestyle allows RubyMotion projects to easily embed the Pixate
63
+ Freestyle Framework.
64
+ test_files: []