Getting started with Polymer 1.1.0 – Part 3

//Getting started with Polymer 1.1.0 – Part 3

Getting started with Polymer 1.1.0 – Part 3

This post is a follow-up to Getting started with Polymer 1.1.0 – Part 1 and Part 2 and will continue with the implementation of more Polymer web component into the app.

Google Cards

The CardView  has been added to Android with API level 21 that corresponds to Android 5.0. CardViews extends the FrameLayout  class and lets you show information inside cards that have a consistent look across the platform. CardView widgets can have shadows and rounded corners.

To create a card with a shadow, use the card_view:cardElevation  attribute. CardView uses elevation and dynamic shadows in Android. To implement them in Android, one needs source code similar to:

A paper-card (the Polymer equivalent to CardView) just needs some HTML and an import.

See the HTML outline of a simple paper-card with a heading below.

In addition we are importing <paper-card>  and  <paper-button>

The app should now look like as presented below with a simple CardView element and a button that implements the nice looking ripple effect that comes with Android 5.

Polymer with

Polymer paper-card with paper-button

 

A more sophisticated card can be created by adding additional code:

This new card has five  <paper-icon-button> that are implementing a star as icon graphic. This can be  used later on for some rating system or other app features. In the heading, we are using images from lorempixel.com as a place holder image, just to visualize some graphical content in the paper-cards.

The result (when adding three similar cards) will look like the picture below.

Some paper-cards added to our app

Some paper-cards added to our app

The paper-cards do not have a specific styling and are just floating, breaking by themselves when the content area is not wide enough. We will add some CSS later in this post to style the paper-cards and define their dimensions and responsive behavior.

Adding an additional drawer

We started with adding a drawer to the left side, that is app overspanning and available in all states of our single-page app. We are now adding another drawer, that will be available as an additional menu to the right side, but just on the „Additional right viewer“ view.

Starting from the placeholder source from the first part of this tutorial,

we are adding another <paper-drawer-panel right-drawer>  here. The final source for this view will look like this:

Keep in mind, the heading  <h2> was moved into the  <paper-drawer-panel right-drawer> main div element.

The web page with right drawer - normal mode

The web page with right drawer – normal mode

This drawer element we just added is placed without any menu icon or anything else and will be visible in the normal mode and is hidden in mobile mode. This behavior is presented in the two figures below.

Right drawer - right menus visible

Right drawer – right menus visible

Right drawer - both menus visible

Right drawer – both menus visible

 

Adding Google Charts

We are just adding a simple gauge chart to our app. You can find many examples in the Polymer element catalog within the Google Web components. Here is just an example you can add to your app:

We are also adding some JavaScript here:

This will randomize our values for the „Speed“ label in the gauge and update the gauge every 3 seconds.

For enabling  <google-chart> one needs to add  <link rel="import" href="../bower_components/google-chart/google-chart.html"> to the import.

Some CSS to style our app

To get the cards and margins right in our app, we are adding some basic CSS styling to the  <head>

The <paper-card>  is formated by using  @apply(); statements. There are several options:

  • @apply(--layout-vertical);
  • @apply(--center-justified);
  • @apply(--layout-center-center);
  • @apply(--shadow-elevation-2dp);

We are adding a vertical layout to our acrds and center them, allowing the cards to take full wide for their content, but limiting the maximum-width to 500px.

Paper card, applying CSS with maximum width of 500px

Paper card, applying CSS with maximum width of 500px

If we skip the  max-width: 500px; the cards will use the full available space.

Paper card, applying CSS with no limit in wide

Paper card, applying CSS with no limit in wide – normal layout

Paper card, applying CSS with no limit in wide - mobile layout

Paper card, applying CSS with no limit in wide – mobile layout

I suggest to read more about Polymer CSS and element styling at Styling local DOM.

To continue, see the next post Getting started with Polymer 1.1.0 – Part 4

By | 2017-01-29T10:31:55+00:00 Oktober 2nd, 2015|Internet and Web Engineering|1 Comment

One Comment

  1. Joly 7. Dezember 2015 at 18:09 - Reply

    I am really looking forward, reading more about this!

Leave A Comment