mirror of
https://github.com/zhigang1992/redpotion.git
synced 2026-04-29 12:55:31 +08:00
Added skeleton of MKDocs, and pulled in info from README
This commit is contained in:
124
docs/quick_start.md
Normal file
124
docs/quick_start.md
Normal file
@@ -0,0 +1,124 @@
|
||||
# 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:
|
||||
|
||||

|
||||
|
||||
Reference in New Issue
Block a user