In this case, the Pressed event's row parameter provides us with the row number. This method is called CellTextAt and it expects you to tell it which row and column to access. Like AddRow, the ListBox control has another method that lets you get and set the value in a cell. Values that are passed into a method or event are called parameters. It also indicates they are both integers. Along with it are the names of two values (row and column) that are automatically populated when the Pressed event is called. Notice that the name of the event (Pressed) appears at the top of the Code Editor. In the Add Event Handler dialog box, select the Pressed event and click OK. Let's add code to the TaskList in the same way we added code for the Add button:Ĭlick on TaskManagerPage in the Navigator.ĭouble-click the TaskList control on your layout. When the user clicks in the Completed column of the TaskList, the selected task should toggle between being displaying a checkmark (✓) and displaying nothing. The second column contains the name of the task. The first column contains the completed status of each task, so it is initially set to blank. ![]() The AddRow method can take multiple values allowing you to fill in as many columns as you want with a single call. Functions like this in Xojo are more generally referred to as methods. That function is appropriately called AddRow. The ListBox control has a built-in function for adding a row to itself. The syntax looks like this: TaskField.Text In this case the control is named TaskField and the property you want is Text (use the WebButton to find out about all the properties available to TextFields). This is something called “dot” notation and is commonly used in object-oriented programming. In other words, you use this syntax: ControlName.PropertyName. To do that you type the name of the control, followed by a dot, followed by the name of the property. What you want is just the text in the TaskField. The name of the control represents the entire control with all of its properties. You might think you could get the task just by using "TaskField", the name of the field. Now you need to get the task that was typed into the TaskField. The Pressed Event Handler is already selected so just click OK to accept it. When a user presses a button, the Pressed event handler is called. In the Layout Editor, double-click the AddButton control. The code you add to the button needs to take what was typed in TaskField and add it as a new row to the TaskList ListBox. Next you will lock the edges of the ListBox to the edges of the webpage so the ListBox gets larger or smaller as the web page size changes.Ĭlick the locks so that top, left, bottom and right are all locked. Using 150,* tells the ListBox that the first column should always be 150 pixels wide and that the rest of the columns share the remaining width. In the ColumnWidths field, enter 150,* and press Return. Since the Completed column is only going to contain a simple checkmark when the task is marked as completed, it can be narrow. In the Initial Value editor type Completed, press Tab and then type Task. This will bring up the Initial Value Editor. In the Inspector, click the pencil button to the right of the Initial Value property. You want to change the column headers to Completed and Task. ![]() The ListBox will not show two columns in the Layout Editor but it will when you run your app. Since the ListBox needs two columns (Completed and Task), change the Column Count property from 1 to 2 and press Return. The Inspector pane now shows the properties for ListBox.Ĭhange the Name property from ListBox 1 to TaskList. In the Layout Editor, click on the ListBox to select it. So the ListBox can properly display Tasks, we need to customize the properties. You can also add a control to the web page by double-clicking it. You design the web page by dragging controls from the Library to it. Library: The area on the right is the Library and shows the controls and interface elements that you can add to a web page. The Editor Area however can also show other kinds of editors for editing code, icons and other things you might use in a project. In this image, the web page is blank because you haven't yet added any user controls. It shows the web page and previews how it looks when the app runs in a web browser. You use the Layout Editor to design the user interface for the web pages in your app. Currently it's showing the Layout Editor. Use the Navigator to navigate within your project.Įditor: The center area is the Editor Area. By default you can see Web (which is selected), the App object and the Session object. ![]() Navigator: The area on the top left shows you all the items in your project. Reporting bugs and making feature requests.Finding and fixing bugs: the fine art of debugging.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |