Composite WPF: Showing/Hiding Views? - prism

I am getting up to speed on Composite WPF, building a small demo app to work through the issues. My app has one region, and two modules, Module A and Module B. Each module contains a simple "Hello World" text block. Both modules are set up as load-on-demand, as per this MSDN How-To.
The shell has two buttons, "Load Module A" and "Load Module B". When a button is clicked, the corresponding module is loaded. So, lets say I click "Load Module A", then "Load Module B". Module A, then Module B load as expected. But if I click "Load Module A" again, nothing happens.
I'm stuck at this point. I think my problem is that I need to activate and deactivate the views in the modules, rather than using load-on-demand. But I have no idea how to do that, and I can't find any documentation or blogs that talk about it.
So, here's my question: How to I load/unload (or show/hide) views? If someone can point me to sample code, I'd really appreciate it. Thanks for your help.

I found my answer. Here is the approach: Load all the modules at startup, then activate and deactivate views as you need them. I am going to write this issue up as a CodeProject article, but here is an outline of how to do it:
(1) In the module Initialize() method, add the module, but don't activate it:
public void Initialize()
{
// Get main region
var mainRegion = m_RegionManager.Regions["MainRegion"];
// Load Module B
var newView = new ModuleBView();
mainRegion.Add(newView, "ModuleA.ModuleAView");
}
Note that the Add() method has two parameters. The second parameter is the name of the view, which we set to the value produced by the ToString() method of the view. We'll see why in the next step.
(2) When activating a view, we need to deactivate the previous view. But we may not know the name of the view, so we deactivate all active views:
public static void ClearRegion(IRegion region)
{
// Get existing view names
var oldViewNames = new List<string>();
foreach (var v in region.Views)
{
var s = v.ToString();
oldViewNames.Add(s);
}
// Remove existing views
foreach (var oldViewName in oldViewNames)
{
var oldView = region.GetView(oldViewName);
region.Deactivate(oldView);
}
}
Since we set the name of each view equal to its ToString() value, we can get the names easily without knowing anything about them in advance.
(3) Now we activate the new view. I do it in an MVVM ICommand.Execute() method:
public void Execute(object parameter)
{
// Get main region
var mainRegion = m_ViewModel.RegionManager.Regions["MainRegion"];
// Clear region
ModuleServices.ClearRegion(mainRegion);
// Activate Module A view
var moduleAView = mainRegion.GetView("ModuleA.ModuleAView");
mainRegion.Activate(moduleAView);
}
Hopefully, that will be enough to get you going. Like I said, I plan to do a more complete writeup, with demo code, for CodeProject.
David Veeneman
Foresight Systems

Related

Where do the Context fit between the GridField and the GridTab in Idempiere/Adempiere

