The WebClient_Constants file is one of the most important files in Comparatio's web database application framework. The first thing you need to define is the SERVER_URL variable. The variable should contain the address to where your Comparatio WebServer is running. For example:
public static var SERVER_URL:String = "http://localhost:8080/";
Next you will need to define the databases that you system will pull data from.
public static const DATABASE_NAME:String = "demo_database";
public static const DATABASE_NAME_1:String = "comparatio_users";
Also, define the list of methods. Each unique list view will require a method for counting records and a method for getting the records. Each of these is simply a unique identifier that will be used later in the SQL Provider.
public static const METHOD_GET_NUM_OF_TEST_TABLE:String = "getNumOfTestTable";
public static const METHOD_GET_TEST_TABLE:String = "getTestTable";
Again, these are used as unique identifiers, so there is no requirement for how you define these strings, as long as they are unique.
Finally, you will need to create unique caller IDs for each of the list views.
public static const CALLER_ID_TEST_TABLE:int = 0;
Like the method constants, make sure these are all unique. Later on you may need to add other things in this class for icons and relation buttons.
A. Adding a Menu Button
To add a menu button to the left hand navigation menu, begin by opening the class WebClient_WorkspaceView.mxml. Through the design view, you can see that this menu area is an accordion component. Add a button to the menu and give it a label, icon, and ID. In the "On click" field, call the selectButton() method by entering the following:
Position the new button where you want it and you're finished.
B. Connecting a Menu Button to a List View
Now that your new menu button has been created, you need to define what list the button will open. Still in the WebClient_WorkspaceView.mxml class, switch to the source view. Within method selectButton() there is a switch statement that handles button clicks. Create a new case in the switch for your new button using the button ID as the case trigger.
Each case makes a call to the setParameters() function in the WebClient_List class. Copy a case from an existing button. There are a number of parameters that you can set, but we will only cover the most important ones here. The rest have comments next to them explaining what they do.
"Table Display Name",
- currentState is where you define what state you want the ListView to use.
- Table Display Name is the table name that the list will use in all display areas.
- Leave parameter 3 alone.
- This parameter is the name of the database the list will get its data from. Defined in Constants
- "table_name" is the actual table name in the database that this list will get its data from.
- Leave parameter 6 alone.
- Defines which callerID will be used. Defined in Constants
- Leave parameter 7 alone.
- Leave parameter 8 alone.
- Defines the query to use for counting the number of records in this list. Defined in Constants
- Defines the query to use for getting the records in this list. Defined in Constants
Once you have those parameters defined, you should also add your button to the controlButton() method. Search for that method name and add your button to the list of existing buttons.
Each list requires you to create a number of configuration variables in the WebClient_Workspace.as class. Each column in your table will need to have things defined for each variable set. The easiest way to understand is to look at the examples of the code already there for the users table.
These variables are used for a number of processes, including sorting, searching, column visibilities, and labeling.
In order for the list to get the data, you need to write the sql queries. Open your WebClient_SQLProvider. Within function getRequest() you will find a switch that is based on the method constants you defined in the constants file. Add your methods to the switch and look at an existing function for how to write your sql calls.
You should have two methods for each list; a method for counting the number of records, and another method for getting the actual records.
To create your forms, you first need to create the mxml file. Copy an existing form (renaming all the form specific references) and build your form in design mode, being sure to assign IDs to all fields.
Within the initForm() method, initialize all the fields to an empty string. This ensures that every time the form is loaded, old data is cleared from the fields. There are other methods in here for dealing with relation fields that will not be covered in this brief tutorial.
The core of the form logic is located within the actionscript file. Copy an existing one of these as well. Create a global variable for the primary, unique column of this table and initialize it in the constructor. In the fillForm method, write your query for the required data.
Next is the saveData() method. There is a statement for inserting records and one for updating records. Modify both. You may also require fields here before saving.
Scroll down to method storeFieldValue() and copy the existing examples for each of your fields. Do the same for method isModified()
Finally, edit method formDataHandler() to fill the fields with the correct data from the server response.
After you have created these forms, they need to be added to the form viewstack. Open class WebClient_FormView.mxml and find the updateMainFormView() method. The switch is based on the caller IDs defined in the constants class. Create a case for each of your forms and copy the logic from existing examples.
Lastly, switch to the design view and add your forms to the viewstack, being sure to make the IDs the same as in the cases in the switch.
Dependency views are much like forms, but only require an mxml class. Copy and existing dependency example and rename it. In the design view, add tabs for each dependency you wish to display, then find the populateDependencyView() method. Create a new case for each tab, editing the parameters with the correct database, table, callerID and method for the given list in the same way you did when setting up your navigation buttons.
You will also need to edit the tabNavigatorChangeEventHandler() method and add a case for each tab and assigning the correct callerID to the method calls.
After you have created your dependencies, return to WebClient_FormView.mxml and go to the openDependencyView() method. Here you need to add a case for each dependency, like you did for the forms. As with the forms, you also need to switch to the design view and add your dependencies to the dependency view stack.
To configure the server, open WebClient.ini. Encryption should be set to yes, as well as Debug.
Next, define the number of database connections. The example above shows two separate database connections: table comparatio_demo_users and comparatio_demo_webclient. As you can see, one of these connections is a sqlite3 database and the other is a MySQL database. Comparatio's WebServer is capable of utilizing a number of databases. Contact us for a full list. Fill in your username and password.
The Application User Tables section is used to define which tables contain user accounts for login. The default user table is defined, as well as individual tables for specific projects, identified by the ApplicationName parameter. This application name is set within the Constants file in your project. This flag allows multiple projects to use the same server and to share databases and tables.
Finally, you can enter the mail server settings for email functionality.