197 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
Thoughts on TypeScript
Wed, Sep 6th 2017 11
Replacing Lotus is…. complex
Fri, Sep 1st 2017 5
Web Component Thoughts….
Fri, Aug 25th 2017 4
Just…. NO,NO,NO
Fri, Aug 11th 2017 3
Goodbye Evernote
Tue, Jan 17th 2017 7
Merry Christmas!
Sun, Dec 25th 2016 4
Visual Studio Code Editor
Fri, Nov 11th 2016 5
Top 10
Thoughts on TypeScript
Wed, Sep 6th 2017 11
XMage, your XPrentice will surely miss you
Mon, May 12th 2014 10
Work with Rich Text from DDS
Fri, Oct 21st 2016 10
Re-usability is the Goal!
Tue, Jun 14th 2016 9
Polymer app-layout Elements
Fri, Jul 1st 2016 9
Domino svg support
Fri, Aug 12th 2016 8
A Polymer Avatar component
Wed, Oct 12th 2016 8
Setting up a Polymer development environment
Fri, Jul 29th 2016 7
Goodbye Evernote
Tue, Jan 17th 2017 7
On SocialBizUg - Web Worker Basics
Sun, Apr 13th 2014 6


Polymer app-layout Elements
Twitter Google+ Facebook LinkedIn Addthis Email Gmail Flipboard Reddit Tumblr WhatsApp StumbleUpon Yammer Evernote Delicious
Keith Strickland    

Looking at the Polymer app-layout elements I have to say these are pretty cool! Some of it is old news because it was/is supported via the paper-drawer-panel, paper-header and paper-toolbar elements. However by taking the lessons learned with those elements and creating their “app” siblings I think it makes for a much nicer implementation.

The basic use of the app-layout elements would look something like this:

<app-drawer-layout id="layout" narrow="{{drawerClosed}}" fullbleed>
  <!-- Drawer content -->
  <app-drawer id="drawer">
    <app-toolbar>
      <a href="/view1" top-item>
        <img src="../images/Logo.png" />
      </a>
    </app-toolbar>
    <div class="drawerContent content">
      <!-- drawer content goes here -->
    </div>
  </app-drawer>

  <!-- Main content -->
  <app-header-layout>
    <app-header
      scroll-target="content">
      <app-toolbar>
        <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
        <div class="flex" title>[[contentTitle]]</div>
        <paper-icon-button icon="search" on-tap="openSearch"></paper-icon-button>
      </app-toolbar>
    </app-header>
    <div id="content" class="mainContent">
      <!-- Main content goes here -->
    </div>
  </app-header-layout>
</app-drawer-layout>

So we now have a basic layout with a drawer that’s responsive and a main content area with a header. Notice that the app-header has an attribute called scroll-target. You make that the ID of the element where you want all the scrolling to occur. It will make sure that div is where all the scrolling occurs, which is cool in and of itself. But, you don’t have to do anything really, that container will just scroll as you would expect.

Now, normally there will be an iron-pages or neon-animated-pages in the main content area with a data binding to a variable (we’ll call ours ‘page’) for the selected page. Let’s say one of those pages (people) has a large list (like a notes view or something) that the user can scroll through. They then click on one of the items in the list and they are taken to a different page. However, when they navigate back to the people list, they’re at the top of the list again. That sucks and it’s a really bad user experience. Now of course you can use A LOT of javascript to build your own scrolling controller, but why would you do that?

Of particular coolness is the app-scrollpos-control. You set it’s selected property to whatever page the route is for. This control will then keep track of the scroll position of our header scroll target for us. Which is really cool. We don’t have to do anything special, just define the selected attribute and set it to our ‘page’ variable. That’s it, you’re done. So now we should end up with something like:

<app-scrollpos-control selected="{{page}}"></app-scrollpos-control>
<app-drawer-layout id="layout" narrow="{{drawerClosed}}" fullbleed>
  <!-- Drawer content -->
  <app-drawer id="drawer">
    <app-toolbar>
      <a href="/view1" top-item>
        <img src="../images/Logo.png" />
      </a>
    </app-toolbar>
    <div class="drawerContent content">
      <!-- drawer content goes here -->
    </div>
  </app-drawer>

  <!-- Main content -->
  <app-header-layout>
    <app-header
      scroll-target="content">
      <app-toolbar>
        <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
        <div class="flex" title>[[contentTitle]]</div>
        <paper-icon-button icon="search" on-tap="openSearch"></paper-icon-button>
      </app-toolbar>
    </app-header>
    <div id="content" class="mainContent">
      <!-- Main content goes here -->
    </div>
  </app-header-layout>
</app-drawer-layout>