I m trying to grasp the purpose of the following 3 concepts ( classes ) that are core functionalities in Idempiere/Adempiere.
Based on code description
I do understand that GridTab have the state of the model representing the ad_tab which is the ViewModel Part of any ad_table. simple said we will found the data bound to the ad_table.
First, for the GridField I believe is the model of the view, if I can abuse it is like the the DOM state: what do we have as fields, values of fields and events, I believe that is template view centric.
Dicovering this two ( if I m not mistaken in my analyses ) made me wonder. What do really the Ctx stands for? what state is it representing ?
The code is not commenting on this , can any body answer me?
Thanks .
In iDempiere the context is a Properties object that is global to the whole application.
You can think about the context as a global set of variables that you can access from any point of the system.
The context variables can be viewed clicking on the iDempiere icon, then navigating to the Errors tab, and then clicking on the View button, you'll find there the variables after the line:
=== Context ===
Within the context you can find a lot of information:
Login variables: some of those starting with #, like #AD_Role_ID
Defaults: records that are marked as default, also starting with #, like #C_BP_Group_ID
Accounting related variables: those starting with $, like $C_Currency_ID
Global Preferences: starting with P like P|AutoCommit
Window Preferences: starting with P and a number, example P132|GL_Category_ID
And then, the context variables that you're interested in, the value of each field on the windows that are open:
Window fields: those starting with a number, like 1|DiscountSchema - this means the field DiscountSchema in the first window opened
Tab fields: those starting with two numbers, like 1|2|DatePromised - this means the field DatePromised in the third tab (the number 2, tabs are numbered from zero) of the first window opened (the number 1)
You can access those context variables using Env.getContext... methods, and you can also add and delete your own variables with methods Env.setContext...
The use and intent of Context in ADempiere is the same as described by Carlos except for the access. In the web you can access the context from the top right of the window as shown below.
Another example of how the context provides global state is in testing. Here is a snippet from a test setup class that initializes the context with the time and login information. The context can then be accessed by test classes performing integration tests with a database as if they were in actual use. The context here is limited to login information but it could be extended to include any other element of the context required for the tests.
#BeforeAll
public static void setUpBeforeClass() {
today = TimeUtil.getDay(System.currentTimeMillis());
ctx = Env.getCtx();
ctx.setProperty("#AD_Org_ID", Integer.toString(AD_ORG_ID));
ctx.setProperty("#AD_User_ID", Integer.toString(AD_USER_ID));
ctx.setProperty("#AD_Client_ID", Integer.toString(AD_CLIENT_ID));
ctx.setProperty("#Date", TimeUtil.getDay(System.currentTimeMillis()).toString());
ctx.setProperty("#AD_Language", "en");
Ini.setClient (IS_CLIENT);
Ini.loadProperties(false);
org.compiere.Adempiere.startup(IS_CLIENT);
trxName = Trx.createTrxName("TestRun_" + randomString(4));
trx = Trx.get(trxName, false);
try {
mainSavepoint = trx.setSavepoint("AllTests_" + randomString(4));
} catch (SQLException e) {
fail(e.getMessage());
}
}
#AfterAll
public static void tearDownAfterClass() {
try {
tryToRollback(mainSavepoint);
trx.close();
}
catch(SQLException e) {
fail("Unable to rollback. " + e.getMessage());
}
finally {
trx.close();
trx = null;
ctx = null;
}
}

Does the ace core classes keep track of all of the editor instances on a page?

I'm planning on having multiple ace editor instances on a page and I'd like to know if the core libraries are keeping track of them so I can easily get a reference to them later.
If not, would keeping the editor instances in a dictionary or object be a good way to do it? Could I create an object on the ace class and should they be by reference or id?
var editor1 = ace.edit("myEditorDivID");
var editor2 = ace.edit("myEditorDivID2");
var editors = ace.editors;
console(editor1==editors["myEditorDivID"]); // true
console.log(editors["myEditorDivID"]); // editor1
var editorIds = ace.editorIds;
console.log(editorIds[0]); // myEditorDivID
And is there an ace destroy method that should be used to remove references to these instances?
Nevermind on part two of this question. I just found the destroy methods:
editor.destroy();
editor.container.remove();
Update:
I just thought of something else. If we can keep track of the id's or references we can prevent same id collisions. It can also help track how many editors are on a page or if multiple are being created by accident.
I just looked at the ace source and don't see anything keeping track of the editors as they are created. Should I try to whip something up or let someone else tackle it?
Update 2:
I'm thinking to add an editors property and set it by id. I've added an answer with a suggestion.
Answering my own question, no, it does not. But I suggest the following Pseudo code:
ace.addEditorById = function (id, editor) {
if (ace.editors[id]!=null) throw Error ("Editor already created");
ace.editors[id] = editor;
}
ace.getEditorById = function (id) {
return ace.editors[id];
}
ace.removeEditorById = function (id) {
var editor = ace.editors[id];
if (editor) {
editor.destroy();
editor.container.remove();
delete ace.editors[id];
}
}
ace.editors = {};
// then when I create an editor I use the following code:
editor = ace.edit("editor1");
ace.addEditorById(editor);
editor2 = ace.edit("editor2");
ace.addEditorById(editor2);
Maybe the editor can be added in the edit call. What do you think?

displaying images from an ArrayCollection in ListItemRenderer in flex

