Vision
We will describe here our vision of how a web application development should be.
Example : Develop a blog site
We want to create a web site that displays blogs edited by people.
We could develop this application the standard way : think about functionalities, model everything, develop the business objects, test, then the application framework, test, then the GUI, and see if all this is working.
But we often see that this method is not successfull. Why ?
- The client doesn’t know all the features the application at the beginning of the project.
- Modeling the application involves highly trained people.
- You can’t see any concrete result until the last stages of the development
- It’s often when you show the GUI to the client…. that he really explains his mind !
With APPLIWEB, we try a more intuitive approach
Let’s compare the two methods:
| Standard development practice: | APPLIWEB intuitive method: |
| 1. Describe features | 1. Write GUI |
| 2. Design UML model | 2. Business Model is designed during GUI conception |
| 3. Develop business objects | 3. Test while you develop |
| 4. Unit Test business objects | 4. Framework plumbing is handled by APPLIWEB generator |
| 5. Write application controller | |
| 6. Test it | |
| 7. Write GUI | |
| 8. Test everything |
Next screens, we will show you the APPLIWEB process.
GUI design:
We start by designing the GUI. You develop the web pages using our javascript editor. As it runs entirely inside the browser, the edited page is updated in real time. You immediately see the result. No more pseudo wysiwyg editors.
APPLIWEB allows you to create graphical components, that can be reused in web pages. We first create the component that will display a post in a blog. In the following screen-shot, you see the developer adding a text label into the page using drag and drop.
Business objects live design:
Now, by selecting an element in the page, you can map which attribute of the business object will be displayed.
You see the selected label (in red) will be filled with the title of the BlogEntry business object.
This way, during the graphical design of this component, we define a business object that will contain the data displayed: the BlogEntry.
As we add more labels to display in the page, we add more attributes to the business object. We then naturally design our business object !
Please note that the business object does not need to exist already. We create it dynamically as we design the GUI component. Later we will be able to edit more information about the business objects.
Live CSS Editing:
Moreover, the toolbox allows you to edit the stylesheet too:
The toolbox manipulates directly the css in memory, so each modification in the « styles » panel will be immediately visible. No more save / update / restart / reload to edit your style !
Now that our component is done, we can create the page displaying all the blog entries of a user. APPLIWEB allows you to create reusable page templates, and edit on-the-fly your page structure.
APPLIWEB allows you to add HTML standard components, the components specific to the framework you chose for rendering (for example, JSF, RichFaces, GWT, etc….), and your custom components developed in your project.
While editing the complete page, we create a business object Blog, that contains a list of our previous BlogEntry. We can add a « List » component that will iterate through the list of BlogEntries and display our custom component for each BlogEntry in the list.
Here is the result:
Business Model Editor:
You will need to further enhance the business model created this way. APPLIWEB will provide a complete, still web-based, business model editor. As with other editors, it will immediately display the result of your modeling, requests, etc…
Dataset Editor:
As you can see in the screenshots above, the component displays live data. This is important that while designing the graphical interface, you display the real data, to be sure the design fits well.
This data can be instantly loaded from a database, or you can use the dataset editor to insert / modify / delete your business objects for testing purpose.
These editors will all work together: If you rename an attribute in the business model, the dataset will be renamed as well.
These screenshots are just example of what the APPLIWEB application would look like, in order to explain what will be a web application development using APPLIWEB. We hope you’ve taken a grasp of what we do, and the target we aim. If you’re interested in joining our project, please let us know !