">mixi Developer Center (mDC)

mixi Apps

mixi Apps (English) » Technical Specification » PC » Displaying Mini-Messages

Displaying Mini-Messages

A mixi App performs in various ways according to how its users use it. Sometimes, a short message displayed on the mixi App can encourages its users to use the mixi App more appropriately.

mixi_message

Types of Messages

OpenSocial provides a feature called “mini message” for displaying a message from a gadget. In the mixi App specification, this “mini message” feature is also supported.

The mini message can be displayed with following three ways. The developer is able to select one of them to display the message in the mixi App.

  • Message the user can clear by clicking “Close” button (Dismissible Message)
  • Message disappeared automatically after a certain period of time (Timer Message)
  • Message that can be cleared by a program (Static Message)

The message displayed in the mixi App is simple in the initial setting, and the developer is able to customize design of the message.

Declaration to Use

The developer need to express the use of the mini message functionality in the Gadget XML file.

<Module>
  <ModulePrefs>
    <Require feature="minimessage" />
  </ModulePrefs>
</Module>

Display of Dismissible Message

A type of a message that is cleared by a user’sclicking “Close” button is called ”Dismissible Message”. For this type of message, the UI for the closing message, [X],can be illustrated on the right side of the message such as “Update complete”.

Dismissible Messages can be displayed by the gadgets.MiniMessage.createDismissibleMessage().

var msg = new gadgets.MiniMessage();
msg.createDismissibleMessage("更新が完了しました");

By specifying the callback function as the second argument, the developer is able to perform a certain process when the user closes the message displayed by the createDismissibleMessage(),.

var msg = new gadgets.MiniMessage();
msg.createDismissibleMessage("更新が完了しました", function() {
  // do something...
});

Display of Timer Message

A Message disappeared after a certain period of time without any user’s action is called “Timer Message”. To display this type of message, the gadgets.MiniMessage.createTimerMessage() is available. The disappearing time in seconds can be specified as the second argument of the createTimerMessage().

var msg = new gadgets.MiniMessage();
msg.createTimerMessage("Update has been completed", 5);

By specifying the callback function as the third parameter of the createTimerMessage(), the developer is able to perform a certain process when the message is cleared.

var msg = new gadgets.MiniMessage();
msg.createTimerMessage("Update has been completed", 5, function() {
  // do something...
});

Display of Static Message

A Message cleared by a program at a certain timing is called ”Static Message”. The static message can be displayed by using the gadgets.MiniMessage.createStaticMessage().

var msg = new gadgets.MiniMessage();
var m = msg.createStaticMessage("Update has been completed");

The static message must be cleared explicitly by the gadgets.MiniMessage.dismissMessage(). As a result of executing the createStaticMessage(), the DOM element for the displayed message can be obtained. For example, the developer is able to erase the message when the message itself is clicked by using onclick in the DOM element.

m.onclick = function() {
  msg.dismissMessage(m);
}

Customizing Design for Message

As mentioned, the message displayed in the mixi App is simple in the initial setting In some mixi Apps, the developer is willing to alter messages to fit the application’s design.

In each of the lists above, a string is specified when message is displayed. For the mini message, , a certain DOM element as well as a character string as a message as can be specified.

var msg = new gadgets.MiniMessage();
var div = document.createElement("div");
div.innerHTML = "Update has been completed";
div.style.color = "white";
div.style.backgroundColor = "green";
msg.createDismissibleMessage(div);

By setting a style definition in the DOM element as shown above, the message style is customizable. A style definition fitted to the design of the mixi App can improve the user experience in the mixi App.

TOP OF THIS PAGE