I am facing the following problem,
I have an object called "data". It has three properties, one of it being itemRendererData. The "itemRendererData" is an ArrayCollection of objects having many properties one of which is the property "imageURL" (datatype:String).
I am working in flex. I have defined the view and the item renderer properly. The view has the data. I am supposed to get the images from the url specified by imageURL property.
In the itemRenderer, I have declared, source
source = {data.itemRendererData.imageURL}
But the images are not being displayed.
Use a the FlexEvent.DATA_CHANGE handler rather than binding, which is actually the proper way to handle this and gives you far more control.
public function CustomItemRenderer() {
this.addEventListener(FlexEvent.DATA_CHANGE, this.dataChangeHandler);
this.addEventListener(FlexEvent.CREATION_COMPLETE, this.creationCompleteHandler);
}
private function creationCompleteHandler(e:FlexEvent) {
if (this.data) {
this.image.source = this.data.itemRendererData.imageURL;
}
}
private function dataChangeHandler(e:FlexEvent) {
if (this.data && this.initialized) {
this.image.source = this.data.itemRendererData.imageURL;
}
}
You will notice that I have a handler for FlexEvent.CREATION_COMPLETE as well. This is because the data is actually set before the components are created. So the first time a renderer is loaded, this.image is null and this.image.source will error out.
If that doesn't work, you also need to make sure that the Image/BitmapImage is not a direct child of the renderer. I never did figure out why this was, but adding it as a child of Group fixed that issue where the image was being set but not rendering. Again, I have no idea why this was and I tested for a few hours trying to figure it out.
As an added tip, avoid MXML-based ItemRenderers in mobile applications. They are noticeably slower than pure-AS3 renderers.

ViewModels and IsolatedStorageSettings

Im working on a MVVM Windows phone app that displays weather info.
When the app loads up it opens MainPage.xaml. It makes a call the the service to get weather info and binds that data to the UI. Both Fahrenheit and Celcius info are returned but only one is displayed.
On the setting page, the user can select to view the temp in either Fahrenheit or Celcius.
The user can change this setting at any time and its stored in IsolatedStorageSettings.
The issue Im having is this:
when the user navigates to the Settings page and changes their preference for either Fahrenheit or Celcius, this change is not reflected on the main page.
This issue started me thinking about this in a broader context. I can see this being an issue in ANY MVVM app where the display depends on some setting in IsolatedStorage. Any time any setting in the IsoStore is updated, how does the ViewModels know this? When I navigate back in the NavigationStack from the settings page back to MainPage how can I force a rebind of the page?
The data in my model hasnt changed, only the data that I want to display has changed.
Am I missing something simple here?
Thanks in advance.
Alex
Probably you have code like this:
public double DisplayTemperature
{
get { return (IsCelsium) ? Celsium : Fahrenheit; }
}
And IsCelsium is:
public double IsCelsium
{
get { return (bool)settings["IsCelsium"]; }
set { settings["IsCelsium"] = value; }
}
So you need to add NotifyPropertyChanged event to notify UI to get new values from DisplayTemperature property:
public double IsCelsium
{
get { return (bool)settings["IsCelsium"]; }
set
{
settings["IsCelsium"] = value;
NotifyPropertyChanged("DisplayTemperature");
}
}
Take a look at Caliburn Micro. You could implement something similar or use CM itself. When using CM I don't even think about this stuff, CM makes it so simple.
When your ViewModel inherits from Screen there are life-cycle events that fire that you can override. For example, OnInitialize fires the very first time the ViewModel is Activated and OnActivate fires every time the VM is activated. There's also OnViewAttached and OnViewLoaded.
These methods are the perfect place to put logic to populate or re-populate data.
CM also has some special built in features for allowing one to easily tombstone a single property or an entire object graph into Iso or phone state.
ok, so Ive come up with a solution. Before I get to it, let me provide some background. The app that Im working on uses both MVVM Light and WP7Contrib. That being the case, I am using Funq for DI and the MVVMLight Toolkit. After I posted my initial question, I gave the question a bit more thought. I remembered a video that I watched a while back from MIX2011 called Deep Dive MVVM with Laurent Bugnion
http://channel9.msdn.com/Events/MIX/MIX11/OPN03
In it, he talks about just this problem (view models not living at the same time) on Windows Phone. The part in question starts around the 19 minute mark.
Anyway, after I remembered that and realized that the ViewModel locator is exposed in App.xaml, this became a trivial problem to solve. When the user changes the Fahrenheit/Celcius option on the setting page, I simply get a reference to the MainViewModel via the ViewModelLocator and reset the collection that is bound to the UI thus causing the bindings to update.
public bool AddOrUpdateValue(string Key, Object value)
{
bool valueChanged = false;
// If the key exists
if (settings.Contains(Key))
{
// If the value has changed
if (settings[Key] != value)
{
// Store the new value
settings[Key] = value;
valueChanged = true;
}
}
// Otherwise create the key.
else
{
settings.Add(Key, value);
valueChanged = true;
}
return valueChanged;
}
public bool ImperialSetting
{
get
{
return GetValueOrDefault<bool>(ImperialSettingKeyName, ImperialSettingDefault);
}
set
{
if (AddOrUpdateValue(ImperialSettingKeyName, value))
{
Save();
RaisePropertyChanged("ImperialSettingText");
var vml = new ViewModelLocator();
vml.MainViewModel.Cities = (App.Current as App).Cities;
}
}
}
It was a mistake on my part not to realize that I could get access to the viewModel via the ViewModelLocator. Hopefully this post saves someone else the time I burned on this issue.

