Page API

A page orchestrates components within its response method. A Rails controller action references a page (and its corresponding app) in its render call. Thus a matestack page substitutes a typical Rails view.
Use core components
app/matestack/example_app/pages/example_page.rb
class ExampleApp::Pages < Matestack::Ui::Page
​
  def response
    div do
      plain "Hello World from Example Page!"
    end
  end
​
end
Use registered custom components
Imagine having created and registered a custom component card. Go ahead and use it on your page:
app/matestack/example_app/pages/example_page.rb
class ExampleApp::Pages < Matestack::Ui::Page
​
  def response
    div do
      # calling your registered card component without using matestack_component helper!
      card title: "hello"
    end
  end
​
end
Access request params
visit "/my_action_path/?foo=bar"
app/matestack/example_app/pages/example_page.rb
class ExampleApp::Pages < Matestack::Ui::Page
​
  def response
    div do
      plain params[:foo] #--> bar
    end
  end
​
end
Prepare method
The prepare method is called before rendering.
app/matestack/example_app/pages/example_page.rb
class ExampleApp::Pages < Matestack::Ui::Page
​
  def prepare
    @some_data = "data!"
  end
​
  def response
    div do
      plain @some_data #--> "data!"
    end
  end
​
end
Use pure Ruby on pages
app/matestack/example_app/pages/example_page.rb
class ExampleApp::Pages < Matestack::Ui::Page
​
  def prepare
    @some_data = [1,2,3,4,5]
  end
​
  def response
    div do
      unless @some_data.empty?
        @some_data.each do |data|
          plain data
        end
      else
        plain "no data given"
      end
    end
  end
​
end
Use instance methods
app/matestack/example_app/pages/example_page.rb
class ExampleApp::Pages < Matestack::Ui::Page
​
  def prepare
    @some_data = [1,2,3,4,5]
  end
​
  def response
    div do
      unless @some_data.empty?
        @some_data.each do |data|
          plain calculated_value(data)
        end
      else
        plain "no data given"
      end
    end
  end
​
  def calculated_value data
    return data*2
  end
​
end
Use local partials
app/matestack/example_app/pages/example_page.rb
class ExampleApp::Pages < Matestack::Ui::Page
​
  def response
    div do
      my_simple_partial
      br
      my_partial_with_param "foo"
      br
      my_partial_with_partial
    end
  end
​
  def my_simple_partial
    span id: "my_simple_partial" do
      plain "some content"
    end
  end
​
  def my_partial_with_param some_param
    span id: "my_partial_with_param" do
      plain "content with param: #{some_param}"
    end
  end
​
  def my_partial_with_partial
    span id: "my_partial_with_partial" do
      my_simple_partial
    end
  end
​
end
renders to:
<div>
​
  <span id="my_simple_partial">
    some content
  </span>
​
  <br/>
​
  <span id="my_partial_with_param">
    content with param: foo
  </span>
​
  <br/>
​
  <span id="my_partial_with_partial">
​
    <span id="my_simple_partial">
      some content
    </span>
​
  </span>
​
</div>
Use partials from included modules
app/matestack/pages/my_shared_partials.rb
module Pages::MySharedPartials
​
  def my_partial_with_param some_param
    span id: "my_partial_with_param" do
      plain "content with param: #{some_param}"
    end
  end
​
end
app/matestack/example_app/pages/example_page.rb
class ExampleApp::Pages < Matestack::Ui::Page
​
  include Pages::MySharedPartials
​
  def response
    div do
      my_simple_partial
      br
      my_partial_with_param "foo"
      br
      my_partial_with_partial
    end
  end
​
  def my_simple_partial
    span id: "my_simple_partial" do
      plain "some content"
    end
  end
​
  def my_partial_with_partial
    span id: "my_partial_with_partial" do
      my_simple_partial
    end
  end
​
end
renders to:
<div>
​
  <span id="my_simple_partial">
    some content
  </span>
​
  <br/>
​
  <span id="my_partial_with_param">
    content with param: foo
  </span>
​
  <br/>
​
  <span id="my_partial_with_partial">
​
    <span id="my_simple_partial">
      some content
    </span>
​
  </span>
​
</div>
SPA-like Apps - Previous
App API
Next - SPA-like Apps
Transitions
Last updated 3 weeks ago