After setting up the base of our ember application we can start doing something more with it. For my tutorials I've picked AdminLTE template to make a admin panel alike application.
Check out previous ember tutorials too:
- Setting up ember-cli development environment with ember 2.1 - Create a frontend web applications that use Django and other backend solutions as it data source.
- Ember application structure - How does an ember.js application looks like?
AdminLTE is a free admin panel template. Doing it the old way we would download the package and use AdminLTE styles and code in our Django (or Ember) templates. In this case it can be done differently. AdminLTE is available as npm package (node package manager) and we can set it as a dependency of our application:
At the time of writing this installed version 2.3.2 and that's what I've added to bower.json:
In the AdminaLTE documentation we will find the class names for the HTML skeleton of header, sidebar and main content area. We can use them in application.hbs - main template file:
outlet is a placeholder for content inserted from child routes, something like a block tag in Django. In this case each page (route) will put its content in the AdminLTE content block.
But we are still missing styles to make it look correctly. As AdminLTE is a dependency installed by bower we have to specify which files from that package we want to include. We can do that by listing them in ember-cli-build.js:
You can find those files under those paths. Those files are also used in the AdminLTE templates showcased in the documentation. For additional JS widgets you will have to add their JS and CSS files.
We have styles and now we can make it look better by adding some content to the main template (application.hbs):
Theme variant is picked by class assigned to body class. With some links and header the page looks like it should. Now we can add actual page to our application - a new route:
This will create a new page under URL /boxes. We can link to in in the side panel using link-to tag:
when generating route we also got boxes.hbs template in app/templates. Let say we want to display three boxes there. Lets start with bootstrap grid:
We could paste a box in every slot but that would be code duplication. To do this better we can create a component:
There will be a template app/templates/components/statistics-box.hbs in which we can add box HTML code:
Now we can use it in our boxes.hbs route template:
We now have three boxes but without icons. Those icons are provided by font-awesome and ionicons. As they are available via npm we can add them as dependencies, for example (bower.json):
And install with
bower install. After that we have to add required files to ember-cli-build.js:
Using destDir we can set the folder to which given file will be inserted when the application is build. CSS files expects font files in
fonts folder so we specify it so that everything works.
We can do the same for ionicons:
And now our boxes have icons visible (sometimes it's required to restart
We have working component styles. Now it's time to make it a real dynamic and reusable component. Component take data in under specified variables and do something with it, usually display in some way. Change the component template (statistics-box.hbs) to:
Aside of yield everything is a variable displaying data assigned to it. The yield tag inserts content from a block tag (if we use the component as a block):
Available icons are listed in the documentation. After making all those changes we get this:
In older ember versions view were responsible for this type of functionality. Now components replaced views and also controllers in many aspects.
In this tutorial I showed up how to use npm packages in ember.js application and how to create routes - pages as well as basic components that in future tutorials will hold most of the logic of our application.
What we will get in the end are models that will operate on Django Rest Framework API, routes of every subpage and many components responsible for doing something with models and their data.