问:
Background image not showing full width in Safari as well as iOS
I had added a background image as fullscreen. It works fine with Chrome and Firefox. But in Safari , the background image is not full screen but looks cropped.The same symptom applies with Safari on my Mac – as well as iOS (iPad/iPhone).
 The view looks like this in Safari.

/* Body Margin*/

body {
  margin: 0;
}

/*  Font family avenir-light*/

@font-face {
  font-family: 'avenir-light';
  src: url('fonts/avenir-light.eot') format('eot'), url('fonts/avenir-light.woff') format('woff'), url('fonts/avenir-light.ttf') format('ttf');
}

/* Background Div*/

.background {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: -webkit-flex;
  /* Safari */
  display: flex;
  justify-content: center;
  -webkit-justify-content: center;
  /* Safari 6.1+ */
}

/* Background Div: after*/

.background:after {
  position: absolute;
  width: 100vw;
  height: 100vh;
  content: '';
  background: url("https://www.ncl.com/sites/default/files/DestinationGalleries.Hawaii.SnorkelingBay900x400.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color: #999;
  -webkit-animation: fadein 10s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 10s;
  /* Firefox < 16 */
  -ms-animation: fadein 10s;
  /* Internet Explorer */
  -o-animation: fadein 10s;
  /* Opera < 12.1 */
  animation: fadein 10s;
  /*Fade In Animation*/
}

/* Fade in animations */

@keyframes fadein {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}

/* Firefox < 16 */

@-moz-keyframes fadein {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}

/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}

/* Internet Explorer */

@-ms-keyframes fadein {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}

/* Opera < 12.1 */

@-o-keyframes fadein {
  opacity: 0.2;
}

to {
  opacity: 1;
}

/* Foregraound div */

.foreground {
  margin-top: 20px;
  position: relative;
  width: 400px;
  height: 100px;
  background-color: #eaeaea;
  padding: 20px;
  border: 1px solid #555;
  border-radius: 10px;
  /*Fade In Animation*/
  -webkit-animation: fadein 10s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 10s;
  /* Firefox < 16 */
  -ms-animation: fadein 10s;
  /* Internet Explorer */
  -o-animation: fadein 10s;
  /* Opera < 12.1 */
  animation: fadein 10s;
  z-index: 1;
}

/* Name Tag */

.name-tag {
  font-family: 'avenir-light';
  text-align: center;
  font-size: 24px;
}

/* Socail Media List*/

.social-media-list {
  list-style: none;
  display: -webkit-flex;
  /* Safari */
  display: flex;
  -webkit-justify-content: space-around;
  /* Safari 6.1+ */
  justify-content: space-around;
  padding: 0;
}

/* Socail Media Item*/

.social-media-link img {
  height: 50px;
  width: 50px;
  transition: all 0.5s ease;
}

.social-media-link img:hover {
  -ms-transform: scale(1.2);
  /* IE 9 */
  -webkit-transform: scale(1.2);
  /* Safari */
  transform: scale(1.2);
  /* Standard syntax */
}

/* Copyright*/

