Categories
Projects

Automatic IIUM Schedule (AIIUMSF) sekarang dengan "vertical layout".

Ok, long story short, Automatic IIUM Schedule Formatter sekarang ada “Vertical Layout”, yakni jadual disusun dari atas ke bawah daripada kiri ke kanan. Untuk menggunakannya, cuma pakai theme gallery, kemudian tekan “Vertical Layout” seperti anak panah di atas, dan tada! Jadual anda secara automagically vertically layouted.

By the way, kalau korang perasan, secara default korang tak patut nampak screenshot theme kat dalam kotak macam kat screenshot atas. Itu pasal ada sikit security issue. Korang boleh “on” screenshot tu dengan tekan “allow” kat atas waktu chrome kata website ni tengah akses insecure resource.

Categories
Article

Jangan memalukan orang Islam

Assalamualaikum rakan-rakan sekelian. Untuk kali ini, dari lubuk hati saya, saya mintak kamu untuk tolong sebarkan apa yang ada dalam minda saya ini. Saya tak kisah kalau kamu nak copy-paste setiap HTML dari post ini ke blog anda, saya secara ikhlasnya galakkan anda untuk buat apa sahaja asalkan mesej dari post ini disampaikan sejauh yang mungkin.

Isu yang saya nak bincangkan hari ini ada kaitan dengan orang Islam seperti yang ditunjukkan di atas. Di screenshot di atas, di comment yang terakhir, saya ada tulis:

Seriusly ADA SAPA-SAPA kat comment ni yang dah check nawaret.com??!! Itu laman web berita biasa aje! Dan tulisan jawi tu merupakan “nawaret” dalam jawi. Kenapa benda macam ni dibesar-besarkan? Ia hanya akan melalaikan kita. Melemahkan kita,kalau orang kafir nampak ni, diorang gelak kat kita pasal kita share MACAM ORANG BODOH! Tak check benar atau tidak apa yang dikatakan. MEMALUKAN nama Islam dan Al Quran. Siapa yang pertama menyebarkan benda ni patut sedar implikasinya terhadap maruah orang Islam.

Kalau tak percaya pergi sendiri ke “nawaret.com“. Tulisan tu dalam bahasa jawi, so google translate aje, dan kamu patut lihat bahawa itu hanyalah laman web berita biasa. Tapi bukan itu yang saya nak sebarkan di sini, tetapi saya nak tegur seluruh orang islam tentang satu mindset yang nampaknya tegar dalam minda kebanyakan orang islam.

Kita selalu dengar perkataan “Islamophobia”. Tapi dalam kes ini ianya ibarat “fobia orang islam”. Let me get straight to the point:

->Jangan mendewa-dewakan orang kafir<-

Kepada yang bukan Islam, from the bottom of my heart, no offense. Macam mana kamu mendewa-dewakan mereka. Macam ni, sejak dulu lagi, banyak orang kata “Bill Gates tu orang Yahudi”. Dan kemudian apabila Apple semaki maju “Steve Jobs tu Yahudi”. Kemudian pula “Mark Zuckerburg itu Yahudi”. Rakan-rakan, saya nak tanya, kamu nampak ke Bill Gates dilahirkan di Israel? Bapa Steve Jobs orang Yahudi ke? Ada kamu cuba untuk mencari kebenaran terlebih dahulu ke sebelum kamu membenarkan apa yang dikatakan tersebut? Rakan-rakan, saya tak tahu kalau mereka memang orang Yahudi, seperti mana saya tak tahu adakah saya orang Yahudi, tapi polanya di sini adalah, apabila orang itu berkuasa saja, kamu anggap dia orang Yahudi, kamu kata dia berketurunan Yahudi, kamu benarkan apabila orang kata begitu. MACAM TU LAH KAMU MENDEWA-DEWAKAN ORANG YAHUDI.

Apa yang penting di sini adalah untuk kita menyedari bahawa adakan mereka Yahudi atau tidak, itu tidak penting langsung. Mereka tetap Kafir. Malah orang yang mengaku Islam sekalipun belum tentu sebenar-benar Islam. Apa yang penting adalah diri kita sendiri, adakah kita akan bangkit bersaing, atau duduk memegah-megahkan mereka? Bercakap sahaja tak akan menggerakkan bumi. Menyebarkan kenyataan-kenyataan “israel itu”, “israel ini” yang entah mana betul atau tidak, tidak akan membebaskan palestin. Malah ia akan membongkakkan lagi mereka, memburukkan nama Islam, sekaligus menyebabkan orang-orang kafir diluar sana yang tidak bertanggungjawab atas apa yang berlaku di palestin memandang orang Islam macam manusia tidak bertamadun aka “Terrorist”.

