بناء تطبيق سطح المكتب بالجافاسكربت مستخدما تقنية GTK الجزء الثالث

 السلام عليكم  في  هذا الجزء  سنتعلم كيف  نظيف أدوات للفورم تبعنا   ، لكي  لا تكون اخي الكريم تائها  عليك  مراجعة هذه التقنية  من البداية (تطبيقات سطح المكتب JAVASCRIPT_GTK)  .

نصائح لحفظ الكود  وترسيخه في عقلك اخي الكريم  :  حاول  اخي  الكريم  ان  تكتب  الكود  مرارا وتكرارا   ، افهم كل  سطر وما  الغرض منه  احفظ  الهيكلة التي  يبنى بها  الكود  للمزيد من المعلومات راجع  هذه التدوينة (تنشيط الذاكرة الطوبوغرافية للمبرمجين)  ،

الزر  نعني  به  BUTTON WIDGET  الادوات التي تمنتمي  الى الفورم  نسميها TOOLTIPS


الان  نظيف  الى الفورم كود زر  BUTTON WIDGET مثال :

    #!/usr/bin/seed
    
    Gtk = imports.gi.Gtk;
    
    Gtk.init(null, null);
    
    
    Example = new GType({
        parent: Gtk.Window.type,
        name: "Example",
        init: function()
        {
            init_ui(this);
            
            function init_ui(w) {
          
                w.signal.hide.connect(Gtk.main_quit);
                w.set_default_size(250, 200);
                w.set_title("Tooltips");
                w.set_position(Gtk.WindowPosition.CENTER);    
                
                var fix = new Gtk.Fixed();
                      
                var button = new Gtk.Button({ label: "Button" });
                button.set_size_request(80, 35);     
                button.set_tooltip_text("Button widget");
    
                fix.put(button, 50, 50);
                w.add(fix);
    
                w.set_tooltip_text("Window widget");            
                
                w.show_all();
            }
        }    
    });
    
    var window = new Example();
    Gtk.main();

سنلاحظ اننا  أعلنا عن  متغبر باسم button  على انه كائن جديد  من مكتبة gtk  يحمل  label باسم Button ولديه قياس 35 طول وعرض 80  من خلال خاصية  set_size_request ثم اعلنا انها  tooltip من خلال الكود التالي  set_tooltip_text   وعلى انها Button widget ثم  بعدها  اعلنا  على انها ثابتة تاخذ مكان 50 على 50  في الفورم  على حسب  قياس x , y  وعبرنا عليها  بالكود التالي fix.put   ثم  بعدها  قمنا يتثبيتها في الفورم  من خلال تضمينها في  الفانكشن  (w) على  الفورم   

w.add(fix);

لكن لحد الان لدينا  زر  بدون اي  حدث فقط  صورة لواجهة زر  ،  ليس لديه اي تحريك برمجي  هيا لنقم بدب بعض  الحياة في هذه الفورم  ولنجعلها تختفي عند الضغط على الكود  

    #!/usr/bin/seed    
    Gtk = imports.gi.Gtk;
    
    Gtk.init(null, null);
    
    
    Example = new GType({
        parent: Gtk.Window.type,
        name: "Example",
        init: function()
        {
            init_ui(this);
            
            function init_ui(w) {
              
                var fix = new Gtk.Fixed();              
                var btn = new Gtk.Button({ label: "Quit" });
                
                btn.signal.clicked.connect(Gtk.main_quit);
                btn.set_size_request(80, 35);     
    
                fix.put(btn, 50, 50);    
                
                w.add(fix);
                
                w.signal.hide.connect(Gtk.main_quit);
                w.set_default_size(250, 200);
                w.set_title("Quit button");
                w.set_position(Gtk.WindowPosition.CENTER);
                w.show_all();  
            }
        }    
    });
    
    var window = new Example();
    Gtk.main();

هذه الخاصة تظهر المحتوى اما  ان يكون صورة او نص اوغيرها

init_ui(this);

في هذه المرة غيرنا عنوان الزر الى زر  الحذف 

var btn = new Gtk.Button({ label: "Quit" });

هنا قمنا  بانشاء زر  للحذف

btn.signal.clicked.connect(Gtk.main_quit);

هنا قمنا  بوضع حجم للزر كما  شرحنا  في الاول 

btn.set_size_request(80, 35);

هنا قمنا  بوضع مكان الزر  في  الفورم  تعتبر  0y و 0x  هي  اقصى الاعلى في اليسار 

fix.put(btn, 50, 50);

في هذا  الكود نظهر جميع المحتوى الخاص  بالفورم  وما يسمى بالابناء او التوابع للفورم  

w.show_all(); 

الأن عند الضغط على الزر  الفورم يقوم باغلاق نفسه  ،  الى  هنا وصلنا  الى اخر الدرس 

يمكنك متابعة الدروس  التالية :

كل ما تريد ه لتعلم #الكترون (بناء تطبيقات سطح المكتب)

سلسلة  بناء إضافات غوغل كروم  بالجافاسكربت 

شرح اسئلة الجافاسكربت في udacity

أساسيات تعلم بناء قوالب البلوجر