Blog post tutorial with total.js (part 3 end)

In my previous blog post, I focused on the front-end development aspect of a modern blog, specifically using the Total.js framework. The front-end code provided in the post showcases the usage of Total.js UI components and plugins to create a dynamic and interactive user interface.

UI Component:

Total.js provides a UI library called ui-component, which offers a rich collection of reusable UI web components. These components can be easily incorporated into your application. To use ui-component, you need to include two files:

• spa.min@19.js (85 kB gzipped file)

• spa.min@19.css (22 kB gzipped file)

You can explore the available components at componentator.com/components.

In my previous post, several ui-component are used, such as LAZY, approve, exec, and modal. Each component is included using the <ui-component> tag, with the component name specified in the name attribute. Additional attributes like path and config can be used to configure the component. You can find more information about using ui-component in the Total.js documentation.

UI Plugin:

The code also demonstrates the usage of a UI plugin called ui-plugin. UI plugins simplify path declarations in HTML code, reducing the need for nested components. The plugin in my previous post is declared with a path value of "posts", which encapsulates the entire content within the <ui-plugin> tags. You can learn more about using plugins in the Total.js documentation.

In the code snippet, various UI components such as button, markdowneditor, modal, input, menu, exec, approve, and notify are used within the ui-plugin context. Each component serves a specific purpose, contributing to the overall functionality and interactivity of the blog.

To interact with the plugin, a global PLUGIN('', callback) function is used. Within the callback, several methods are defined:

• reload: This method is triggered when the page is reloaded and internally calls refresh.

• refresh: This method makes an API call (tapi) to retrieve the list of blog posts (posts_list) and updates the items data using the SET function.

• create: This method is used to show the input form for creating a new blog post by setting the common.form value to 'formpost'.

• submit: This method handles the submission of the form. It retrieves the form data, sends it to the server-side API (posts_update or posts_insert), and updates the UI accordingly. The hide parameter is a function that can be called to hide the form modal.

The code concludes with a setTimeout function that triggers the reload function after a delay of 200 milliseconds.

In summary, the front-end code presented in this post demonstrates the usage of Total.js UI components and plugins to create an interactive blog interface. It showcases the integration of UI components, the configuration of plugins, and the utilization of various functions to handle interactions and data updates.

You can see full code of this project on github where a build a beautifull design with admin panel all with total.js