Rakan-rakan, mari saya berikan satu dua fakta tepat yang orang memang tahu. Pertama, Tahukah kamu tentang Processor chip Intel? Tahu kan? Syarikat pembuat chip terbaik di dunia. Processor keluaran mereka, dari Pentium M hingga ke Sandy Bridge sekarang ini direka di Israel. Itu satu fakta yang orang ramai tahu bahawa Intel ada pusat kajian di Israel. Fakta kedua, (kalau tak silap saya dari sumber yang sangat tinggi credibilitinya (Slashdot.com) ), Kurang setahun lepas, Apple telah menandatangani satu kontrak pembinaan data center di Israel yang akan digunakan untuk pelbagai benda contohnya pemprosesan “Siri”.

Kenapa saya bagitau kamu perkara ini? Saya nak kamu tahu bahawa orang-orang yahudi ini bijak. Mereka telah meletakkan aset-aset penting dunia di Israel. Jadi, sesiapa tidak boleh serang Israel begitu sahaja. Bayangkan jika tiba-tiba app store iphone tidak berfungsi di seluruh dunia? Bayangkan jika processor-processor yang digunakan di hampir semua komputer/laptop kita meningkat harganya berkali-kali ganda? Mereka kuat bukan kerana mereka letak dadah kat tentera mereka (again: “Tentera Israel dibius dengan dadah untuk menjadikan mereka kuat, dan tak rasa sakit.” <- MACAM NI LAH KAMU MENDEWA-DEWAKAN ORANG YAHUDI ), tetapi kerana mereka menghasilkan komoditi-komoditi yang penting, lantas menguasai ekonomi dunia, dan sekaligus kapitalis yang bergantung kepada komuditi ini. Rakan-rakan sekelian, saya mintak anda untuk tukar mindset anda. Pertama, “Do not fear them”. Mereka manusia seperti kita juga. Jangan kamu jadikan alasan bahawa orang yahudi itu genius sebab makanan dari syurga. Think of it this way, kebanyakan orang yahudi telah dibunuh orang nazi. Saya tak ingat documentari mana saya tengok, tapi apa yang dikatakan mereka orang-orang yahudi di Israel itu adalah keturunan satu/dua orang yahudi asal sahaja. Kebanyakan baka diorang dah bercampur dengan arab/palestine/iraq sebagainya. So, apa yang membezakan mereka dengan kita? Ingat, bukan semua orang Kafir musuh kita. Rasulullah SAW pernah berkata, hormatilah orang kafir yang tidak memusuhi orang Islam. Nabi sendiri kata “hormatilah”. Pernah dalam satu lagi hadir, seorang kafir memberi salam kepada Aishah. Aishah menjawah “waalaikumussam” atau maksudnya “celakalah kamu”. Kemudian Rasulullah SAW menegur Aishah supaya menjawab salam orang kafir dengan perkataan “waalaika” atau maksudnya “kepada kamu juga”. Ingat pada zaman salahuddin, antara cara untuk menembusi tembok Constantinople adalah dengan menggunakan meriam yang sangat besar. Adakah orang Islam yang mereka meriam itu? Tidak! Orang kafir yang membina meriam itu, diupah oleh Salahuddin. “De not fear them. Befriend them.” Kedua, kuatkan diri anda dan orang Islam. Belajar untuk tahu, supaya anda dapat berbakti apabila khidmat anda diperlukan. Rakan-rakan sekelian, post ini pertama sekali akan sampai ke pelajar IIUM. Jika anda pelajar IIUM, saya ada soalan untuk anda, jika ada satu tempat dimana orang Islam mengumpul kekuatan ilmiah, dimanakah tempat tersebut? Dimanakan tempat dimana belia-belia Islam mengumpul Ilmu dengan harapan untuk menerbalikkan dunia kembali? Dimanakan tempatnya orang Islam seluruh dunia menaruh harapan untuk menghasilkan insan-insan yang mampu untuk meningkatkan ekonomi orang Islam? Jika akan ada syarikat-syarikat Islam yang akan membuka mata dunia, dari manakah mereka? Tips: IIUM ialah singkatan untuk International Islamic University Malaysia. Please… live up to the name. Ada pepatah mengatakan “A wise man hire a person wiser than him”. Sepandai manapun kamu, jika akhirnya kamu bekerja dibawah syarikat orang kafir, hakikatnya orang kafir itu lebih pandai dari kamu, dan kamu sedang membantu mereka. Sebanyak mana gaji yang mereka berikan, banyak lagi keuntungan yang mereka dapat dari kamu. Ingat, di syurga, tempat peniaga-peniaga itu di sebelah nabi. Di masa-masa sebegini, perniagaan itu adalah peperangan. Untuk menguasai ekonomi, kita perlukan perniagaan. Saya nasihatkan anda dan diri saya, lepas graduate, kerja 3 tahun, pastu kumpulkan member-member lama, buat bisnes. Jangan takut muflis. Percayalah, orang yang pernah muflis berkemungkinan besar akan berjaya dalam perniagaan. Kita kuasai ekonomi, kita kuasa aset, kita tingkatkan kepentingan kita di dunia, kita jadi kuat. Rakan-rakan sekelian, esok, kita akan keluar dari rumah, berjalan pergi kelas macam biasa. Tapi saya harap, janganlah kamu lupa apa yang saya luahkan kepada kamu hari ini. Biar dari luaran, kita pelajar biasa, belajar apa yang kita mampu, tapi dari dalam, kita ada niat, niat yang mana satu hari nanti bila kita pergi meninggalkan dunia, apabila Dia bertanya, kita boleh jawab dengan yakin apa yang kita telah lakukan di dunia untuk Islam. Ingat cerita tentang burung pipit yang cuba memadam api yang membakar Nabi Ibrahim AS. Walaupun sedikit sekurang-kurangnya dia berusaha. Jika kamu faham tentang pentingnya artikel ini, tolonglah sebarkannya melalui apa sahaja medium yang kamu tahu. Itu sahaja daripada saya. Asalamualaikum.

