Matestack Ui Core
AboutMatestack Ui CoreMatestack Ui VueJsMatestack Ui Bootstrap
2.1
2.1
  • Welcome
  • Migrating from 1.x to 2.0
  • Getting started
    • Installation & Update
    • Concepts & Rails Integration
    • Tutorial
    • Support & Feedback [WIP]
    • Common Issues [WIP]
  • HTML implemented in pure Ruby
    • Overview
    • HTML Rendering
    • Components
      • Component API
      • Component Registry
      • Components on Rails views
    • Pages
      • Page API
      • Rails Controller Integration
    • Apps
      • App API
    • Reusing Rails Views or Partials
  • Built-in Reactivity composed in pure Ruby
    • Overview
    • Emit Client Side Events
      • Onclick Component API
    • Toggle UI States
      • Toggle Component API
    • Call Server Side Actions
      • Overview
      • Action Component API
    • Reactive Forms
      • Overview
      • Form Component API
      • Input Component API
      • Textarea Component API
      • Checkbox Component API
      • Select Component API
      • Radio Component API
      • Nested Forms
    • Partial UI Updates
      • Overview
      • Async Component API
      • Cable Component API
      • Isolated Component API
    • Page Transitions
      • Overview
      • Transition Component API
    • Reactive Collections
      • Overview
      • Collection Component API [WIP]
  • Custom Reactivity implemented in Vue.js
    • Custom Vue.js Components
    • Third party Vue.js components [WIP]
    • Matestack's Vue.js APIs [WIP]
    • Matestack's Vuex API [WIP]
  • Integrations
    • Action Cable
    • Devise
    • Authorization [WIP]
    • CSS Frameworks [WIP]
    • Third Party JavaScript [WIP]
    • Third Party Ruby Gems [WIP]
  • Matestack Addons
    • Create your own Addon [WIP]
  • Testing
    • Capybara & Rspec
  • Community
    • Discord
    • Contribute [WIP]
  • About
    • Core Team
    • Sponsoring [WIP]
    • Legal Details [WIP]
Powered by GitBook
On this page
  • Response
  • Partials and helper methods
  • Local partials on page level
  • Partials defined in modules
  • Helper methods
  • Prepare
  • Params access

Was this helpful?

Edit on GitHub
  1. HTML implemented in pure Ruby
  2. Apps

App API

An app defines a layout within its response method and yields the content of a page in its layout.

Response

Use the response method to define the UI of the app by using Matestack's HTML rendering and optionally calling components.

class SomeApp < Matestack::Ui::App

  def response
    nav do 
      a path: some_rails_path, text: "Navigate!"
    end
    main do
      yield
    end
    footer do
      div id: "div-on-app" do
        SomeComponent.()
      end
    end
  end

end

Partials and helper methods

Use partials to keep the code dry and indentation layers manageable!

Local partials on page level

In the page definition, see how this time from inside the response, the my_partial method below is called:

class SomeApp < Matestack::Ui::App

  def response
    nav do 
      a path: some_rails_path, text: "Navigate!"
    end
    main do
      yield
    end
    footer do
      div id: "div-on-app" do
        SomeComponent.()
      end
      my_partial "foo from app"
    end
  end

  private # optionally mark your partials as private

  def my_partial text
    div class: "nested" do
      plain text
    end
  end

end

Partials defined in modules

Extract code snippets to modules for an even better project structure. First, create a module:

module MySharedPartials

  def my_partial text
    div class: "nested" do
      plain text
    end
  end

end

Include the module in the page:

class SomeApp < Matestack::Ui::App

  include MySharedPartials

  def response
    nav do 
      a path: some_rails_path, text: "Navigate!"
    end
    main do
      yield
    end
    footer do
      div id: "div-on-app" do
        SomeComponent.()
      end
      my_partial "foo from app"
    end
  end

end

Helper methods

Not only can instance methods be used as "partials" but as general helpers performing any kind of logic or data resolving:

class SomeApp < Matestack::Ui::App

  def response
    nav do 
      a path: some_rails_path, text: "Navigate!"
    end
    main do
      if is_admin?
        yield
      else
        plain "not authorized"
      end 
    end
  end

  private # optionally mark your helper methods as private

  def is_admin?
    true # some crazy Ruby logic!
  end

end

Prepare

Use a prepare method to resolve instance variables before rendering a page if required.

class SomeApp < Matestack::Ui::App

  def prepare
    @heading = "Foo"
  end

  def response
    h1 @heading
    nav do 
      a path: some_rails_path, text: "Navigate!"
    end
    main do
      yield
    end
  end

end

Params access

An app can access request information, e.g. url query params, by calling the params method:

class SomeApp < Matestack::Ui::App

  def response
    nav do 
      a path: some_rails_path, text: "Navigate!"
    end
    main do
      plain params[:foo] # "bar" 
      yield
    end
  end

end

Now, visiting the respective route to the page, e.g. via /xyz?foo=bar, the page reads the [:foo] from the params and displays it.

PreviousAppsNextReusing Rails Views or Partials

Last updated 3 years ago

Was this helpful?