Aptana Studio 1.0 Released

Apatana Studio 1.0 akhirnya dirilis juga. Dulu dikenal dengan nama Aptana IDE. Kali ini Aptana hadir dengan dua versi. Community Edition dan Professional Edition.

Professional Edition hadir dengan lebih banyak feature. Tentunya feature yang dimiliki Community Edition juga ada di Professional.

Aptana adalah suatu IDE untuk pengembangan web yang berbasis Eclipse (www.eclipse.org). Aptana memiliki berbagai macam feature. Diantaranya:

• Javascript Debugging
• HTML/CSS/JS Code Assist (sama dengan IntelliSense nya Visual Studio)

Code Assist Profile
Ajax Library Support

Untuk versi Professional, Aptana dilengkapi dengan:

• Internet Explorer Debugging
• JSON Editor
• Project Reporting Engine

Untuk melihat komparasi antara kedua versi ikuti link ini: http://aptana.com/products/

Aptana juga bisa digunakan untuk mengembangkan Aplikasi yang dibuat menggunakan Ruby, Adobe AIR, PHP. Juga bisa untuk mengembangkan aplikasi untuk iPhone.

Ajax Library yang dibundel bersama Aptana:
ExtJS, jQuery, MochiKit, Scriptaculous, Adobe Spry, YUI, Prototype, Dojo, Rico, MooTools, Aflax.

Saya sendiri sudah memakai Aptana sejak versi milestone 7.

Cara Menyembunyikan Tag Div

Misalnya anda mempunyai file HTML dengan isi:

<h2>Operating System</h2>
<div>
  <ul>
    <li>Microsoft Windows</li>
    <li>Mac OS X</li>
    <li>Ubuntu Linux</li>
    <li>FreeBSD</li>
  </ul>
</div>

Kira2 bentuk tag html diatas seperti dibawah ini:

Operating System

• Microsoft Windows
• Mac OS X
• Ubuntu Linux
• FreeBSD

Anda ingin bila tulisan Operating Sytem ditekan, akan menyembunyikan daftar
Operating System dibawahnya.

Caranya:

1. Tambahkan attribute onclick di tag <h2>
   yang memanggil function Javascript hide(). Jangan lupa tambahkan attribute id pada div.
   Kira-kira isinya menjadi seperti ini:

   <h2 onclick="hide('my-list')">Operating System</h2>
   <div id="my-list">
     <ul>
       <li>Microsoft Windows</li>
       <li>Mac OS X</li>
       <li>Ubuntu Linux</li>
       <li>FreeBSD</li>
     </ul>
   </div>
   

2. Buat Javascript-nya.

   <script type="text/javascript">
     function hide(id) {
       document.getElementById(id).style.display = 'none';
     }
   </script>

   Sekarang kalau anda click tulisan Operating System, daftar dibawahnya akan hilang. Eiittss, ada tapi nya. Kalau di-click lagi
   nggak muncul. Ubah code Javascript diatas menjadi seperti ini:

   <script type="text/javascript">
   function hide(id)
   {
     if (is_hide == true) {
       document.getElementById(id).style.display = 'block';
       is_hide = false;
     }
     else {
       document.getElementById(id).style.display = 'none';
       is_hide = true;
     }
   }
   </script>

Contoh disini menggunakan attribute onclick. Anda bisa saja
membuatnya menggunakan link atau membuat tombol baru dengan <button>.
Dan tentu saja bukan cuma <div> yang bisa disembunyikan. Tag-tag lain juga bisa kok.

Semoga tulisan ini membantu para web developer’s newbie atau yang lupa cara
menyembunyikan suatu content dengan Javascript dan CSS.