Categories
Personal Projects

Status update!

Assalamualaikum semua! Apa khabar!

Status update:
 Saya akan kembali ke CFS IIUM lusa nanti. Tada! Tak sabar nak balik. Bila dah sampai nak balik rumah pulak. Tak tetap pendirian.

YourAgregator mode:

So, semalam(kalau tak silap saya) saya dah upload YourAgregator update terkini. Untuk upload ini, saya telah update Styler, tambah kebolehan untuk PM walaupun buat masa ini, dashboard PM sangat tidak berfungsi, kebolehan Styler untuk mengubah setiap style telah ditambah so, moderator boleh ubah style Chatter dan agpages yang lain, sedikit perubahan dengan sanitize feed, ada thumbnail untuk post yang ada gambar (walaupun tak ada dalam gambar di atas), dan yang paling jelas, perubahan style asal seperti yang diatas. Somehow, saya rasa ianya tidak appropriate. But its nice to see a new face. Oh ya! Styler sekarang boleh upload gambar untuk dijadikan background.

Automatic IIUM Schedule Formatter mode:
AIIUMSF punya save to facebook button sekarang akan bukak di tab yang baru. So, there is no need for Save dulu baru Save to FB. Dan beberapa bugfix, yang paling ketara ialah sekarang ianya boleh digunakan dengan Firefox (dulu tak boleh, masalah teknikal).

Categories
Article

Bagamana nak buat program GUI Ringkas dengan C# dan .Net Framework

WARNING: Saya rasa ada banyak kesilapan ejaan dan keterlajuan dalam article ini. So… good luck.

Assalamualaikum semua! Apa khabar! Pada hari ini, saya akan tulis tentang bagaimana untuk buat program Graphical User Interface (GUI) yang ringkas dengan C#. Article ini adalah terjemahan dari article saya yang lain kat RookieCode, so kemungkinan besar akan ada banyak masalah terjemahan.


