Model your UI ... Live! Wazaabi
Hemptinne, Gregoire De
UI development usually consists in building software components that rely on a business data model. But business data models need to change frequently to adapt user requirement updates. This implies to adapt frequently the UI components. Nowadays, existing solutions provide a way to support these changes by providing code generation and data binding. But, these solutions are still slow. Then, the development cost increases rapidly if you have frequently requirement updates and/or many UI components. Wazaabi aims to reduce this cost by providing a solution based on models which doesn't require code generation. Based on Eclipse EMF, Wazaabi provides an open source framework that implements a dynamic declarative UI mechanism. The Wazaabi framework is directly based on the business data model and will evolve with it. This presentation aims to give a look inside this framework. Wazaabi is an open source framework for declarative live UI-model. In this term two different concepts are included. * The declarative UI, means that Wazaabi enables the designer to describe the UI declaratively. * Model means that the declaration build an instance of a model of the GUI. A model is a conceptual representation of the UI. * Live model means that we do not generate code from the Model as it is usually the case with the MDA approach. In Wazaabi the UI is a running instance of the model and an engine is responsible for rendering the model in the target UI technology
 Okay, hello everybody. I am Grigord Emptien and I'm gonna present you Wasabee. Wasabee is a UI framework based on EMF eclipse modeling framework for typically which client platforms developing on based on Java. So if you already developed user interfaces, you see, you already saw how it can be a mess in the code and you can have UI code in several classes, in several files and it's not so easy to keep it clear and clean. Wasabee wants to bring a solution and a way to structure your data and your UI to keep it clear. Do you know here in the people here, do you know what's a model? Otherwise, I just do words on what's a model. Okay, just do words. A model is a way to structure data. So as you see, for example, here, we have a text. The text is structured with the title with several parts and everything is clear and every part has his own properties. For example, the title is big and is above and something like that. It's a way to structure the data. That's only the model. So Wasabee considered that a UI is composed by two parts, the way it looks and the way it works. First, have a look at the visual part. Let's take an example. You have a user which wants a user interface. Here we keep a very simple example. And the only data you want to know, he wants to order cars. And you want to know how many cars he wants. So you make an interface with some labels and a push button. It's quite simple, but you need to add some fancy things to keep it clear for the user. But it happens that for a same program, you want several kinds of interfaces. For example, if you have disabled person that want to see your interface, you need bigger characters. If you want to have an Android application, you also need another interface. But you don't want to reimplement the program to have another interface. You want just to change your interface. So by using a model, we just add styles to our widgets like logic blocks. So here we have the color, we have the text, we have the layout. That's just styles, a bit like CSS for HTML files, which are styles you come and you put on your structure. On the other pass, we have the way it works. You know that it's important if you want to maintain your code to have a clean code on all your functionalities. And it's very important. For example, if you want to bind several pieces of your UI, you need a good way, a clear way to structure them. On each event, you want to have an action that is triggered. For example, here if you change the number of cars you want to buy, the label has to be updated. So behind every event, there is an action that is triggered. Like you see here, you have the click on the button or the change of the number. But of course, you have to be careful on the action you trigger. For example, you cannot send a mail to the factory by saying, I want to order minus one car. It makes no sense. So we have to check before some conditions before to trigger the action. So of course, we have to check the data of the user. The way was that it works is we say, okay, when an event is triggered, first of all, we have to check the conditions. And when the conditions are checked, then only we can trigger the actions. That's the way an event is handled in O-code. So you see, there are two parts, the visual part and the functional part. On the model way, on the model representation, we see on the widget, we have on the left part, the text, the layout, and that's all the visual part. And on the right part, the functional part with a binding, for example, between several parts. So for example, the spinner and the label. And the event handlers with the conditions that are verified before the action are triggered. The conclusion of that is that it's not only the way it looks for a UI. It's also behind the way it works that is very important. So let's see how Wasabi works in detail. Wasabi is based on Eclipse. It's programmed, of course, in Java. And the model aspect are based on the Eclipse modeling framework. We wanted Wasabi to be the most modular possible so it can apply to the requirement of your project in function of what you need. That's why Wasabi is not library, graphic library dependent. We instructed in three components, three layers. First, the third layer is the event-driven processing, which is managing the whole functional part. Then we have core widgets. The core widgets are generic widgets that's specific on a UI library. And then, of course, you have a binding with the graphical library you want. You have SWT, swing, or others. The graphic libraries that exist are, of course, numerous. The ones that are implemented until now are SWT and GFace, but it's quite easy to add another support since it's quite generic. The reason we want to modelize the UI is because a model is something that is easy to understand, that is easy to adapt, to copy, to reimplement. But it's also easy to transfer the knowledge to other people because everyone is able to understand the model. Code is very, it's more difficult to transmit. And another reason is that modelization keeps it clear. Like when you see, for example, an HTML file, it's quite easy to see the structure of your page. It's the same with Wasabi. We also created a visual editor. The visual editor is a way to develop your interface, a bit like Window Builder for those who knows. Of course, when you talk about development, you need to talk about version management. Of course, when you base your UI on a model, you can save it like an XML file, and merging and managing XML files are really easy. The other reason is you can also adapt. You can fork, you can copy paste code of other people, of other application, and it keeps going. It's also easy to merge and to collaborate. One important thing in Wasabi is the fact that it's not generating library-specific code. We are interpreting the model live. So if you are modifying the model, it will constantly be up to date in function of your model. So of course, like every project, we need more users, we need more contributors. You are welcome to, as usual, fork, be creative, use it, and we will be happy to merge it into Wasabi. Actually, we are a young project at eclipse.org. The website is not up to date, but you can see the website is there and you can find the information. I don't know if I have. I want to show first a little demo. I can. Here you see my eclipse installation. I just have one project. In this project, I have a few code. It's a plugin. And the main application is here. We see it's a very short code. And the most important part is this one. I don't know if you see. It's the loading of the model. And my model is here. Okay. Here you see my model is composed by several parts. The first container, the second container, and my second container. I have a tablet layout. And each container will be a tab, actually. So when I load it, okay, you see I have my first button and then my two tabs. Okay. But the thing that is interesting is that when I click on the button, I link the button with a handler. And the handler is here. What do I do in this handler? It's very simple. I take the layout of the main container. So the main container is the container composing the two tabs. I remove the current style rule and I change it with another. For example, here I take the tablet layout rule and I change it with an expand layout rule. And here, if it's the other case, I inverse it. So what's happened when I click here, it's changing my layout. And I see I still have my application. But my layout is different. The thing is I'm not regenerating the widgets. So here, if I type my name, toggle layout, I still have my name here. So it's changing the model live. And as I see, my model is adapt. And I have very few codes. So I just have my model. And if you want, I can show you here how it's structured behind. It's just an XMI file. So it's quite easy to merge, quite easy to copy or to adapt in function of your needs. Okay. So if you have any questions, I don't know how much time I have, maybe two minutes or one minute. But like I show you here, actually, this is changing the model live by changing the layouts. I can show you that in my outline here. This is actually the outline of my window editor. Wait. That's it. Okay. And for example, if I take my label here, I have to change here. For example, this one, I can modify this by in French, for example. And it's it's changing life. I don't have the the EMF model. It's not accessible here. So I cannot show you the model changing the visualization of the model live. But actually, you have to trust me, the model is changing. This is SWT. It's quite difficult because I have to change the library for the demo. It will be takes some time. But that's the other question. Yeah. It's runtime load and displays. Totally seamless of the of the library you use behind. Okay. Thank you very much. Thank you.
 Okay, hello everybody. I am Grigord Emptien and I'm gonna present you Wasabee. Wasabee  is a UI framework based on EMF eclipse modeling framework for typically which client platforms  developing on based on Java. So if you already developed user interfaces, you see, you already  saw how it can be a mess in the code and you can have UI code in several classes, in several  files and it's not so easy to keep it clear and clean. Wasabee wants to bring a solution  and a way to structure your data and your UI to keep it clear. Do you know here in the  people here, do you know what's a model? Otherwise, I just do words on what's a model. Okay,  just do words. A model is a way to structure data. So as you see, for example, here, we  have a text. The text is structured with the title with several parts and everything is  clear and every part has his own properties. For example, the title is big and is above  and something like that. It's a way to structure the data. That's only the model. So Wasabee  considered that a UI is composed by two parts, the way it looks and the way it works. First,  have a look at the visual part. Let's take an example. You have a user which wants a  user interface. Here we keep a very simple example. And the only data you want to know,  he wants to order cars. And you want to know how many cars he wants. So you make an interface  with some labels and a push button. It's quite simple, but you need to add some fancy things  to keep it clear for the user. But it happens that for a same program, you want several  kinds of interfaces. For example, if you have disabled person that want to see your interface,  you need bigger characters. If you want to have an Android application, you also need  another interface. But you don't want to reimplement the program to have another interface. You  want just to change your interface. So by using a model, we just add styles to our widgets  like logic blocks. So here we have the color, we have the text, we have the layout. That's  just styles, a bit like CSS for HTML files, which are styles you come and you put on your  structure. On the other pass, we have the way it works. You know that it's important  if you want to maintain your code to have a clean code on all your functionalities. And  it's very important. For example, if you want to bind several pieces of your UI, you need  a good way, a clear way to structure them. On each event, you want to have an action  that is triggered. For example, here if you change the number of cars you want to buy,  the label has to be updated. So behind every event, there is an action that is triggered.  Like you see here, you have the click on the button or the change of the number. But of  course, you have to be careful on the action you trigger. For example, you cannot send a  mail to the factory by saying, I want to order minus one car. It makes no sense. So we have  to check before some conditions before to trigger the action. So of course, we have to  check the data of the user. The way was that it works is we say, okay, when an event is  triggered, first of all, we have to check the conditions. And when the conditions are  checked, then only we can trigger the actions. That's the way an event is handled in O-code.  So you see, there are two parts, the visual part and the functional part. On the model  way, on the model representation, we see on the widget, we have on the left part, the  text, the layout, and that's all the visual part. And on the right part, the functional  part with a binding, for example, between several parts. So for example, the spinner  and the label. And the event handlers with the conditions that are verified before the  action are triggered. The conclusion of that is that it's not only the way it looks for  a UI. It's also behind the way it works that is very important. So let's see how Wasabi  works in detail. Wasabi is based on Eclipse. It's programmed, of course, in Java. And the  model aspect are based on the Eclipse modeling framework. We wanted Wasabi to be the most  modular possible so it can apply to the requirement of your project in function of what you need.  That's why Wasabi is not library, graphic library dependent. We instructed in three  components, three layers. First, the third layer is the event-driven processing, which  is managing the whole functional part. Then we have core widgets. The core widgets are  generic widgets that's specific on a UI library. And then, of course, you have a binding with  the graphical library you want. You have SWT, swing, or others. The graphic libraries that  exist are, of course, numerous. The ones that are implemented until now are SWT and GFace,  but it's quite easy to add another support since it's quite generic. The reason we want  to modelize the UI is because a model is something that is easy to understand, that is easy to  adapt, to copy, to reimplement. But it's also easy to transfer the knowledge to other people  because everyone is able to understand the model. Code is very, it's more difficult to  transmit. And another reason is that modelization keeps it clear. Like when you see, for example,  an HTML file, it's quite easy to see the structure of your page. It's the same with  Wasabi. We also created a visual editor. The visual editor is a way to develop your interface,  a bit like Window Builder for those who knows. Of course, when you talk about development,  you need to talk about version management. Of course, when you base your UI on a model,  you can save it like an XML file, and merging and managing XML files are really easy. The  other reason is you can also adapt. You can fork, you can copy paste code of other people,  of other application, and it keeps going. It's also easy to merge and to collaborate.  One important thing in Wasabi is the fact that it's not generating library-specific  code. We are interpreting the model live. So if you are modifying the model, it will  constantly be up to date in function of your model. So of course, like every project, we  need more users, we need more contributors. You are welcome to, as usual, fork, be creative,  use it, and we will be happy to merge it into Wasabi. Actually, we are a young project at  eclipse.org. The website is not up to date, but you can see the website is there and you  can find the information. I don't know if I have. I want to show first a little demo.  I can. Here you see my eclipse installation. I just have one project. In this project,  I have a few code. It's a plugin. And the main application is here. We see it's a very  short code. And the most important part is this one. I don't know if you see. It's the  loading of the model. And my model is here. Okay. Here you see my model is composed by  several parts. The first container, the second container, and my second container. I have  a tablet layout. And each container will be a tab, actually. So when I load it, okay,  you see I have my first button and then my two tabs. Okay. But the thing that is interesting  is that when I click on the button, I link the button with a handler. And the handler  is here. What do I do in this handler? It's very simple. I take the layout of the main  container. So the main container is the container composing the two tabs. I remove the current  style rule and I change it with another. For example, here I take the tablet layout rule  and I change it with an expand layout rule. And here, if it's the other case, I inverse  it. So what's happened when I click here, it's changing my layout. And I see I still  have my application. But my layout is different. The thing is I'm not regenerating the widgets.  So here, if I type my name, toggle layout, I still have my name here. So it's changing  the model live. And as I see, my model is adapt. And I have very few codes. So I just  have my model. And if you want, I can show you here how it's structured behind. It's  just an XMI file. So it's quite easy to merge, quite easy to copy or to adapt in function  of your needs. Okay. So if you have any questions, I don't know how much time I have, maybe two  minutes or one minute. But like I show you here, actually, this is changing the model  live by changing the layouts. I can show you that in my outline here. This is actually  the outline of my window editor. Wait. That's it. Okay. And for example, if I take my label  here, I have to change here. For example, this one, I can modify this by in French, for  example. And it's it's changing life. I don't have the the EMF model. It's not accessible  here. So I cannot show you the model changing the visualization of the model live. But actually,  you have to trust me, the model is changing. This is SWT. It's quite difficult because  I have to change the library for the demo. It will be takes some time. But that's the  other question. Yeah. It's runtime load and displays. Totally seamless of the of the library  you use behind. Okay. Thank you very much. Thank you.
