Cara Membuat Homescreen How to make homescreen for Windows Mobile 6.5 Standard??

Sekarang saya akan mencoba untuk membagi pengalaman dalam membuat homescreen... karena kebetulan banyak juga yang request. hehe. Tapi mungkin saja apa yang akan saya tulis bisa saja berbeda dengan pengalaman user-user lain. Alat dan Bahan 1. Text editor ::: Untuk ini, saya sarankan kalian menggunakan notepad++ (download) karena fitur taggingnya sangat bagus dan memudahkan kita melihat jika ada kesalahan saat membuat ataupun mengedit tag. 2. Image Editor ::: banyak Image Editor yang bisa kalian gunakan, tapi minimal bisa digunakan untuk mengedit file PNG. Beberapa image editor tidak bisa mempertahankan transparansi dari file PNG. Untuk yang Pro, bisa menggunakan Adobe Photoshop, berbayar tentunya. Untuk kalian yang punya PC/lepi dan budget pas-pasan, cukup gunakan software GIMP (download). 3. Activesync/WMDC ::: kenapa butuh activesync??? apa mode memorycard/storage mode tidak bisa??? bisa saja. Tapi dengan activesync/WMDC, proses percobaan file yang kita edit tadi ke HP akan terasa jauh lebih mudah dan cepat. 4. Internet ::: untuk mencari iconpack/image yang akan kalian gunakan untuk template Homescreen. 5. Kesabaran ::: bukan hal yang aneh jika homescreen yang kalian ciptakan nantinya ternyata tidak sebagus konsep yang kalian inginkan. jangan menggunakan perbandingan dengan homescreen yang diciptakan oleh user lain. Be original, belajarlah dari nol, karena itu jauh lebih berharga untuk dicoba. 6. Waktu ::: dengan membaca tutorial ini dan sekali mempraktekkannya,kalian akan langsung bisa me"masterisasi cara membuat homescreen, dont be so fool... akan perlu banyak waktu untuk kita dalam memahami dan mempelajari sesuatu, siapapun itu. Jadi jangan pernah mengeluh dan menyerah dalam belajar. Setelah tahap alat dan bahan, sekarang kita masuk ke tahap pengenalan dari homescreen itu. Homescreen di WM 6.5 standard dipengaruhi oleh beberapa file (saya tidak akan membahas homescreen berbasis facade dll). ==== File pertama : XML == Lokasi :: \Application Data\Home\ == Penjelasan :: File XML disini mengatur beberapa hal seperti skema warna homescreen tersebut, termasuk warna bar (softkey dan topbar) dan warna background di semua lokasi. Selain itu , file xml ini mengatur plugin-plugin yang digunakan di homescreen, misalnya plugin iconbar, mengatur bar sinyal dan batre. plugin titanium, mengatur panel-panel yang muncul di homescreen dan urutan posisinya. Itu adalah 2 plugin standar yang ada di