Oh, mari kita mulakan. Mula-mula sekali mari kita mengenal C# dan sejarahnya. C#(disebut C-sharp) merupakan satu bahasa programming yang agak baru. Bahasa ini diperkenalkan oleh Microsoft sebagai bahasa rasmi .Net Framework mereka. C# bertujuan untuk menggabungkan kelebihan-kelebihan C++ dan Java dalam satu platform. Ia lebih laju dari Java dan jauh lebih mudah untuk digunakan dari C++. Seperti Java, C# bukanlah compiled language semata-mata. Ianya adalah gabungan compiled language dan interpreted language. Source Code C# tidak di-compile terus kepada machine-code, tetapi ianya di-compile kepada sejenis bytecode khas yang mana akan dicompile pula kepada machine code oleh .Net CLR(Common Language Runtime) ketika program itu dijalankan. Disebabkan ini, program C# boleh di-optimumkan kepada CPU pengguna tanpa perlu binary berlainan. .Net Framework (disebut Dot-Net framework), merupakan satu kolleksi library/API yang boleh diakses daripada beberapa programming language yang menyokong .Net Framework. Bahasa utamanya adalah C#, namun ia juga boleh digunakan dengan bahasa programming yang lain seperti C++, J# dan Visual Basic .Net. Bahasa programming tersebut perlu dicompile kepada bytecode khas sepertimana juga C#. Ini membolehkan bahasa programming lain mengakses utility yang dibuat menggunakan bahasa programming yang lain dengan cara yang sangat portable. .Net Framework sudah diinstall secara default atas Windows XP service pack 2 dan keatas. Windows XP sebelum service pack 2 boleh download .Net Framework secara berasingan. .Net Framework tidak boleh digunakan untuk Windows Millennium dan sebelumnya. Untuk Linux, satu projek yang dipanggil “mono” membolehkan program .Net untuk berfungsi walaupun dengan sedikit masalah compatibility.

Di post ini, kita akan menggunakan Microsoft Visual C# Express Edition untuk buat program kita. Edisi Express boleh didapati secara percuma di sini . Microsoft Visual Studio ialah koleksi IDE(Integrated Development Environment) untuk pembangunan program, Lesen standardnya tidak percuma walaupun ianya mungkin adalah IDE terbaik sekali.

Baiklah, mari kita mulakan. Start Visual C#, anda akan jumpa screen seperti dibawah.

Tekan butang “New Project”.

Pilih “Windows Forms Application” dan tukar nama projek kepada “MyMouseFollower” atau apa-apa yang kamu suka.Tekan “OK” dan screen pertama yang sepatutnya kamu jumpa ialah form builder seperti dibawah.

Form builder adalah satu peralatan yang membolehkan anda untuk menyusun komponen program anda dengan mudah tanpa menggunakan kod directly. Di bahagian atas kiri form builder ada satu butang “Toolbar”. Tekan butang tersebut dan senarai “Control” yang kamu boleh gunakan akan muncul.

Untuk projek ini, kita akan menggunakan “Panel”. Secara ringkasnya, Panel adalah ruang kosong yang mana kita akan lukis diatasnya nanti.Tekan “Panel” dan drag-drop atas “Form”

Juga, pilih “Label” dan letakkannya dibawah panel tadi.

Sekarang tulisan di label itu ialah ‘label1’ dan itu bukanlah apa yang kita nak. Right click diatasnya, kemudian tekan “properties”. Satu tab akan muncul di belah kanan screen.

Tab ini membolehkan anda untuk mengubah property Control yang dipilih. Edit property “Text” label1 kepada “My mouse follower” atau apa-apa yang kamu suka. Tulisan di label1 patut bertukar dari “label1” kepada “My mouse follower”.

Kamu boleh jalankan program tersebut menggunakan butang “Start Debugging” yang terletak di toolbar atas. Satu window yang berfungsi akan muncul walaupun dalam keadaanya sekarang ianya tidak berguna dan membosankan.

Baiklah, sekarang mari kita buat programming. Di bahagian kanan screen,

Ada tab yang menunjukkan file-file yang ada dalam projek. Pilih “Form1.cs” (file yang tengah kita pakai), right click-nya, dan tekan “View Code”.

Ini adalah kode untuk Form1 ditulis dalam C#. Lapan baris pertama terdiri dimulakan dengan perkataan “using”. Kata kunci “using” memberitahu compiler namespace mana yang kita gunakan. .Net Framework merangkumi banyak program/utility. Untuk memudahkan pengurusan program tersebut, utiliti-utiliti tersebut dikumpulkan dalam kumpulan yang dipanggil namespace. namespace bermaksud ruang nama. Ianya digunakan untuk mengelakkan kekeliruan antara class yang mempunyai nama yang sama dan juga untuk mengatur class yang sama jenis/kegunaan. Dalam kod diatas, class “Form1” terkandung antara dua “curly braces” yang dimulakan dengan perkataan “namespace MyMouseFollower”. Ini menunjukkan yang class Form1 terletak didalam namespace MyMouseFollower. class dari namespace lain boleh mengakses class Form1 menggunakan nama penuhnya iaitu “MyMouseFollower.Form1”. Ataupun, kita boleh letak baris “using MyMouseFollower” di permulaan source code class tersebut dan hanya menggunakan “Form1”. Kita akan lihat bagaimana ia dilakukan nanti.