Wazaabi_GAxQASdC6Ac_2_0_1211.png Wazaabi_GAxQASdC6Ac_2_1212_3671.png Wazaabi_GAxQASdC6Ac_2_3672_3827.png Wazaabi_GAxQASdC6Ac_2_3828_6563.png Wazaabi_GAxQASdC6Ac_2_6564_7679.png Wazaabi_GAxQASdC6Ac_2_7680_7787.png Wazaabi_GAxQASdC6Ac_2_7788_9011.png Wazaabi_GAxQASdC6Ac_2_9012_9671.png Wazaabi_GAxQASdC6Ac_2_9672_9791.png Wazaabi_GAxQASdC6Ac_2_9792_10007.png Wazaabi_GAxQASdC6Ac_2_10008_11423.png Wazaabi_GAxQASdC6Ac_2_11424_14195.png Wazaabi_GAxQASdC6Ac_2_14196_21563.png Wazaabi_GAxQASdC6Ac_2_21564_21974.png
Okay, hello everybody. I am Grigord Emptien and I'm gonna present you Wasabee. Wasabee is a UI framework based on EMF eclipse modeling framework for typically which client platforms developing on based on Java. So if you already developed user interfaces, you see, you already saw how it can be a mess in the code and you can have UI code in several classes, in several files and it's not so easy to keep it clear and clean. Wasabee wants to bring a solution and a way to structure your data and your UI to keep it clear. Do you know here in the people here, do you know what's a model? Otherwise, I just do words on what's a model. Okay, just do words. A model is a way to structure data. So as you see, for example, here, we have a text. The text is structured with the title with several parts and everything is clear and every part has his own properties. For example, the title is big and is above and something like that. It's a way to structure the data. That's only the model. So Wasabee considered that a UI is composed by two parts, the way it looks and the way it works. First, have a look at the visual part. Let's take an example. You have a user which wants a user interface. Here we keep a very simple example. And the only data you want to know, he wants to order cars. And you want to know how many cars he wants. So you make an interface with some labels and a push button. It's quite simple, but you need to add some fancy things to keep it clear for the user. But it happens that for a same program, you want several kinds of interfaces. For example, if you have disabled person that want to see your interface, you need bigger characters. If you want to have an Android application, you also need another interface. But you don't want to reimplement the program to have another interface. You want just to change your interface. So by using a model, we just add styles to our widgets like logic blocks. So here we have the color, we have the text, we have the layout. That's just styles, a bit like CSS for HTML files, which are styles you come and you put on your structure. On the other pass, we have the way it works. You know that it's important if you want to maintain your code to have a clean code on all your functionalities. And it's very important. For example, if you want to bind several pieces of your UI, you need a good way, a clear way to structure them. On each event, you want to have an action that is triggered. For example, here if you change the number of cars you want to buy, the label has to be updated. So behind every event, there is an action that is triggered. Like you see here, you have the click on the button or the change of the number. But of course, you have to be careful on the action you trigger. For example, you cannot send a mail to the factory by saying, I want to order minus one car. It makes no sense. So we have to check before some conditions before to trigger the action. So of course, we have to check the data of the user. The way was that it works is we say, okay, when an event is triggered, first of all, we have to check the conditions. And when the conditions are checked, then only we can trigger the actions. That's the way an event is handled in O-code. So you see, there are two parts, the visual part and the functional part. On the model way, on the model representation, we see on the widget, we have on the left part, the text, the layout, and that's all the visual part. And on the right part, the functional part with a binding, for example, between several parts. So for example, the spinner and the label. And the event handlers with the conditions that are verified before the action are triggered. The conclusion of that is that it's not only the way it looks for a UI. It's also behind the way it works that is very important. So let's see how Wasabi works in detail. Wasabi is based on Eclipse. It's programmed, of course, in Java. And the model aspect are based on the Eclipse modeling framework. We wanted Wasabi to be the most modular possible so it can apply to the requirement of your project in function of what you need. That's why Wasabi is not library, graphic library dependent. We instructed in three components, three layers. First, the third layer is the event-driven processing, which is managing the whole functional part. Then we have core widgets. The core widgets are generic widgets that's specific on a UI library. And then, of course, you have a binding with the graphical library you want. You have SWT, swing, or others. The graphic libraries that exist are, of course, numerous. The ones that are implemented until now are SWT and GFace, but it's quite easy to add another support since it's quite generic. The reason we want to modelize the UI is because a model is something that is easy to understand, that is easy to adapt, to copy, to reimplement. But it's also easy to transfer the knowledge to other people because everyone is able to understand the model. Code is very, it's more difficult to transmit. And another reason is that modelization keeps it clear. Like when you see, for example, an HTML file, it's quite easy to see the structure of your page. It's the same with Wasabi. We also created a visual editor. The visual editor is a way to develop your interface, a bit like Window Builder for those who knows. Of course, when you talk about development, you need to talk about version management. Of course, when you base your UI on a model, you can save it like an XML file, and merging and managing XML files are really easy. The other reason is you can also adapt. You can fork, you can copy paste code of other people, of other application, and it keeps going. It's also easy to merge and to collaborate. One important thing in Wasabi is the fact that it's not generating library-specific code. We are interpreting the model live. So if you are modifying the model, it will constantly be up to date in function of your model. So of course, like every project, we need more users, we need more contributors. You are welcome to, as usual, fork, be creative, use it, and we will be happy to merge it into Wasabi. Actually, we are a young project at eclipse.org. The website is not up to date, but you can see the website is there and you can find the information. I don't know if I have. I want to show first a little demo. I can. Here you see my eclipse installation. I just have one project. In this project, I have a few code. It's a plugin. And the main application is here. We see it's a very short code. And the most important part is this one. I don't know if you see. It's the loading of the model. And my model is here. Okay. Here you see my model is composed by several parts. The first container, the second container, and my second container. I have a tablet layout. And each container will be a tab, actually. So when I load it, okay, you see I have my first button and then my two tabs. Okay. But the thing that is interesting is that when I click on the button, I link the button with a handler. And the handler is here. What do I do in this handler? It's very simple. I take the layout of the main container. So the main container is the container composing the two tabs. I remove the current style rule and I change it with another. For example, here I take the tablet layout rule and I change it with an expand layout rule. And here, if it's the other case, I inverse it. So what's happened when I click here, it's changing my layout. And I see I still have my application. But my layout is different. The thing is I'm not regenerating the widgets. So here, if I type my name, toggle layout, I still have my name here. So it's changing the model live. And as I see, my model is adapt. And I have very few codes. So I just have my model. And if you want, I can show you here how it's structured behind. It's just an XMI file. So it's quite easy to merge, quite easy to copy or to adapt in function of your needs. Okay. So if you have any questions, I don't know how much time I have, maybe two minutes or one minute. But like I show you here, actually, this is changing the model live by changing the layouts. I can show you that in my outline here. This is actually the outline of my window editor. Wait. That's it. Okay. And for example, if I take my label here, I have to change here. For example, this one, I can modify this by in French, for example. And it's it's changing life. I don't have the the EMF model. It's not accessible here. So I cannot show you the model changing the visualization of the model live. But actually, you have to trust me, the model is changing. This is SWT. It's quite difficult because I have to change the library for the demo. It will be takes some time. But that's the other question. Yeah. It's runtime load and displays. Totally seamless of the of the library you use behind. Okay. Thank you very much. Thank you.
framework based on EMF eclipse modeling framework can be a mess in the code and you can have UI Wasabee wants to bring a solution and a way to what's a model. Okay, just do words. A model is a way to structure data. So as you see, for Wasabee considered that a UI is composed by two an example. You have a user which wants a user example, here if you change the number of cars of the user. The way was that it works is we say, way, on the model representation, we see on the the model aspect are based on the Eclipse course, you have a binding with the graphical course, when you talk about development, you need you are modifying the model, it will constantly have one project. In this project, I have a few changing my layout. And I see I still have my application. But my layout is different. The live. And as I see, my model is adapt. And I have in my outline here. This is actually the outline