homescreen biasanya. Sebenarnya ada plugin-plugin lain yang bisa digunakan, tapi saya pribadi kurang paham untuk hal ini. :d Selain mengatur plugin dan skema warna, file XML juga mengatur nama Homescreen kalian, jika kalian ingin mengganti nama homescreen kalian (terlihat di setting > homescreen), disinilah tempatnya. Satu hal lagi, disinilah tempat mengatur wallpaper standar untuk homescreen kalian. Jika kalian membuat direktori yang salah untuk posisi wallpaper, maka homescreen tidak akan bisa dibuka dan akan muncul pesan invalid xml/error. Hatil-hatilah menulis direktori wallpaper kalian. Jika kalian ingin meletakkan wallpaper kalian di direktori \Application Data\Home\ dengan nama wallpaper,jpg misalnya, kalian cukup menulis background bgimage="wallpaper.jpg" ** note :: ini hanya berlaku jika kalian meletakkan wallpaper di direktori di atas, cukup tulis nama file nya saja di dalam tanda kutip, tanpa penulisan direktori. Tapi jika kalian ingin meletakkannya di direktori lain, kalian wajib menuliskan alamat direktorinya. ==== File Kedua : CPR == Lokasi :: \windows\ == Penjelasan :: Di file ini, adalah tempat dimana kalian bisa mengedit bagaimana homescreen itu harus tampil sepenuhnya. Kalian bisa mengatur kenampakan tiap panel, icon, huruf dan lain-lain di file ini. Sama seperti file XML sebelumnya, kalian juga harus hati-hati mengatur setiap tag. Jangan sampai ada tag yang kurang, karena bisa menyebabkan homescreen tidak bisa tampil. Satu huruf saja salah, akan menyebabkan error di homescreen (tidak menyebabkan kerusakan sistem, jadi ga perlu takut) hehe. ==== File Ketiga : Registry == Lokasi :: beberapa tempat == Penjelasan :: Ada beberapa hal yang bisa kalian lakukan di registry, dan ada beberapa tempat untuk file registry yang mengatur homescreen. Pertama, kalian bisa mengatur warna skema yang muncul untuk topbar dan softkeybar. Kalian bisa mengatur apakah warna yang tampil flat atau gradien. Selain itu, kalian bisa mengatur beberapa panel dengan lebih spesifik di registry (lanjutan dari CPR). Misalnya memunculkan link aplikasi favorite di homescreen (saya pribadi kurang paham untuk hal ini, karena jarang menggunakannya) hehe. bersambung ke TAG XML XML Tag (homescreen) Ini adalah post lanjutan untuk tutorial Cara Membuat Homescreen. === PENGENALAN TAG === ::: tag ini adalah tag yang mengatur nama homescreen kalian yang akan muncul di menu settings > Display/Homescreen. title lang="0x0409" ::: ini adalah tag nama homescreen untuk

tiap bahasa yang kalian gunakan di ponsel kalian. Misalnya 0x049 berarti nama homescreen yang akan tampil untuk bahasa US English. background bgimage="AndroidFun.jpg" ::: tag ini mengatur nama wallpaper yang ingin kalian gunakan sebagai wallpaper standar untuk homescreen kalian. Jika kalian meletakkannya di direktori \Application Data\Home, maka kalian cukup menulis nama wallpaper tersebut (liat tag contoh). Tetapi jika kalian meletakkannya di direktori lain, kalian wajib menuliskan direktorinya secara lengkap. bgimage-rotated="AndroidFun.jpg" ::: sama seperti di atas, tag ini juga mengatur wallpaper yang akan kalian gunakan. Hanya saja, untuk layar yang berbeda potrait/landscape. Jika kalian membuat homescreen hanya untuk satu jenis layar (mendatar/tegak) saja, cukup gunakan wallpaper yang sama untuk kedua tag di atas. valign="Top" ::: tag ini mengatur bagaimana wallpaper kalian tampil di layar. Jika kalian meggunakan TOP, maka wallpaper akan dihitung dari sisi atas. Itu artinya sisi bawah akan terpotong oleh softkeybar. Jika kalian menggunakan BOTTOM, maka wallpaper akan dihitung dari bawah, maka sisi ataslah yang akan terpotong. bgcolor="COLOR_TRAYGRADLEFT" ::: ini adalah warna latar homescreen jika tanpa wallpaper. Lalu apa maksud "tray_gradleft" tersebut?? ini maksudnya warna yang digunakan sama dengan warna traybar (topbar) sebelah kiri. Pengaturan ini ada dibagian pengaturan skema. Kalian juga bisa menggunakan kode warna HTML, contoh : #FFFFFF. ::: tag ini mengatur skema warna homescreen secara keseluruhan yang berefek ke semua bagian menu ponsel. ::: ini adalah warna latar untuk iconbar (icon sinyal, batre, notifikasi dll). Jika kalian menggunakan transparent, maka tidak ada warna yang digunakan. Tapi jika kalian menggunakan kode warna, maka iconbar akan tampil seperti homescreen di WM 5 & 6. fgcolor="COLOR_HOMETEXT" ::: lanjutan tag iconbar, ini mengatur warna icon-icon sinyal, batre dan lain-lain. ::: tag ini untuk mengatur susunan atau posisi panel-panel yang tampil di homescreen kalian. CPRFileName ="AndroidFun" ::: ini adalah nama file CPR yang kalian gunakan untuk homescreen bersamgkutan. Misal nama CPR kalian adalah AndroidFun_320x240.cpr, maka yang kalian tulis cukup AndroidFun tanpa 320x240 nya. bersambung ke TAG CPR Bagian selanjutnya dari Tutorial Membuat Homescreen adalah pengenalan tag-tag yang ada di file .cpr. File ini kita letakkan di folder windows. Pengenalan Tag :: Bottom == berapa pixels posisi dihitung dari bagian terbawah Top == berapa pixels posisi dihitung dari teratas Right == berapa pixels posisi dihitung dari terkanan