Baris “public partial class Form1:Form” mengisytiharkan class yang bernama “Form1”. Dalam object oriented programming, class ialah kod yang “define” sesuatu object. Fikirkan perkataan “class” itu lebih kepada “kereta ber-class C” dan bukannya “class room”. Butiran Object Oriented Programming agak sukar untuk diterangkan di peringkan ini. Buat masa ini, aggap sahaja bahawa class Form1, mengumpulkan beberapa kode. Kata kunci “public”, bermaksud class ini boleh diakses dari luar namespacenya dan kata kunci “partial” bermaksud source code ini hanyalah sebahagian daripada Form1 yang mana sebahagian lagi dijana oleh form builder.

Baris “public Form1()” mengisytiharkan satu method/subroutine/function. subroutine, secara ringkasnya adalah sekumpulan kode-kode. Dalam kes ini, hanya ada satu baris kod iaitu “InitializeComponent()”. Kode ini bermaksud, jalankan method yang bernama “InitializeComponent” yang diisytiharkan oleh form builder di partial yang lain. Lihat bahawa method “Form1” mempunyai nama yang sama dengan class tersebut. Method yang mempuntai nama yang sama dengan class adalah constructor kepada class itu. Ini bermakna method “Form1” merupakan constructor kepada class “Form1”. Apabila sesuatu object diwujudkan, constructor kepada class object tersebut dijalankan untuk membina object tersebut.

Sekarang ini, kode hanya menyusun control kepada form itu sahaja. Mari kita ubahnya untuk buat sesuatu yang lebih menarik. Dibawah baris “InitializeComponent”, tulis “pa”.

Satu dropdown menu akan muncul, menyenaraikan perkataan-perkataan yang sesuai diletakkan. Antara perkataan tersebut adalah “panel1”. Ingat bahawa nama panel yang kita letak di form builder adalah “panel1”. Form builder akan secara automatiknya, membuat satu global variable yang sama nama dengan panel tersebut di partial yang lain untuk memudahkan kita mengakses control tersebut. Atas perkataan “panel1”, ada perkataan “Panel”. Panel adalah nama class yang “define” satu panel dalam form. Nama penuhnya adalah System.Windows.Form.Panel. Tetapi, disebabkan kita telah meletakkan baris “using System.Windows.Form”, perkataan “Panel” sudah mencukupi. Secara konvensional, nama class dimulakan dengan huruf besar manakala nama property dimulakan dengan huruf kecil. Kamu boleh menggunakan Panel untuk meletakkan panel secara manual, namun, bukan itu yang kita akan buat pada hari ini. Rujukan lengkap tentang class apa yang ada dalam .Net Framework boleh didapati di sini. Sekarang, tekan Tab dan ia akan lengkapkan perkataan tersebut. Kemudian taip lagi “.pa” dihadapannya.

Sekarang satu lagi dropdown menu muncul tetapi dengan perkataan yang lain. Apabila kita menggunakan symbol ‘.’, kita menyatakan bahawa kita sedang memilih property/attribute/member object tersebut. Dan itu yang kita akan lakukan. Kita akan lihat nanti bagaimana untuk buat property kita sendiri. Sekarang, tekan tab untuk auto-complete perkataan Paint. Kemudian, tambah “+=” dihadapannya.

Property “Paint” ialah sejenis delegate satu lagi feature C# yang agak advance. Untuk kali ini, kita tidak belajar secara mendalam tentang delegate. Kita hanya akan menggunakannya. Secara ringkasnya, delegate merupakan satu system event-handler yang ada dalam C# yang membolehkan kita untuk menjalankan sesuatu method apabila satu event berlaku. Dalam kes ini, event “Paint” berlaku apabila control tersebut dilukis. Tekat Tab dua kali dan ia akan menjana satu method.

