Controlling the loadingIndicator via loading property
authorJaroslav Tulach <jaroslav.tulach@apidesign.org>
Wed, 15 May 2013 11:14:39 +0200
changeset 1213022099dee442
parent 1212 70defaefc082
child 1214 b5eb8c0196c1
Controlling the loadingIndicator via loading property
ko-archetype/src/main/resources/archetype-resources/src/main/java/TwitterClient.java
ko-archetype/src/main/resources/archetype-resources/src/main/resources/index.html
ko-archetype/src/main/resources/archetype-resources/src/main/resources/twitterExample.css
     1.1 --- a/ko-archetype/src/main/resources/archetype-resources/src/main/java/TwitterClient.java	Wed May 15 11:01:17 2013 +0200
     1.2 +++ b/ko-archetype/src/main/resources/archetype-resources/src/main/java/TwitterClient.java	Wed May 15 11:14:39 2013 +0200
     1.3 @@ -15,6 +15,7 @@
     1.4      @Property(name="activeTweetersName", type=String.class),
     1.5      @Property(name="activeTweeters", type=String.class, array = true),
     1.6      @Property(name="userNameToAdd", type=String.class),
     1.7 +    @Property(name="loading", type=boolean.class),
     1.8      @Property(name="currentTweets", type=Tweet.class, array = true)
     1.9  })
    1.10  public class TwitterClient {
    1.11 @@ -65,6 +66,7 @@
    1.12      static void queryTweets(TwitterModel page, TwitterQuery q) {
    1.13          page.getCurrentTweets().clear();
    1.14          page.getCurrentTweets().addAll(q.getResults());
    1.15 +        page.setLoading(false);
    1.16      }
    1.17      
    1.18      @OnPropertyChange("activeTweetersName")
    1.19 @@ -85,6 +87,7 @@
    1.20              sb.append(p);
    1.21              sep = " OR ";
    1.22          }
    1.23 +        model.setLoading(true);
    1.24          model.queryTweets("http://search.twitter.com", sb.toString());
    1.25      }
    1.26      
     2.1 --- a/ko-archetype/src/main/resources/archetype-resources/src/main/resources/index.html	Wed May 15 11:01:17 2013 +0200
     2.2 +++ b/ko-archetype/src/main/resources/archetype-resources/src/main/resources/index.html	Wed May 15 11:14:39 2013 +0200
     2.3 @@ -65,7 +65,7 @@
     2.4                  </form>
     2.5              </div>
     2.6              <div class='tweets'>
     2.7 -                <div class='loadingIndicator'>Loading...</div>
     2.8 +                <div class='loadingIndicator' data-bind="visible: loading">Loading...</div>
     2.9                  <table data-bind='foreach: currentTweets' width='100%'>
    2.10                      <tr>
    2.11                          <td><img data-bind='attr: { src: profile_image_url }' /></td>
     3.1 --- a/ko-archetype/src/main/resources/archetype-resources/src/main/resources/twitterExample.css	Wed May 15 11:01:17 2013 +0200
     3.2 +++ b/ko-archetype/src/main/resources/archetype-resources/src/main/resources/twitterExample.css	Wed May 15 11:14:39 2013 +0200
     3.3 @@ -29,4 +29,4 @@
     3.4  .configuration form input { width:40%; font-size: 1.3em; border:1px solid silver; background-color: White; padding: 0.1em; }
     3.5  .configuration form button { width: 20%; margin-left: 0.3em; height: 2em; }
     3.6  
     3.7 -.loadingIndicator { position: absolute; top: 0.1em; left: 0.1em; font: 0.8em Arial; background-color: #229; color: White; padding: 0.2em 0.5em 0.2em 0.5em; display: none; }
     3.8 +.loadingIndicator { position: absolute; top: 0.1em; left: 0.1em; font: 0.8em Arial; background-color: #229; color: White; padding: 0.2em 0.5em 0.2em 0.5em; }