Design Studio 1.4: Portable Fragment Bookmarks & Reuse in Applications

How the portable fragment bookmarks do behave when using in more than one application.

Use Case

We define two (or more) applications. The first one is more focused on preparation of the visualization, definition of the content. The others are just in “consumption mode”. User can choose visualizations and position it by coordinates…

The producer application

In this application we differentiate between static and dynamic content.

• The static content is just application dependent and not intended to be exchanged between applications
• The dynamic content is prepared for reuse – save here and load in other applications.

In this concrete scenario we just concentrate on simple changes to see how the fragment bookmarks are working. And you can see the difference between fragment bookmark and portable fragment bookmark.

Static – Dynamic Content

As you see there are some buttons (in the static area of the producer application) which can influence the dynamic content. On this example you can see that all scripting methods which are in the application have a free access to the inner components of the dynamic area – by use of those technical names (but this was surely expected).

Scripts in Fragments

Also, you can see that one dynamic area has a button, a component with event which can contain scripts. This is an important point – keep in mind that also this script will be persisted in the bookmark. For this, always use just delegation to global scripts in such elements, this will allow you a stable bookmark content and application dependent control of the script execution.

See the Button “Say Hallo!” with hard coded content, this stays forever. The other Button “Say Something” has only a link to global script “SCRIPT_SOMETHING.saySomething()” which is existing in both applications, but coded with different content.

–>

Saving of Portable Fragment Bookmarks

In the other buttons which are responsible for saving of the bookmarks you can see a script:

// save the bookmark

var bookmark = Bookmark.PortableFragmentBookmark.saveBookmark(“MIN8CHARS_NOSPECIAL_AREA_D”, PANEL_4, TEXT_5.getText());

// update drop down

DROPDOWN_1.addItem(bookmark.id, bookmark.title);

// update the gallery

FRAGMENTGALLERY_1.addItems(Bookmark.PortableFragmentBookmark.getAllBookmarkInfos(“MIN8CHARS_NOSPECIAL_AREA_D”));

Every saved PANEL gets assigned to an group identifier which can be used in different applications to load the content. Keep in mind, that the layouting properties of the panel are saved as well, this is why you see in the application always a parent container which is responsible for positioning (delegate positioning always to the parent, this allows you easier layout changes afterwards).

Current Implementation Scope

Important is the fact, that you can populate the portable fragment bookmarks in different application, but you can apply them ONLY through Drag&Drop from Fragment Gallery.. Example:

Load Script:

var frBookmark = Bookmark.PortableFragmentBookmark.getAllBookmarkInfos(“MIN8CHARS_NOSPECIAL_AREA_D”);

frBookmark.forEach(function(element, index) {

  DROPDOWN_BOOKMARKS.addItem(element.id, element.title);

});

and corresponding button for load of such “foreign” portable fragment bookmark:

Bookmark.PortableFragmentBookmark.loadBookmark(DROPDOWN_BOOKMARKS.getSelectedValue());

leads to the warning message:

Error while loading portable fragment bookmark. Bookmark with id “aec4357a82514e2ca6a05e626a6c6cd8″ was not created in application”DEMO_EMB_BOOKMARK_RECEIVER” and therefore cannot be loaded.

but populated bookmarks in Fragment Gallery can be always used by drag & drop into Split Cell Container.

More about the “Receiver Application”

This example shows following possibilities in one application:

* populate the portable fragment bookmarks into Fragment Gallery

* use drag&drop to place them “for use”

* position the content using some primitive maths (see on the use of global scripts)

* saving the information on “where was the fragment positioned” – another example how you can use the portable fragment bookmarks to save some information and load automatically on startup…

* saving a fragment bookmark with current application design and positioned split cell containers (as those cannot be saved as portable fragment bookmark)

The Workflow with Explanation – On Startup

the startup event gets much cleaner when already there all the content is externalized into global scripts, like this:

in this case, we

• fill the content of portable fragment bookmarks into gallery and dropdown
• load current user dependent state (a kind of “selective personalization”)

The Workflow with Explanation – Drag & Drop

By drag & drop the user can pick up some fragment and place in the “container”. This is currently only one possibility how portable fragments can be loaded in second application.

— >

If we look in detail on the structure behind the drop area (as part of this example), we can see panel + split cell container. To be specific, in this example I have 8 of those as I can allow to position 8 different visualizations.

The Workflow with Explanation – Re-position the Panel in the PANEL_VISUALIZATION

There is nothing magic behind, only some maths… see the scripts for details.

The Workflow with Explanation – Save the current view & position information

This is the place where the interesting point starts, the method “saveState()” in SCRIPT_FRAGMENTS:

Part 1: I save now the complete panel as a “FragmentBookmark”:

// part 1, save the visualization information

var bookmarkIdViz = “”;

var bookmarksViz = Bookmark.FragmentBookmark.getAllBookmarkInfos();

bookmarksViz.forEach(function(element, index) {

  // we expect only one!

  if(index == 0) {

  bookmarkIdViz = element.id;

  }

});

// first time there is no bookmark

if(bookmarkIdViz == “”) {

  Bookmark.FragmentBookmark.saveBookmark(PANEL_VISUALIZATION);

} else {

  // or overwrite existing

  Bookmark.FragmentBookmark.saveBookmark(PANEL_VISUALIZATION, “”, “”, bookmarkIdViz);

}

Part 2: I save actually only some text field as Portable Fragment Bookmark, but of course I have to package it in the panel:

This is a way how you can organize / group some text fields and save information inside which can be recovered on next app start (refer to loadState) …

// part 2, save the blocked positions information

var bookmarkId = “”;

var bookmarks = Bookmark.PortableFragmentBookmark.getAllBookmarkInfos(“BLOCKED_POSITIONS”);

bookmarks.forEach(function(element, index) {

  // we expect only one!

  if(index == 0) {

  bookmarkId = element.id;

  }

});

// first time there is no bookmark

if(bookmarkId == “”) {

  Bookmark.PortableFragmentBookmark.saveBookmark(“BLOCKED_POSITIONS”, PANEL_BLOCKED_POSITIONS);

} else {

  // or overwrite existing

  Bookmark.PortableFragmentBookmark.saveBookmark(“BLOCKED_POSITIONS”, PANEL_BLOCKED_POSITIONS, “”, “”, “”, bookmarkId);

}

The Workflow with Explanation – Connection to Global Script

As you can see, the panel with Split Cell Container has also a button, which can be used to remove the position (also nothing special here). But then again saving of the state does remember what is located and which panels are free…

SCRIPT_FRAGMENTS.onRemove(PANEL_SCL_8);

What is perhaps interesting here, passing of a PANLE as parameter into global script function.

You can see that the type is recognized and you can execute directly methods on the object.

Summary

I am not sure how much this scenario is business related, but from technical perspective it is covering:

* saving of fragments in the “portable” way

* applying in different application

* saving of fragments with some information

* fragmented personalization of the application

* and demonstrates use of global functions

Important Points

• keep correct positioning information in the fragment bookmarks
• do not save custom scripts in fragment bookmarks (always link to global functions)

Example Application

you can download the example application and try it out. See the Applications

• DEMO_EMB_BOOKMARK_SENDER2
• DEMO_EMB_BOOKMARK_RECEIVER

in GitHub (ZIP contains this app): Release DEMO_EMB_BOOKMARK_SENDER2_RECEIVER · KarolKalisz/DesignStudioBiAppRepository · GitHub

Have Fun!