method yang baru dijanakan sebentar tadi dinamakan “panel1_Paint”. Kata kunci “void” bermaksud method ini tidak me-“return” sebarang data. Apa yang dimaksudkan dengan “return” itu tidak akan kita bincangkan pada hari ini memandangkan setiap method yang kita buat pada hari ini adalah method yang tidak me-return sebarang variable. Method ini juga mempunyai parameter “object sender” dan “PaintEventArgs e”. parameter adalah nilai/variables yang boleh diberi kepada method ini. variable atau dalam bahasa melayunya pembolehubah merupakan tempat untuk meletakkan nilai atau object sepertimana juga property yang mana kemungkinan besar merupakan public variable. Kita akan lihat bagaimana untuk mengisytihar variable sebentar nanti. Secara defaultnya method ini mengandungi satu baris kode yakni “throw new NotImplementedException()”. Secara ringkasnya, kode ini akan menghasilkan satu exception. exception merupakan “simbol masalah yang terkawal”. Dalam kes ini, ia akan menghasilkan exception kerana kita tidak memberitahu apa yang nak dibuat. Disamping itu, lihat bahawa setiap statement diakhiri dengan semicolon ‘;’. Dalam C#, setiap statement diakhiri dengan semicolon. Sekarang, padam baris exception tersebut dan salin kode dibawah.

Baris pertama “Graphics g=e.Graphics;” menunjukkan cara untuk mengishtihar dan meletakkan object kepada satu variable baru yang bernama ‘g’. C# ialah sejenis bahasa programming yang ‘strongly type’. Ini bermakna, setiap variable perlu ada ‘jenis/type’ yang jelas. ‘jenis/type’ dalam kontext ini adalah satu nama class ataupun jenis yang sudah terbina dalam C#. Dalam kes ini ‘g’ adalah satu variable berjenis ‘Graphics’. ‘Graphics’ ialah satu class yang membolehkan kita untuk melukis di atas sesuatu. Nama penuhnya adalah ‘System.Drawing.Graphics’. Simbol ‘=’ adalah simbol ‘assignment/peletak’, yang bermakna nilai di sebelah kanan simbol akan disalin ke variable di sebelah kiri simbol. Secara ringkasnya, kita sedang membuat satu variable bernama ‘g’ yang berjenis ‘Graphics’ dengan nilai daripada ‘e.Graphics’ yang mana ‘Graphics’ di sini adalah property kepada variable ‘e’ yang merupakan parameter kepada method ‘panel1_Paint’.

Di baris seterusnya kita sedang call/memanggil method ‘DrawString’ daripada variable g. Lihat di tooltip ada perkataan ‘1 of 6’ dan anak panah di tepinya. Jika kamu click anak panah tersebut, kamu akan lihat method DrawString boleh menerima lebih dari satu jenis set parameter dengan susunan jenis yang berbeza. Dalam kes ini ada 6 set. Ini dipanggil method/function overloading. Sebenarnya dalam class Graphics, ada 6 method yang mempunyai nama yang sama yakni “DrawString” tetapi setiap satu mempunyai set parameter yang berlainan. Compiler akan secara automatiknya memilih method yang betul bergantung kepada variable yang diberi semasa method call.

Dalam kes ini kita akan menggunakan overload yang ketiga. Isikan method call ini mengikut screenshot dibawah. Kamu tidak perlu untuk click anak panah untuk memilih function overload. Tool tip tersebut hanyalah alat bantuan semata-mata.

Oh ya! semasa kamu sedang mengisi parameter ‘brush’, tooltip akan keluarkan beberapa kata kunci yang bermula dengan ‘Bru’ dan berkaitan dengannya. Buat masa ini, saya cadangkan kamu gunakan sahaja “Brushes” yang mengandungi koleksi ‘Brush’ yang sudah sedia ada.

Apabila kamu sudah melengkapkan kod tersebut, jalankan program dengan menekan butang “Start debugging” atau menggunakan shortcut F5. Kamu patut lihat satu window seperti di bawah.

+
Begitulah caranya programmer melukis diatas panel. Perhatikan bahawa nilai x adalah 5, manakala nilai y adalah 50. Dalam kebanyakan programming toolkit, origin (x=0,y=0) terletak di atas kiri screen/panel dan nilai positif y menghala ke bawah. Ini bermakna apabila nilai y meningkat, lukisan akan begerak ke bawah, dan apabila nilai x meningkat, lukisan akan bergerak ke kanan. 
Sekarang, mari kita buat sesuatu yang lebih menarik. Ishtiharkan dua global variable seperti di bawah.

global variable secara ringkasnya adalah variable yang diishtiharkan di luar class method. Bezanya adalah global variable boleh diakses dari mana-mana class method, dan sebarang perubahan terhadap global variable akan dikekalkan sepanjang hayat object tersebut. Berbanding global variable, local variable (variable didalam method) hanya boleh diakses didalam method tersebut dan diishtiharkan semula setiap kali method itu digunakan. “int” pula bermaksud “integer” iaitu salah satu type/jenis yang sudah terbina dalam C#, digunakan untuk menyimpan nombor bulat.

