Training:The 1000 steps program to MDriven Chapter 13

This is Chapter 13. Are you looking for the start? You can find it here: Chapter 1, or link to chapter 12(the previous chapter)

Here's the video link for Chapter 13: https://youtu.be/GTn8ymRnw-g

Add Simple Data Dependent HTML or SVG Graphic to Your App

• This is good for generating simple diagrams without the need for more advanced components (which is easy - but not as easy as this).

388. Verify that your model is without errors (red dots). If you have any, make sure you resolve them before moving on.

389. Create a new ViewModel and name it CarsAndBrands - class Car, not rooted.

390. Add a global action to show for this ViewModel.

391. Add a grid to show Car allinstances, showing the registration number and the brand name.

392. Add a static text column. Name it ThisIsHtml.

393. Set the tagged value DataIsHtml=true on the column.

394. Try the expression '<div style="background:yellow;">hello</div>' in the ThisIsHtml column. Verify that you get a text with a yellow background.

395. Use the AsSeperatedList expression to build a large string that displays all the cars.

396. Find the page: https://www.coding-dude.com/wp/html5/bar-chart-html/ and use the HTML and CSS found there. Note that the CSS that is in LESS-format must be translated for the browser to understand it.

397. Do a simple test with the fixed data in the example and verify that you make that render on the page. Note that to MDriven-expressions, the HTML is just a string constant - you need single hyphens/quote to declare this string. Note that if you want to use a hyphen inside a string constant in OCL, you can use a backslash in front of the single-quote, or in HTML/CSS, you can also use a double-quote to avoid the need for escape-sequencing with a backslash.

398. Use the GroupBy operator to group all cars by BrandOfCar.

399. Collect over the result and create a string of the correct percentage value: Car.allInstances->groupby(c|c.BrandOfCar)->collect(tuple|tuple.BrandOfCar.Name,(100*tuple.List->size/Car.allinstances->size).Round(0).asstring+'%')

Now do a lot of string massage to inject prepared HTML-snippets instead of the hard-coded example values.

400. Once you have it working - showing your data in the diagram - verify by opening a new window and creating a new car with a new brand. Make sure you see the new car showing up in the data in your diagram.

401. Clean up the view so you only leave the diagram and don't have the helper columns. Also, hide the left-hand actions from this page.

402. Make a copy of the CarsAndBrands view and name the copy CarsAndBrandsSVG.

403. Add a global action to show for this ViewModel.

404. Find the page: https://codepen.io/mdgrover/pen/eZENxO that shows an example of SVG-vertical-bar-chart.

405. Copy the CSS and HTML and replace your current values. Verify that you can get the static example to show on your page.

406. Now string massage this example to get it to show your data.

File:ModelAfterChapter13.zip

Next Chapter:

The_1000_steps_program_to_MDriven_Chapter_14