将应用程序添加到StackPanel

Question

有没有办法将我创建的应用脚本添加到StackPanel？或者我是否必须创建与现有应用程序脚本代码集成的StackPanel？

function doGet() {
  var app = UiApp.createApplication();

  //Create stack panel
  var stackPanel = app.createStackPanel().setSize('100%', '100%');

  //add widgets to each stack panel, and name the stack panel
  stackPanel.add(, 'Instructions: Scheduling the Lab');
  stackPanel.add(, 'Lab Calendar');
  stackPanel.add(, 'Lab Request Form');

  //Add the panel to the application
  app.add(stackPanel);
  return app;
}

Answer 1

你可以以某种方式但是在webapp中只能有一个Uinstance，所以不必在构建stackPanel的每个函数中返回app，而是必须返回一个将被添加到的窗口小部件每个stackPanel。这些函数可以在不同的脚本文件中，但必须是同一项目的一部分。

您的应用需要进行一些修改：请参阅下面的代码（另请参阅更改了一下的formBuild函数的结尾; - ）。

function doGet() {
      var app = UiApp.createApplication().setTitle('DHS: Kurzweil Calendar');

  //Create stack panel
  var stackPanel = app.createStackPanel().setSize('100%', '100%');
  var form = formBuild(app);
  var p1 = app.createVerticalPanel().setId('Panel1').add(form);
  var cal = calendar(app);
  var p2 = app.createVerticalPanel().setId('Panel2').add(cal);
  var ins = instruction(app);
  var p3 = app.createVerticalPanel().setId('Panel3').add(ins);
  //add widgets to each stack panel, and name the stack panel
  stackPanel.add(p1, 'Instructions: Scheduling the Lab');
  stackPanel.add(p2, 'Lab Calendar');
  stackPanel.add(p3, 'Lab Request Form');

  //Add the panel to the application
  app.add(stackPanel);
  return app;
}

function instruction(app){
  var lab = app.createLabel('label').setPixelSize(100,100);
return lab

}

function calendar(app){
return app.createLabel('label').setPixelSize(100,100);

}