Seterusnya, kita tambah lagi satu handler untuk “MouseMove” event seperti mana yang kita lakukan dengan “Paint” event.

Dalam mouse handler, gunakan kode seperti di atas.

Kemudian, ubah paint handler kepada kod diatas.

So, apabila tetikus bergerak di atas panel, ia patut tukar variable “myx” dan “myy” kepada kedudukan tetikus dan apabila panel dilukis, ia akan melukis dua garisan yang akan bertemu di kedudukan tetikus. Sekarang, mari kita cuba program itu, tekan F5 dan kamu patut lihat window seperti di bawah.

Cuba gerakkan tetikus di atas panel tersebut, adakah garisan itu bergerak? Kenape? Tips: Minimize, kemudian maximize window tersebut. Sekarang garisan itu patut berada di kedudukan yang berbeza.

Masalahnya di sini adalah, event paint hanya berlaku ketika window perlu dilukis semula. Contohnya ketika window tersebut didedahkan daripada bawah window yang lain atau dalam kes ini, apabila window sedang di maximize. Sistem Operasi (selalunya) tidak akan ingat bagaimana rupa sesuatu window apabila ia di maximize, jadi ia minta program tersebut untuk melukis dirinya sendiri. Dan pada waktu itulah paint handler digunakan, yang mana ketika itu, ia akan melukis garisan bergantung kepada kedudukan tetikus yang disimpan. Untuk membuatkan garisan itu bergerak mengikut tetikus, kita perlu invalidate(bermaksud tidak sah) panel apabila mouse bergerak.

Untuk invalidate panel tersebut, kita gunakan method Invalidate(). Secara ringkasnya, method ini akan menandakan panel itu sebagai tidak sah, jadi ia perlu dilukis semula. Ubah kode di mouse handler seperti di atas dan jalankan program.

Sekarang kamu patut lihat garisan itu bergerak mengikut tetikus. Sekarang, mari kita buat sesuatu yang lebih menarik. Ubah paint handler anda seperti di bawah.

Baris “int phase=(DateTime.Now.Milisecond/100)%10” secara ringkasnya bermaksud, dapatkan masa sekarang dalam milisaat, bahagi dengan 100 dan kemudian dapatkan baki jika dibahagi lagi dengan 10. Hasilnya ia akan menjadi nombor diantara 0 hingga 9 yang meningkat 1 setiap 100 milisaat. Bagaimana ia berguna akan ditunjuk sebentar nanti.

Kata kunci ‘while’ akan menyebabkan komputer menjalankan kode didalam curly bracket(loop/block) selagi expression “i<5" itu benar. Expressi "i<5" dikira benar selagi nilai dalam variable "i" itu kurang dari 5. Disebabkan "i" asalnya 0, dan ianya ditambah 1 setiap kali block ini dijalankan, code didalam block ini akan dijalankan sebanyak 5 kali. Didalam block tersebut, kita mengira ‘ciclesize’ iaitu 10 x nombor loop + phase. Kemudian kita lukis bulatan di tengah-tengah panel. Apa yang ia lakukan? Well, mari kita jalankannya dan program kamu patut jadi sebegini.

Lima bulatan didalam bulatan yang lain. Jika kamu terus menggerakkan tetikus kamu, kamu akan perasan yang ianya sebenarnya satu animasi. Tetapi untuk ia bergerak, kamu perlu terus menggerakkan tetikus kamu supaya ia akan invalidate panel tersebut supaya panel itu akan dilukis semula. Untuk membolehkan ia bergerak tanpa menggunakan mouse, kita boleh gunalan Timer.

Ubah kod anda menjadi seperti yang diatas. Event “Tick” pemasa, akan berlaku setiap 100 milisaat jika di set seperti yang diatas. Di dalam handler, ia invalidate panel1. Disebabkan panel1 invalidate setiap 100 milisaat, kita tidak perlu invalidatenye dalam MouseMove handler. Tetapi tidak ada salahnya jika kita biarkan sahaja kod tersebut. Sekarang, bulatan itu akan terus bergerak walaupun tetikus tidak bergerak.

Sekarang, cuba anda tukar kod di paint handler seperti yang diatas. Cuba teka apa yang berlaku?

