Flash Builder - Bikin Aplikasi TweetTrends

Dalam tutorial ini kita coba untuk membuat aplikasi TweetTrends yang sudah dicontohkan (hanya 8 menit 34 detik utk 3 platform), step-by-step :
1. Buka Flash Builder 4.5.1
2. Pilih File>New>Flex Mobile Project
3. Ketik TwitterTrends pada project name, lalu tekan Next
4. Pada halaman Mobile Setting, pilihlah :
a. Apple iOS, BlackBerry Tablet OS, dan Google Android (centang ketiganya)
b. View-Based Aplication
c. Automatically reorient
d. Automatically scale application for different screen densities, dan biarkan Application DPI spada defaultnya 160 dpi.
5. Tekan Finish.

6. Unzip TwitterTrendsAssets.zip, lalu masukkan folder assets ke folder TwitterTrends/src
Flash builder akan meng-generate 2 MXML komponen, yaitu: TwitterTrends.mxml (aplikasi utama), dan TwitterTrendsHomeView.mxml (tampilan home screen).


Membuat Global Konten di ActionBar File Aplikasi Utama
1. Pilih aplikasi utama, TwitterTrends.mxml
2. Pilih design view
3. Buatlah button dengan men-drag component button dari bilah component ke bagian actionContent.

4. Ubah property button sbb:
a. ID: refreshBtn
b. Label: hapus tulisan Button
c. Icon: pilih multi-Resolution Bitmap mengambil dari assets/refreshxxx.png sesuai dengan ukuran dpi masing-masing, beri centang Embed.
d. On click: ketik Object(navigator.activeView).refresh(), lalu tekan Enter

Membuat LayOut Tampilan
1. Pilih TwitterTrendsHomeView.mxml
2. Pilih design view
3. Buatlah List dengan men-drag component List dari bilah component ke area main view, di bawah ActionBar.
4. Resize List hingga melingkupi seluruh main view area, dan tepi atasnya tepat di bawah ActionBar. Pada bagian contraints dalam bilah properties, centang kiri, kanan, atas, dan bawah sehingga valuenya 0 semua.

Koneksikan Data
1. Pilih Data>Connect to HTTP...
2. Ubah "Operation1" menjadi getTrends
3. Isikan urlnya: http://api.twitter.com/1/trends.json
4. Isikan TwitterService pada service name, lalu tekan Finish.

5. Pada panel Data/Service di bawah, klik kanan getTrends() dan pilih Configure Return Type...

6. Pastikan Auto-detect terpilih, lalu tekan Next
7. Tekan Next lagi
8. Ketik Trends pada name.
9. Ubah Trends[] menjadi Trend[], agar kita tidak bingung, lalu tekan Finish.

10.  Pada panel Data/Service di bawah, klik kanan getTrends() dan pilih Generate Service Call. Tampilan akan berubah menjadi source view dan meng-generate fungsi getTrends().

11. Tambahkan di dalam : 
public function refresh(): void 
{ 
      getTrends(); 
}
12. Ketik di bawah tag (bagian atas file): viewActivate="refresh()"

13. Letakkan kursor di depan tanda ">" pada tag yang awal.
14. Pilih Data>Bind to Data

15. Seharusnya Existing call result sudah terseleksi, dan pada existing CallResponder sudah tampak getTrendsResult.
16. Pada Data Provider, pilih trends[]. 
17. Pada Label field, pilih name, lalu tekan OK.

Membuat TweetsView
1. Klik Kanan TwitterTrends/src/views>New> MXML Component
2. Isikan TweetsView pada name field, lalu Finish
3. Buatlah List dengan men-drag component List dari bilah component ke area main view, di bawah ActionBar.

4. Resize List hingga melingkupi seluruh main view area, dan tepi atasnya tepat di bawah ActionBar. Pada bagian contraints dalam bilah properties, centang kiri, kanan, atas, dan bawah sehingga valuenya 0 semua.