Left == berapa pixels posis dihitung dari terkiri *** Posisi sebuah "objek" menyesuaikan dengan di mana tag itu berada. Dihitung dari bawah, bukan selalu berarti dihitung dari layar ponsel. Misalkan saja pada tag panel, kita membuat panel dengan luas 200x200 pixels. Dengan posisi panel bagian kiri terletak di 0 pixel bagian kiri layar dan 200 pixel kanan. Kemudian ada tag font/huruf, right="30px". Maka ini berarti posisi font dihitung 30 pixel dari sebelah kanan panel, bukan sebelah kanan laya r. Karena tag font atau objek adalah bagian dari tag panel (subtag dari tag panel). Jadi intinya, tag sebuah posisi objek, memiliki hitungan posisi yang dinamis. Jadi jangan selalu berpatokan dan menghitung posisi objek dari luas layar. Perhatikan tag objek tersebut, apakah objek tersebut bagian dari tag lain. Width == lebar dari sebuah posisi objek Height == tinggi dari sebuah posisi objek *** Lebar objek maksudnya adalah seberapa lebar objek itu bisa tampil. Misalkan saja kita buat lebar judul panel adalah 100 pixel. Jika Judul yang kita buat pendek, mungkin tidak akan masalah, misalnya : SMS Panel.Maka judul akan tampil keseluruhan. Lalu bagaimana dengan judul yang panjang, misalnya : SMS Panel Motorola Q9h. Dengan luas hanya 100 pixel, maka akan ada bagian dari judul yang akan terpotong dan muncul seperti ini "SMS Panel Mot...". Jika kalian menemukan homescreen yang muncul sperti itu, itu artinya pada tag yang bersangkutan, memiliki masalah pada lebar atau tinggi objek. Biasanya karena si pembuat dan si pemakai homescreen menggunakan font dan dpi yang berbeda. Opacity == level transparan sebuah objek *** level transparan sebuah objek dan huruf, dihitung dengan nilai 0 hingga 1. Contoh : 0.5 untuk setengah transparan dan 1.0 untuk tampilan penuh. Jika kalian menggunakan nilai 0, maka objek kalian tidak akan muncul di layar. ScaleStyle == Jenis tampilan objek pada sebuah bidang. *** maksudnya adalah, misalnya kalian menggunakan icon dengan ukuran 45x45 pixel. kemudian pada bagian widh dan height kalian menggunakan widh="60" dan height"80". kalian memiliki 3 pilihan tampilan yang bisa kalian gunakan pada ScaleStyle tag, yaitu : Fit dan Strectch. Fit = icon kalian akan tampil dengan skala sama, 45x45 pixel = 1:1. maka icon ka lian akan mucul dengan ukuran 60x60 (menyesuaikan dengan tag widh). Strecth = icon kalian akan muncul dengan skala yang mengikuti widh dan height. J adi dengan widh dan height yang tidak sama seperti di atas, icon kalian akan tam pil dengan tertarik pada bagian tertentu. Dalam kasus ini, icon kalian akan lebi h ramping ke dalam, dan lebih tinggi ke atas. jangan pernah gunakan tag ini untu k icon, kalian bisa menggunakannya untuk file png panel. None = icon kalian akan tampil sesuai aslinya. FontFamily == Font yang akan kalian gunakan *** Misalkan di ponsel kalian ada beberapa font di folder /windows atau di /wind ows/fonts, maka kalian bisa menggunakan multi font pada homescreen kalian. Misal kan saja, sistem font kalian adalah Tahoma, kalian bisa menggunakan font berbeda untuk homescreen atau pada beberapa panel tertentu saja. Contoh kecilnya, kalia n ingin menggunakan font Nina untuk tampilan jam dan font Segoe UI untuk tampila n hari dan tanggal. *** Nama font tidak sama dengan nama file font kalian, cara mendapatkan nama fon t kalian adalah dengan mengkliknya di komputer ber-OS windows.