Notice now we’ve added our app-scrollpos-control. So, if you visit my github pages example of this, visit each link on the left and scroll to a different position for each page. Then navigate back through the pages you’ll see that the scroll position for each page is adjusted to the location it was previously. Pretty cool eh? No more massive JavaScript to maintain the scroll position across 2 dozen different pages.



---------------------
http://keithstric.me/2016/07/01/polymer-app-layout-elements/
Jul 01, 2016
10 hits



Recent Blog Posts
11
Thoughts on TypeScript
Wed, Sep 6th 2017 9:25p   Keith Strickland
Over the past few months I’ve started working pretty extensively with TypeScript. For those of you who don’t know what TypeScript is: TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It provides strong types to JavaScript. It allows for the creation of classes and enforces those classes in your code. If you define a Redpill.Widget class, you can then use that class in your code and the editor enforces the rules you define within that class. For example,
5
Replacing Lotus is…. complex
Fri, Sep 1st 2017 9:44p   Keith Strickland
If you followed Peter’s series on replacing Lotus he outlined some of the pitfalls, processes and decision points to undertake for success. I wanted to point out the technical side to a lot of those decisions. The short answer is that you need a tool to surface your domino data en-masse until such a time when decisions are made on each application. I have been working on that solution for quite some time now and I have to say, it’s complex. First you need to make a fundamental decisi
4
Web Component Thoughts….
Fri, Aug 25th 2017 8:55p   Keith Strickland
The past 1.5 years I’ve been working exclusively with Web Components and specifically Polymer. The more I use this technology the more convinced I am that this is the technology I should be using. Now, I’m not saying that Web Components and Polymer are hammers and every problem/project is a nail. However it’s quite refreshing that Polymer’s goal is to make itself irrelevant. What does that mean, Polymer is there temporarily until the browsers decide upon common standards
3
Just…. NO,NO,NO
Fri, Aug 11th 2017 7:45p   Keith Strickland
This week I attended MWLUG in Alexandria, VA. This was an awesome event, so many good speakers, good content and excellent camaraderie. I can’t say it enough, but Richard Moy and his team put on such a good event. So, I spoke to a couple of developers who are writing client JavaScript in Domino Designer. While Domino Designer is capable of allowing you to write JavaScript, all I can say is STOP! Stop torturing yourself, Stop making it harder on yourself to write good JavaScript. There are
7
Goodbye Evernote
Tue, Jan 17th 2017 5:22p   Keith Strickland
I’ve been using Evernote for a few years now and have enjoyed it’s feature set and the ability to plan and document a complex project (namely home/shop projects) with shopping lists, ideas, etc. But recently every time I attempt to use Evernote to create a quick note or maybe just jot something down, I’m presented with a request to upgrade to a pay plan, or to update or just general advertising. I can no longer just open it and create a note. Because of this, I have now backed
4
Merry Christmas!
Sun, Dec 25th 2016 10:57p   Keith Strickland
Merry Christmas!! I hope everyone is having a great holiday. I thought now might be a good time to look back over the year and review some of the technology I’ve dealt with. Surface Pro 4: Last year I got a Surface Pro 4 tablet. I started the process of switching to it instead of my aging MacBook Pro. While I REALLY like the hardware and how everything works there were just a few issues which got on my nerves so bad I couldn’t ever completely make the switch. As far as performance, I
5
Visual Studio Code Editor
Fri, Nov 11th 2016 3:42p   Keith Strickland
I’ve been using the Visual Studio Code editor for the last couple of weeks and thought I would share my experience. I’ve mainly used this in a plain ‘ole polymer application which consists of html files. Using the editor this way has shown some of it’s shortcomings. Don’t get me wrong, I think it’s a fine editor and has a lot of features I really like. However with CSS, HTML and JavaScript all residing in the same file, a lot of the typeahead features just don
10
Work with Rich Text from DDS
Fri, Oct 21st 2016 5:33p   Keith Strickland
So you’ve created your shiny new web application using DDS and everything is really cool, except for the display of rich text. You’ve figured out that there is a multipart MIME object in the JSON delivered by DDS, and it has the HTML in that, but it still looks crappy. It has tags littered throughout and just doesn’t look good. Well, I think I’ve got the solution for you. If you look at that multipart MIME Object and find the ‘text/html’ entry you’ll not
8
A Polymer Avatar component
Wed, Oct 12th 2016 5:50p   Keith Strickland
At MWLUG a lot of people seemed surprised that I would create a component just for an avatar. My response to that is why wouldn’t you build an avatar component? So, in this post I’m going to show you how to build one for your applications. Let’s start out with the use case. We want to show an avatar for a person in various locations throughout our application. This avatar should do a few different things: Should show a picture of a person if one is attached to their person do




Created and Maintained by Yancy Lent - About - Planet Lotus Blog - Advertising - Mobile Edition