Components in Ember-FW

There are many components that have been implemented for you by Ember-FW, which will be a great use to you in developing the Informatics Apps. If you need a reminder about what a component is, see our discussion in our Conceptual Introduction, as well as Ember Guides on Components. While the most complicated features of Ember-FW are discussed above in the Large Concepts, some of these components listed here are actually used quite frequently, but the minimal API documentation was enough to describe their use and function. Because of this, they did not receive a full page, but will be listed here under "Common Components" with a small description. Other components will be used very infrequently, and these will just be linked for your viewing pleasure if you need them.

Common Components

Ember FW has the largest batch of components that are used on a regular basis in the apps, here are some that you might be familiar with. We have not included in this list components related to Modals, Notifications, or Validations because those are described in greater detail within their larger concept page. Here are the most important other components in Ember FW:

  • FwContentBox is a component that is used to make the default panel that is used so frequently in the FW Apps.
  • FwDropdown is a component that is used within the navigation bar to allow for a dropdown with links to multiple different pages. Most commonly used for Admin or Help pages.
  • FwFileUpload is a component that takes all the logic for taking a single file upload, and allows you to upload a file of a specific type to the server.
  • FwInfoIcon is a very common component that displays an information button, which displays a tip when a user hovers over it. Most commonly used to explain things that are unclear in the apps.
  • FwInput is the basic textfield input that we use in the apps. It has a few features above Ember's native Input helper, so it is recommended that you use this instead.
  • FwLoadingSpinner is the basic component which is used to show the typical spinner when the page is still loading.
  • FwPanelScrollable is a component to aid you in making adding a scrollbar to the panel. It is designed to be used within a panel to make a portion of that panel scrollable.
  • FwPromiseButton is a button which shows a spin icon while loading. The Promise button should be used for network requests that use Ember promises.
  • FwTextarea is the basic textarea input that we use in the apps. It has several features above Ember's native Textarea helper, so it is recommended that you use this instead.
  • FwTopLink is the component that is used for links which are in the navigation bar in the apps. It extends Ember's native LinkTo, and adds in one functionality: scrolling the page to the top of the screen when it is clicked.

Rarely Used Components

There are some components in Ember FW that are extended by other components (either in Ember FW or another one of our addons), or are used so infrequently, that it is not worth giving a big description to them, but if you are interested, you can see the API Documentation for them, which are linked in each case: FwDropdownToggle, FwHeader, FwNav, FwPopoverButton, FwPopoverIcon, FwSelect, FwSpinButton, FwTaskButton, FwTooltipButton, and FwTooltipIcon.