FontSize == ukuran font yang kalian gunakan *** tidak semua ukuran pada homescreen akan akan sesuai dengan yang kalian gunak an karena adanya perbedaan DPI dan font yang digunakan oleh setiap user. Jadi me mbuat homescreen yang universal itu hampir tidak mungkin. FontStyle == gaya tampilan font yang ingin kalian gunakan *** seperti pada beberapa font code baik di css, html dan laiinya, kalian juga b isa menggunakan beberapa gaya pada font/huruf pada bagian-bagian tertentu homesc reen kalian. Beberapa Font Style yang bisa kalian gunakan : Bold == Huruf akan tampil tebal. Italic == Huruf akan tampil miring. Underline == Huruf akan tampil dengan garis bawah. Reguler == Huruf akan tampil normal. Wrap == Bagaimana mode wrap dari text di homescreen kalian *** Wrap adalah kondisi untuk semua text yang tampil di bagian tertentu dari hom escreen. Misalnya saja di SMS/Text panel, jika kalian menggunakan wrap mode, mak a isi SMS kalian akan berlajut ke bawah dihitung per kata. Misalnya kalian membuat lebar panel untuk isi SMS adalah 100 pixel yang bisa men ampung 50 huruf. Kemudian huruf ke-51 adalah huruf N di kata pintar, maka kata p intar akan berpindah ke bawah. Jika kalian tidak menggunakan wrap, maka yang akan berpindah adalah sebagian dar i kata pintar, hanya ntar nya saja, pi nya akan tetap di atas. Jika kalian ingin menggunakan wrap untuk bagian tertentu, pastikan kalian membuat height (tinggi panel yang cukup) agar text bisa mendapat tempat terus ke bawah, sesuai dengan t inggi panel (height). Pilihan Tag Wrap ada 2, yaitu : True = Aktifkan mode wrap False = Non Aktifkan Mode Wrap Alignment == Jenis Paragraf Ada dua jenis paragraf untuk pembuatan Homescreen, yaitu : VerticalAlignment dan HorizontalAlignment. Kita akan membahasnya tahap demi taha p. karena ini adalah bagian yang cukup penting agar Homescreen kalian bisa tampi l dengan baik. Walaupun banyak yang kadang melupakan bagian ini >.< === Vertikal Paragraf == Artinya posisi obyek atau huruf dilihat dari bawah ke a tas atau sebaliknya. Tag yang bisa kalian gunakan : Top = obyek akan tampil di bagian paling atas panel. Middle = obyek akan tampil di bagian tengah panel. Bottom = obyek akan tampil di bagian paling bawah panel. === HorizontalAlignment == Artinya posisi obyek atau huruf dilihat dari kiri ke kanan atau sebaliknya. Tag yang bisa kalian gunakan : Left = obyek akan tampil di bagian paling Kiri panel. Center = obyek akan tampil di bagian tengah panel. Right = obyek akan tampil di bagian paling kanan panel. Jika kalian ingin membuat obyek berada di tengah-tengah, itu artinya kalian haru s membuat tag middle unuk vertikal aligment dan center untuk horizontal aligment .

