mirror of
https://github.com/zhigang1992/redpotion.git
synced 2026-01-12 22:51:36 +08:00
125 lines
2.5 KiB
Markdown
125 lines
2.5 KiB
Markdown
# Quick start
|
|
|
|
```
|
|
gem install redpotion
|
|
|
|
potion create my_app
|
|
bundle
|
|
rake pod:install
|
|
rake
|
|
```
|
|
|
|
## Installation
|
|
|
|
- `gem install redpotion`
|
|
|
|
If you use rbenv
|
|
|
|
- `rbenv rehash`
|
|
|
|
add it to your `Gemfile`:
|
|
|
|
- `gem 'redpotion'`
|
|
|
|
|
|
## Let's build something
|
|
|
|
Let's start by creating our app, do this:
|
|
|
|
```
|
|
> potion create myapp
|
|
> cd myapp
|
|
> bundle
|
|
> rake pod:install
|
|
> rake
|
|
```
|
|
|
|
Your app should be running now. Type `exit` in console to stop your app.
|
|
|
|
Let's add a text field, a button, and an image to the main screen:
|
|
|
|
Open the `home_screen.rb` file, then add this
|
|
|
|
```ruby
|
|
@image_url = append!(UITextField, :image_url)
|
|
|
|
append UIButton, :go_button
|
|
|
|
@sample_image = append!(UIImageView, :sample_image)
|
|
```
|
|
|
|
Delete this line:
|
|
|
|
```ruby
|
|
@hello_world = append!(UILabel, :hello_world)
|
|
```
|
|
|
|
Now we need to style them so you can see them on your screen.
|
|
|
|
Open up `home_screen_stylesheet.rb`, then add this:
|
|
|
|
```ruby
|
|
def image_url(st)
|
|
st.frame = {left: 20, from_right: 20, top: 80, height: 30}
|
|
st.background_color = color.light_gray
|
|
end
|
|
|
|
def go_button(st)
|
|
st.frame = {below_prev: 10, from_right: 20, width: 40, height: 30}
|
|
st.text = "go"
|
|
st.background_color = color.blue
|
|
st.color = color.white
|
|
end
|
|
|
|
def sample_image(st)
|
|
st.frame = {left: 20, below_prev: 10, from_right: 20, from_bottom: 20}
|
|
st.background_color = color.gray
|
|
|
|
# an example of using the view directly
|
|
st.view.contentMode = UIViewContentModeScaleAspectFit
|
|
end
|
|
```
|
|
|
|
Now let's add the logic. When the user enters a URL to an image in the text field, then tap **Go**, it shows the picture in the image view below.
|
|
|
|
Let's add the event to the go_button:
|
|
|
|
Replace this:
|
|
```ruby
|
|
append UIButton, :go_button
|
|
```
|
|
|
|
With this:
|
|
```ruby
|
|
append(UIButton, :go_button).on(:touch) do |sender|
|
|
@sample_image.remote_image = @image_url.text
|
|
@image_url.resignFirstResponder # Closes keyboard
|
|
end
|
|
```
|
|
|
|
You should end up with this `on_load` method:
|
|
|
|
```ruby
|
|
def on_load
|
|
set_nav_bar_button :left, system_item: :camera, action: :nav_left_button
|
|
set_nav_bar_button :right, title: "Right", action: :nav_right_button
|
|
|
|
@image_url = append!(UITextField, :image_url)
|
|
|
|
append(UIButton, :go_button).on(:touch) do |sender|
|
|
@sample_image.remote_image = @image_url.text
|
|
@image_url.resignFirstResponder # Closes keyboard
|
|
end
|
|
|
|
@sample_image = append!(UIImageView, :sample_image)
|
|
end
|
|
```
|
|
|
|
Now paste this URL in and hit **Go**
|
|
`http://bit.ly/18iMhwc`
|
|
|
|
You should have this:
|
|
|
|
|
|
|