function formBuild(app) {
      //Create a panel which holds all the form elelemnts
      var vrtMainPanel = app.createVerticalPanel().setId('vrtMainPanel');

      //Create Spreadsheet Source
      var spSheet = SpreadsheetApp.openById('0AnqSFd3iikE3dEtBQndOYVNEbFVWcDlyQmFoaUV3a1E');
      var spTeacherList = spSheet.getSheetByName('TeacherList');
      var spSubjectList = spSheet.getSheetByName('SubjectList');
      var spPeriodList = spSheet.getSheetByName('PeriodList');
      var spCountList = spSheet.getSheetByName('CountList');

      //Create the form elements
      var hdlTeacherName = app.createServerHandler('getTeacherName').addCallbackElement(vrtMainPanel);
      var lbxTeacherName = app.createListBox().setId('lbxTeacherName').setName('lbxTeacherName').addChangeHandler(hdlTeacherName);
      var lstTeacherNames = spTeacherList.getRange(1,1,spTeacherList.getLastRow(),1).getValues();
          lstTeacherNames.sort();

          for (var l = 0; l < lstTeacherNames.length; l++) {
            lbxTeacherName.addItem(lstTeacherNames[l],l);
          }

      var lblTeacherName = app.createLabel('Teacher Name:');
      var txtTeacherName = app.createTextBox().setName('txtTeacherName').setId('txtTeacherName').setVisible(false);
      var vldTeacherName = app.createLabel().setId('vldTeacherName').setVisible(false);

      var lblExt = app.createLabel('Ext:');
      var txtExt = app.createTextBox().setName('txtExt').setId('txtExt');
      var vldExt = app.createLabel().setId('vldExt').setVisible(false);

   //Set DateBox to Tomorrow's Date
      var tomorrow =new Date(new Date(new Date().setHours(0,0,0,0)).setDate(new Date().getDate() + 1));// set hours, min, sec & milliSec to 0 and day=day+1
      Logger.log(tomorrow);
      var lblDate = app.createLabel('Date of Test:');
      var boxDate = app.createDateBox().setId('boxDate').setName('boxDate').setFormat(UiApp.DateTimeFormat.DATE_SHORT).setValue(tomorrow);
      var vldDate = app.createLabel().setId('vldDate').setVisible(false);

      var lbxSubject = app.createListBox().setId('lbxSubject').setName('lbxSubject');
      var vldSubject = app.createLabel().setId('vldSubject').setVisible(false);
      var lstSubjects = spSubjectList.getRange(1,1,spSubjectList.getLastRow(),1).getValues();
          lstSubjects.sort();

          for (var l = 0; l < lstSubjects.length; l++) {
            lbxSubject.addItem(lstSubjects[l]);
          }

      var lbxPeriod = app.createListBox().setId('lbxPeriod').setName('lbxPeriod');
      var vldPeriod = app.createLabel().setId('vldPeriod').setVisible(false);
      var lstPeriods = spPeriodList.getRange(1,1,spPeriodList.getLastRow(),1).getValues();
          lstPeriods.sort();

          for (var l = 0; l < lstPeriods.length; l++) {
            lbxPeriod.addItem(lstPeriods[l]);
          }

      var lblStudentNum = app.createLabel('Number of Students:');
      var vldStudentNum = app.createLabel().setId('vldStudentNum').setVisible(false);
      var lbxStudentNum = app.createListBox().setId('lbxStudentNum').setName('lbxStudentNum');
      var lstStudentNums = spCountList.getRange(1,1,spCountList.getLastRow(),1).getValues();
          lstStudentNums.sort();

          for (var l = 0; l < lstStudentNums.length; l++) {
            lbxStudentNum.addItem(lstStudentNums[l]);
          }

      var txtSourceGrp = app.createTextBox().setName('txtSourceGrp').setVisible(false);
      var txtTypeGrp = app.createTextBox().setName('txtTypeGrp').setVisible(false);
      var vldSourceGrp = app.createLabel().setId('vldSourceGrp').setVisible(false);
      var vldTypeGrp = app.createLabel().setId('vldTypeGrp').setVisible(false);
      var txtElementsID = app.createTextBox().setName('txtElementsID').setText('Elements Test ID').setVisible(false);
      var txtQuiaLink = app.createTextBox().setName('txtQuiaLink').setText('Quia Test Link').setVisible(false);
      var txtQuiaPass = app.createTextBox().setName('txtQuiaPass').setText('Quia Test Passphrase').setVisible(false);

      //Create Source Radio Button Group
      var radHCopy = app.createRadioButton('group1', 'Hard-Copy').setFormValue('Hard-Copy').addClickHandler(app.createClientHandler().forTargets(txtSourceGrp).setText('Hard-Copy'));
      var radECopy = app.createRadioButton('group1', 'Electronic-Copy').setFormValue('Electronic-Copy').addClickHandler(app.createClientHandler().forTargets(txtSourceGrp).setText('Electronic-Copy'));

      //Create Type Radio Button Group
      var radTExam = app.createRadioButton('group2', 'Teacher-Made Exam').setFormValue('Teacher-Made Exam').addClickHandler(app.createClientHandler().forTargets(txtTypeGrp).setText('Teacher-Made Exam'));
      var radEExam = app.createRadioButton('group2', 'Elements Exam').setFormValue('Elements Exam').addClickHandler(app.createClientHandler().forTargets(txtTypeGrp).setText('Elements Exam'));
      var radQExam = app.createRadioButton('group2', 'Quia Exam').setFormValue('Quia Exam').addClickHandler(app.createClientHandler().forTargets(txtTypeGrp).setText('Quia Exam'));

      var btnCreate = app.createButton('Create Event');

      //Client Handlers for textBoxes
      var showTxtElementHandler = app.createClientHandler().forTargets(txtElementsID).setVisible(true);
      var hideTxtElementHandler = app.createClientHandler().forTargets(txtElementsID).setVisible(false);
      var vldElementsID = app.createLabel().setId('vldElementsID').setVisible(false);
          radEExam.addClickHandler(showTxtElementHandler);
          radTExam.addClickHandler(hideTxtElementHandler);
          radQExam.addClickHandler(hideTxtElementHandler);


      var showTxtQuiaLinkHandler = app.createClientHandler().forTargets(txtQuiaLink).setVisible(true);
      var hideTxtQuiaLinkHandler = app.createClientHandler().forTargets(txtQuiaLink).setVisible(false);
      var vldQuia = app.createLabel().setId('vldQuia').setVisible(false);
          radQExam.addClickHandler(showTxtQuiaLinkHandler);
          radTExam.addClickHandler(hideTxtQuiaLinkHandler);
          radEExam.addClickHandler(hideTxtQuiaLinkHandler);

      var showTxtQuiaPassHandler = app.createClientHandler().forTargets(txtQuiaPass).setVisible(true);
      var hideTxtQuiaPassHandler = app.createClientHandler().forTargets(txtQuiaPass).setVisible(false);
          radQExam.addClickHandler(showTxtQuiaPassHandler);
          radTExam.addClickHandler(hideTxtQuiaPassHandler);
          radEExam.addClickHandler(hideTxtQuiaPassHandler);

      //Create validation handler
      var valSubmit = app.createServerClickHandler('valSubmit');
          valSubmit.addCallbackElement(vrtMainPanel);

      //Add this handler to the button
          btnCreate.addClickHandler(valSubmit);

      //Add all the elemnts to the panel 
      var formGrid = app.createGrid(18,3).setCellPadding(3);
      vrtMainPanel.add(formGrid);
      formGrid
      .setWidget(0,0,vldTeacherName)
      .setWidget(0,1,vldExt)
      .setWidget(1,0,lbxTeacherName)
      .setWidget(1,1,txtExt)
      .setWidget(1,2,txtTeacherName)
      .setWidget(2,0,vldPeriod)
      .setWidget(2,1,vldSubject)
      .setWidget(3,0,lbxPeriod)
      .setWidget(3,1,lbxSubject)
      .setWidget(4,1,vldDate)
      .setWidget(5,0,lblDate)
      .setWidget(5,1,boxDate)
      .setWidget(1,1,vldStudentNum)
      .setWidget(7,0,lblStudentNum)
      .setWidget(7,1,lbxStudentNum)
      .setWidget(8,0,vldSourceGrp)
      .setWidget(9,0,radHCopy)
      .setWidget(9,1,radECopy)
      .setWidget(10,0,vldTypeGrp)
      .setWidget(11,0,radTExam)
      .setWidget(11,1,vldElementsID)
      .setWidget(12,0,radEExam)
      .setWidget(12,1,txtElementsID)
      .setWidget(13,0,radQExam)
      .setWidget(13,1,vldQuia)
      .setWidget(14,1,txtQuiaLink)
      .setWidget(15,1,txtQuiaPass)
      .setWidget(16,0,txtSourceGrp)
      .setWidget(16,1,txtTypeGrp)
      .setWidget(17,0,btnCreate)

      //Add this panel to the application
      return(vrtMainPanel);

    }

    function getTeacherName(e){
      var spSheet = SpreadsheetApp.openById('0AnqSFd3iikE3dEtBQndOYVNEbFVWcDlyQmFoaUV3a1E');
      var spTeacherList = spSheet.getSheetByName('TeacherList');
      var lstTeacherNames = spTeacherList.getRange(1,1,spTeacherList.getLastRow(),2).getValues();
      var app = UiApp.getActiveApplication();
      var txtTeacherName = app.getElementById('txtTeacherName');
      var txtExt = app.getElementById('txtExt');
          txtTeacherName.setText(lstTeacherNames[e.parameter.lbxTeacherName][0]);// sets Teacher's Name
          txtExt.setText(lstTeacherNames[Number(e.parameter.lbxTeacherName)][1]);// sets Ext
      return app;
    }

    function valSubmit(e) {
      var flag = 0;
      var app = UiApp.getActiveApplication();
      var Teacher = e.parameter.txtTeacherName;
      var Ext = e.parameter.txtExt;
      var Subject = e.parameter.lbxSubject;
      var Period = e.parameter.lbxPeriod;
      var Date = e.parameter.boxDate;
      var StudentNum = e.parameter.lbxStudentNum;
      var Source = e.parameter.txtSourceGrp;
      var Type = e.parameter.txtTypeGrp;
      var ElementsID = e.parameter.txtElementsID;
      var QuiaLink = e.parameter.txtQuiaLink;
      var QuiaPass = e.parameter.txtQuiaPass;

      if (Teacher == '' || Teacher == '-- Select Teacher --') {
        app.getElementById('vldTeacherName').setText('* Select Teacher').setStyleAttribute("color", "#F00").setVisible(true);
        flag = 1;
      }
      if (Ext == '') {
        app.getElementById('vldExt').setText('* Select Teacher Again').setStyleAttribute("color", "#F00").setVisible(true);
        flag = 1;
      }
      if (Subject == '' || Subject == '-- Select Subject --') {
        app.getElementById('vldSubject').setText('* Select Subject').setStyleAttribute("color", "#F00").setVisible(true);
        flag = 1;
      }
      if (Period == '' || Period == '-- Select Period --') {
        app.getElementById('vldPeriod').setText('* Select Period').setStyleAttribute("color", "#F00").setVisible(true);
        flag = 1;
      }
      if (Date == '' || Date == Utilities.formatDate(Date, 'EST', 'yyyy-mm-dd')) {
        app.getElementById('vldDate').setText('* Date must be entered as yyyy-mm-dd').setStyleAttribute("color", "#F00").setVisible(true);
        flag = 1;
      }
      if (StudentNum == '' || StudentNum == '-- Select # --') {
        app.getElementById('vldStudentNum').setText('* Select Student #').setStyleAttribute("color", "#F00").setVisible(true);
        flag = 1;
      }
      if (Source == '' || Source == false) {
        app.getElementById('vldSourceGrp').setText('* Select either Hard Copy or Electronic Copy').setStyleAttribute("color", "#F00").setVisible(true);
        flag = 1;
      }
      if (Type == '' || Type == false) {
        app.getElementById('vldTypeGrp').setText('* Select either Teacher-Made Exam, Elements Exam, or Quia Exam').setStyleAttribute("color", "#F00").setVisible(true);
        flag = 1;
      }
      if (ElementsID == '' && Type == 'Elements Exam') {
        app.getElementById('vldElementsID').setText('* Enter Elements ID').setStyleAttribute("color", "#F00").setVisible(true);
        flag = 1;
      }
      if (QuiaLink == '' || QuiaPass == '' && Type == 'Quia Exam') {
        app.getElementById('vldQuia').setText('* Enter Quia Link and/or Passphrase').setStyleAttribute("color", "#F00").setVisible(true);
        flag = 1;
      }
      if (flag == 0) {
      //Create handler which will execute 'createEvents(e)' on clicking the button
        var evtHandler = app.createServerClickHandler('createEvents');
        var vrtMainPanel = app.getElementById(vrtMainPanel)
            evtHandler.addCallbackElement(vrtMainPanel);
      }
    }

