casino.moosebook

[{"kind":1,"language":"markdown","value":"# Casino\r\n\r\n## Presentation\r\n\r\nCasino is a set of tool that migrates *Graphical User Interface* from a GUI framework to another.\r\nIn this Moose Book, we'll see how to install Casino for the migration from GWT to Angular.\r\nThen, we will import a model and export a new one.\r\n\r\n\r\n## Installation tools\r\n\r\nFirst, you need to have install \r\n\r\n1. A [Moose image](https://modularmoose.org/moose-wiki/Beginners/InstallMoose) (version 9 or higher)\r\n2. If you analyze a GWT application, install the last version of [VerveineJ](https://modularmoose.org/moose-wiki/Developers/Parsers/VerveineJ) (version 2.0.2 or higher)\r\n\r\nIf you see this page, I suppose that you already install the [Pharo Language Plugin](https://marketplace.visualstudio.com/items?itemName=badetitou.pharo-language-server) of VSCode.\r\nIf not, you will need it for the rest of the tutorial.\r\n\r\nYou must configure VSCode to use the Moose Image you downloaded as well as its companion VM. (In settings - Pharo)\r\n\r\n\r\n## Installation Casino\r\n\r\nWe will now execute our first Pharo script installing Casino as a tool.\r\nIt configures the Pharo git engine to use https instead of ssh.\r\nIf everything goes right, the name *Iceberg* should appear when the execution is done"},{"kind":2,"language":"pharo","value":"\t\"Make sur Metacello integration is on, even in Pharo 6\"\r\n\tIceberg enableMetacelloIntegration: true.\r\n\t\"Use https\"\r\n\tIceberg remoteTypeSelector: #httpsUrl"},{"kind":1,"language":"markdown","value":"The following piece of code install Casino in the linked Moose Image.\r\nAt the end: `'omaje'` corresponds to the installation for the `Omaje` project of [Berger-Levrault](https://berger-levrault.com), the company that sponsorized this work.\r\n\r\n> Since Casino has a lot of dependencies, this step can last several minutes, so be patient\r\n\r\n` MetacelloScriptApiExecutor` should appear once everything is done."},{"kind":2,"language":"pharo","value":"Metacello new\r\n  githubUser: 'badetitou' project: 'Casino' commitish: 'v2' path: 'src';\r\n  baseline: 'Casino';\r\n  onConflict: [ :ex | ex useIncoming ];\r\n  onUpgrade: [ :ex | ex useIncoming ];\r\n  onDowngrade: [ :ex | ex useLoaded ];\r\n  load: 'omaje'"},{"kind":1,"language":"markdown","value":"## Preparing source code\r\n\r\nIn your computer, download the source of your application, and separate the source files, and their dependencies.\r\nIn our example, we will put every source files, and VerveineJ in `D:\\Developpement\\mse`.\r\n\r\nThen, we use VerveineJ to generate a JSON file including the model.\r\nFrom the root directory `D:\\Developpement\\mse\\VerveineJ`\r\n\r\n```sh\r\n./verveinej.bat -o Omaje.json -format json -alllocals -anchor assoc -autocp ../BLOmajeDependencies/ ../BLOmajeGWT/\r\n```\r\n\r\nOnce the `Omaje.json` file is created, we import it in our Moose image.\r\nTo do so, we use the JSON importer of Moose.\r\n\r\n`a FamixJavaModel #Omaje()` should appear when the execution ends."},{"kind":2,"language":"pharo","value":"'D:\\Developpement\\mse\\VerveineJ\\Omaje.json' asFileReference readStreamDo:\r\n    [ :stream | model := FamixJavaModel new importFromJSONStream: stream ].\r\n\r\nmodel rootFolder: 'D:\\Developpement\\mse\\VerveineJ'.\r\nmodel"},{"kind":2,"language":"pharo","value":"model installWithCache: false."},{"kind":1,"language":"markdown","value":"## Import a Casino Model\r\n\r\nTo import a Casino model, several steps are required.\r\n\r\n0. (Optional) add a log file"},{"kind":2,"language":"pharo","value":"TinyLogger default ensureFileLoggerNamed: 'Casino.log'."},{"kind":1,"language":"markdown","value":"The file will be created in `C:/Users/<user>/AppData/Local/Programs/Microsoft VS Code/Casino.log`"},{"kind":1,"language":"markdown","value":"\r\n\r\n1. Create a Casino model"},{"kind":2,"language":"pharo","value":"\"create a metamodel with Casino UI, Behavioral, Business, and FAMIX ref\"\r\nmetamodel := FMMetaModelBuilder metamodelFromPackages: CSNBModel packagesToProcessToCreateMetamodel , CRFModel packagesToProcessToCreateMetamodel, CSNBuModel packagesToProcessToCreateMetamodel.\r\n\"Create a model\"\r\ngwtModel := CSNUICWModel new name: 'Omaje'; yourself.\r\n\"fix the metamodel of the model\"\r\ngwtModel metamodel: metamodel."},{"kind":1,"language":"markdown","value":"2. parse the module.xml file of the GWT application"},{"kind":2,"language":"pharo","value":"xml := (XMLDOMParser parse: 'D:\\Developpement\\mse\\BLOmajeGWT\\BLOmajeGwt\\src\\fr\\bl\\Omaje.module.xml' asFileReference)."},{"kind":1,"language":"markdown","value":"3. Import the visual part with an existing importer."},{"kind":2,"language":"pharo","value":"CSNWebModelJavaOmaje  new\r\n  sourceModel: model;\r\n  xml: xml;\r\n  createModelIn: gwtModel."},{"kind":1,"language":"markdown","value":"4. Extract the Behavior part of the UI"},{"kind":2,"language":"pharo","value":"behavioralModel := CSNBehaviorModelImporterJava new \r\n  uiModel: gwtModel;\r\n  sourceCodeModel: model;\r\n  resetUIAndGenerateBehavioralModel."},{"kind":1,"language":"markdown","value":"5. Extract the DTO concept"},{"kind":2,"language":"pharo","value":"businessImporter := CSNBuModelImporter new.\r\nbusinessImporter buModel: gwtModel.\r\nbusinessImporter famixModel: model.\r\ngwtModel allCSNServiceAPI do: [ :serviceAPI |  \r\n\tbusinessImporter importForServiceApi: serviceAPI.\r\n]."},{"kind":1,"language":"markdown","value":"## Generate the target UI\r\n\r\nTo do so, we use a Angular exporter."},{"kind":2,"language":"pharo","value":"\"Create an exporter\"\r\nexporter := CSNModelExporterAngularBLSpecific new.\r\nexporter model: gwtModel.\r\n\r\n\"Use the material.angular.io as target library\"\r\nexporter exporterAngularConfiguration: CSNExporterAngularMaterialConfiguration new.\r\nexporter prepareExport.\r\n\r\n\"Select export location\"\r\nexporter context root: 'D:\\Users\\benoit.verhaeghe\\Documents\\Omaje' asFileReference.\r\nexporter runExport."},{"kind":1,"language":"markdown","value":"### Export to multiple micro front-end\r\n\r\nThe `CSNModelExporterAngularBLIdentity` allows one to export several microfrontend.\r\n\r\nTo do so, an additionnal configuration must be performed."},{"kind":2,"language":"pharo","value":"configXML := CSNIdentityConfiguration fromXML: xml andModel: gwtModel.\r\nconfigXML modules doWithIndex: [ :module :index | module port: index + 4200  ].\r\n\r\n\"Create an exporter\"\r\nexporter := CSNModelExporterAngularBLIdentity new.\r\nexporter identityConfiguration: configXML.\r\nexporter model: gwtModel.\r\n\"Use the material.angular.io as target library\"\r\nexporter exporterAngularConfiguration: CSNExporterAngularMaterialConfiguration new.\r\nexporter prepareExport.\r\n\r\n\"Select export location\"\r\nexporter context root: 'D:\\Users\\benoit.verhaeghe\\Documents\\Omaje' asFileReference.\r\nexporter runExport."}]