Post 13 – Flags & Cmd/Sub

First of all, let’s try to see if the definition of Browser.element has any new elements compared to Browser.sandbox .

• init – now takes the form of taking a parameter named flags and returning a Tuple (model, Cmd msg) .
• view – nothing changes and still takes a single input parameter of a model record to generate an HTML msg structure.
• update – still accepts an msg event message sent by the Browser.element main driver and returns a Tuple (model, Cmd msg) .
• subscriptions – takes a model record and generates a browser event tracker Sub msg .
• And finally the return result of the Browser.element packager – is a Program that takes the parameters flags , model , msg .

Flags

The uses of Cmd and Sub we have mentioned before, and here we are adding a new element that is flags – roughly translated as flag values ​​- appearing in the init and Program results. As such, flags will be passed in from the environment outside the Program and used for the init initializer when the user loads the page for the first time.

To attach a Program that has been compiled into an element.js file to a previously built website, we still do the same as when using Browser.sandbox . That is to create an HTML element with a specified id and pass it to the Program initialization directive.

That’s how we pass content initialization data into an Element . This is very important, because often we will want to create Element that can be reused many times. And so the configurable data that Element works on – should not be written permanently into the code that handles the logic of Element .

For example, you might want to create a Navbar with Elm and the data to create specific content for the Navbar will be passed in at initialization time as shown in the example code above. Or, we’ll just pass in a single URL that points to an API that provides a list of the website’s Category headings in JSON format.

That way the Element that you build will be able to be shared for use by other websites and the users of your code won’t need to read Elm . Finding a place to put static content in Elm code will no longer be a necessity, and it is also a common desire when we write any program, in any language.

HTTP Request

Now let’s look at the example of a simple Element that sends an HTTP request to a server to get the content, introduced by Elm in the documentation.

Here we have a Reader text display with architectural elements that work a little differently than Sandboxed Buttons . The program starts at Main with the flags parameter temporarily blank because we don’t need to attach this Element to any web page yet.

Immediately after that, init will be fired to create the first status record with the command to send the request to the text content query over HTTP .

Thus, the record value that init initially initializes will be any value of type Loading and will be passed to the view by the Program . Immediately after initializing the Loading value, init also sends a request to query the content over HTTP . As soon as the query results are available, the Program will pass a value of type Cmd Msg to the update .

In this example the view will generate the HTML structure by Pattern Matching the input record type. Initially, when receiving the Loading type, it will only show the words "Loading..." . Other data pattern instances may appear when the update is activated.

Here we have only one case where the GotResponse update of the HTTP Request is sent. After creating a new Model record of Failure or Success txt , we do not need to trigger any more interactive commands Cmd.none . The new Model record according to the processing cycle that we already know will be sent to the view to update the display content.

The final architectural element is subscriptions that are not yet in use and are represented by the value Sub.none which is meaningless to the Program driver.

http://localhost:8000/src/Main.elm

Currently the public-opinion.txt file provided at the URL provided by Elm in the init is still available and you will see the words "Loading..." which will only be displayed for a short period of time shortly after. when the web page is downloaded. Then the displayed content will be updated as shown in the screenshot.

Cmd & Sub

As we have seen, the command message element Cmd Msg has made the operation logic of the Program created by Browser.element much more flexible than that of Browser.sandbox .

Msg event messages can be sent from many different points in the program – at the end of the first Model record initialization, when the user interacts with the Html Msg structure generated by the view , when terminates each case of the update program itself, and when the Sub Msg becomes aware of an event occurring in the web browser environment overview.

So the remaining element that we need to learn is subscriptions – the generator Sub Msg keeps track of events happening in the overview web browser environment. So what types of events can be attached to Sub Msg ? All are listed here: Browser.Events

• onClick – when a click occurs anywhere in the web page
• onMouseMove – when the user moves the mouse pointer anywhere
• onMouseDown – when user presses down on left/right mouse button anywhere
• onMouseUp – when the user releases the mouse button anywhere
• onKeyPress – when the user presses any key and releases
• onKeyDown – when the user presses any key
• onKeyUp – when the user releases any key
• onAnimationFrame – when animation is active
• onResize – when the user narrows or expands the browser window
• onVisibilityChange – when the visibility of the browser window changes

In fact, Sub Msg can also be generated from other programs such as Time.every provided by package: elm/time . And so the Program will now have quite a lot of ability to interact with the external environment.

Now let’s look at another example that Elm put on the homepage to better understand the Cmd/Sub/Msg elements.

Here we will create a simple clock by querying time information from the system then updating the display status every second. Since we do not need to use the input parameter when initializing the Program , we will still leave the flags parameter blank.

In addition to the aforementioned module Time , the init program also uses the module Task in package: elm/core , to perform a task that is delayed slightly after initializing the first Model record. It is the operation of adjusting the time zone to suit the user’s current location on earth.

The simple Html Msg structure is generated by the view with a single <h1> tag containing the timing information from the passed Model record.

The AdjustTimeZone time zone adjustment task is started by init , once done, sends Cmd Msg to Program and then Msg is sent to update to update the display information. At this point, update will create a new Model record and stop the Cmd Msg interactive command loop with Cmd.none .

In addition, the update has an instance of Msg being sent of type Tick time generated by subscriptions .