Sekarang bulatan itu akan mengikut tetikus! Dua perubahan ringkas dan ia lakukan sesuatu yang nampak komplex. Membuat program itu senang, tetapi buat program bagus yang senang diubah itu susah.

Kamu perasan tak yang lukisan ini macam berkelip/flicker. Itu kerana, lukisan ini ditunjukkan walaupun ia belum siap. Ada technique ringkas yang boleh mengatasi masalah ini. Ia dipanggil double buffering. Secara ringkasnya ia bermaksud, kita lukis diatas satu image(buffer), kemudian kita lukis image tersebut diatas panel. Panel ada double buffering sedia ada yang tidak dihidupkan. Namun, untuk set double buffering, kita perlu subclass Panel terlebih dahulu, sesuatu yang agak mengelirukan buat masa ini. Jadi kita akan buat implementasi double buffering kita sendiri.

Secara ringkasnya, kita akan buat satu Bitmap(sejenis Image) yang sama saiz dengan panel, kemudian kita lukis atas Bitmap itu, dan kemudian kita lukis Bitmap itu diatas panel. Jalankan program ini, dan kamu patut lihat pengurangan flicker yang agak drastik. Dan apa yang kita lakukan cumalah tambah dua baris dan ubah satu. Disebabkan kita simpan e.Graphics di variable g terlebih dahulu dan kemudian lukis menggunakan g dan bukannya secara terus dari e.Graphics, kita hanya perlu ubah ‘g’ dan segalanya akan berubah.

So, apa yang kita belajar hari ini? Ada banyak benda yang boleh dibuat dalam program. Buat program itu senang, tapi buat program yang bagus itu susah. So, sekarang ni, apa kata kamu try ubah kod kamu mengikut apa yang kamu suka. Selamat berjaya, good luck dan Assalamualaikum.

Categories
Projects

Automatic IIUM Schedule Formatter, now v4.0!

Assalamualaikum semua! Apa khabar? What are you thinking? May be you are thinking “What? 4.0 already?”. Well, versi sebelum ini adalah 3.3, macam mana boleh sampai situ saya tak tau, dan kali ini ada sikit incompatible update, so “git tag v4.0”.

So whats new? Sebenarnya ada dua aje benda yang baru, pertama styler yang baru dan kedua kebolehan untuk save sebagai gambar di facebook. Styler tersebut merupakan update daripada YourAgregator yang ada sekarang yang mana datang daripada AIIUMSF yang dulu yang mana datang daripada YourAgregator yang asal. So, mari kita lihat screenshot…..

Di bawah kiri ada butang expand/shrink.

Styler yang baru ini secara layoutnya berlainan dengan styler yang lama. Di styler yang lama, css mengandungi senarai ‘selector’ yang boleh di style-kan. Layout control, kedudukan slider untuk border, padding dan sebagainya fixed. Malangnya design tersebut sangat tidak sesuai untuk css yang mana untuk ubah sesuatu mungkin kita perlu ubah ‘parent’ kepada sesuatu itu. Tambahan lagi, ianya susah nak digunakan.

Berbeza dengan dahulu, css sekarang ini mengandungi layout kepada control tersebut. Ini bermakna, kedudukan setting sesuatu di styler boleh diubah dengan mengedit css. Kalau tak faham tak ape. Senang cakap, designer sekarang boleh meletakkan ‘control’ di tab mana yang diorang suka, membolehkan mereka untuk me-layout untuk memudahkan pengguna.

Jika kita lihat di css yang asal, ia menganding satu comment bertanda ‘layout’ yang mengandungi JSON(JavaScript Object Notation) yang menandakan kedudukan sesuatu control serta css selector yang control tersebut kawal.

By the way, ini adalah default style yang baru.

Lagi satu tambahan AIIUMSF adalah butang “Save in FB”. Basically, ia akan keluarkan dialog di facebook meminta kebenaran untuk publish stream, benarkan dan jadual anda patut ada dalam gallery. Amaran, “Save in FB” tidak keluar dalam tab yang baru macam “Save”, dan kemungkinan besar jadual anda tidak akan render dengan betul di FB. Ianya disebabkan kelemahan Google Conversion api, dan disebabkan saya tidak menggunakan ‘server’ yang sebenar, saya tak boleh buat apa-apa untuk membetulkannya. So, saya rekemen kamu “Save” dahulu sebelum “Save in FB”.

And… thats about what it should do. Arahan penggunaan boleh didapati di iiumschedule.appspot.com, tolong like page tersebut, Bye bye dan Assalamualaikum.