function createEvents(e){
  //Get the active application
  var app = UiApp.getActiveApplication();

  try{
    //Get the entries
    var ssTeacher = e.parameter.txtTeacherName;
    var ssExt = e.parameter.txtExt;
    var ssSubject = e.parameter.lbxSubject;
    var ssPeriod = e.parameter.lbxPeriod;
    var ssStudentNum = e.parameter.lbxStudentNum;
    var ssSource = e.parameter.txtSourceGrp;
    var ssType = e.parameter.txtTypeGrp;
    var ssElementsID = e.parameter.txtElementsID;
    var ssQuiaLink = e.parameter.txtQuiaLink;
    var ssQuiaPass = e.parameter.txtQuiaPass;
    var eventDate = e.parameter.boxDate;
    var eventCalSubject = ssPeriod + ": " + ssTeacher + " (" + ssStudentNum + ")";
    var eventCalDetails = "Extension: " + ssExt + "\n" +
          "Subject: " + ssSubject + "\n\n" +
          "Source: " + ssSource + "\n" +
          "Type: " + ssType + "\n" +
          "Elements ID: " + ssElementsID + "\n" +
          "Quia Test Link: " + ssQuiaLink + "\n" +
          "Quia Passphrase: " + ssQuiaPass;

    //Get the calendar
    var cal = CalendarApp.getCalendarById('davie.k12.nc.us_d2mv2eb8aspuant1vb5j6r3sis@group.calendar.google.com');//Change the calendar id
    //Create the events
    var newID = cal.createAllDayEvent(eventCalSubject, eventDate, {description:eventCalDetails}).getId();

    //Log the entries in a spreadsheet
    var sheet = SpreadsheetApp.openById('0AnqSFd3iikE3dEtBQndOYVNEbFVWcDlyQmFoaUV3a1E').getActiveSheet();//Change the spreadhseet key to yours
    var lastRow = sheet.getLastRow();
    var targetRange = sheet.getRange(lastRow+1, 1, 1, 13).setValues([[new Date(),eventDate,ssTeacher,ssExt,ssSubject,ssPeriod,ssSource,ssType,ssElementsID,ssQuiaLink,ssQuiaPass,ssStudentNum,newID]]);
    return app;

    //Show the confirmation message
    app.add(app.createLabel('Kurzweil Calendar Event created successfully...'));
    //Make the form panel invisible
    app.getElementById('vertMainPanel').setVisible(false);
    return app;
  }

  //If an error occurs, show it on the panel
  catch(e){
    app.add(app.createLabel('Error occured: '+ e));
    return app;
  }
}