atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">

  <title><![CDATA[Aaron Liew's Blog]]></title>
  <link href="http://aaronliew.github.io/atom.xml" rel="self"/>
  <link href="http://aaronliew.github.io/"/>
  <updated>2015-04-20T14:40:36+08:00</updated>
  <id>http://aaronliew.github.io/</id>
  <author>
    <name><![CDATA[Aaron Liew]]></name>
    
  </author>
  <generator uri="http://octopress.org/">Octopress</generator>

  
  <entry>
    <title type="html"><![CDATA[Android Annotation]]></title>
    <link href="http://aaronliew.github.io/blog/2015/04/20/android-annotation-code-restructuring/"/>
    <updated>2015-04-20T10:18:17+08:00</updated>
    <id>http://aaronliew.github.io/blog/2015/04/20/android-annotation-code-restructuring</id>
    <content type="html"><![CDATA[<p>Android Annotation(AA) is framework that facilitate the writing and the maintenance of Android Applications, and greatly simplifies the code. It generates subclasses at compile time, for example, the subclass of the MainActivity class would be MainActivity_. To understand how the AA works, you can have a look at the subclass of the Activity.</p>

<p><strong>How to enhance Android Code with AA</strong></p>

<p>I would like to discuss the common annotations that would be used in Android Development.</p>

<p>Add @EActivity with layout id at the top of the class to replace setContentView of the Activity Class</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='java'><span class='line'><span class="nd">@EActivity</span><span class="o">(</span><span class="n">R</span><span class="o">.</span><span class="na">layout</span><span class="o">.</span><span class="na">sliding_menu</span><span class="o">)</span>
</span><span class='line'><span class="kd">public</span> <span class="kd">class</span> <span class="nc">BaseActivity</span> <span class="kd">extends</span> <span class="n">ActionBarActivity</span>
</span></code></pre></td></tr></table></div></figure>


<p>Add @ViewById to replace findViewById</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='java'><span class='line'><span class="nd">@ViewById</span><span class="o">(</span><span class="n">R</span><span class="o">.</span><span class="na">id</span><span class="o">.</span><span class="na">drawer_layout</span><span class="o">)</span>
</span><span class='line'><span class="n">DrawerLayout</span> <span class="n">mDrawerLayout</span><span class="o">;</span>
</span></code></pre></td></tr></table></div></figure>


<p>Add @Bean to inject the activity context into class</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='java'><span class='line'><span class="nd">@Bean</span>
</span><span class='line'><span class="n">GlobalApplication</span> <span class="n">globalApplication</span><span class="o">;</span>
</span></code></pre></td></tr></table></div></figure>


<p>Add @AfterView before method to do something after view injection, for example, setText, setBackground, etc..</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='java'><span class='line'><span class="nd">@AfterViews</span>
</span><span class='line'><span class="kd">public</span> <span class="kt">void</span> <span class="nf">initLayout</span><span class="o">()</span>
</span></code></pre></td></tr></table></div></figure>


<p>Add @Click method with view&rsquo;s id to handle OnClickListener.</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='java'><span class='line'><span class="nd">@Click</span><span class="o">(</span><span class="n">R</span><span class="o">.</span><span class="na">id</span><span class="o">.</span><span class="na">about_us_linearLayout</span><span class="o">)</span>
</span><span class='line'><span class="kd">public</span> <span class="kt">void</span> <span class="nf">ClickAboutUs</span><span class="o">()</span>
</span></code></pre></td></tr></table></div></figure>


<p>That&rsquo;s it. There is no need to do &ldquo;findViewById&rdquo; to get the view then followed by setOnClickListener.</p>

<p>Want to run a thread? Add @Background above the method</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='java'><span class='line'><span class="nd">@Background</span>
</span><span class='line'><span class="kd">public</span> <span class="kt">void</span> <span class="nf">DownloadAndSetImage</span><span class="o">()</span>
</span></code></pre></td></tr></table></div></figure>


<p>Initiate the Layoutinflator using @SystemService</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='java'><span class='line'><span class="nd">@SystemService</span>
</span><span class='line'><span class="n">LayoutInflater</span> <span class="n">inflator</span><span class="o">;</span>
</span></code></pre></td></tr></table></div></figure>


<p>Add EBean at the top of the CLass in order to use available annotations</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='java'><span class='line'><span class="nd">@EBean</span>
</span><span class='line'><span class="kd">public</span> <span class="kd">class</span> <span class="nc">GlobalApplication</span>
</span></code></pre></td></tr></table></div></figure>


<p>Add @RootContext to inject the context into the class</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='java'><span class='line'><span class="nd">@RootContext</span>
</span><span class='line'><span class="kd">static</span> <span class="n">Context</span> <span class="n">context</span><span class="o">;</span>
</span></code></pre></td></tr></table></div></figure>



]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[RxAndroid]]></title>
    <link href="http://aaronliew.github.io/blog/2015/04/15/rxandroid/"/>
    <updated>2015-04-15T11:42:08+08:00</updated>
    <id>http://aaronliew.github.io/blog/2015/04/15/rxandroid</id>
    <content type="html"><![CDATA[<p><strong>What is Reactive Java?</strong></p>

<p>Reactive Java is the library that manages sequences of event by using observable sequences. It is currently implemented by Netflix. Here is the demonstration of the RxJava:</p>

<p><img class="center" src="http://aaronliew.github.io/images/RxJava/RxExample.png" title="Example of RxJava" ></p>

<p>In this example, circular item represents an event where event could be click event, caches, variables, data. It ensures that the event is completed before proceed
to the next event. Each events can be modified into new form before proceed to the next action. For example,  It applies &ldquo;Map&rdquo; function to the observable sequences into new form.</p>

<p><img class="center" src="http://aaronliew.github.io/images/RxJava/Map.png" title="Map" ></p>

<p><em>Basic Explanation on Observable</em></p>

<p><img class="center" src="http://aaronliew.github.io/images/RxJava/Explanation.png" title="Map" ></p>

<p><strong>Common Usage of RxAndroid</strong></p>

<p><em>Lifecycle observable</em></p>

<p>RxAndroid is able to create a subscription that is bound to lifecycle: OnStart, OnPause and OnResume. It subscribes to an observable on &ldquo;OnStart&rdquo; and unsubscribes observable on &ldquo;onPause&rdquo; and &ldquo;onDestroy&rdquo; lifecycle.  It is important to do so to avoid NullPointerException. NullPointerException happens if it tries to update the UI which is already destroyed after stream of events is completed.</p>

<p><em>Listening observable</em></p>

<p>Whenever there is rotation of screen, the data and activity will be destroyed. RxJava provides feature that always listening to the background sequence which keeps emitting items, and updating UI components, for example Textviews even after screen rotation or detached from the screen.</p>

<p><em>Implementation of Lifecycle and Listening observable</em></p>

<p>In OnCreate, start the sequences.</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class='java'><span class='line'><span class="nd">@Override</span>
</span><span class='line'><span class="kd">public</span> <span class="kt">void</span> <span class="nf">onCreate</span><span class="o">(</span><span class="n">Bundle</span> <span class="n">savedInstanceState</span><span class="o">)</span> <span class="o">{</span>
</span><span class='line'>    <span class="kd">super</span><span class="o">.</span><span class="na">onCreate</span><span class="o">(</span><span class="n">savedInstanceState</span><span class="o">);</span>
</span><span class='line'>
</span><span class='line'>    <span class="n">strings</span> <span class="o">=</span> <span class="n">SampleObservables</span><span class="o">.</span><span class="na">numberStrings</span><span class="o">(</span><span class="mi">1</span><span class="o">,</span> <span class="mi">50</span><span class="o">,</span> <span class="mi">250</span><span class="o">).</span><span class="na">publish</span><span class="o">();</span>
</span><span class='line'>    <span class="n">strings</span><span class="o">.</span><span class="na">connect</span><span class="o">();</span> <span class="c1">// trigger the sequence</span>
</span><span class='line'><span class="o">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>In OnViewCreated of the Fragment, do the subscription. It means whenever the view is created, it will subscribe to an observable and continue to update the UI components i.e. TextView.</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
</pre></td><td class='code'><pre><code class='java'><span class='line'><span class="n">subscription</span> <span class="o">=</span> <span class="n">AppObservable</span><span class="o">.</span><span class="na">bindFragment</span><span class="o">(</span><span class="k">this</span><span class="o">,</span> <span class="n">strings</span><span class="o">).</span><span class="na">subscribe</span><span class="o">(</span><span class="k">new</span> <span class="n">Subscriber</span><span class="o">&lt;</span><span class="n">String</span><span class="o">&gt;()</span> <span class="o">{</span>
</span><span class='line'>  
</span><span class='line'>  <span class="nd">@Override</span>
</span><span class='line'>  <span class="kd">public</span> <span class="kt">void</span> <span class="nf">onCompleted</span><span class="o">()</span> <span class="o">{</span>
</span><span class='line'>      <span class="n">Toast</span><span class="o">.</span><span class="na">makeText</span><span class="o">(</span><span class="n">getActivity</span><span class="o">(),</span> <span class="s">&quot;Done!&quot;</span><span class="o">,</span> <span class="n">Toast</span><span class="o">.</span><span class="na">LENGTH_SHORT</span><span class="o">).</span><span class="na">show</span><span class="o">();</span>
</span><span class='line'>  <span class="o">}</span>
</span><span class='line'>
</span><span class='line'>  <span class="nd">@Override</span>
</span><span class='line'>  <span class="kd">public</span> <span class="kt">void</span> <span class="nf">onError</span><span class="o">(</span><span class="n">Throwable</span> <span class="n">throwable</span><span class="o">)</span> <span class="o">{</span>
</span><span class='line'>
</span><span class='line'>  <span class="o">}</span>
</span><span class='line'>
</span><span class='line'>  <span class="nd">@Override</span>
</span><span class='line'>  <span class="kd">public</span> <span class="kt">void</span> <span class="nf">onNext</span><span class="o">(</span><span class="n">String</span> <span class="n">s</span><span class="o">)</span> <span class="o">{</span>
</span><span class='line'>      <span class="n">textView</span><span class="o">.</span><span class="na">setText</span><span class="o">(</span><span class="n">s</span><span class="o">);</span>
</span><span class='line'>  <span class="o">}</span>
</span><span class='line'><span class="o">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>Unsubscribe the observable whenever the view is destroyed/detached due to screen rotation to prevent NPE.</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='java'><span class='line'><span class="nd">@Override</span>
</span><span class='line'><span class="kd">public</span> <span class="kt">void</span> <span class="nf">onDestroyView</span><span class="o">()</span> <span class="o">{</span>
</span><span class='line'>    <span class="n">subscription</span><span class="o">.</span><span class="na">unsubscribe</span><span class="o">();</span>
</span><span class='line'>    <span class="kd">super</span><span class="o">.</span><span class="na">onDestroyView</span><span class="o">();</span>
</span><span class='line'><span class="o">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>The following code is to bound the subscription to lifecycle.</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
</pre></td><td class='code'><pre><code class='java'><span class='line'><span class="nd">@Override</span>
</span><span class='line'><span class="kd">protected</span> <span class="kt">void</span> <span class="nf">onPause</span><span class="o">()</span> <span class="o">{</span>
</span><span class='line'>    <span class="kd">super</span><span class="o">.</span><span class="na">onPause</span><span class="o">();</span>
</span><span class='line'>
</span><span class='line'>    <span class="c1">// Should output &quot;false&quot;</span>
</span><span class='line'>    <span class="n">Log</span><span class="o">.</span><span class="na">i</span><span class="o">(</span><span class="n">TAG</span><span class="o">,</span> <span class="s">&quot;onPause(), isUnsubscribed=&quot;</span> <span class="o">+</span> <span class="n">subscription</span><span class="o">.</span><span class="na">isUnsubscribed</span><span class="o">());</span>
</span><span class='line'><span class="o">}</span>
</span><span class='line'>
</span><span class='line'><span class="nd">@Override</span>
</span><span class='line'><span class="kd">protected</span> <span class="kt">void</span> <span class="nf">onStop</span><span class="o">()</span> <span class="o">{</span>
</span><span class='line'>    <span class="kd">super</span><span class="o">.</span><span class="na">onStop</span><span class="o">();</span>
</span><span class='line'>
</span><span class='line'>    <span class="c1">// Should output &quot;true&quot;</span>
</span><span class='line'>    <span class="n">Log</span><span class="o">.</span><span class="na">i</span><span class="o">(</span><span class="n">TAG</span><span class="o">,</span> <span class="s">&quot;onStop(), isUnsubscribed=&quot;</span> <span class="o">+</span> <span class="n">subscription</span><span class="o">.</span><span class="na">isUnsubscribed</span><span class="o">());</span>
</span><span class='line'><span class="o">}</span>
</span></code></pre></td></tr></table></div></figure>


<p><strong>Reference</strong></p>

<ol>
<li><a href="https://gist.github.com/staltz/868e7e9bc2a7b8c1f754">https://gist.github.com/staltz/868e7e9bc2a7b8c1f754</a></li>
<li><a href="http://reactivex.io/documentation/operators/map.html">http://reactivex.io/documentation/operators/map.html</a></li>
<li><a href="http://reactivex.io/RxJava/javadoc/rx/Observable.html#subscribe">http://reactivex.io/RxJava/javadoc/rx/Observable.html#subscribe</a>(rx.Subscriber)</li>
</ol>

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Black-Box Testing - Robotium]]></title>
    <link href="http://aaronliew.github.io/blog/2015/04/10/black-box-test-robotium/"/>
    <updated>2015-04-10T11:38:52+08:00</updated>
    <id>http://aaronliew.github.io/blog/2015/04/10/black-box-test-robotium</id>
    <content type="html"><![CDATA[<p>In previous post, it focuses on the white-box testing using Espresso.  In this post, I’m going to do Black-box test using Robotium.</p>

<p><strong>What is Black-box Testing?</strong></p>

<p>Black-box testing is a method of the software testing that examines the functionality of an application without peering into its internal structure. For example, in a black-box test on Android application, the tester only knows the inputs and what the expected outcomes should be and not how the program arrives at those outputs.</p>

<p><strong>Demonstration of the Black-box testing</strong></p>

<p>This test focuses on these three main areas: grid view, view pager and navigation drawer. The process of the testing the functionalities is exactly same as the previous <a href="http://aaronliew.github.io/blog/2015/04/08/android-automation-test-espresso/">post</a>.</p>

<p>Here is the demonstration of test:</p>

<div class="embed-video-container"><iframe src="//www.youtube.com/embed/G9wMgmgJIfY" allowfullscreen></iframe></div>


<p><strong>Coding</strong></p>

<p>The code is simpler than white-box test using Espresso because it mainly focuses on the input and expected outcomes. Therefore, this test can be done without any knowledge on the codebase of targeted Android application.</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
<span class='line-number'>34</span>
<span class='line-number'>35</span>
<span class='line-number'>36</span>
<span class='line-number'>37</span>
<span class='line-number'>38</span>
<span class='line-number'>39</span>
<span class='line-number'>40</span>
<span class='line-number'>41</span>
<span class='line-number'>42</span>
<span class='line-number'>43</span>
<span class='line-number'>44</span>
<span class='line-number'>45</span>
<span class='line-number'>46</span>
<span class='line-number'>47</span>
<span class='line-number'>48</span>
<span class='line-number'>49</span>
<span class='line-number'>50</span>
<span class='line-number'>51</span>
<span class='line-number'>52</span>
<span class='line-number'>53</span>
<span class='line-number'>54</span>
<span class='line-number'>55</span>
<span class='line-number'>56</span>
<span class='line-number'>57</span>
<span class='line-number'>58</span>
<span class='line-number'>59</span>
<span class='line-number'>60</span>
<span class='line-number'>61</span>
<span class='line-number'>62</span>
<span class='line-number'>63</span>
<span class='line-number'>64</span>
<span class='line-number'>65</span>
</pre></td><td class='code'><pre><code class='java'><span class='line'><span class="kd">public</span> <span class="kt">void</span> <span class="nf">testGridView</span><span class="o">()</span> <span class="kd">throws</span>  <span class="n">Exception</span><span class="o">{</span>
</span><span class='line'>        <span class="c1">//Close the dialog and press later button</span>
</span><span class='line'>        <span class="n">solo</span><span class="o">.</span><span class="na">clickOnButton</span><span class="o">(</span><span class="s">&quot;Later&quot;</span><span class="o">);</span>
</span><span class='line'>
</span><span class='line'>        <span class="c1">//Scroll the 3rd image of view and select it</span>
</span><span class='line'>        <span class="n">solo</span><span class="o">.</span><span class="na">scrollListToLine</span><span class="o">(</span><span class="mi">0</span><span class="o">,</span><span class="mi">3</span><span class="o">);</span>
</span><span class='line'>        <span class="n">solo</span><span class="o">.</span><span class="na">clickInList</span><span class="o">(</span><span class="mi">0</span><span class="o">);</span>
</span><span class='line'>        <span class="n">solo</span><span class="o">.</span><span class="na">sleep</span><span class="o">(</span><span class="mi">1000</span><span class="o">);</span>
</span><span class='line'>
</span><span class='line'>        <span class="c1">//Do the swiping</span>
</span><span class='line'>        <span class="n">solo</span><span class="o">.</span><span class="na">scrollToSide</span><span class="o">(</span><span class="n">Solo</span><span class="o">.</span><span class="na">RIGHT</span><span class="o">);</span>
</span><span class='line'>
</span><span class='line'>        <span class="c1">//Back to the main screen</span>
</span><span class='line'>        <span class="n">solo</span><span class="o">.</span><span class="na">goBack</span><span class="o">();</span>
</span><span class='line'>
</span><span class='line'>        <span class="c1">//Scroll the 5th image of view and select it</span>
</span><span class='line'>        <span class="n">solo</span><span class="o">.</span><span class="na">scrollListToLine</span><span class="o">(</span><span class="mi">0</span><span class="o">,</span><span class="mi">5</span><span class="o">);</span>
</span><span class='line'>        <span class="n">solo</span><span class="o">.</span><span class="na">clickInList</span><span class="o">(</span><span class="mi">0</span><span class="o">);</span>
</span><span class='line'>        <span class="n">solo</span><span class="o">.</span><span class="na">sleep</span><span class="o">(</span><span class="mi">2000</span><span class="o">);</span>
</span><span class='line'>
</span><span class='line'>        <span class="c1">//Do the swiping</span>
</span><span class='line'>        <span class="n">solo</span><span class="o">.</span><span class="na">scrollToSide</span><span class="o">(</span><span class="n">Solo</span><span class="o">.</span><span class="na">RIGHT</span><span class="o">);</span>
</span><span class='line'>        <span class="n">solo</span><span class="o">.</span><span class="na">sleep</span><span class="o">(</span><span class="mi">1000</span><span class="o">);</span>
</span><span class='line'>        <span class="n">solo</span><span class="o">.</span><span class="na">scrollToSide</span><span class="o">(</span><span class="n">Solo</span><span class="o">.</span><span class="na">RIGHT</span><span class="o">);</span>
</span><span class='line'>        <span class="n">solo</span><span class="o">.</span><span class="na">sleep</span><span class="o">(</span><span class="mi">1000</span><span class="o">);</span>
</span><span class='line'>        <span class="n">solo</span><span class="o">.</span><span class="na">scrollToSide</span><span class="o">(</span><span class="n">Solo</span><span class="o">.</span><span class="na">LEFT</span><span class="o">);</span>
</span><span class='line'>
</span><span class='line'>        <span class="c1">//Back to main screen</span>
</span><span class='line'>        <span class="n">solo</span><span class="o">.</span><span class="na">goBack</span><span class="o">();</span>
</span><span class='line'>    <span class="o">}</span>
</span><span class='line'>
</span><span class='line'><span class="kd">public</span> <span class="kt">void</span> <span class="nf">testNavigationDrawer</span><span class="o">()</span> <span class="kd">throws</span>  <span class="n">Exception</span><span class="o">{</span>
</span><span class='line'>        <span class="c1">//Click on the later button</span>
</span><span class='line'>        <span class="n">solo</span><span class="o">.</span><span class="na">clickOnButton</span><span class="o">(</span><span class="s">&quot;Later&quot;</span><span class="o">);</span>
</span><span class='line'>
</span><span class='line'>        <span class="c1">//Open and close the drawer</span>
</span><span class='line'>        <span class="n">solo</span><span class="o">.</span><span class="na">clickOnActionBarHomeButton</span><span class="o">();</span>
</span><span class='line'>        <span class="n">solo</span><span class="o">.</span><span class="na">sleep</span><span class="o">(</span><span class="mi">2000</span><span class="o">);</span>
</span><span class='line'>        <span class="n">solo</span><span class="o">.</span><span class="na">clickOnActionBarHomeButton</span><span class="o">();</span>
</span><span class='line'>        <span class="n">solo</span><span class="o">.</span><span class="na">sleep</span><span class="o">(</span><span class="mi">2000</span><span class="o">);</span>
</span><span class='line'>
</span><span class='line'>        <span class="c1">//Open the drawer and select dog category</span>
</span><span class='line'>        <span class="n">solo</span><span class="o">.</span><span class="na">clickOnActionBarHomeButton</span><span class="o">();</span>
</span><span class='line'>        <span class="n">solo</span><span class="o">.</span><span class="na">sleep</span><span class="o">(</span><span class="mi">2000</span><span class="o">);</span>
</span><span class='line'>        <span class="n">solo</span><span class="o">.</span><span class="na">clickOnText</span><span class="o">(</span><span class="s">&quot;Flickr: Dogs&quot;</span><span class="o">);</span>
</span><span class='line'>        <span class="n">solo</span><span class="o">.</span><span class="na">sleep</span><span class="o">(</span><span class="mi">2000</span><span class="o">);</span>
</span><span class='line'>
</span><span class='line'>        <span class="c1">//Open the drawer again and select tutorial</span>
</span><span class='line'>        <span class="n">solo</span><span class="o">.</span><span class="na">clickOnActionBarHomeButton</span><span class="o">();</span>
</span><span class='line'>        <span class="n">solo</span><span class="o">.</span><span class="na">sleep</span><span class="o">(</span><span class="mi">2000</span><span class="o">);</span>
</span><span class='line'>        <span class="n">solo</span><span class="o">.</span><span class="na">drag</span><span class="o">(</span><span class="mi">300</span><span class="o">,</span> <span class="mi">300</span><span class="o">,</span> <span class="mi">1000</span><span class="o">,</span> <span class="mi">300</span><span class="o">,</span><span class="mi">2</span><span class="o">);</span>
</span><span class='line'>        <span class="n">solo</span><span class="o">.</span><span class="na">clickOnText</span><span class="o">(</span><span class="s">&quot;Tutorial&quot;</span><span class="o">);</span>
</span><span class='line'>        <span class="n">solo</span><span class="o">.</span><span class="na">sleep</span><span class="o">(</span><span class="mi">1500</span><span class="o">);</span>
</span><span class='line'>
</span><span class='line'>        <span class="c1">//Do the swiping on tutorial screen</span>
</span><span class='line'>        <span class="n">solo</span><span class="o">.</span><span class="na">scrollToSide</span><span class="o">(</span><span class="n">Solo</span><span class="o">.</span><span class="na">RIGHT</span><span class="o">);</span>
</span><span class='line'>        <span class="n">solo</span><span class="o">.</span><span class="na">sleep</span><span class="o">(</span><span class="mi">1000</span><span class="o">);</span>
</span><span class='line'>        <span class="n">solo</span><span class="o">.</span><span class="na">scrollToSide</span><span class="o">(</span><span class="n">Solo</span><span class="o">.</span><span class="na">RIGHT</span><span class="o">);</span>
</span><span class='line'>        <span class="n">solo</span><span class="o">.</span><span class="na">sleep</span><span class="o">(</span><span class="mi">1000</span><span class="o">);</span>
</span><span class='line'>        <span class="n">solo</span><span class="o">.</span><span class="na">scrollToSide</span><span class="o">(</span><span class="n">Solo</span><span class="o">.</span><span class="na">LEFT</span><span class="o">);</span>
</span><span class='line'>
</span><span class='line'>        <span class="c1">//Back to previous activity</span>
</span><span class='line'>        <span class="n">solo</span><span class="o">.</span><span class="na">goBack</span><span class="o">();</span>
</span><span class='line'>        <span class="n">solo</span><span class="o">.</span><span class="na">sleep</span><span class="o">(</span><span class="mi">1500</span><span class="o">);</span>
</span><span class='line'><span class="o">}</span>
</span></code></pre></td></tr></table></div></figure>



]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[White-Box Testing- Espresso]]></title>
    <link href="http://aaronliew.github.io/blog/2015/04/08/android-automation-test-espresso/"/>
    <updated>2015-04-08T01:13:17+08:00</updated>
    <id>http://aaronliew.github.io/blog/2015/04/08/android-automation-test-espresso</id>
    <content type="html"><![CDATA[<p>One common approach to UI testing is to run tests manually and verify that the app is behaving as expected. However, this approach can be very time-consuming, tedious, and error-prone especially when we run tests on multiple devices. This is where Android Automated Tests becomes useful, it can perform repetitive task without human intervention.</p>

<p><strong>What is White-box Testing?</strong></p>

<p>There are two types tests: white-box test and black-box test. White-box test is method of testing software that tests internal structures or workings of an application. Black-box test is method of examining the functionality of an application without peering into its internal structures or workings. In this project, I did white-box test on my code using Espresso library.</p>

<p><strong>Advantage of Espresso</strong></p>

<p>The advantage of the Espresso is it is have synchronization feature, meaning it waits for UI events in the current message queue to process and default task to complete before it moves on to the next test operation.</p>

<p><strong>Demonstration of the Espresso</strong></p>

<p>I have written test script on animal gallery app. Here are the following steps to verify the functionality of the app:</p>

<ol>
<li>Launch Animal Gallery app</li>
<li>“Donation” screen will be shown up. Press “Later” button to proceed to main screen</li>
</ol>


<p><strong><em>Test on functionality of the grid view</em></strong></p>

<ol start="3">
  <li>Scrolls to the 3rd image and tap on it. </li>
  <li>In full screen viewpager, swipe to the left and view the next image.</li>
  <li>Back to the main screen</li>
  <li>Scrolls to the 6th image and tap on it. </li>
  <li>In full screen viewpager, swipe to the left twice and view the image.</li>
  <li>Swipe to the right again to go back the previous image.</li>
</ol>


<p><strong><em>Test on functionality of the navigation drawer</em></strong></p>

<ol start="9">
  <li>Tab on the navigation drawer icon to open the drawer</li>
  <li>Search for “Flickr: Dogs” category and tab on it.</li>
  <li>Open the drawer again and select “Tutorial” category.</li>
  <li>Swipes the tutorial screen.</li>
  <li>Done.</li>
</ol>


<p>Here is the demonstration of the test:</p>

<div class="embed-video-container"><iframe src="//www.youtube.com/embed/G9wMgmgJIfY" allowfullscreen></iframe></div>


<p><strong>Coding</strong></p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
<span class='line-number'>34</span>
<span class='line-number'>35</span>
<span class='line-number'>36</span>
<span class='line-number'>37</span>
<span class='line-number'>38</span>
<span class='line-number'>39</span>
<span class='line-number'>40</span>
<span class='line-number'>41</span>
<span class='line-number'>42</span>
<span class='line-number'>43</span>
<span class='line-number'>44</span>
<span class='line-number'>45</span>
<span class='line-number'>46</span>
<span class='line-number'>47</span>
<span class='line-number'>48</span>
<span class='line-number'>49</span>
<span class='line-number'>50</span>
<span class='line-number'>51</span>
<span class='line-number'>52</span>
<span class='line-number'>53</span>
<span class='line-number'>54</span>
<span class='line-number'>55</span>
<span class='line-number'>56</span>
<span class='line-number'>57</span>
<span class='line-number'>58</span>
<span class='line-number'>59</span>
<span class='line-number'>60</span>
<span class='line-number'>61</span>
<span class='line-number'>62</span>
<span class='line-number'>63</span>
<span class='line-number'>64</span>
<span class='line-number'>65</span>
<span class='line-number'>66</span>
<span class='line-number'>67</span>
<span class='line-number'>68</span>
<span class='line-number'>69</span>
<span class='line-number'>70</span>
<span class='line-number'>71</span>
<span class='line-number'>72</span>
<span class='line-number'>73</span>
<span class='line-number'>74</span>
<span class='line-number'>75</span>
<span class='line-number'>76</span>
<span class='line-number'>77</span>
<span class='line-number'>78</span>
<span class='line-number'>79</span>
<span class='line-number'>80</span>
</pre></td><td class='code'><pre><code class='java'><span class='line'> <span class="kd">public</span> <span class="kt">void</span> <span class="nf">testGridView</span><span class="o">()</span> <span class="o">{</span>
</span><span class='line'>        <span class="c1">//Close the dialog and press later button</span>
</span><span class='line'>        <span class="n">onView</span><span class="o">(</span><span class="n">withId</span><span class="o">(</span><span class="n">R</span><span class="o">.</span><span class="na">id</span><span class="o">.</span><span class="na">later_button</span><span class="o">))</span>
</span><span class='line'>        <span class="o">.</span><span class="na">perform</span><span class="o">(</span><span class="n">click</span><span class="o">());</span>
</span><span class='line'>        <span class="n">onView</span><span class="o">(</span><span class="n">isRoot</span><span class="o">()).</span><span class="na">perform</span><span class="o">(</span><span class="n">waitAtLeast</span><span class="o">(</span><span class="mi">2000</span><span class="o">));</span>
</span><span class='line'>
</span><span class='line'>        <span class="c1">//Scroll the 3rd image of view and select it</span>
</span><span class='line'>        <span class="n">onData</span><span class="o">(</span><span class="n">anything</span><span class="o">())</span>
</span><span class='line'>        <span class="o">.</span><span class="na">inAdapterView</span><span class="o">(</span><span class="n">allOf</span><span class="o">(</span><span class="n">withId</span><span class="o">(</span><span class="n">R</span><span class="o">.</span><span class="na">id</span><span class="o">.</span><span class="na">gridview</span><span class="o">),</span> <span class="n">isDisplayed</span><span class="o">()))</span>
</span><span class='line'>        <span class="o">.</span><span class="na">atPosition</span><span class="o">(</span><span class="mi">2</span><span class="o">)</span>
</span><span class='line'>        <span class="o">.</span><span class="na">check</span><span class="o">(</span><span class="n">matches</span><span class="o">(</span><span class="n">isDisplayed</span><span class="o">()))</span>
</span><span class='line'>        <span class="o">.</span><span class="na">perform</span><span class="o">(</span><span class="n">click</span><span class="o">());</span>
</span><span class='line'>        <span class="n">onView</span><span class="o">(</span><span class="n">isRoot</span><span class="o">()).</span><span class="na">perform</span><span class="o">(</span><span class="n">waitAtLeast</span><span class="o">(</span><span class="mi">2000</span><span class="o">));</span>
</span><span class='line'>
</span><span class='line'>        <span class="c1">//Do the swiping </span>
</span><span class='line'>        <span class="n">onView</span><span class="o">(</span><span class="n">withId</span><span class="o">(</span><span class="n">R</span><span class="o">.</span><span class="na">id</span><span class="o">.</span><span class="na">pager</span><span class="o">))</span>
</span><span class='line'>          <span class="o">.</span><span class="na">perform</span><span class="o">(</span><span class="n">swipeLeft</span><span class="o">());</span>
</span><span class='line'>
</span><span class='line'>        <span class="c1">//Back to the main screen</span>
</span><span class='line'>        <span class="n">Espresso</span><span class="o">.</span><span class="na">pressBack</span><span class="o">();</span>
</span><span class='line'>
</span><span class='line'>        <span class="c1">//Scroll the 5th image of view and select it</span>
</span><span class='line'>        <span class="n">onData</span><span class="o">(</span><span class="n">anything</span><span class="o">())</span>
</span><span class='line'>                <span class="o">.</span><span class="na">inAdapterView</span><span class="o">(</span><span class="n">allOf</span><span class="o">(</span><span class="n">withId</span><span class="o">(</span><span class="n">R</span><span class="o">.</span><span class="na">id</span><span class="o">.</span><span class="na">gridview</span><span class="o">),</span> <span class="n">isDisplayed</span><span class="o">()))</span>
</span><span class='line'>                <span class="o">.</span><span class="na">atPosition</span><span class="o">(</span><span class="mi">5</span><span class="o">)</span>
</span><span class='line'>                <span class="o">.</span><span class="na">check</span><span class="o">(</span><span class="n">matches</span><span class="o">(</span><span class="n">isDisplayed</span><span class="o">()))</span>
</span><span class='line'>                <span class="o">.</span><span class="na">perform</span><span class="o">(</span><span class="n">click</span><span class="o">());</span>
</span><span class='line'>        <span class="n">onView</span><span class="o">(</span><span class="n">isRoot</span><span class="o">()).</span><span class="na">perform</span><span class="o">(</span><span class="n">waitAtLeast</span><span class="o">(</span><span class="mi">2000</span><span class="o">));</span>
</span><span class='line'>
</span><span class='line'>        <span class="c1">//Do the swiping</span>
</span><span class='line'>        <span class="n">onView</span><span class="o">(</span><span class="n">withId</span><span class="o">(</span><span class="n">R</span><span class="o">.</span><span class="na">id</span><span class="o">.</span><span class="na">pager</span><span class="o">))</span>
</span><span class='line'>                <span class="o">.</span><span class="na">perform</span><span class="o">(</span><span class="n">swipeLeft</span><span class="o">());</span>
</span><span class='line'>        <span class="n">onView</span><span class="o">(</span><span class="n">withId</span><span class="o">(</span><span class="n">R</span><span class="o">.</span><span class="na">id</span><span class="o">.</span><span class="na">pager</span><span class="o">))</span>
</span><span class='line'>                <span class="o">.</span><span class="na">perform</span><span class="o">(</span><span class="n">swipeLeft</span><span class="o">());</span>
</span><span class='line'>        <span class="n">onView</span><span class="o">(</span><span class="n">withId</span><span class="o">(</span><span class="n">R</span><span class="o">.</span><span class="na">id</span><span class="o">.</span><span class="na">pager</span><span class="o">))</span>
</span><span class='line'>                <span class="o">.</span><span class="na">perform</span><span class="o">(</span><span class="n">swipeRight</span><span class="o">());</span>
</span><span class='line'>
</span><span class='line'>        <span class="c1">//Back to main screen</span>
</span><span class='line'>        <span class="n">Espresso</span><span class="o">.</span><span class="na">pressBack</span><span class="o">();</span>
</span><span class='line'>
</span><span class='line'>
</span><span class='line'><span class="o">}</span>
</span><span class='line'>
</span><span class='line'>
</span><span class='line'><span class="kd">public</span> <span class="kt">void</span> <span class="nf">testNavDrawer</span><span class="o">(){</span>
</span><span class='line'>
</span><span class='line'>        <span class="c1">//Click on the later button</span>
</span><span class='line'>        <span class="n">onView</span><span class="o">(</span><span class="n">withId</span><span class="o">(</span><span class="n">R</span><span class="o">.</span><span class="na">id</span><span class="o">.</span><span class="na">later_button</span><span class="o">))</span>
</span><span class='line'>                <span class="o">.</span><span class="na">perform</span><span class="o">(</span><span class="n">click</span><span class="o">());</span>
</span><span class='line'>
</span><span class='line'>        <span class="c1">//Open and close the drawer</span>
</span><span class='line'>        <span class="n">onView</span><span class="o">(</span><span class="n">withContentDescription</span><span class="o">(</span><span class="n">getActivity</span><span class="o">().</span><span class="na">getString</span><span class="o">(</span><span class="n">R</span><span class="o">.</span><span class="na">string</span><span class="o">.</span><span class="na">drawer_open</span><span class="o">)))</span>
</span><span class='line'>          <span class="o">.</span><span class="na">perform</span><span class="o">(</span><span class="n">click</span><span class="o">());</span>
</span><span class='line'>        <span class="n">onView</span><span class="o">(</span><span class="n">withContentDescription</span><span class="o">(</span><span class="n">getActivity</span><span class="o">().</span><span class="na">getString</span><span class="o">(</span><span class="n">R</span><span class="o">.</span><span class="na">string</span><span class="o">.</span><span class="na">drawer_close</span><span class="o">)))</span>
</span><span class='line'>          <span class="o">.</span><span class="na">perform</span><span class="o">(</span><span class="n">click</span><span class="o">());</span>
</span><span class='line'>
</span><span class='line'>        <span class="c1">//Open the drawer and select dog category</span>
</span><span class='line'>        <span class="n">onView</span><span class="o">(</span><span class="n">withContentDescription</span><span class="o">(</span><span class="n">getActivity</span><span class="o">().</span><span class="na">getString</span><span class="o">(</span><span class="n">R</span><span class="o">.</span><span class="na">string</span><span class="o">.</span><span class="na">drawer_open</span><span class="o">)))</span>
</span><span class='line'>          <span class="o">.</span><span class="na">perform</span><span class="o">(</span><span class="n">click</span><span class="o">());</span>
</span><span class='line'>        <span class="n">onView</span><span class="o">(</span><span class="n">Matchers</span><span class="o">.</span><span class="na">allOf</span><span class="o">(</span><span class="n">ViewMatchers</span><span class="o">.</span><span class="na">withId</span><span class="o">(</span><span class="n">R</span><span class="o">.</span><span class="na">id</span><span class="o">.</span><span class="na">sm_item_title</span><span class="o">),</span> <span class="n">hasSibling</span><span class="o">(</span><span class="n">ViewMatchers</span><span class="o">.</span><span class="na">withText</span><span class="o">(</span><span class="s">&quot;Flickr: Dogs&quot;</span><span class="o">)))).</span><span class="na">perform</span><span class="o">(</span><span class="n">click</span><span class="o">());</span>
</span><span class='line'>
</span><span class='line'>        <span class="c1">//Open the drawer again and select tutorial</span>
</span><span class='line'>        <span class="n">onView</span><span class="o">(</span><span class="n">withContentDescription</span><span class="o">(</span><span class="n">getActivity</span><span class="o">().</span><span class="na">getString</span><span class="o">(</span><span class="n">R</span><span class="o">.</span><span class="na">string</span><span class="o">.</span><span class="na">drawer_open</span><span class="o">)))</span>
</span><span class='line'>           <span class="o">.</span><span class="na">perform</span><span class="o">(</span><span class="n">click</span><span class="o">());</span>
</span><span class='line'>        <span class="n">onView</span><span class="o">(</span><span class="n">isRoot</span><span class="o">()).</span><span class="na">perform</span><span class="o">(</span><span class="n">waitAtLeast</span><span class="o">(</span><span class="mi">2000</span><span class="o">));</span>
</span><span class='line'>        <span class="n">onView</span><span class="o">(</span><span class="n">withId</span><span class="o">(</span> <span class="n">R</span><span class="o">.</span><span class="na">id</span><span class="o">.</span><span class="na">tutorial</span><span class="o">)).</span><span class="na">perform</span><span class="o">(</span> <span class="n">scrollTo</span><span class="o">(),</span> <span class="n">click</span><span class="o">());</span>
</span><span class='line'>
</span><span class='line'>        <span class="c1">//Do the swiping on tutorial screen</span>
</span><span class='line'>        <span class="n">onView</span><span class="o">(</span><span class="n">withId</span><span class="o">(</span><span class="n">R</span><span class="o">.</span><span class="na">id</span><span class="o">.</span><span class="na">tutorial_pager</span><span class="o">))</span>
</span><span class='line'>        <span class="o">.</span><span class="na">perform</span><span class="o">(</span><span class="n">swipeLeft</span><span class="o">());</span>
</span><span class='line'>        <span class="n">onView</span><span class="o">(</span><span class="n">withId</span><span class="o">(</span><span class="n">R</span><span class="o">.</span><span class="na">id</span><span class="o">.</span><span class="na">tutorial_pager</span><span class="o">))</span>
</span><span class='line'>                <span class="o">.</span><span class="na">perform</span><span class="o">(</span><span class="n">swipeLeft</span><span class="o">());</span>
</span><span class='line'>        <span class="n">onView</span><span class="o">(</span><span class="n">withId</span><span class="o">(</span><span class="n">R</span><span class="o">.</span><span class="na">id</span><span class="o">.</span><span class="na">tutorial_pager</span><span class="o">))</span>
</span><span class='line'>                <span class="o">.</span><span class="na">perform</span><span class="o">(</span><span class="n">swipeRight</span><span class="o">());</span>
</span><span class='line'>
</span><span class='line'>        <span class="c1">//Back to previous activity</span>
</span><span class='line'>        <span class="n">Espresso</span><span class="o">.</span><span class="na">pressBack</span><span class="o">();</span>
</span><span class='line'>        <span class="n">onView</span><span class="o">(</span><span class="n">isRoot</span><span class="o">()).</span><span class="na">perform</span><span class="o">(</span><span class="n">waitAtLeast</span><span class="o">(</span><span class="mi">2000</span><span class="o">));</span>
</span><span class='line'>
</span><span class='line'><span class="o">}</span>
</span></code></pre></td></tr></table></div></figure>



]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Using Options Menus and Customized Dialogs for User Interaction]]></title>
    <link href="http://aaronliew.github.io/blog/2014/03/18/day-nine/"/>
    <updated>2014-03-18T22:52:09+08:00</updated>
    <id>http://aaronliew.github.io/blog/2014/03/18/day-nine</id>
    <content type="html"><![CDATA[<p>In this task, there will be additional features shown in search results, including
movie overview and option menu. The option menu allows user to choose to view the
full image and imdb website of movie.</p>

<p>First of all, when user types name of the movie into text. The search result will be shown
on the next page.<br/>
<img class="center" src="http://aaronliew.github.io/images/DayNine/ListView.png" title="ListView" >
When user clicks on the one of the movies in the listview, there will be a pop-up screen and
shows the user the overview of the movie.
<img class="center" src="http://aaronliew.github.io/images/DayNine/Overview.png" title="Overview of movie" >
When the user selects movie, the position of the selected movie in listview is recorded. Therefore,
once the user clicks on the menu, there are two options that allow user to choose: Imdb cover image
and Imdb URL.
<img class="center" src="http://aaronliew.github.io/images/DayNine/OptionsMenus.png" title="Options" ></p>

<p>Once user click on the &ldquo;View full image&rdquo;, the following content will be shown.
<img class="center" src="http://aaronliew.github.io/images/DayNine/CoverImage.png" title="Cover Image" ></p>

<p>The purpose of MovieListActivity class is to create options menus and customized dialogs for user
interaction. The explanation of coding of method in MovieListActivity class is shown in the chart
below.
<img class="center" src="http://aaronliew.github.io/images/DayNine/Flowchart.JPG" title="Explanation of MovieListActivity Class" ></p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Customized List View for Data Presentation]]></title>
    <link href="http://aaronliew.github.io/blog/2014/03/16/day-eight/"/>
    <updated>2014-03-16T12:35:03+08:00</updated>
    <id>http://aaronliew.github.io/blog/2014/03/16/day-eight</id>
    <content type="html"><![CDATA[<p>In this task, there will be poster, release date and popularity shown in search results
as shown in the examples below.
First of all, user types name of movie into text box and then click on &ldquo;Search&rdquo; button.
Progress bar with &lsquo;Retrieving data&hellip;&ldquo; will be shown.
<img class="center" src="http://aaronliew.github.io/images/DayEight/LayoutOne.png" title="Layout One" ></p>

<p>Next, the relevant search results will be shown on the next page with information: poster,
release data, and popularity.
<img class="center" src="http://aaronliew.github.io/images/DayEight/LayoutTwo.png" title="Layout Two" ></p>

<p>In order to perform this task, there are two classes will be added into the coding. The explanation
of the coding is shown in the figure below. The newly added classes is indicated in red circle.<br/>
<img class="center" src="http://aaronliew.github.io/images/DayEight/CodingExplanation.png" title="Coding Explanation" ></p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[TroubleShoot of the Movie Search App]]></title>
    <link href="http://aaronliew.github.io/blog/2014/03/12/day-seven/"/>
    <updated>2014-03-12T09:38:45+08:00</updated>
    <id>http://aaronliew.github.io/blog/2014/03/12/day-seven</id>
    <content type="html"><![CDATA[<p>My initial attempt was to extract the JSON data from the movie database using API key.
All the JSON data is displayed in LogCat instead of displaying the JSON data in the app.
First of all, I have modified the coding in the AndroidManifest xml file that is from:</p>

<pre><code>android:name="com.example.moviesearchapp.MainActivity"
</code></pre>

<p>to</p>

<pre><code>android:name="com.example.moviesearchapp.MainActivityDev"
</code></pre>

<p>The purpose of the changing the name of the activity is to test the workability of the small part of the coding of Movie Search app
using MainActivityDev JAVA script. In MainActivityDev.java, JSONReader.readJsonFromUrl command is used to get JSON
Text format from the movie database URL. The GSON library is used to convert the JSON data to Java DataObject,
then, display it in the LogCat window by using the command as shown below:</p>

<pre><code>Log.d("test",obj.getResults().get(0).getId().toString());
</code></pre>

<p>In Log.d, &ldquo;test&rdquo; is a tag which will be presented in the LogCat window along with the string &ldquo;obj.getResults().
get(0).getId().toString()&rdquo;. If there are any error or exception, &lsquo;Log.e&rsquo; will be used to display the error
message in the window. The code of MainActivityDev.Java is shown below.</p>

<pre><code>public class MainActivityDev extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    final Gson gson= new Gson();

    new Thread(new Runnable() {
        public void run() {
            try {
                 String json = (String) JSONReader.readJsonFromUrl("https://api.themoviedb.org/3/search/movie?" +
                        "api_key=e3deb5d586800ccb02c69aaad8f66562&amp;query=inception");

                 Movie obj = gson.fromJson(json, Movie.class);
                 Log.d("test",obj.getResults().get(0).getId().toString());

                 json = (String) JSONReader.readJsonFromUrl("https://api.themoviedb.org/3/movie/" 
                         + obj.getResults().get(0).getId().toString() + 
                         "?api_key=e3deb5d586800ccb02c69aaad8f66562");

                 ImdbMovie imdbData = gson.fromJson(json, ImdbMovie.class);
                 Log.d("test",imdbData.getOverview().toString());

            } catch (IOException e) {
                Log.e("test", e.getMessage());
            } catch (JSONException e) {
                Log.e("test", e.getMessage());
            }

        }
    }).start();
</code></pre>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Movie Searching App- Coding Explanation]]></title>
    <link href="http://aaronliew.github.io/blog/2014/03/11/day-six/"/>
    <updated>2014-03-11T09:10:50+08:00</updated>
    <id>http://aaronliew.github.io/blog/2014/03/11/day-six</id>
    <content type="html"><![CDATA[<p>There are five packages in this app as shown in the figure below.
<img class="center" src="http://aaronliew.github.io/images/DaySix/PackageChart.JPG" title="Package Chart" >
In each of these packages, it contains classes as follows:</p>

<ol>
<li>MovieSearchingApp package

<ul>
<li>MainActivity.Java</li>
</ul>
</li>
<li>IO package

<ul>
<li>FlushedInputStream.Java</li>
</ul>
</li>
<li>Model package

<ul>
<li>Movies.Java</li>
<li>MoviesResult.Java</li>
<li>Person.Java</li>
<li>PersonResult.Java</li>
</ul>
</li>
<li>Services package

<ul>
<li>GenericSeeker.Java</li>
<li>MovieSeeker.Java</li>
<li>PersonSeeker.Java</li>
</ul>
</li>
</ol>


<p>In order to explain the purpose of class and package and also show the interaction
between the package and classes, the chart was constructed as shown in the figure below.
<img class="center" src="http://aaronliew.github.io/images/DaySix/CodingExplanation.png" title="Coding Explanation" ></p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Movie Searching App- Online Searching Function]]></title>
    <link href="http://aaronliew.github.io/blog/2014/03/10/day-five/"/>
    <updated>2014-03-10T21:02:24+08:00</updated>
    <id>http://aaronliew.github.io/blog/2014/03/10/day-five</id>
    <content type="html"><![CDATA[<p>Basically, there are two types of search in this app: Movie and Person.
<img class="center" src="http://aaronliew.github.io/images/DayFive/Classification.JPG" title="Classification" ></p>

<p>The flowchart on how movie searching app works is shown in the figure below.
<img class="center" src="http://aaronliew.github.io/images/DayFive/FlowChart.JPG" title="FlowChart" ></p>

<p>There are two additional features that I have added in the android applications:
Progress Bar and Online Searching function. The Progress Bar is the indication of
the progress of retrieving the JSON data from the URL. The online searching function
includes retrieve the data from the URL and convert the JSON format to JAVA Object
using GSON library. There were problems I have encountered in the process of
completing the task as shown below.</p>

<p>1)Problem: API of movie database was upgraded to version 3, therefore, all the data is presented in
JSON format instead of XML format</p>

<p><em>Solution: Use the GSON libray to convert JSON format into Data Object and display relevant data in the form
of pop-up message at the bottom of the app.</em></p>

<p>2)Problem: Method to acquire the data from the movie database</p>

<p><em>Solution:  Acquire API key of the movie database. Construct the URL with API key in order to obtain JSON data.</em></p>

<p>3)Problem: NetworkOnMainThread Exception occur while retrieving data from database</p>

<p><em>Solution: Async task was used to solve the &ldquo;NetworkOnMainThread&rdquo; exception error.</em></p>

<p>The operation of app is explained and the result of the movie searching app is shown as follows:</p>

<p>First of all, with movie-search type, the text &ldquo;inception&rdquo; was entered as shown in the figure below.
The progress bar is shown while obtaining the data from the url after user clicks on the &ldquo;Search Button&rdquo;.
<img class="center" src="http://aaronliew.github.io/images/DayFive/MovieSearch.png" title="FlowChart" ></p>

<p>After data is obtained, the movie title and popularity are shown in the pop-up message.</p>

<p><img class="center" src="http://aaronliew.github.io/images/DayFive/MovieResult.png" title="FlowChart" ></p>

<p>For person-search type, the operation is same as the movie-search type as shown in the figures below.</p>

<p><img class="center" src="http://aaronliew.github.io/images/DayFive/PersonSearch.png" title="FlowChart" ></p>

<p><img class="center" src="http://aaronliew.github.io/images/DayFive/PersonResult.png" title="FlowChart" ></p>

<p>In the next blog, I will discuss about detail description of structure of coding and ways to troubleshoot
the bug of the app.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Movie Searching App]]></title>
    <link href="http://aaronliew.github.io/blog/2014/03/05/day-four/"/>
    <updated>2014-03-05T10:00:17+08:00</updated>
    <id>http://aaronliew.github.io/blog/2014/03/05/day-four</id>
    <content type="html"><![CDATA[<p>Movie Search Android Application was created. Figures below show
screenshots of the UI of the android in order to have clear on picture
on the functions of the app.
<img class="center" src="http://aaronliew.github.io/images/DayFour/MovieSearchApp.JPG" title="LinearLayout" >
<img class="center" src="http://aaronliew.github.io/images/DayFour/Toast.JPG" title="LinearLayout" ></p>

<p>In the initial development, Toast method was used to show the popup message
after pressing the search button. There are two types of layout: relative layout
and linear layout.</p>

<p><img class="center" src="http://aaronliew.github.io/images/DayFour/Linear_Relative_Layout.JPG" title="RadioGroup" ></p>

<p>In activity_main.xml code, the &lsquo;RelativeLayout&#8217;is changed to the &#8216;LinearLayout&rsquo;.
The layout is set in vertical orientation as shown in the figure below.<br/>
<img class="center" src="http://aaronliew.github.io/images/DayFour/LinearLayout.JPG" title="RadioGroup" ></p>

<p>A radiogroup was created to allow user to choose the options either movie or people.
First of all, the id of the radiobuttons are set as shown below. The red circles is id
of the widgets whereas the green circle is the text of the widgets.
<img class="center" src="http://aaronliew.github.io/images/DayFour/RadioGroup_EditText.JPG" title="RadioGroup" ></p>

<p>A button was created to allow user to search for a movie or people once user clicks on it.
<img class="center" src="http://aaronliew.github.io/images/DayFour/Button.JPG" title="Button" ></p>

<p>All the text of the widgets was set in string.xml which is important for localization.
<img class="center" src="http://aaronliew.github.io/images/DayFour/string_xml.JPG" title="Button" ></p>

<p>To shows the relationship between the MainActivity java and the xml file, the figure was drawn
as shown in the figure below.
<img class="center" src="http://aaronliew.github.io/images/DayFour/ClassInteraction.JPG" title="Button" ></p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Progress Bar and Action Bar]]></title>
    <link href="http://aaronliew.github.io/blog/2014/03/03/day-three/"/>
    <updated>2014-03-03T12:10:54+08:00</updated>
    <id>http://aaronliew.github.io/blog/2014/03/03/day-three</id>
    <content type="html"><![CDATA[<p>Each of android application has its own unique icon. In AndroidManifest.xml,
&ldquo;android:icon=&rdquo;@drawable/ic_launcher&#8221; means the application icon refers to
the image at the directory of /drawable/ic_launcher. Therefore, application icon
can be changed by overwrite the image at this directory. The image can be overwritten
by creating the new android icon and browse image from directory of downloaded image.
The result is shown in the figure below.</p>

<p><img class="center" src="http://aaronliew.github.io/images/DayThree/AppIcon.png" title="Application Icon" ></p>

<p>Progress bar is the indicator of the progress of an activity. It can be done by dragging
the progress bar into the UI. In order to show progress bar at center of the application,
the code &ldquo;android:layout_centerInParent=&#8221;true&rdquo;&ldquo; was added into the main.xml file.
The result is shown in the figure below.</p>

<p><img class="center" src="http://aaronliew.github.io/images/DayThree/ProgressBar.png" title="Progress Bar" ></p>

<p>The purpose of action bar in this android application is to allow user to access to the
help/about. Therefore, external library &ldquo;ActionBarSherlock&rdquo; was added to add action bar
into the application. The id, icon, and title of the help and about of the menu were set
in menu/option.xml file. The code of option.xml is shown in the figure below.</p>

<p><img class="center" src="http://aaronliew.github.io/images/DayThree/MainXml.JPG" title="Menu" ></p>

<p>Next, in the src/main activity java file, the class was extended with SherlockFragmentActivty.
The method onOptionsItemSelected was created to perform the action once user clicks on the
help/about in the menu. The code of main activity java file is shown below.
<img class="center" src="http://aaronliew.github.io/images/DayThree/MainActivityJava.JPG" title="Menu" ></p>

<p>When user clicks on the menu button, the result is illustrated as follows:</p>

<p><img class="center" src="http://aaronliew.github.io/images/DayThree/ScreenMenu.png" title="Menu" ></p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Android App: Interaction Between Two Activities]]></title>
    <link href="http://aaronliew.github.io/blog/2014/02/25/day-two/"/>
    <updated>2014-02-25T09:37:09+08:00</updated>
    <id>http://aaronliew.github.io/blog/2014/02/25/day-two</id>
    <content type="html"><![CDATA[<p>First of all, user will insert text into the textbox and press the &lsquo;send&rsquo; button.
In MainActivity class, the &lsquo;intent&rsquo; object store the values. Next, the DisplayMessageActivity
will display the message which is inserted by the user. In order to have clearer picture on the
operation of Android app and interactions between classes, I have created the charts as shown below.</p>

<p><img class="center" src="http://aaronliew.github.io/images/DayTwo/ExplanationOfActivities.JPG" title="Explanation Of Activities" ></p>

<p><img class="center" src="http://aaronliew.github.io/images/DayTwo/ClassInteraction.JPG" title="Interaction between class" ></p>

<p>The result is shown in figure below.</p>

<p><img class="center" src="http://aaronliew.github.io/images/DayTwo/Screenshot.JPG" title="Screenshot" ></p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Blogging With Octopress]]></title>
    <link href="http://aaronliew.github.io/blog/2014/02/24/day-one/"/>
    <updated>2014-02-24T11:08:29+08:00</updated>
    <id>http://aaronliew.github.io/blog/2014/02/24/day-one</id>
    <content type="html"><![CDATA[<p>Today, my primary task was to create blog using Octopress in order to
write down the progress of my android development.
First of all, after setup the Octopress, there are two commands needed to
create the .MarkDown extension file, set the title of the post, and preview the blog
: rake preview and rake new_post. The explanation of the commands
is shown in the figure below.</p>

<p><img src="http://aaronliew.github.io/images/DayOne/BlogConfiguration.JPG" title="Blog setup using command line" ></p>

<p>After creating the new post, I have made amendments in _config yml file
in order to configure the title, subtitle and author of the blog. The code
of yml file is shown in the figure below.</p>

<p><img class="center" src="http://aaronliew.github.io/images/DayOne/ConfigureYML.JPG" title="config yml file coding" ></p>

<p>The definition of the respective code in the _config yml file is shown in
figure below.</p>

<p><img src="http://aaronliew.github.io/images/DayOne/configYML.JPG" title="Explanation of config yml coding" ></p>

<p>Next, to set the title, comments and category of the the blog, I have
modified the coding of the file with MarkDown extension as shown below. <br/>
<img class="center" src="http://aaronliew.github.io/images/DayOne/MarkDown.JPG" title="Setting of blog post" ></p>

<p>The definition of the respective code in the .MarkDown extension yml file is shown in
figure below.
<img src="http://aaronliew.github.io/images/DayOne/MarkDownImage.JPG" title="Explanation of MarkDown extension file coding" ></p>
]]></content>
  </entry>
  
</feed>