Writing generators for graphs with decompositions

I have written my own schema for state machine representation, but it has some semantics for the meta-modeler. Rather than a hierarchical representation of the xml nodes which can be edited , some nodes like the UI components have to be represented by another model, so that they can be separately authored. How can the xml be generated in such a case? Example of the xml is as follows:

<state no="1">
        <timeout>500</timeout>
        <screen>
            <components>
                <textfield x="50" y="50" width="924" textsize="50" background="1" border="1">
                    <text say="1">
                        <part type="text">Hello</part>
                    </text>
                </textfield>
                <button label="START" width="250" height="100" x="387" y="600" textsize="40" icon="none" adjtext="30">
                    <event name="clicked">
                        <action preconditions="no" name="transition">
                            <parameter>
                                <type>state</type>
                                <name>n</name>
                                <value>86</value>
                            </parameter>
                        </action>
                    </event>
                </button>
            </components>
        </screen>
        <expectedevents>
            <event name="TimeOut">
                <action preconditions="no" name="transition">
                    <parameter>
                        <type>state</type>
                        <name>n</name>
                        <value>0</value>
                    </parameter>
                </action>
            </event>
        </expectedevents>
    </state>

Thanks for the suggestions.

The way I thought of modeling this was to have separate graphs for state machine and UI definition. Also, a problem is then to handle the complexity if there are lots of states.

I could not understand when you said " direct reference to the object". is this for the first method(same graph) or the second method(separate graphs)?

I was also thinking of improving my modeling concept used in the xml. Since, once there are many screens(states), it would be hard to define them even graphically using Metaedit+. What would be an output xml example from the technique you've described if there are multiple screens? 


Edited by iceman - 06.Jul.2011 at 15:46

Yep, got that part. If there is a separate graph for UI component definition, then I would need to separate the event transitions coming from some of the UI components like buttons, because state change occurs because of that as well. How to do that?
I'm a bit confused when you said "explosion link from state in state machine diagram to the UI component Graph type". Is that a better design approach than having decomposition? I'm quite happy to change the xml schema to have a better design that would let tackle two things -one,the definition of UI components in another graph and second,having lots of states.

Hello,
Thanks for the reply.

In the meantime while you answered the question, I had come with some graphical design issues. My version of the state machine editor is a customized version of a generic State machine editor, in that it has definition of UI design in some states(not all). A generic state transition diagram can be used to describe the behavior of a class, a use case or a system. While searching for a proper representation I found that a lot of the confusions arise from the way the term "FSM" is used in literature and their representation(specially state charts versus state machine). I found that a form of state transition diagram given by the IETF standards here and a more common known one from UML here ( link ,  link ). There are other graphical representations such as SDL, BSCM etc. The UML notation in plain english converts to the following: when the specified event occurs, if the guard condition is true, perform the specified action and send the specified message.

For my requirements, the xml i constructed for the domain does not exactly match the semantics of a standard state machine graphical representation, i.e the event definition is embedded in the button UI component definition. Hence, I am not able to have a better DSL design. I have the state definition according to the XML example below and constructed two graphs : one is a state transition diagram graph( link ) and another a UI layout graph(link). I can define the states, but since buttons are inside another graph, how can i specify the events defined by them in the state transition graph? How can I define multiple "backgroundactions" and "expectedevents" in my state transition diagram graph? If I specify them as Properties in a Relationship, I'm unable to add the "parameter" anymore


Ref:
There are couple of xml tags which can be confusing to understand. Their meanings are as follows:
actions+backgroundactions - same as the concept of action in UML
expectedevents - both asynchronous periodic(timeout)[ link ] and asynchronous sporadic(shown as "FD" and "FE" here) received by the state. These are not from any state but from external processes and clocks. There is no concept for representation of this in UML.
events - asynchronous aperiodic events(button clicks)  


XML example:
<state no="0">
    <timeout>1</timeout>
    <backgroundactions>
        <rocosmessage name="FDSessionStart" type="EVENT_MESSAGE" senderid="RCP" receiverid="NA">
            <parameter type="unsigned int" name="id" vartype="text">1</parameter>
        </rocosmessage>
    </backgroundactions>
    <expectedevents>
        <event name="TimeOut">
            <action preconditions="no" name="randomtransition">
                <parameter>
                    <type>state</type>
                    <name>n</name>
                    <value>11010</value>
                </parameter>
                <parameter>
                    <type>state</type>
                    <name>n</name>
                    <value>11020</value>
                </parameter>
            </action>
            <savedvalues>
                <save value="state" tag="VARFirstScreen"/>
            </savedvalues>
        </event>
    </expectedevents>
</state>


<state no="1">
    <timeout>129</timeout>
    <screen>
        <components>
            <video x="142" y="144" width="720" height="480" repeat="yes">
                <path>Introduction_final.flv</path>
            </video>
            <button label="EXIT" width="80" height="30" x="920" y="10" textsize="14" icon="none" iconx="20" icony="20" adjtext="-5">
                <event name="clicked">
                    <action preconditions="no" name="transition">
                        <parameter>
                            <type>state</type>
                            <name>n</name>
                            <value>1000</value>
                        </parameter>
                    </action>
                </event>
            </button>
            
            <button label="MENU" width="250" height="100" x="212" y="630" textsize="40" icon="iconRight2.png" iconx="65" icony="20" adjtext="-10">
                <event name="clicked">
                    <action preconditions="no" name="transition">
                        <parameter>
                            <type>state</type>
                            <name>n</name>
                            <value>800</value>
                        </parameter>
                    </action>
                </event>
            </button>
           
            <textfield x="200" y="50" width="924" textsize="80" background="0" border="0">
                <text say="0">
                    <part type="text">PLEASE USE ME</part>
                </text>
            </textfield>
        </components>
    </screen>
    <expectedevents>
        <event name="FD">
            <action preconditions="no" name="transition">
                <parameter>
                    <type>state</type>
                    <name>n</name>
                    <value>98</value>
                </parameter>
            </action>
        </event>
        <event name="FE">
            <action preconditions="no" name="transition">
                <parameter>
                    <type>state</type>
                    <name>n</name>
                    <value>9000</value>
                </parameter>
            </action>>
    <savedvalues>
                <save value="value1" tag="VARFallUser"/>
                <save value="value2" tag="VARAlrmType"/>
                <save value="value3" tag="VARLandmark"/>
            </savedvalues>
        </event>
    </expectedevents>
</state>


Edited by iceman - 13.Jul.2011 at 14:02

Thanks for the reply.Yes, you're right. one UI graph specifies one screen which again contains one or more screen elements (e.g. button).The former is called the state editor and later the screen editor.
You've answered some of the questions. I had a couple more in the last post. The state changes not only on events from screen elements, but also from external async events. The state also performs some actions. How to put these in the editor as metatypes which can be modeled while scenario authoring?

The way I have defined the transition relation is here. Is it correct?

The other issues I faced were as follows. I added the screen graph property to the state as shown here, but the state object blocks the screen editor till I press "all ok" on the state object. Is that preventable?

I also happened to get an exception while adding graphs from the transition.