How to save and retrieve lists in PhoneApplicationService.Current.State?

I need to store and retrieve lists in PhoneApplicationService.Current.State[] but this is not a list of strings or integers:
public class searchResults
{
public string title { get; set; }
public string description { get; set; }
}
public List<searchResults> resultData = new List<searchResults>()
{
//
};
The values of the result are fetched from internet and when the application is switched this data needs to be saved in isolated storage for multitasking. How do I save this list and retrieve it again?
If the question really is about how to save the data then you just do
PhoneApplicationService.Current.State["SearchResultList"] = resultData;
and to retrieve again you do
List<searchResults> loadedResultData = (List<searchResults>)PhoneApplicationService.Current.State["SearchResultList"];
Here is a complete working sample:
// your list for results
List<searchResults> resultData = new List<searchResults>();
// add some example data to save
resultData.Add(new searchResults() { description = "A description", title = "A title" });
resultData.Add(new searchResults() { description = "Another description", title = "Another title" });
// save list of search results to app state
PhoneApplicationService.Current.State["SearchResultList"] = resultData;
// --------------------->
// your app could now be tombstoned
// <---------------------
// load from app state
List<searchResults> loadedResultData = (List<searchResults>)PhoneApplicationService.Current.State["SearchResultList"];
// check if loading from app state succeeded
foreach (searchResults result in loadedResultData)
{
System.Diagnostics.Debug.WriteLine(result.title);
}
(This might stop working when your data structure gets more complex or contains certain types.)
Sounds like you just want to employ standard serialisation for your list object, see here in the MSDN docs
http://msdn.microsoft.com/en-us/library/ms973893.aspx
Or also XML serialisation if you want something that can be edited outside of the application (you can also use the Isolated Storage exploter to grab the file off and edit later)
http://msdn.microsoft.com/en-us/library/182eeyhh(v=vs.71).aspx
Alternatively i would also suggest trying out the Tombstone Helper project by Matt Lacey which can simplify this for you greatly
http://tombstonehelper.codeplex.com/
The answer by Heinrich already summarizes the main idea here - you can use the PhoneApplicationService.State with Lists like with any objects. Check out the MSDN docs on preserving application state: How to: Preserve and Restore Application State for Windows Phone. There's one important point to notice there:
Any data that you store in the State dictionary must be serializable,
either directly or by using data contracts.
Directly here means that the classes are marked as [Serializable]. Regarding your List<searchResults>, it is serializable if searchResults is serializable. To do this, either searchResults and all types referenced by it must be marked with the [Serializable] OR it must be a suitable Data Contract, see Using Data Contracts and Serializable Types. In short, make sure the class is declared as public and that it has a public, parameterless constructor.

Resources