Menghubungkan TweetsView dengan Data

1. Isikan "Tweets for {data}" pada title dalam bilah Properties

2. Pada panel Data/Service, klik kanan TwitterService dan pilih Properties.

3. Klik Add di atas Operation table, lalu ganti Operation1 menjadi getTweets. Isikan http://search.twitter.com/search.json pada URLnya.

4. Klik Add 2x di atas Parameters table, isi parameter names dengan q dan result_type. Lalu tekan Enter. Pastikan Kedua type data berupa String.

5. Tekan Finish.

6. Kembali ke panel Data/Service, Klik kanan getTweets() dan pilih Configure Return Type...

7.Pastikan Auto-detect terpilih, lalu tekan Next

8. Ketik Tweets pada name.

9. Ubah Results[] menjadi Tweet[], lalu tekan Finish.

10. Klik kanan pada getTweets(), pilih Generate Service Call.

Membuat auto-refresh pada TweetsView

1. Dalam masukkan kode:

public function refresh(): void 

{ 

       getTweets(String(data), "recent"); 

}

2. Di bawah ketik viewActivate="refresh()"

Letakkan kursor di depan tanda ">" pada tag  yang awal.

3. Pilih Data>Bind to Data (seperti pada langkah 13)

4. Seharusnya Existing call result sudah terseleksi, dan pada existing CallResponder sudah tampak getTweetsResult.

16. Pada Data Provider, pilih results[]. 

17. Pada Label field, pilih text, lalu tekan OK.

Setting View Navigation

Untuk membuat perintah tampilan halaman selanjutnya sesuai dengan item yang dipilih pada  Home Screen, caranya cukup mudah.

1. Pilih TwitterTrendsHomeView.mxml

2. Masuk ke design view

3. Klik pada List Area yang telah kita buat, lalu ketikkan navigator.pushView(TweetsView, list.selectedItem.name) pada On Change di bilah properties. Kemudian tekan Enter.

Membuat IconItemRenderer

Dengan IconItemRenderer, kita bisa memuat icon, label dan message dalam 1 item, yang bisa diperintah rendering ke hal yang lebih detil di halaman selanjutnya.

Cara membuatnya lebih mudah jika memakai kode :

1. Pilih TweetsView.mxml (bukan TwitterTrendsHomeView.mxml, karena tampilan kodenya hampir sama)

2. Delete labelField="text" dalam , karena akan kita jabarkan dalam IconItemRenderer di bawah.

3. Buat baris dengan menekan Enter di depan

4. Ketik Icon, lalu tekan Ctrl+Space. Sehingga terbentuk kode secara otomatis.

5. Lengkapi Kode sehingga menjadi :

**Sebaiknya Kode diatas Anda ketik, bukan mengcopy-nya, agar mengetahui fasilitas dan kemudahan dalam flash builder. Untuk memunculkan pop-up atas kode yang anda inginkan dapat menggunakan Ctrl+Space, lalu pilih kode yang diinginkan. Seperti pada saat anda mengetik iconPlaceholder="{assets.}", anda pilih LoadingIcon, sehingga secara otomatis akan mengimpor assets.LoadingIcon dan menempatkannya di dalam .

6. Tekan Save, lalu Run aplikasi ini.

Membuat Tombol Back untuk kembali ke HomeScreen

Aplikasi yang telah kita buat sudah dapat dinikmati, hanya saja untuk kembali ke homescreen kita harus menekan tombol Ctrl+B. Hal ini membuat kurang nyaman, oleh karena itu kita dapat membuat sebuah tombol agar bisa secara nyaman kembali ke HomeScreen. Caranya tidak sulit:
1. Pilih TweetsView.mxml

2. Masuk ke design mode.

3. Drag Button dari bilah component, ke navigationContent yang terletak di sebelah kiri judul pada ActionBar

4. Ubah Label: pada bilah properties menjadi "Back" dan ketik "navigator.popView()" pada On click. Tekan Enter, lalu save.