.copyright {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 20px;
  color: #ccc;
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <link href="background.css" rel="stylesheet" type="text/css">
</head>

<body>
  <section class="background">
    <div class="foreground">
      <div class="name-tag">Your Full Name
      </div>
      <ul class="social-media-list">
        <li class="social-media-link">
          <img src="https://cdn3.iconfinder.com/data/icons/basicolor-reading-writing/24/077_twitter-128.png">
        </li>
        <li class="social-media-link">
          <img src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/youtube_circle-128.png">
        </li>
        <li class="social-media-link">
          <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-512.png">
        </li>
        <li class="social-media-link">
          <img src="https://cdn2.iconfinder.com/data/icons/black-white-social-media/32/instagram_online_social_media-128.png">
        </li>
      </ul>
    </div>
  </section>
  <div class="copyright">© Copyright @ 2017</div>
</body>

</html></code>```

答:
Add this to .background:after

```<code>left:0,
right:0
</code>```

/* Body Margin*/

body {
  margin: 0;
}

/*  Font family avenir-light*/

@font-face {
  font-family: 'avenir-light';
  src: url('fonts/avenir-light.eot') format('eot'), url('fonts/avenir-light.woff') format('woff'), url('fonts/avenir-light.ttf') format('ttf');
}

/* Background Div*/

.background {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: -webkit-flex;
  /* Safari */
  display: flex;
  justify-content: center;
  -webkit-justify-content: center;
  /* Safari 6.1+ */
}

/* Background Div: after*/

.background:after {
  position: absolute;
  width: 100vw;
  height: 100vh;
  left:0;
  right:0;
  content: '';
  background: url("https://www.ncl.com/sites/default/files/DestinationGalleries.Hawaii.SnorkelingBay900x400.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color: #999;
  -webkit-animation: fadein 10s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 10s;
  /* Firefox < 16 */
  -ms-animation: fadein 10s;
  /* Internet Explorer */
  -o-animation: fadein 10s;
  /* Opera < 12.1 */
  animation: fadein 10s;
  /*Fade In Animation*/
}

/* Fade in animations */

@keyframes fadein {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}

/* Firefox < 16 */

@-moz-keyframes fadein {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}

/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}

/* Internet Explorer */

@-ms-keyframes fadein {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}

/* Opera < 12.1 */

@-o-keyframes fadein {
  opacity: 0.2;
}

to {
  opacity: 1;
}

/* Foregraound div */

.foreground {
  margin-top: 20px;
  position: relative;
  width: 400px;
  height: 100px;
  background-color: #eaeaea;
  padding: 20px;
  border: 1px solid #555;
  border-radius: 10px;
  /*Fade In Animation*/
  -webkit-animation: fadein 10s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 10s;
  /* Firefox < 16 */
  -ms-animation: fadein 10s;
  /* Internet Explorer */
  -o-animation: fadein 10s;
  /* Opera < 12.1 */
  animation: fadein 10s;
  z-index: 1;
}

/* Name Tag */

.name-tag {
  font-family: 'avenir-light';
  text-align: center;
  font-size: 24px;
}

/* Socail Media List*/

.social-media-list {
  list-style: none;
  display: -webkit-flex;
  /* Safari */
  display: flex;
  -webkit-justify-content: space-around;
  /* Safari 6.1+ */
  justify-content: space-around;
  padding: 0;
}

/* Socail Media Item*/

.social-media-link img {
  height: 50px;
  width: 50px;
  transition: all 0.5s ease;
}

.social-media-link img:hover {
  -ms-transform: scale(1.2);
  /* IE 9 */
  -webkit-transform: scale(1.2);
  /* Safari */
  transform: scale(1.2);
  /* Standard syntax */
}

/* Copyright*/

.copyright {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 20px;
  color: #ccc;
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <link href="background.css" rel="stylesheet" type="text/css">
</head>

<body>
  <section class="background">
    <div class="foreground">
      <div class="name-tag">Your Full Name
      </div>
      <ul class="social-media-list">
        <li class="social-media-link">
          <img src="https://cdn3.iconfinder.com/data/icons/basicolor-reading-writing/24/077_twitter-128.png">
        </li>
        <li class="social-media-link">
          <img src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/youtube_circle-128.png">
        </li>
        <li class="social-media-link">
          <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-512.png">
        </li>
        <li class="social-media-link">
          <img src="https://cdn2.iconfinder.com/data/icons/black-white-social-media/32/instagram_online_social_media-128.png">
        </li>
      </ul>
    </div>
  </section>
  <div class="copyright">© Copyright @ 2017</div>
</body>

</html></code>```

Body:
I had added a background image as fullscreen. It works fine with Chrome and Firefox. But in Safari , the background image is not full screen but looks cropped.The same symptom applies with Safari on my Mac – as well as iOS (iPad/iPhone).
 The view looks like this in Safari.

/* Body Margin*/

body {
  margin: 0;
}

/*  Font family avenir-light*/

@font-face {
  font-family: 'avenir-light';
  src: url('fonts/avenir-light.eot') format('eot'), url('fonts/avenir-light.woff') format('woff'), url('fonts/avenir-light.ttf') format('ttf');
}

/* Background Div*/

.background {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: -webkit-flex;
  /* Safari */
  display: flex;
  justify-content: center;
  -webkit-justify-content: center;
  /* Safari 6.1+ */
}

/* Background Div: after*/

.background:after {
  position: absolute;
  width: 100vw;
  height: 100vh;
  content: '';
  background: url("https://www.ncl.com/sites/default/files/DestinationGalleries.Hawaii.SnorkelingBay900x400.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color: #999;
  -webkit-animation: fadein 10s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 10s;
  /* Firefox < 16 */
  -ms-animation: fadein 10s;
  /* Internet Explorer */
  -o-animation: fadein 10s;
  /* Opera < 12.1 */
  animation: fadein 10s;
  /*Fade In Animation*/
}

/* Fade in animations */

@keyframes fadein {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}

/* Firefox < 16 */

@-moz-keyframes fadein {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}

/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}

/* Internet Explorer */

@-ms-keyframes fadein {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}

/* Opera < 12.1 */

@-o-keyframes fadein {
  opacity: 0.2;
}

to {
  opacity: 1;
}

/* Foregraound div */

.foreground {
  margin-top: 20px;
  position: relative;
  width: 400px;
  height: 100px;
  background-color: #eaeaea;
  padding: 20px;
  border: 1px solid #555;
  border-radius: 10px;
  /*Fade In Animation*/
  -webkit-animation: fadein 10s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 10s;
  /* Firefox < 16 */
  -ms-animation: fadein 10s;
  /* Internet Explorer */
  -o-animation: fadein 10s;
  /* Opera < 12.1 */
  animation: fadein 10s;
  z-index: 1;
}

/* Name Tag */

.name-tag {
  font-family: 'avenir-light';
  text-align: center;
  font-size: 24px;
}

/* Socail Media List*/

.social-media-list {
  list-style: none;
  display: -webkit-flex;
  /* Safari */
  display: flex;
  -webkit-justify-content: space-around;
  /* Safari 6.1+ */
  justify-content: space-around;
  padding: 0;
}

/* Socail Media Item*/

.social-media-link img {
  height: 50px;
  width: 50px;
  transition: all 0.5s ease;
}

.social-media-link img:hover {
  -ms-transform: scale(1.2);
  /* IE 9 */
  -webkit-transform: scale(1.2);
  /* Safari */
  transform: scale(1.2);
  /* Standard syntax */
}

/* Copyright*/

.copyright {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 20px;
  color: #ccc;
}

<!doctype html>

  <meta charset="UTF-8">
  <link href="background.css" rel="stylesheet" type="text/css">

Your Full Name

© Copyright @ 2017

Body:
Add this to .background:after

left:0,
right:0

/* Body Margin*/

body {
  margin: 0;
}

/*  Font family avenir-light*/

@font-face {
  font-family: 'avenir-light';
  src: url('fonts/avenir-light.eot') format('eot'), url('fonts/avenir-light.woff') format('woff'), url('fonts/avenir-light.ttf') format('ttf');
}

/* Background Div*/

.background {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: -webkit-flex;
  /* Safari */
  display: flex;
  justify-content: center;
  -webkit-justify-content: center;
  /* Safari 6.1+ */
}

/* Background Div: after*/

.background:after {
  position: absolute;
  width: 100vw;
  height: 100vh;
  left:0;
  right:0;
  content: '';
  background: url("https://www.ncl.com/sites/default/files/DestinationGalleries.Hawaii.SnorkelingBay900x400.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color: #999;
  -webkit-animation: fadein 10s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 10s;
  /* Firefox < 16 */
  -ms-animation: fadein 10s;
  /* Internet Explorer */
  -o-animation: fadein 10s;
  /* Opera < 12.1 */
  animation: fadein 10s;
  /*Fade In Animation*/
}

/* Fade in animations */

@keyframes fadein {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}

/* Firefox < 16 */

@-moz-keyframes fadein {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}

/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}

/* Internet Explorer */

@-ms-keyframes fadein {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}

/* Opera < 12.1 */

@-o-keyframes fadein {
  opacity: 0.2;
}

to {
  opacity: 1;
}

/* Foregraound div */

.foreground {
  margin-top: 20px;
  position: relative;
  width: 400px;
  height: 100px;
  background-color: #eaeaea;
  padding: 20px;
  border: 1px solid #555;
  border-radius: 10px;
  /*Fade In Animation*/
  -webkit-animation: fadein 10s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 10s;
  /* Firefox < 16 */
  -ms-animation: fadein 10s;
  /* Internet Explorer */
  -o-animation: fadein 10s;
  /* Opera < 12.1 */
  animation: fadein 10s;
  z-index: 1;
}

/* Name Tag */

.name-tag {
  font-family: 'avenir-light';
  text-align: center;
  font-size: 24px;
}

/* Socail Media List*/

.social-media-list {
  list-style: none;
  display: -webkit-flex;
  /* Safari */
  display: flex;
  -webkit-justify-content: space-around;
  /* Safari 6.1+ */
  justify-content: space-around;
  padding: 0;
}

/* Socail Media Item*/

.social-media-link img {
  height: 50px;
  width: 50px;
  transition: all 0.5s ease;
}

.social-media-link img:hover {
  -ms-transform: scale(1.2);
  /* IE 9 */
  -webkit-transform: scale(1.2);
  /* Safari */
  transform: scale(1.2);
  /* Standard syntax */
}

/* Copyright*/

.copyright {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 20px;
  color: #ccc;
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <link href="background.css" rel="stylesheet" type="text/css">
</head>

<body>
  <section class="background">
    <div class="foreground">
      <div class="name-tag">Your Full Name
      </div>
      <ul class="social-media-list">
        <li class="social-media-link">
          <a href="https://twitter.com/"><img src="https://cdn3.iconfinder.com/data/icons/basicolor-reading-writing/24/077_twitter-128.png"></a>
        </li>
        <li class="social-media-link">
          <a href="https://www.youtube.com/"><img src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/youtube_circle-128.png"></a>
        </li>
        <li class="social-media-link">
          <a href="https://in.linkedin.com/"><img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-512.png"></a>
        </li>
        <li class="social-media-link">
          <a href="https://www.instagram.com/"><img src="https://cdn2.iconfinder.com/data/icons/black-white-social-media/32/instagram_online_social_media-128.png"></a>
        </li>
      </ul>
    </div>
  </section>
  <div class="copyright">&copy; Copyright @ 2017</div>
</body>

</html>


来源: stackexchange

问:
font awesome ie9 https
This has been asked several times but none of the solutions found have helped. We are using font awesome over https (not sure it makes a difference) and the icons in IE9 show up as squares. This happens only on ie9.

Anyone had this issue before or have ideas?

Thank-you

答:
Check cache-invalidating headers in HTTP responses
because under https,
Internet Explorer (up to IE11) seems to not load fonts nor vector icons if
cache or store invalidating instructions are set in HTTP header :

For example, spring-boot generates the following headers, as a result, icons are not shown under https:

Cache-Control :"no-cache, no-store, max-age=0, must-revalidate"

and

pragma: "no-cache"

The solution is to hide those headers to the browser.

I used nginx as a proxy, adding the folowing commands the https proxied location:

proxy_hide_header Cache-Control;
  proxy_hide_header Pragma;

See here for details with nginx.

Using apache httpd, the syntax is here

ContentLicense: CC BY-SA 3.0

Title: font awesome ie9 https


问:
Flexslider - Charging with fixed images
I am using Flexslider, but while the images load and the function is not performed, it plays an image beneath the other, generating a huge scroll bar and, after running and loading the images, it runs normally.

The question is: no way to keep the images in the same position one below the other before they carry? not to generate this huge scroll bar.

The following code:

Html:

```<code>  <div class="sliderTrabalhe" ng-init="vm.sliderTrabalhe();">
     <ul class="slides">
      <li ng-repeat="s in vm.repeat(7) track by $index">
        <div class="image" style="background-image: url('app/template/img/slider.jpg');"></div>
      </li>
     </ul>
  </div>
</code>```

Function:

```<code>vm.sliderTrabalhe = function () {
     setTimeout(function () {
       $('.sliderTrabalhe').flexslider({
       animation: "slide",
       controlNav: true
     });
   }, 1000);
 }
</code>```

CSS:

```<code> .sliderTrabalhe{
        position: relative;
        margin-bottom: 70px;
        @extend .largura_total;
        height: 500px;
        .image{
            height: 500px;
        }
        .flex-control-nav{
            bottom: -30px;
            left: 50px;
        }
        .flex-control-paging li a{
            background: $cinza_escuro!important;
        }
        .flex-control-paging li a.flex-active{
            background: $vermelho!important;
            width: 15px;
            height: 15px;
            padding-top: 2px;
        }
        .flex-control-nav li {
            margin: 0 3px;
        }
    }
</code>```

The following images for better understanding:

Before:

After:

答:
CSS to remove bug:</p>

```<code>.sliderTrabalhe {
  margin: 0;
  padding: 0;
}
.sliderTrabalhe .slides > li {
  display: none;
  -webkit-backface-visibility: hidden;
}
.sliderTrabalhe .slides img {
  width: 100%;
  display: block;
}
.sliderTrabalhe .slides:after {
  content: "\0020";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
html[xmlns] .sliderTrabalhe .slides {
  display: block;
}
* html .sliderTrabalhe .slides {
  height: 1%;
}
.no-js .sliderTrabalhe .slides > li:first-child {
  display: block;
}
.sliderTrabalhe {
  position: relative;
  zoom: 1;
}
.sliderTrabalhe .slides {
  zoom: 1;
}
.sliderTrabalhe .slides img {
  height: auto;
  -moz-user-select: none;
}
.sliderTrabalhe:hover .flex-direction-nav .flex-prev {
  opacity: 0.7;
  left: -20px;
}
.sliderTrabalhe:hover .flex-direction-nav .flex-prev:hover {
  opacity: 1;
}
.sliderTrabalhe:hover .flex-direction-nav .flex-next {
  opacity: 0.7;
  right: -20px;
}
.sliderTrabalhe:hover .flex-direction-nav .flex-next:hover {
  opacity: 1;
}

.sliderTrabalhe .flex-direction-nav a{
  width: 19px;
  height: 32px;
  margin: 0;
}
</code>```

Title: Flexslider - Charging with fixed images

Body:
I am using Flexslider, but while the images load and the function is not performed, it plays an image beneath the other, generating a huge scroll bar and, after running and loading the images, it runs normally.

The question is: no way to keep the images in the same position one below the other before they carry? not to generate this huge scroll bar.

The following code:

Html:

Function:

vm.sliderTrabalhe = function () {
     setTimeout(function () {
       $('.sliderTrabalhe').flexslider({
       animation: "slide",
       controlNav: true
     });
   }, 1000);
 }

CSS:

 .sliderTrabalhe{
        position: relative;
        margin-bottom: 70px;
        @extend .largura_total;
        height: 500px;
        .image{
            height: 500px;
        }
        .flex-control-nav{
            bottom: -30px;
            left: 50px;
        }
        .flex-control-paging li a{
            background: $cinza_escuro!important;
        }
        .flex-control-paging li a.flex-active{
            background: $vermelho!important;
            width: 15px;
            height: 15px;
            padding-top: 2px;
        }
        .flex-control-nav li {
            margin: 0 3px;
        }
    }

The following images for better understanding:

Before:

After:

Body:
CSS to remove bug:

.sliderTrabalhe {
  margin: 0;
  padding: 0;
}
.sliderTrabalhe .slides > li {
  display: none;
  -webkit-backface-visibility: hidden;
}
.sliderTrabalhe .slides img {
  width: 100%;
  display: block;
}
.sliderTrabalhe .slides:after {
  content: "\0020";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
html[xmlns] .sliderTrabalhe .slides {
  display: block;
}
* html .sliderTrabalhe .slides {
  height: 1%;
}
.no-js .sliderTrabalhe .slides > li:first-child {
  display: block;
}
.sliderTrabalhe {
  position: relative;
  zoom: 1;
}
.sliderTrabalhe .slides {
  zoom: 1;
}
.sliderTrabalhe .slides img {
  height: auto;
  -moz-user-select: none;
}
.sliderTrabalhe:hover .flex-direction-nav .flex-prev {
  opacity: 0.7;
  left: -20px;
}
.sliderTrabalhe:hover .flex-direction-nav .flex-prev:hover {
  opacity: 1;
}
.sliderTrabalhe:hover .flex-direction-nav .flex-next {
  opacity: 0.7;
  right: -20px;
}
.sliderTrabalhe:hover .flex-direction-nav .flex-next:hover {
  opacity: 1;
}

.sliderTrabalhe .flex-direction-nav a{
  width: 19px;
  height: 32px;
  margin: 0;
}


问:
Inserting data with pandas or psycopg with a serial key?
I have a simple dimension table which is storing all of the unique dimensions from several files.

In postgres, I made the table:

```<code>CREATE TABLE dimension_purpose (
  purpose_key SERIAL PRIMARY KEY,
  purpose text NOT NULL UNIQUE
);
</code>```

Now I am trying to add the new rows to this table efficiently. I am able to identify the new dimensions easily (using pandas), but I am having trouble inserting them into this table. I typically use

```<code>def load_to_database(table_name, file_object, header=True):
    fake_conn = sqlalchemy.create_engine(engine).raw_connection()
    fake_cur = fake_conn.cursor()
    sql = 'COPY {} FROM STDIN WITH CSV HEADER'.format(table_name)
    fake_cur.copy_expert(sql=sql, file=file_object)
    fake_conn.commit()
    fake_cur.close()
</code>```

If I try to bulk copy, I get an error that 'purpose' is not an integer (it is trying to insert itself into the purpose_key field).

What is the best way to insert a single column of data into the purpose field and then have the SERIAL purpose_key update automatically?

Can I do this with df.to_sql if my df is just one column?

答:
You can specify the columns in your COPY command, e.g.

```<code>COPY dimension_purpose (purpose) FROM STDIN WITH CSV HEADER
</code>```

http://www.postgresql.org/docs/current/static/sql-copy.html

Body:
I have a simple dimension table which is storing all of the unique dimensions from several files.

In postgres, I made the table:

CREATE TABLE dimension_purpose (
  purpose_key SERIAL PRIMARY KEY,
  purpose text NOT NULL UNIQUE
);

Now I am trying to add the new rows to this table efficiently. I am able to identify the new dimensions easily (using pandas), but I am having trouble inserting them into this table. I typically use

def load_to_database(table_name, file_object, header=True):
    fake_conn = sqlalchemy.create_engine(engine).raw_connection()
    fake_cur = fake_conn.cursor()
    sql = 'COPY {} FROM STDIN WITH CSV HEADER'.format(table_name)
    fake_cur.copy_expert(sql=sql, file=file_object)
    fake_conn.commit()
    fake_cur.close()

If I try to bulk copy, I get an error that 'purpose' is not an integer (it is trying to insert itself into the purpose_key field).

What is the best way to insert a single column of data into the purpose field and then have the SERIAL purpose_key update automatically?

Can I do this with df.to_sql if my df is just one column?

Body:
You can specify the columns in your COPY command, e.g.

COPY dimension_purpose (purpose) FROM STDIN WITH CSV HEADER

http://www.postgresql.org/docs/current/static/sql-copy.html


问:
C# PDF Printing Library
Are there any free libraries that would "print" to a PDF without actually having to install a PDF printer on the system.  I want something that can be completely self contained in my application.  The reason I say I want it to "print" is that I've tried and tried to find a solution for directly converting from HTML with CSS to PDF, but it does't seem very possible.  So I want to use the System.Windows.Forms.WebBrowser control to render the page first and then output that rendering to PDF.  I just don't want the user to be required to install a PDFPrinter.</p>

答: PDFsharp</p>

OwnerDisplayName: Adam Haile

ContentLicense: CC BY-SA 2.5

Title: C# PDF Printing Library

Body: PDFsharp

OwnerDisplayName: Dmitri Nesteruk


问:
How do you permanently write to a text file in Python?
I am able to write to a text file using .write(). But after I close() the file and open it again all the written data is gone...? Is there any way that I can permanently save this data on the file?

```<code>def writeToFile():
    myFile = open("myText.txt","w")
    for each in range(8,10):
        record = "This is record number {} in the file\n".format(each)
        myFile.write(record)
    myFile.close()

writeToFile()
</code>```

So what i meant was that the first time i run this program it appends to the file. After this when i close the program and run it again i want it to write to the file again, but instead it only overrides it, i.e the earlier data is deleted each time i close the program.

答:
The data you wanted to write was indeed permanently written... until you opened again overwriting the previous data.

You have different modes to open the file.

If you know that the file has important data and only want to read it, use this mode.

```<code>file = open('./path_to_file', 'r')
</code>```

If you want to overwrite the data, use this one instead:

```<code>file = open('./path_to_file', 'w')
</code>```

Optionally, you can use this other way instead, and it will close the file for you.

```<code>with open('./path_to_file', 'r') as read_file:
    for line in read_file:
        print line
</code>```

This will open the file, read it line by line writing it on the screen and closing it for you at the end.

Finally, if you need to open it again and append new content at the end of the file, just use this:

```<code>file = open('./path_to_file', 'a')
</code>```

Body:
I am able to write to a text file using .write(). But after I close() the file and open it again all the written data is gone...? Is there any way that I can permanently save this data on the file?

def writeToFile():
    myFile = open("myText.txt","w")
    for each in range(8,10):
        record = "This is record number {} in the file\n".format(each)
        myFile.write(record)
    myFile.close()

writeToFile()

So what i meant was that the first time i run this program it appends to the file. After this when i close the program and run it again i want it to write to the file again, but instead it only overrides it, i.e the earlier data is deleted each time i close the program.

Body:
The data you wanted to write was indeed permanently written... until you opened again overwriting the previous data.

You have different modes to open the file.

If you know that the file has important data and only want to read it, use this mode.

file = open('./path_to_file', 'r')

If you want to overwrite the data, use this one instead:

file = open('./path_to_file', 'w')

Optionally, you can use this other way instead, and it will close the file for you.

with open('./path_to_file', 'r') as read_file:
    for line in read_file:
        print line

This will open the file, read it line by line writing it on the screen and closing it for you at the end.

Finally, if you need to open it again and append new content at the end of the file, just use this:

file = open('./path_to_file', 'a')


问:
How to stop this script from loading up on mobile devices?
I have been trying to stop this below mentioned script from getting loaded on mobile devices but can't.
Can anyone please edit the script or code and make it non-loadable on mobile devices?

Blog Address - answer key.

Thanks in advance!

Advertisement< here goes my ad code>

```


答:
I don't know if this is the preferred way or not. But this is what I've used:</p>

```<code>if (window.innerWidth >= 800 && window.innerHeight >= 600) {
       //your function call
}
</code>```

Title: How to stop this script from loading up on mobile devices?

Body:
I have been trying to stop this below mentioned script from getting loaded on mobile devices but can't.
Can anyone please edit the script or code and make it non-loadable on mobile devices?

Blog Address - answer key.

Thanks in advance!

Advertisement< here goes my ad code>

Body:
I don't know if this is the preferred way or not. But this is what I've used:

if (window.innerWidth >= 800 && window.innerHeight >= 600) {
       //your function call
}


问:
ArrayMap put method pushes elements in strange order
I am using ArrayMap for first time in my project and I thought it works just like an array. I expected when I use .put method it inserts it at next index.
But in my case this is not true - after I added all elements one by one the first element I added ended up at index 4 which is kind of strange.

Here are the first three steps which I add elements:

1 - Salads:

2 - Soups:

3 - Appetizers:

So somehow on second step "Soup" element was inserted in index 0 instead of 1 as I was expecting, but strangely on third step "Appetizers" was inserted as expected after "Soup".

This is the code I am using to push key and value pair:

```<code>function ArrayMap<String, DMType> addElement(String typeKey, DMType type) {
    ArrayMap<String, DMType> types = new ArrayMap<>();
    types.put(typeKey, type);

    return types;
}
</code>```

Am I missing something about the behavior of ArrayMap?

答:
Yeah it is misleading because of the name but ArrayMap does no gurantee order unlike arrays.

ArrayMap is a generic key->value mapping data structure that is
  designed to be more memory efficient than a traditional HashMap.

ArrayMap is actually a Map:

public class ArrayMap extends SimpleArrayMap implements Map

If you want the Map functionality with order guranteed use LinkedHashMap instead.

LinkedHashMap defines the iteration ordering, which is normally the
  order in which keys were inserted into the map (insertion-order).

documentation

Body:
I am using ArrayMap for first time in my project and I thought it works just like an array. I expected when I use .put method it inserts it at next index.
But in my case this is not true - after I added all elements one by one the first element I added ended up at index 4 which is kind of strange.

Here are the first three steps which I add elements:

1 - Salads:

2 - Soups:

3 - Appetizers:

So somehow on second step "Soup" element was inserted in index 0 instead of 1 as I was expecting, but strangely on third step "Appetizers" was inserted as expected after "Soup".

This is the code I am using to push key and value pair:

function ArrayMap<String, DMType> addElement(String typeKey, DMType type) {
    ArrayMap<String, DMType> types = new ArrayMap<>();
    types.put(typeKey, type);

    return types;
}

Am I missing something about the behavior of ArrayMap?


问:
Error when interconnecting ipcRenderer and ipcMain in electron
I have configured cli angular in electron, and I have a link where it execute a function that intercomunicate ipcRenderer and ipcMain:

html:

```<code><a (click)="check()"> click </a>
</code>```

component:

```<code>constructor(private _e: ElectronService) { }

check () {
   this._e.ipcRenderer.send ('conn', 'round');
   this._e.ipcRenderer.on ('conn-st', (event, args) => {
      console.log (args);
   });
}
</code>```

main.js (electron):

```<code>ipcMain.on ('conn', function (event, args) {
  event.sender.send ('conn-st', 'trip');
});
</code>```

The problem is that when you click once, you do it once, but when you click again it does 3, then 4, 5 and so on continuously.

And throws this error upon reaching 11:

```<code>(node:23006) Error: Possible EventEmitter memory leak detected. 11 conn-st listeners added. Use emitter.setMaxListeners() to increase limit
</code>```

How do I end the connection between ipcRenderer and ipcMain?

答:
That error message only says, that 11 listeners to a "socket" (like the ones in UNIX) were created. Every listener creates a unique ID which is returned when creating the listener. Based on that, removing one particular listener could be done like this:

```<code>// Create a listener.
var myListener = function (event, args) {}
ipcRenderer.on("channel", myListener);

// Delete only this one by its ID:
ipcRenderer.removeListener("channel", myListener);
</code>```

But you can also delete all of the listeners that were created for a socket, like this:

```<code>// Create a few listeners.
var myListener0 = function (event, args) {};
var myListener1 = function (event, args) {};
var myListener2 = function (event, args) {};
var myListener3 = function (event, args) {};

//
ipcRenderer.on("channel", myListener0);
ipcRenderer.on("channel", myListener1);
ipcRenderer.on("channel", myListener2);
ipcRenderer.on("channel", myListener3);

// Delete all listeners for socket "channel".
ipcRenderer.removeAllListeners("channel");
</code>```

This is also covered in the Electron documentation, particularly here.

Body:
I have configured cli angular in electron, and I have a link where it execute a function that intercomunicate ipcRenderer and ipcMain:

html:

 click

component:

constructor(private _e: ElectronService) { }

check () {
   this._e.ipcRenderer.send ('conn', 'round');
   this._e.ipcRenderer.on ('conn-st', (event, args) => {
      console.log (args);
   });
}

main.js (electron):

ipcMain.on ('conn', function (event, args) {
  event.sender.send ('conn-st', 'trip');
});

The problem is that when you click once, you do it once, but when you click again it does 3, then 4, 5 and so on continuously.

And throws this error upon reaching 11:

(node:23006) Error: Possible EventEmitter memory leak detected. 11 conn-st listeners added. Use emitter.setMaxListeners() to increase limit

How do I end the connection between ipcRenderer and ipcMain?

Body:
That error message only says, that 11 listeners to a "socket" (like the ones in UNIX) were created. Every listener creates a unique ID which is returned when creating the listener. Based on that, removing one particular listener could be done like this:

// Create a listener.
var myListener = function (event, args) {}
ipcRenderer.on("channel", myListener);

// Delete only this one by its ID:
ipcRenderer.removeListener("channel", myListener);

But you can also delete all of the listeners that were created for a socket, like this:

// Create a few listeners.
var myListener0 = function (event, args) {};
var myListener1 = function (event, args) {};
var myListener2 = function (event, args) {};
var myListener3 = function (event, args) {};

//
ipcRenderer.on("channel", myListener0);
ipcRenderer.on("channel", myListener1);
ipcRenderer.on("channel", myListener2);
ipcRenderer.on("channel", myListener3);

// Delete all listeners for socket "channel".
ipcRenderer.removeAllListeners("channel");

This is also covered in the Electron documentation, particularly here.

ContentLicense: CC BY-SA 4.0


问:
Silverlight how to bind properties to List item values
I am new to XAML and playing around with the features. At this stage I am creating a datagrid populated with static data.

I want to know how to disable certain rows, I tried binding the IsEnabled Property to the model and then giving it boolean values like so:

EDIT:
XAML

```<code> <UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" x:Class="SilverlightApplication3.MainPage"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<UserControl.Resources>
    <Style x:Key="DataGridStyle1" TargetType="sdk:DataGrid">
        <Setter Property="RowBackground" Value="#AAEAEFF4"/>
        <Setter Property="AlternatingRowBackground" Value="#00FFFFFF"/>
        <Setter Property="Background" Value="#FFFFFFFF"/>
        <Setter Property="HeadersVisibility" Value="Column"/>
        <Setter Property="HorizontalScrollBarVisibility" Value="Auto"/>
        <Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="SelectionMode" Value="Extended"/>
        <Setter Property="CanUserReorderColumns" Value="True"/>
        <Setter Property="CanUserResizeColumns" Value="True"/>
        <Setter Property="CanUserSortColumns" Value="True"/>
        <Setter Property="AutoGenerateColumns" Value="True"/>
        <Setter Property="RowDetailsVisibilityMode" Value="VisibleWhenSelected"/>
        <Setter Property="BorderBrush">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFA3AEB9" Offset="0"/>
                    <GradientStop Color="#FF8399A9" Offset="0.375"/>
                    <GradientStop Color="#FF718597" Offset="0.375"/>
                    <GradientStop Color="#FF617584" Offset="1"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="DragIndicatorStyle">
            <Setter.Value>
                <Style TargetType="ContentControl">
                    <Setter Property="Foreground" Value="#7FFFFFFF"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ContentControl">
                                <Grid>
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="SortStates">
                                            <VisualState x:Name="Unsorted"/>
                                            <VisualState x:Name="SortAscending">
                                                <Storyboard>
                                                    <DoubleAnimation Duration="0" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SortIcon"/>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="SortDescending">
                                                <Storyboard>
                                                    <DoubleAnimation Duration="0" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SortIcon"/>
                                                    <DoubleAnimation Duration="0" To="-.9" Storyboard.TargetProperty="(RenderTransform).ScaleY" Storyboard.TargetName="SortIcon"/>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <Rectangle x:Name="BackgroundRectangle" Grid.ColumnSpan="2" Fill="#66808080" Stretch="Fill"/>
                                    <Rectangle x:Name="BackgroundGradient" Grid.ColumnSpan="2" Opacity="0" Stretch="Fill">
                                        <Rectangle.Fill>
                                            <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
                                                <GradientStop Color="#FFFFFFFF" Offset="0.015"/>
                                                <GradientStop Color="#F9FFFFFF" Offset="0.375"/>
                                                <GradientStop Color="#E5FFFFFF" Offset="0.6"/>
                                                <GradientStop Color="#C6FFFFFF" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Rectangle.Fill>
                                    </Rectangle>
                                    <Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition/>
                                            <ColumnDefinition Width="Auto"/>
                                        </Grid.ColumnDefinitions>
                                        <ContentPresenter Content="{TemplateBinding Content}"/>
                                        <Path x:Name="SortIcon" Grid.Column="1" Data="F1 M -5.215,6.099L 5.215,6.099L 0,0L -5.215,6.099 Z " Fill="#7FFFFFFF" HorizontalAlignment="Left" Margin="4,0,0,0" Opacity="0" RenderTransformOrigin=".5,.5" Stretch="Uniform" VerticalAlignment="Center" Width="8">
                                            <Path.RenderTransform>
                                                <ScaleTransform ScaleY=".9" ScaleX=".9"/>
                                            </Path.RenderTransform>
                                        </Path>
                                    </Grid>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="DropLocationIndicatorStyle">
            <Setter.Value>
                <Style TargetType="ContentControl">
                    <Setter Property="Background" Value="#FF3F4346"/>
                    <Setter Property="Width" Value="2"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ContentControl">
                                <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="GridLinesVisibility" Value="Vertical"/>
        <Setter Property="HorizontalGridLinesBrush" Value="#FFC9CACA"/>
        <Setter Property="IsTabStop" Value="True"/>
        <Setter Property="VerticalGridLinesBrush" Value="#FFC9CACA"/>
        <Setter Property="IsEnabled" Value="{Binding enabled}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="sdk:DataGrid">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2">
                            <Grid x:Name="Root" Background="{TemplateBinding Background}">
                                <Grid.Resources>
                                    <ControlTemplate x:Key="TopLeftHeaderTemplate" TargetType="sdk:DataGridColumnHeader">
                                        <Grid x:Name="Root">
                                            <Grid.RowDefinitions>
                                                <RowDefinition/>
                                                <RowDefinition/>
                                                <RowDefinition Height="Auto"/>
                                            </Grid.RowDefinitions>
                                            <Border BorderBrush="#FFC9CACA" BorderThickness="0,0,1,0" Background="#FF1F3B53" Grid.RowSpan="2">
                                                <Rectangle Stretch="Fill" StrokeThickness="1">
                                                    <Rectangle.Fill>
                                                        <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
                                                            <GradientStop Color="#FCFFFFFF" Offset="0.015"/>
                                                            <GradientStop Color="#F7FFFFFF" Offset="0.375"/>
                                                            <GradientStop Color="#E5FFFFFF" Offset="0.6"/>
                                                            <GradientStop Color="#D1FFFFFF" Offset="1"/>
                                                        </LinearGradientBrush>
                                                    </Rectangle.Fill>
                                                </Rectangle>
                                            </Border>
                                            <Rectangle Fill="#FFDBDCDC" Height="1" Grid.RowSpan="2" StrokeThickness="1" VerticalAlignment="Bottom" Width="Auto"/>
                                        </Grid>
                                    </ControlTemplate>
                                    <ControlTemplate x:Key="TopRightHeaderTemplate" TargetType="sdk:DataGridColumnHeader">
                                        <Grid x:Name="RootElement">
                                            <Grid.RowDefinitions>
                                                <RowDefinition/>
                                                <RowDefinition/>
                                                <RowDefinition Height="Auto"/>
                                            </Grid.RowDefinitions>
                                            <Border BorderBrush="#FFC9CACA" BorderThickness="1,0,0,0" Background="#FF1F3B53" Grid.RowSpan="2">
                                                <Rectangle Stretch="Fill">
                                                    <Rectangle.Fill>
                                                        <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
                                                            <GradientStop Color="#FCFFFFFF" Offset="0.015"/>
                                                            <GradientStop Color="#F7FFFFFF" Offset="0.375"/>
                                                            <GradientStop Color="#E5FFFFFF" Offset="0.6"/>
                                                            <GradientStop Color="#D1FFFFFF" Offset="1"/>
                                                        </LinearGradientBrush>
                                                    </Rectangle.Fill>
                                                </Rectangle>
                                            </Border>
                                        </Grid>
                                    </ControlTemplate>
                                </Grid.Resources>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <sdk:DataGridColumnHeader x:Name="TopLeftCornerHeader" Template="{StaticResource TopLeftHeaderTemplate}" Width="22"/>
                                <sdk:DataGridColumnHeadersPresenter x:Name="ColumnHeadersPresenter" Grid.Column="1"/>
                                <sdk:DataGridColumnHeader x:Name="TopRightCornerHeader" Grid.Column="2" Template="{StaticResource TopRightHeaderTemplate}"/>
                                <Rectangle x:Name="ColumnHeadersAndRowsSeparator" Grid.ColumnSpan="3" Fill="#FFC9CACA" Height="1" StrokeThickness="1" VerticalAlignment="Bottom" Width="Auto"/>
                                <sdk:DataGridRowsPresenter x:Name="RowsPresenter" Grid.ColumnSpan="2" Grid.Row="1"/>
                                <Rectangle x:Name="BottomRightCorner" Grid.Column="2" Fill="#FFE9EEF4" Grid.Row="2"/>
                                <Rectangle x:Name="BottomLeftCorner" Grid.ColumnSpan="2" Fill="#FFE9EEF4" Grid.Row="2"/>
                                <ScrollBar x:Name="VerticalScrollbar" Grid.Column="2" Margin="0,-1,-1,-1" Orientation="Vertical" Grid.Row="1" Width="18"/>
                                <Grid Grid.Column="1" Grid.Row="2">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition/>
                                    </Grid.ColumnDefinitions>
                                    <Rectangle x:Name="FrozenColumnScrollBarSpacer"/>
                                    <ScrollBar x:Name="HorizontalScrollbar" Grid.Column="1" Height="18" Margin="-1,0,-1,-1" Orientation="Horizontal"/>
                                </Grid>
                                <sdk:ValidationSummary x:Name="ValidationSummary" Grid.ColumnSpan="3" MaxHeight="90" Grid.Row="3"/>
                            </Grid>
                        </Border>
                        <Border x:Name="DisabledVisualElement" Background="#8CFFFFFF" CornerRadius="2" HorizontalAlignment="Stretch" Height="Auto" IsHitTestVisible="False" Opacity="0" VerticalAlignment="Stretch" Width="Auto"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White">

    <sdk:DataGrid x:Name="McDataGrid" HorizontalAlignment="Left" Height="500" VerticalAlignment="Top" Width="400" Style="{StaticResource DataGridStyle1}"/>

</Grid>
</code>```

C#

```<code>  public MainPage()
    {
        InitializeComponent();

        Data();
        McDataGrid.ItemsSource = list;

    }

    public List<Model> list = new List<Model>();
    private List<Model> Data()
    {
        list.Add(new Model(1, "Test", "1", true));
        list.Add(new Model(2, "Ger", "2", true));
        list.Add(new Model(3, "dsg", "3", true));
        list.Add(new Model(4, "Hd", "4", false));
        list.Add(new Model(5, "TeHRFdgst", "5", false));
        return list;
    }

    public class Model : INotifyPropertyChanged
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Prop { get; set; }
        public bool enabled { get; set; }

        public event PropertyChangedEventHandler PropertyChanged;

        public Model(int id, string name, string prop, bool isenabled)
        {
            Id = id;
            Name = name;
            Prop = prop;
            enabled = isenabled;

        }

        protected virtual void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}
</code>```

But this far it only adds a column for IsEnabled as expected, but I thought it would also set the property value as well.

Could someone maybe explain how the binding between the XAML and C# works if it is even possible this way?

答:
You could use a RowStyle to disable a row:

```<code><Style x:Key="DataGridStyle1" TargetType="sdk:DataGrid">
    <Setter Property="RowStyle">
        <Setter.Value>
            <Style TargetType="sdk:DataGridRow">
                <Setter Property="IsEnabled" Value="{Binding enabled}"/>
            </Style>
        </Setter.Value>
...
    </Setter>
</code>```

Body:
I am new to XAML and playing around with the features. At this stage I am creating a datagrid populated with static data.

I want to know how to disable certain rows, I tried binding the IsEnabled Property to the model and then giving it boolean values like so:

EDIT:
XAML

 <UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" x:Class="SilverlightApplication3.MainPage"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<UserControl.Resources>

            </Setter.Value>
        </Setter>
        <Setter Property="DropLocationIndicatorStyle">
            <Setter.Value>

            </Setter.Value>
        </Setter>
        <Setter Property="GridLinesVisibility" Value="Vertical"/>
        <Setter Property="HorizontalGridLinesBrush" Value="#FFC9CACA"/>
        <Setter Property="IsTabStop" Value="True"/>
        <Setter Property="VerticalGridLinesBrush" Value="#FFC9CACA"/>
        <Setter Property="IsEnabled" Value="{Binding enabled}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="sdk:DataGrid">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2">
                            <Grid x:Name="Root" Background="{TemplateBinding Background}">
                                <Grid.Resources>
                                    <ControlTemplate x:Key="TopLeftHeaderTemplate" TargetType="sdk:DataGridColumnHeader">
                                        <Grid x:Name="Root">
                                            <Grid.RowDefinitions>
                                                <RowDefinition/>
                                                <RowDefinition/>
                                                <RowDefinition Height="Auto"/>
                                            </Grid.RowDefinitions>
                                            <Border BorderBrush="#FFC9CACA" BorderThickness="0,0,1,0" Background="#FF1F3B53" Grid.RowSpan="2">
                                                <Rectangle Stretch="Fill" StrokeThickness="1">
                                                    <Rectangle.Fill>
                                                        <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
                                                            <GradientStop Color="#FCFFFFFF" Offset="0.015"/>
                                                            <GradientStop Color="#F7FFFFFF" Offset="0.375"/>
                                                            <GradientStop Color="#E5FFFFFF" Offset="0.6"/>
                                                            <GradientStop Color="#D1FFFFFF" Offset="1"/>
                                                        </LinearGradientBrush>
                                                    </Rectangle.Fill>
                                                </Rectangle>
                                            </Border>
                                            <Rectangle Fill="#FFDBDCDC" Height="1" Grid.RowSpan="2" StrokeThickness="1" VerticalAlignment="Bottom" Width="Auto"/>
                                        </Grid>
                                    </ControlTemplate>
                                    <ControlTemplate x:Key="TopRightHeaderTemplate" TargetType="sdk:DataGridColumnHeader">
                                        <Grid x:Name="RootElement">
                                            <Grid.RowDefinitions>
                                                <RowDefinition/>
                                                <RowDefinition/>
                                                <RowDefinition Height="Auto"/>
                                            </Grid.RowDefinitions>
                                            <Border BorderBrush="#FFC9CACA" BorderThickness="1,0,0,0" Background="#FF1F3B53" Grid.RowSpan="2">
                                                <Rectangle Stretch="Fill">
                                                    <Rectangle.Fill>
                                                        <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
                                                            <GradientStop Color="#FCFFFFFF" Offset="0.015"/>
                                                            <GradientStop Color="#F7FFFFFF" Offset="0.375"/>
                                                            <GradientStop Color="#E5FFFFFF" Offset="0.6"/>
                                                            <GradientStop Color="#D1FFFFFF" Offset="1"/>
                                                        </LinearGradientBrush>
                                                    </Rectangle.Fill>
                                                </Rectangle>
                                            </Border>
                                        </Grid>
                                    </ControlTemplate>
                                </Grid.Resources>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <sdk:DataGridColumnHeader x:Name="TopLeftCornerHeader" Template="{StaticResource TopLeftHeaderTemplate}" Width="22"/>
                                <sdk:DataGridColumnHeadersPresenter x:Name="ColumnHeadersPresenter" Grid.Column="1"/>
                                <sdk:DataGridColumnHeader x:Name="TopRightCornerHeader" Grid.Column="2" Template="{StaticResource TopRightHeaderTemplate}"/>
                                <Rectangle x:Name="ColumnHeadersAndRowsSeparator" Grid.ColumnSpan="3" Fill="#FFC9CACA" Height="1" StrokeThickness="1" VerticalAlignment="Bottom" Width="Auto"/>
                                <sdk:DataGridRowsPresenter x:Name="RowsPresenter" Grid.ColumnSpan="2" Grid.Row="1"/>
                                <Rectangle x:Name="BottomRightCorner" Grid.Column="2" Fill="#FFE9EEF4" Grid.Row="2"/>
                                <Rectangle x:Name="BottomLeftCorner" Grid.ColumnSpan="2" Fill="#FFE9EEF4" Grid.Row="2"/>
                                <ScrollBar x:Name="VerticalScrollbar" Grid.Column="2" Margin="0,-1,-1,-1" Orientation="Vertical" Grid.Row="1" Width="18"/>
                                <Grid Grid.Column="1" Grid.Row="2">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition/>
                                    </Grid.ColumnDefinitions>
                                    <Rectangle x:Name="FrozenColumnScrollBarSpacer"/>
                                    <ScrollBar x:Name="HorizontalScrollbar" Grid.Column="1" Height="18" Margin="-1,0,-1,-1" Orientation="Horizontal"/>
                                </Grid>
                                <sdk:ValidationSummary x:Name="ValidationSummary" Grid.ColumnSpan="3" MaxHeight="90" Grid.Row="3"/>
                            </Grid>
                        </Border>
                        <Border x:Name="DisabledVisualElement" Background="#8CFFFFFF" CornerRadius="2" HorizontalAlignment="Stretch" Height="Auto" IsHitTestVisible="False" Opacity="0" VerticalAlignment="Stretch" Width="Auto"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White">

    <sdk:DataGrid x:Name="McDataGrid" HorizontalAlignment="Left" Height="500" VerticalAlignment="Top" Width="400" Style="{StaticResource DataGridStyle1}"/>

</Grid>

C#

  public MainPage()
    {
        InitializeComponent();

        Data();
        McDataGrid.ItemsSource = list;

    }

    public List<Model> list = new List<Model>();
    private List<Model> Data()
    {
        list.Add(new Model(1, "Test", "1", true));
        list.Add(new Model(2, "Ger", "2", true));
        list.Add(new Model(3, "dsg", "3", true));
        list.Add(new Model(4, "Hd", "4", false));
        list.Add(new Model(5, "TeHRFdgst", "5", false));
        return list;
    }

    public class Model : INotifyPropertyChanged
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Prop { get; set; }
        public bool enabled { get; set; }

        public event PropertyChangedEventHandler PropertyChanged;

        public Model(int id, string name, string prop, bool isenabled)
        {
            Id = id;
            Name = name;
            Prop = prop;
            enabled = isenabled;

        }

        protected virtual void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

But this far it only adds a column for IsEnabled as expected, but I thought it would also set the property value as well.

Could someone maybe explain how the binding between the XAML and C# works if it is even possible this way?

Body:
You could use a RowStyle to disable a row:

<Style x:Key="DataGridStyle1" TargetType="sdk:DataGrid">
    <Setter Property="RowStyle">
        <Setter.Value>
            <Style TargetType="sdk:DataGridRow">
                <Setter Property="IsEnabled" Value="{Binding enabled}"/>
            </Style>
        </Setter.Value>
...
    </Setter>


问:
Does Spring Tool Suite run on Windows 10?
Our agency requires that all Windows software be packaged by a central group. We've been using STS on Windows 7 for quite a while. I can't find any kind of official statement to indicate that it will run on Windows 10. Is STS working for folks running Windows 10 64 bit (HP hardware, if that makes a difference).

Several of us have tried finding information on the STS official site and I have submitted an issue to the STS issue tracker but it is unassigned. It would be helpful if we could point to some practical experience or success with this.

Thanks in advance,
Leila

答:
I received a very helpful comment from Martin Lippert on the STS issue tracker site. He said "The latest version of STS (3.8.3) as well as the upcoming version (3.8.4) are based on Eclipse Neon, which has Windows 10 as a supported target environment defined (https://www.eclipse.org/projects/project-plan.php?planurl=http://www.eclipse.org/eclipse/development/plans/eclipse_project_plan_4_6.xml). Therefore you can run STS on Windows 10."

We also tested it on a test computer and it seems to be working fine.


问:
Google Earth API for Android
I want to ask if Google Earth API is avaialble for developing android application.
If google earth api is not available for android, are there any map api which can be used off network on android?</p>

答: If you just want to open a location you can use the intents for searching on Google Earth. See How to fly to a location in Google Earth from your android app for examples</p>

Title: Google Earth API for Android


问:
value in ng-model with <ui-select> not the same as with native <select>
I wanted to replace the native <select> with the angular-ui-select framework <ui-select>. But I have trouble since the value in the ng-model variable does not stay the same after replacing. I guess I somehow didn't quite understand ui-select.

Below my code before and after replacing:

With the nativ <select>-Tag

```<code><select class="form-control ll-selbox ll-ptrhand" ng-model="newitem.type" ng-options="item.id as item.title | translate for item in types" ng-selected="updateComboboxes(0)"></select>
</code>```

in $scope.types: (copy()ed off console)

```<code>[
  {
    "id": "CT",
    "title": "WFLOWEDIT.OPT1.CT"
  },
  {
    "id": "MD",
    "title": "WFLOWEDIT.OPT1.MD"
  },
  {
    "id": "DT",
    "title": "WFLOWEDIT.OPT1.DT"
  },
  {
    "id": "CO",
    "title": "WFLOWEDIT.OPT1.CO"
  },
  {
    "id": "P",
    "title": "WFLOWEDIT.OPT1.P"
  }
]
</code>```

in $scope.newitem.type:

"CT" (String)

With the angular-ui-select-Framework-Tag:

```<code><ui-select class="ll-selbox " ng-model="newitem.type" theme="bootstrap" on-select="updateComboboxes(0)">
    <ui-select-match>{{$select.selected.title | translate}}</ui-select-match>
    <ui-select-choices location="wflowmodify" repeat="item in types | filter: $select.search" refresh-delay="0">
        <span ng-bind-html="item.title | translate | highlight: $select.search"></span>
    </ui-select-choices>
</ui-select>
</code>```

in $scope.types: (copy()ed off console)

```<code>[
  {
    "id": "CT",
    "title": "WFLOWEDIT.OPT1.CT",
    "$$hashKey": "object:114"
  },
  {
    "id": "MD",
    "title": "WFLOWEDIT.OPT1.MD",
    "$$hashKey": "object:115"
  },
  {
    "id": "DT",
    "title": "WFLOWEDIT.OPT1.DT",
    "$$hashKey": "object:116"
  },
  {
    "id": "CO",
    "title": "WFLOWEDIT.OPT1.CO",
    "$$hashKey": "object:117"
  },
  {
    "id": "P",
    "title": "WFLOWEDIT.OPT1.P",
    "$$hashKey": "object:118"
  }
]
</code>```

in $scope.newitem.type: (copy()ed off console)

```<code>{
  "id": "CT",
  "title": "WFLOWEDIT.OPT1.CT",
  "$$hashKey": "object:114"
}
</code>```

The controller:

```<code>cmod.controller('WorkflowModifierEditorCtrl', function ($rootScope, $scope, $modalInstance, i18n, subtitle, procid, modifiers, Restangular, WorkflowModifyService, AlertService, featureFlags) {
  $scope.modifiers = modifiers;
  $scope.subtitle = subtitle;
  $scope.procid = procid;

  $scope.types = [];
  $scope.codes = [];
  $scope.triggers = [];
  $scope.resolutions = [];

  $scope.newitem = {type: 'CT', code: '', trigger: '', res: ''};

  $scope.refreshData = function () {
    // Calling route CHECK_8
    Restangular.one('wflowmod').get({proc: procid}).then(function (data) {
      // types of rules ("workflow modifiers")
      if (data.checktypes && data.checktypes.length > 0) $scope.types.push({id: 'CT', title: 'WFLOWEDIT.OPT1.CT'});
      if (data.models && data.models.length > 0) $scope.types.push({id: 'MD', title: 'WFLOWEDIT.OPT1.MD'});
      if (data.devicetypes && data.devicetypes.length > 0) $scope.types.push({id: 'DT', title: 'WFLOWEDIT.OPT1.DT'});
      if (featureFlags.isOn("configtable") && data.configtables && data.configtables.length > 0) $scope.types.push({
        id: 'CO',
        title: 'WFLOWEDIT.OPT1.CO'
      });

      if (data.procedures && data.procedures.length > 0) $scope.types.push({id: 'P', title: 'WFLOWEDIT.OPT1.P'});
      if (data.steps && data.steps.length > 0) $scope.types.push({id: 'S', title: 'WFLOWEDIT.OPT1.S'});
      if (data.measures && data.measures.length > 0) $scope.types.push({id: 'M', title: 'WFLOWEDIT.OPT1.M'});
      if ($scope.types.length < 1) $modalInstance.dismiss();
      $scope.newitem.type = $scope.types[0].id;
      $scope.resdata = data;
      $scope.updateComboboxes(0);
      $scope.wfmods = WorkflowModifyService.getWorkflowModifiersForDisplay($scope.modifiers);
      $scope.wfModEditorLoaded = true;
    }, AlertService.showSevereRESTError)
  };

  $scope.oldType = null;
  $scope.oldTrigger = null;

  $scope.updateComboboxes = function (what) {
    console.log($scope.types);
    console.log($scope.newitem.type);
    // $scope.newitem.type = $scope.newitem.type.id;
    if (!$scope.resdata) return;
    if (what == 0) {
      if ($scope.oldType == $scope.newitem.type) return;
      $scope.oldType = $scope.newitem.type;
      $scope.codes = _.map(
        $scope.resdata[{
          CT: 'checktypes',
          MD: 'models',
          DT: 'devicetypes',
          P: 'procedures',
          S: 'steps',
          M: 'measures',
          CO: 'configtables'
        }[$scope.newitem.type]],
        function (entry) {
          var lang = i18n.getSelectedLanguage()['code'];
          var listitem = {};
          if (typeof entry === "string") {
            listitem.id = entry;
            listitem.title = entry;
          }
          else {
            // title will be translated when available, else just set the whole (e.g. configtables)
            listitem.id = entry[0];
            listitem.title = entry[0] + " - " + ( entry[1][lang] ? i18n.translate(entry[1]) : entry[1] );
          }
          return listitem;
        }
      );
      $scope.newitem.code = $scope.codes[0].id;
      var triggers = [];
      if (_.contains(['CT', 'MD', 'DT'], $scope.newitem.type)) {
        triggers.push({id: 'Select', title: 'WFLOWEDIT.OPT2.SEL'});
        triggers.push({id: '!Select', title: 'WFLOWEDIT.OPT2.NSEL'});
      }
      if (_.contains(['CO'], $scope.newitem.type)) {
        triggers.push({id: '!Select', title: 'WFLOWEDIT.OPT2.NACTIVE'});
        triggers.push({id: 'Select', title: 'WFLOWEDIT.OPT2.ACTIVE'});
      }
      if (_.contains(['P'], $scope.newitem.type)) {
        triggers.push({id: 'InQueue', title: 'WFLOWEDIT.OPT2.QUEUED'});
        triggers.push({id: '!InQueue', title: 'WFLOWEDIT.OPT2.NQUEUED'});
      }
      if (_.contains(['P', 'M', 'S'], $scope.newitem.type)) {
        triggers.push({id: 'Pass', title: 'WFLOWEDIT.OPT2.FINPASS'});
        triggers.push({id: 'Fail', title: 'WFLOWEDIT.OPT2.FINFAIL'});
        triggers.push({id: 'Skip', title: 'WFLOWEDIT.OPT2.SKIP'});
        triggers.push({id: '!Skip', title: 'WFLOWEDIT.OPT2.NSKIP'});
        triggers.push({id: 'Omit', title: 'WFLOWEDIT.OPT2.OMIT'});
        triggers.push({id: '!Omit', title: 'WFLOWEDIT.OPT2.NOMIT'});
      }
      if (_.contains(['M'], $scope.newitem.type)) {
        triggers.push({id: 'Yes', title: 'WFLOWEDIT.OPT2.YES'});
        triggers.push({id: 'No', title: 'WFLOWEDIT.OPT2.NO'});
      }
      $scope.triggers = triggers;
      $scope.newitem.trigger = $scope.triggers[0].id;
    }
    if ($scope.oldTrigger == $scope.newitem.trigger) return;
    $scope.oldTrigger = $scope.newitem.trigger;
    var resolutions = [{id: 'omit', title: 'WFLOWEDIT.OPT3.OMIT'}];
    if (!_.contains(['Select', '!Select', 'InQueue', '!InQueue'], $scope.newitem.trigger)) resolutions.push({
      id: 'skip',
      title: 'WFLOWEDIT.OPT3.SKIP'
    });
    $scope.resolutions = resolutions;
    $scope.newitem.res = $scope.resolutions[0].id;
  };

  $scope.addWorkflowModifier = function () {
    var newitem = {};
    newitem.type = $scope.newitem.type;
    newitem.code = $scope.newitem.code;
    newitem.res = $scope.newitem.res;
    if ($scope.newitem.trigger.substr(0, 1) == "!") {
      newitem.trigger = $scope.newitem.trigger.substr(1);
      newitem.inverse = true;
    } else {
      newitem.trigger = $scope.newitem.trigger;
    }
    $scope.modifiers.push(newitem);
    $scope.wfmods = WorkflowModifyService.getWorkflowModifiersForDisplay($scope.modifiers);
  };

  $scope.removeWorkflowModifier = function (idx) {
    var el = $scope.modifiers[idx - 1];
    if (el.type === 'CO') {
      var type = $scope.subtitle.msg.charAt(0).toLowerCase();
      var id = $rootScope.selecteditem.id;
      Restangular.one('configentry', el.code).one('blocker', type).one('id', id).remove().then(function (data) {
        // pass
      }, AlertService.showSevereRESTError);
    }

    $scope.modifiers.splice(idx - 1, 1);
    $scope.wfmods = WorkflowModifyService.getWorkflowModifiersForDisplay($scope.modifiers);
  };

  $scope.refreshData();

  $scope.close = function () {
    $modalInstance.close()
  };
});
</code>```

答:
It comes from your ui-select:

```<code><ui-select-choices location="wflowmodify" repeat="item in types | filter: $select.search" refresh-delay="0">
</code>```

but to macth your select structure you should do:

```<code><ui-select-choices location="wflowmodify" repeat="item.id as item in types | filter: $select.search" refresh-delay="0">
</code>```

Note the item.id is different. You should match the filter on a field of your item (I don't know on which one you want to filter)

Body:
I wanted to replace the native <select> with the angular-ui-select framework <ui-select>. But I have trouble since the value in the ng-model variable does not stay the same after replacing. I guess I somehow didn't quite understand ui-select.

Below my code before and after replacing:

With the nativ <select>-Tag

<select class="form-control ll-selbox ll-ptrhand" ng-model="newitem.type" ng-options="item.id as item.title | translate for item in types" ng-selected="updateComboboxes(0)"></select>

in $scope.types: (copy()ed off console)

[
  {
    "id": "CT",
    "title": "WFLOWEDIT.OPT1.CT"
  },
  {
    "id": "MD",
    "title": "WFLOWEDIT.OPT1.MD"
  },
  {
    "id": "DT",
    "title": "WFLOWEDIT.OPT1.DT"
  },
  {
    "id": "CO",
    "title": "WFLOWEDIT.OPT1.CO"
  },
  {
    "id": "P",
    "title": "WFLOWEDIT.OPT1.P"
  }
]

in $scope.newitem.type:

"CT" (String)

With the angular-ui-select-Framework-Tag:

<ui-select class="ll-selbox " ng-model="newitem.type" theme="bootstrap" on-select="updateComboboxes(0)">
    <ui-select-match>{{$select.selected.title | translate}}</ui-select-match>
    <ui-select-choices location="wflowmodify" repeat="item in types | filter: $select.search" refresh-delay="0">

    </ui-select-choices>
</ui-select>

in $scope.types: (copy()ed off console)

[
  {
    "id": "CT",
    "title": "WFLOWEDIT.OPT1.CT",
    "$$hashKey": "object:114"
  },
  {
    "id": "MD",
    "title": "WFLOWEDIT.OPT1.MD",
    "$$hashKey": "object:115"
  },
  {
    "id": "DT",
    "title": "WFLOWEDIT.OPT1.DT",
    "$$hashKey": "object:116"
  },
  {
    "id": "CO",
    "title": "WFLOWEDIT.OPT1.CO",
    "$$hashKey": "object:117"
  },
  {
    "id": "P",
    "title": "WFLOWEDIT.OPT1.P",
    "$$hashKey": "object:118"
  }
]

in $scope.newitem.type: (copy()ed off console)

{
  "id": "CT",
  "title": "WFLOWEDIT.OPT1.CT",
  "$$hashKey": "object:114"
}

The controller:

cmod.controller('WorkflowModifierEditorCtrl', function ($rootScope, $scope, $modalInstance, i18n, subtitle, procid, modifiers, Restangular, WorkflowModifyService, AlertService, featureFlags) {
  $scope.modifiers = modifiers;
  $scope.subtitle = subtitle;
  $scope.procid = procid;

  $scope.types = [];
  $scope.codes = [];
  $scope.triggers = [];
  $scope.resolutions = [];

  $scope.newitem = {type: 'CT', code: '', trigger: '', res: ''};

  $scope.refreshData = function () {
    // Calling route CHECK_8
    Restangular.one('wflowmod').get({proc: procid}).then(function (data) {
      // types of rules ("workflow modifiers")
      if (data.checktypes && data.checktypes.length > 0) $scope.types.push({id: 'CT', title: 'WFLOWEDIT.OPT1.CT'});
      if (data.models && data.models.length > 0) $scope.types.push({id: 'MD', title: 'WFLOWEDIT.OPT1.MD'});
      if (data.devicetypes && data.devicetypes.length > 0) $scope.types.push({id: 'DT', title: 'WFLOWEDIT.OPT1.DT'});
      if (featureFlags.isOn("configtable") && data.configtables && data.configtables.length > 0) $scope.types.push({
        id: 'CO',
        title: 'WFLOWEDIT.OPT1.CO'
      });

      if (data.procedures && data.procedures.length > 0) $scope.types.push({id: 'P', title: 'WFLOWEDIT.OPT1.P'});
      if (data.steps && data.steps.length > 0) $scope.types.push({id: 'S', title: 'WFLOWEDIT.OPT1.S'});
      if (data.measures && data.measures.length > 0) $scope.types.push({id: 'M', title: 'WFLOWEDIT.OPT1.M'});
      if ($scope.types.length < 1) $modalInstance.dismiss();
      $scope.newitem.type = $scope.types[0].id;
      $scope.resdata = data;
      $scope.updateComboboxes(0);
      $scope.wfmods = WorkflowModifyService.getWorkflowModifiersForDisplay($scope.modifiers);
      $scope.wfModEditorLoaded = true;
    }, AlertService.showSevereRESTError)
  };

  $scope.oldType = null;
  $scope.oldTrigger = null;

  $scope.updateComboboxes = function (what) {
    console.log($scope.types);
    console.log($scope.newitem.type);
    // $scope.newitem.type = $scope.newitem.type.id;
    if (!$scope.resdata) return;
    if (what == 0) {
      if ($scope.oldType == $scope.newitem.type) return;
      $scope.oldType = $scope.newitem.type;
      $scope.codes = _.map(
        $scope.resdata[{
          CT: 'checktypes',
          MD: 'models',
          DT: 'devicetypes',
          P: 'procedures',
          S: 'steps',
          M: 'measures',
          CO: 'configtables'
        }[$scope.newitem.type]],
        function (entry) {
          var lang = i18n.getSelectedLanguage()['code'];
          var listitem = {};
          if (typeof entry === "string") {
            listitem.id = entry;
            listitem.title = entry;
          }
          else {
            // title will be translated when available, else just set the whole (e.g. configtables)
            listitem.id = entry[0];
            listitem.title = entry[0] + " - " + ( entry[1][lang] ? i18n.translate(entry[1]) : entry[1] );
          }
          return listitem;
        }
      );
      $scope.newitem.code = $scope.codes[0].id;
      var triggers = [];
      if (_.contains(['CT', 'MD', 'DT'], $scope.newitem.type)) {
        triggers.push({id: 'Select', title: 'WFLOWEDIT.OPT2.SEL'});
        triggers.push({id: '!Select', title: 'WFLOWEDIT.OPT2.NSEL'});
      }
      if (_.contains(['CO'], $scope.newitem.type)) {
        triggers.push({id: '!Select', title: 'WFLOWEDIT.OPT2.NACTIVE'});
        triggers.push({id: 'Select', title: 'WFLOWEDIT.OPT2.ACTIVE'});
      }
      if (_.contains(['P'], $scope.newitem.type)) {
        triggers.push({id: 'InQueue', title: 'WFLOWEDIT.OPT2.QUEUED'});
        triggers.push({id: '!InQueue', title: 'WFLOWEDIT.OPT2.NQUEUED'});
      }
      if (_.contains(['P', 'M', 'S'], $scope.newitem.type)) {
        triggers.push({id: 'Pass', title: 'WFLOWEDIT.OPT2.FINPASS'});
        triggers.push({id: 'Fail', title: 'WFLOWEDIT.OPT2.FINFAIL'});
        triggers.push({id: 'Skip', title: 'WFLOWEDIT.OPT2.SKIP'});
        triggers.push({id: '!Skip', title: 'WFLOWEDIT.OPT2.NSKIP'});
        triggers.push({id: 'Omit', title: 'WFLOWEDIT.OPT2.OMIT'});
        triggers.push({id: '!Omit', title: 'WFLOWEDIT.OPT2.NOMIT'});
      }
      if (_.contains(['M'], $scope.newitem.type)) {
        triggers.push({id: 'Yes', title: 'WFLOWEDIT.OPT2.YES'});
        triggers.push({id: 'No', title: 'WFLOWEDIT.OPT2.NO'});
      }
      $scope.triggers = triggers;
      $scope.newitem.trigger = $scope.triggers[0].id;
    }
    if ($scope.oldTrigger == $scope.newitem.trigger) return;
    $scope.oldTrigger = $scope.newitem.trigger;
    var resolutions = [{id: 'omit', title: 'WFLOWEDIT.OPT3.OMIT'}];
    if (!_.contains(['Select', '!Select', 'InQueue', '!InQueue'], $scope.newitem.trigger)) resolutions.push({
      id: 'skip',
      title: 'WFLOWEDIT.OPT3.SKIP'
    });
    $scope.resolutions = resolutions;
    $scope.newitem.res = $scope.resolutions[0].id;
  };

  $scope.addWorkflowModifier = function () {
    var newitem = {};
    newitem.type = $scope.newitem.type;
    newitem.code = $scope.newitem.code;
    newitem.res = $scope.newitem.res;
    if ($scope.newitem.trigger.substr(0, 1) == "!") {
      newitem.trigger = $scope.newitem.trigger.substr(1);
      newitem.inverse = true;
    } else {
      newitem.trigger = $scope.newitem.trigger;
    }
    $scope.modifiers.push(newitem);
    $scope.wfmods = WorkflowModifyService.getWorkflowModifiersForDisplay($scope.modifiers);
  };

  $scope.removeWorkflowModifier = function (idx) {
    var el = $scope.modifiers[idx - 1];
    if (el.type === 'CO') {
      var type = $scope.subtitle.msg.charAt(0).toLowerCase();
      var id = $rootScope.selecteditem.id;
      Restangular.one('configentry', el.code).one('blocker', type).one('id', id).remove().then(function (data) {
        // pass
      }, AlertService.showSevereRESTError);
    }

    $scope.modifiers.splice(idx - 1, 1);
    $scope.wfmods = WorkflowModifyService.getWorkflowModifiersForDisplay($scope.modifiers);
  };

  $scope.refreshData();

  $scope.close = function () {
    $modalInstance.close()
  };
});

Body:
It comes from your ui-select:

<ui-select-choices location="wflowmodify" repeat="item in types | filter: $select.search" refresh-delay="0">

but to macth your select structure you should do:

<ui-select-choices location="wflowmodify" repeat="item.id as item in types | filter: $select.search" refresh-delay="0">

Note the item.id is different. You should match the filter on a field of your item (I don't know on which one you want to filter)


问:
Cartesian product data frame
I have three or more independent variables represented as R vectors, like so:

```<code>A <- c(1,2,3)
B <- factor(c('x','y'))
C <- c(0.1,0.5)
</code>```

and I want to take the Cartesian product of all of them and put the result into a data frame, like this:

```<code>A B C
1 x 0.1
1 x 0.5
1 y 0.1
1 y 0.5
2 x 0.1
2 x 0.5
2 y 0.1
2 y 0.5
3 x 0.1
3 x 0.5
3 y 0.1
3 y 0.5
</code>```

I can do this by manually writing out calls to rep:

```<code>d <- data.frame(A = rep(A, times=length(B)*length(C)),
                B = rep(B, times=length(A), each=length(C)),
                C = rep(C, each=length(A)*length(B))
</code>```

but there must be a more elegant way to do it, yes?  product in itertools does part of the job, but I can't find any way to absorb the output of an iterator and put it into a data frame.  Any suggestions?

p.s. The next step in this calculation looks like

```<code>d$D <- f(d$A, d$B, d$C)
</code>```

so if you know a way to do both steps at once, that would also be helpful.

答:
I can never remember that standard function expand.grid. So here's another version.

```<code>crossproduct <- function(...,FUN='data.frame') {
  args <- list(...)
  n1 <- names(args)
  n2 <- sapply(match.call()[1+1:length(args)], as.character)
  nn <- if (is.null(n1)) n2 else ifelse(n1!='',n1,n2)
  dims <- sapply(args,length)
  dimtot <- prod(dims)
  reps <- rev(cumprod(c(1,rev(dims))))[-1]
  cols <- lapply(1:length(dims), function(j)
                 args[[j]][1+((1:dimtot-1) %/% reps[j]) %% dims[j]])
  names(cols) <- nn
  do.call(match.fun(FUN),cols)
}

A <- c(1,2,3)
B <- factor(c('x','y'))
C <- c(.1,.5)

crossproduct(A,B,C)

crossproduct(A,B,C, FUN=function(...) paste(...,sep='_'))
</code>```

Title: Cartesian product data frame

Body:
I have three or more independent variables represented as R vectors, like so:

A <- c(1,2,3)
B <- factor(c('x','y'))
C <- c(0.1,0.5)

and I want to take the Cartesian product of all of them and put the result into a data frame, like this:

A B C
1 x 0.1
1 x 0.5
1 y 0.1
1 y 0.5
2 x 0.1
2 x 0.5
2 y 0.1
2 y 0.5
3 x 0.1
3 x 0.5
3 y 0.1
3 y 0.5

I can do this by manually writing out calls to rep:

d <- data.frame(A = rep(A, times=length(B)*length(C)),
                B = rep(B, times=length(A), each=length(C)),
                C = rep(C, each=length(A)*length(B))

but there must be a more elegant way to do it, yes?  product in itertools does part of the job, but I can't find any way to absorb the output of an iterator and put it into a data frame.  Any suggestions?

p.s. The next step in this calculation looks like

d$D <- f(d$A, d$B, d$C)

so if you know a way to do both steps at once, that would also be helpful.

Body:
I can never remember that standard function expand.grid. So here's another version.

crossproduct <- function(...,FUN='data.frame') {
  args <- list(...)
  n1 <- names(args)
  n2 <- sapply(match.call()[1+1:length(args)], as.character)
  nn <- if (is.null(n1)) n2 else ifelse(n1!='',n1,n2)
  dims <- sapply(args,length)
  dimtot <- prod(dims)
  reps <- rev(cumprod(c(1,rev(dims))))[-1]
  cols <- lapply(1:length(dims), function(j)
                 args[[j]][1+((1:dimtot-1) %/% reps[j]) %% dims[j]])
  names(cols) <- nn
  do.call(match.fun(FUN),cols)
}

A <- c(1,2,3)
B <- factor(c('x','y'))
C <- c(.1,.5)

crossproduct(A,B,C)

crossproduct(A,B,C, FUN=function(...) paste(...,sep='_'))


问:
Input/Output on a file
I wrote a short program for one of my class and there is something that I just cannot figure out. So I am supposed to write 100 random integers on a file, read back the data and print the integers in increasing order. Everything works fine, but I don't see my final sorted list on the output file, anyone can see why?

Here is my code:

```<code>private final static int NUMBEROFRANDOM = 100;

public static void main(String[] args) throws IOException {

    // Creating my file
    java.io.File file = new java.io.File("Question1.txt");

    // If it already exists, print a message and terminate program
    if (file.exists()) {
        System.out.println("File already exists.");
        System.exit(0);
    }

    // Creating my PrintWriter object
    PrintWriter output = new PrintWriter(file);

    // Creating 100 random numbers between 0 and 100 and printing them on the file
    for (int i = 0; i < NUMBEROFRANDOM; i++) {
        int number = (int) (Math.random() * 101);
        output.print(number + " ");
    }

    // Creating my Scanner object
    Scanner input = new Scanner(file);

    // Creating my array list to store the sorted list of 100 elements
    ArrayList<Integer> sortedList = new ArrayList<Integer>();

    // Reading the elements from the file and adding them into my array list
    while (input.hasNext()) {
        sortedList.add(input.nextInt());
    }

    //Sorting elements from array list
    Collections.sort(sortedList);

    // Printing the elements in increasing order
    for (int i = 0; i < sortedList.size(); i++) {
        //System.out.println(sortedList.get(i));
        output.print(sortedList.get(i));
    }

    // Closing my objects
    input.close();
    output.close();

}
</code>```

Thank you very much, any help is very appreciated!

答:
Before below line of code, you need to close or flush to write your contents to your file.

```<code>output.close(); <--- you need to close here
Scanner input = new Scanner(file);
</code>```

Since, till above line of code, there was nothing written to the file. So, below code become useless

```<code>while (input.hasNext()) {  // nothing to read
        sortedList.add(input.nextInt()); //nothing added to List
    }

    //Sorting elements from array list
    Collections.sort(sortedList);  //nothing to sort

    // Printing the elements in increasing order
    for (int i = 0; i < sortedList.size(); i++) {

        output.print(sortedList.get(i)); // won't execute this line
    }
</code>```

Title: Input/Output on a file

Body:
I wrote a short program for one of my class and there is something that I just cannot figure out. So I am supposed to write 100 random integers on a file, read back the data and print the integers in increasing order. Everything works fine, but I don't see my final sorted list on the output file, anyone can see why?

Here is my code:

private final static int NUMBEROFRANDOM = 100;

public static void main(String[] args) throws IOException {

    // Creating my file
    java.io.File file = new java.io.File("Question1.txt");

    // If it already exists, print a message and terminate program
    if (file.exists()) {
        System.out.println("File already exists.");
        System.exit(0);
    }

    // Creating my PrintWriter object
    PrintWriter output = new PrintWriter(file);

    // Creating 100 random numbers between 0 and 100 and printing them on the file
    for (int i = 0; i < NUMBEROFRANDOM; i++) {
        int number = (int) (Math.random() * 101);
        output.print(number + " ");
    }

    // Creating my Scanner object
    Scanner input = new Scanner(file);

    // Creating my array list to store the sorted list of 100 elements
    ArrayList<Integer> sortedList = new ArrayList<Integer>();

    // Reading the elements from the file and adding them into my array list
    while (input.hasNext()) {
        sortedList.add(input.nextInt());
    }

    //Sorting elements from array list
    Collections.sort(sortedList);

    // Printing the elements in increasing order
    for (int i = 0; i < sortedList.size(); i++) {
        //System.out.println(sortedList.get(i));
        output.print(sortedList.get(i));
    }

    // Closing my objects
    input.close();
    output.close();

}

Thank you very much, any help is very appreciated!

Body:
Before below line of code, you need to close or flush to write your contents to your file.

output.close(); <--- you need to close here
Scanner input = new Scanner(file);

Since, till above line of code, there was nothing written to the file. So, below code become useless

while (input.hasNext()) {  // nothing to read
        sortedList.add(input.nextInt()); //nothing added to List
    }

    //Sorting elements from array list
    Collections.sort(sortedList);  //nothing to sort

    // Printing the elements in increasing order
    for (int i = 0; i < sortedList.size(); i++) {

        output.print(sortedList.get(i)); // won't execute this line
    }


问:
What is the typical speed that PHP connects to MySQL?
Say I have very standard mysql connection code:

```<code>$dbhost = '192.168.1.99';
$dbuser = 'dbuser';
$dbpass = 'dbuserpass';
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die('Error connecting to mysql');
$dbname = 'mydb';
mysql_select_db($dbname);
</code>```

This would connect from the web server to the database server (say the web server is at 192.168.1.98 or something). Typically, how long would the above code run? Currently, I'm seeing about 2 seconds. Is that slow?

答: For local LAN, unless you're using antiquated equipment, or something is wrong, it should typically be on the order of (a) millisecond(s).</p>

Body:
Say I have very standard mysql connection code:

$dbhost = '192.168.1.99';
$dbuser = 'dbuser';
$dbpass = 'dbuserpass';
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die('Error connecting to mysql');
$dbname = 'mydb';
mysql_select_db($dbname);

This would connect from the web server to the database server (say the web server is at 192.168.1.98 or something). Typically, how long would the above code run? Currently, I'm seeing about 2 seconds. Is that slow?


答:
Use CSS3 media query API, called the window.matchMedia.

For example:

```<code>var mediaQuery = window.matchMedia( "(max-width: 768px)" );
if (mediaQuery.matches) {
  // your code on mobile or small screen devices
} else {
  // your code on everything else
}
</code>```

Working Snippet (check inline and also expand snippet):

var mediaQuery = window.matchMedia( "(max-width: 768px)" );
if (mediaQuery.matches) {
  console.log('small screen code runs here');
} else {
  console.log('big screen code runs here');
}```

Body:
Use CSS3 media query API, called the window.matchMedia.

For example:

var mediaQuery = window.matchMedia( "(max-width: 768px)" );
if (mediaQuery.matches) {
  // your code on mobile or small screen devices
} else {
  // your code on everything else
}

Working Snippet (check inline and also expand snippet):

var mediaQuery = window.matchMedia( "(max-width: 768px)" );
if (mediaQuery.matches) {
  console.log('small screen code runs here');
} else {
  console.log('big screen code runs here');
}


问:
Zend Framework 2/3 Secure REST API
I am trying to build a zend framework application tied to angular. So I am thinking to go with the RESTful approach. Do you have any references on examples on how to this securely?</p>

答:
I would suggest looking at Apigility (Created by Zend and built on top of the framework) https://apigility.org/ if you want to build RESTful API's with Zend Framework.

If you want to build APIs direct with Zend Framework you could lift a lot of ideas for authentication and authorization from the Apilgity docs https://apigility.org/documentation/auth/intro

Title: Zend Framework 2/3 Secure REST API


问:
Django url pattern to ignore extra characters
I have a django url shown below :

```<code>url(r'^update_status/field1/(?P<field1_id>.*)/field2/(?P<field2_id>.*)/$', 'update_status', name='update_status')
</code>```

This catches both the urls like :

```<code>update_status/field1/0445df4d8e1c43ae9/field2/f12b6b5c98/mraid.js/
</code>```

and

```<code>update_status/field1/0445df4d8e1c43ae9/field2/f12b6b5c98
</code>```

I  want to capture only the second url . What should be changed in the django url?

答:
Your regular expression (?P<field_id>.*) catches any character, including / characters. You want to restrict it to the format of the field_ids like this: (?P<field1_id>[0-9a-f]+) (same for field2_id).

Note: I'm assuming your id consists only of hexadecimal characters.

Body:
I have a django url shown below :

url(r'^update_status/field1/(?P<field1_id>.*)/field2/(?P<field2_id>.*)/$', 'update_status', name='update_status')

This catches both the urls like :

update_status/field1/0445df4d8e1c43ae9/field2/f12b6b5c98/mraid.js/

and

update_status/field1/0445df4d8e1c43ae9/field2/f12b6b5c98

I  want to capture only the second url . What should be changed in the django url?


问:
How to make Varnish ignore, not delete cookies
I want to use Varnish to cache certain pages even in the presence of cookies. There are 3 possibilities that I need to take care of:

An anonymous user is viewing some page

A logged in user is viewing some page with light customization. These customizations are all stored in a signed-cookie and are dynamically populated by Javascript. The vary-cookie http header is not set.

A logged in user is viewing some page with customized data from the database. The vary-cookie http header is set.

The expected behaviors would be:

Cache the page. This is the most basic scenario for Varnish to handle.

Cache the page and do not delete the cookie because some Javascript logic needs it.

Never cache this page because vary-cookie is signalling the cookie contents will affect the output of this page.

I have read some docs on Varnish and I cannot tell if this is the default behavior or if there is some setup I have to do in VCL to make it happen.

答:
Only sessions are unique to every client, not necessarily cookies.

What you want makes sense and is possible with Varnish, it is just a matter of carefully crafting your own vcl. Please pay attention to the following parts of the default.vcl:

```<code>sub vcl_recv {
    ...
    if (req.http.Authorization || req.http.Cookie) {
      /* Not cacheable by default */
      return (pass);
    }
}

sub vcl_hit {
    if (!obj.cacheable) {
        return (pass);
    }
    ...
}

sub vcl_fetch {
    if (!beresp.cacheable) {
        return (pass);
    }
    if (beresp.http.Set-Cookie) {
        return (pass);
    }
    ...
}
</code>```

You have to replace these parts with your own logic; i.e. define your own vcl_ functions. By default, requests (vcl_recv) and responses (vcl_fetch) with cookies are not cacheable. You know your back-end application best and you should rewrite the generic caching logic to this specific case. That is, you should define in which case varnish does a lookup, pass or deliver.

In your case, you will have pages (case 1 and 2) without a vary-by cookie, which will be cached and shared by everyone (requests with/without cookies); just don't mind req.http.Cookie in vcl_recv. I wouldn't cache pages (case 3) with a vary-by cookie -or at least not for a long time-, as they can not be shared at all; do a 'pass' in vcl_fetch.

Body:
Only sessions are unique to every client, not necessarily cookies.

What you want makes sense and is possible with Varnish, it is just a matter of carefully crafting your own vcl. Please pay attention to the following parts of the default.vcl:

sub vcl_recv {
    ...
    if (req.http.Authorization || req.http.Cookie) {
      /* Not cacheable by default */
      return (pass);
    }
}

sub vcl_hit {
    if (!obj.cacheable) {
        return (pass);
    }
    ...
}

sub vcl_fetch {
    if (!beresp.cacheable) {
        return (pass);
    }
    if (beresp.http.Set-Cookie) {
        return (pass);
    }
    ...
}

You have to replace these parts with your own logic; i.e. define your own vcl_ functions. By default, requests (vcl_recv) and responses (vcl_fetch) with cookies are not cacheable. You know your back-end application best and you should rewrite the generic caching logic to this specific case. That is, you should define in which case varnish does a lookup, pass or deliver.

In your case, you will have pages (case 1 and 2) without a vary-by cookie, which will be cached and shared by everyone (requests with/without cookies); just don't mind req.http.Cookie in vcl_recv. I wouldn't cache pages (case 3) with a vary-by cookie -or at least not for a long time-, as they can not be shared at all; do a 'pass' in vcl_fetch.