BlurFactor === Level kabur/blur untuk font/huruf kalian *** semakin besar nilai blur, semakin kabur huruf kalian. Lalu apa gunanya membu at kabur huruf??? salah satu fungsinya adalah untuk membuat efek shadowing atau berbayang pada fon t. Dengan komposisi dan level yang pas, huruf akan terlihat menyatu dengan latar di belakangnya. Jika kalian menggunakan level yang rendah, terkadang font terlihat terlalu solid . Apa efeknya?? Untuk beberapa font yang kurang clear, akan terlihat distorsi pada bagian-bagian samping font atau terlihat kurang mulus. TextStage TextOffsetType == Posisi Font dilihat dari beberapa sudut. *** Fungsinya adalah membuat efek bayangan dan border/bingkai pada font. Tetapi, pada prakteknya, tidak sesimple itu. hehe Pertama kalian harus membuat font utama. Untuk font utama, kalian harus mengguna kan offset tipe none. Contoh Tag = TextStage TextOffsetType="TextOffsetNone" Sedangkan, untuk bayangannya, kalian menggunakan offsettype berbeda, contoh tag = TextStage TextOffsetType="TextOffsetDropBottomRight" Maka bayangannya akan muncul di sebelah kanan bawah font utama. Kalian bisa menggunakan posisi lain jika mau, walaupun mungkin akan terlihat ane h. Kalian juga bisa bereksperimen dengan warna-warna yang berbeda untuk font uta ma dan bayangannya. =========================================================== File CPR terbagi menjadi 2, yaitu bagian head dan body. Bagian head mengatur pan el homescreen secara global, sedangkan bagian body mengatur panel dengan lebih s pesifik. ========= HEAD ========== Image ID="Background" bottom="-26" Width="320" Height="200" Bagian ini mengatur posisi letak wallpaper di layar. Tag ini berhubungan dengan tag wallpaper yang ada di file xml. Tag mengatur posisi wallpaper saja. Artinya, bagian wallpaper yang ada di iconbar, tidak di atur di tag ini. Perhatikan contoh gambar di bawah ini :: Bagian merah di atur di xml, sedangkan bagian merah di atur di file xml.Inilah y ang menjelaskan mengapa tag ini Image ID="Background" bottom="-26" Width="320" Height="200" meng gunakan height 200. Height 200 didapatkan dari 240px - 40px. 240 pixel adalah luas layar Moto Q9h keseluruhan, sedangkan 40 pixel adalah juml ah dari tinggi iconbar ditambah tinggi softkeybar. Masing-masing memiliki tinggi 20 pixe l. Ini berlaku di 96dpi. Jika di 131dpi, iconbar dan softkeybar memiliki tinggi 26 pixel. TitaniumListView ID="HomeNav" Top="-42" Width="320" Height="240" Clip="False" Co lumns="1" Rows="5" ItemWidth="320" ItemHeight="50" Layer ID="Focus" Width="320" Height="55" Clip="False" Image ID="Image Default" Width="320" Height="55" ScalingAlgorithm="TriLinear" ControlSequence ID="Action Sequence" FramesPerSecond="30" Loop="False" Image ID="Image" Width="320" Height="55" ControlSequence Layer

Layer ID="ListItem" Width="320" Visible="True" Layer ID="No Items" Opacity="0.6" Text ID="Text" Width="100" Height="19" FontFamily="Nina" FontSize="9" FontStyle= "Bold" Wrap="False" Trimming="EllipsisCharacter" Secara keseluruhan, tag ini membahas posisi, luas dan bagaimana seharusnya panel pada homescreen bergerak. Saya pribadi kurang begitu memahami keseluruhan tag ini. Tag-tag ini nantinya akan berpengaruh pada unsur penghitungan posisi pada tiap p anel secara lebih spesifik. Layer ID="NPI"> Image ID="Left" Left="3" Top="105" Width="10" Height="10" Opacity="1.0" Image ID="Right" Left="310" Top="105" Width="10" Height="10" Opacity="1.0" / Layer Layer ID="MPI" Image ID="Left" Left="3" Top="105" Width="10" Height="10" Opacity="1.0" Image ID="Right" Left="310" Top="105" Width="10" Height="10" Opacity="1.0" />6" Width="10" Height="10 Layer Tag ini mengatur icon arrow (arah) pada panel yang memiliki lebih dari satu wind ow di panelnya. COntohnya seperti panel setting, notification, appoiments, dan lain-lain. Kalian pasti melihat ada icon arah kiri dan kanan saat berada pada panel tersebu t bukan?? disinilah bagian tag yang mengatur posisi dan tampilan icon-icon tersebut