Membuat UserInfoView

1. Klik kanan pada TwitterTrends/src/views, lalu pilih New> MXML Component

2. Beri nama UserInfoView

3. Masuk ke design mode.

4. Drag Image dari bilah component, ke navigationContent yang terletak di sebelah kiri judul pada ActionBar.

5. Pada bilah Properties, setting width dan height menjadi 43.

6. Ketik "navigator.popView()" pada click dalam alphabetical view.

7. Drag Label dari bilah component, ke titleContent yang terletak di tengah ActionBar. 

8. Pada bilah Properties, setting menjadi Bold dan ubah warnanya menjadi putih.

9. Drag Label lagi sebanyak 4 buah, dan buat seperti gambar di bawah ini:

10. Setting constraint label (location) dan (follower) seperti berikut ini:

11. Klik Alphabetical view pada pojok kanan atas bilah properties, lalu setting maxDisplayedLines dengan 1.

12. Drag List dari bilah component, ke bawah Label, dan resize secara penuh ke kanan, kiri, dan bawah. Atur constrainnya menjadi 0 semua.

13. Masuk ke Alphabetical view, lalu setting borderVisible menjadi "true"

Menghubungkan Data dengan UserInfoView

1. Pada panel Data/Service, klik kanan TwitterService dan pilih Properties.

2. Klik Add di atas Operation table, lalu ganti Operation1 menjadi getUserInfo. Isikan http://api.twitter.com/1/users/show.xml pada URLnya.

3. Klik Add di atas Parameters table, isi parameter names dengan screen_name. Lalu tekan Enter. Pastikan type data berupa String.

4. Tekan Finish.

5. Kembali ke panel Data/Service, Klik kanan getUserInfo() dan pilih Configure Return Type...

6. Pastikan Auto-detect terpilih, lalu tekan Next

7. Pada kolom Enter Value, ketik Adobe (baris yang sama dengan screen_name), lalu tekan Next.

8. Tekan Finish.

9. Klik kanan pada getUserInfo(), pilih Generate Service Call.

10. Kembali ke panel Data/Service, Klik kanan pada getTweets(), pilih Generate Service Call.

11. Di dalam ketik kode:

public function refresh(): void 

{ 

getUserInfo(String(data)); 

getTweets("from:" + String(data), "recent"); 

}

12. Tambahkan viewActivate="refresh()" di bawah

13. Hapus title="UserInfoView" di bawah 

14. Pilih Data>Bind to Data (seperti pada langkah 13)

Seharusnya Existing call result sudah terseleksi, dan pada existing CallResponder sudah tampak getTweetsResult.

15. Pada Data Provider, pilih results[]. 

16. Pada Label field, pilih text, lalu tekan OK.

17. Delete labelField="text" dalam , karena akan kita jabarkan dalam IconItemRenderer di bawah.

18. Buat baris dengan menekan Enter di depan 

19. Ketik Icon, lalu tekan Ctrl+Space. Sehingga terbentuk kode secara otomatis.

20. Lengkapi Kode sehingga menjadi :

21. Masukkan source="{getUserInfoResult.lastResult.profile_image_url}" dalam navigationContent.

22. Ubah menjadi text="{data}" dalam titleContent.

23. Ubah menjadi text="{getUserInfoResult.lastResult.location}" untuk label (location).

24. Ubah menjadi text="{getUserInfoResult.lastResult.followers_count}" untuk label (follower).

Seperti tampak pada gambar di bawah ini:

Membuat Change handler untuk menuju ke UserInfoView

1. Pilih TweetsView.mxml
2. Masuk design view, pilih kotak List di tengah area.
3. Ketik navigator.pushView(UserInfoView, list.selectedItem.from_user) pada Change dalam bilah properties.
4. Tekan Enter, lalu save.


Selesai.
Anda bisa mencobanya beberapa kali hingga paham dan mengerti fungsi-fungsi dari kode yang dimasukkan.

Selanjutnya......