Loading... (0%)

How to build a UI for your ClearConnect Platform

10 August 2015

This article will explain the best approach to connect your UI to the ClearConnect Platform.
As with the other examples we will use the Subway Scenario as the example UI.
We have a very simple screen that allows you to log in, displays your balance and allows you to top up.

TopupUI

 

 

 

 

 

Other examples cover creating the services so here we will just concentrate on the Client UI.
First we get access to the service proxy – this lets us interact with it

 

PlatformClientAccess access = new PlatformClientAccess("CardTopupUI", TcpChannelUtils.LOCALHOST_IP);
IPlatformRegistryAgent agent = access.getPlatformRegistryAgent();
IPlatformServiceProxy proxy = agent.getPlatformServiceProxy(CardTopupService.CARD_BALANCE_SERVICE);

 

Next we add a record listener, for this example the service is publishing a record with our card balance and the record name is our id. We need to take a snapshot of the record in the callback thread to ensure it is immutable and ensure we don’t block with any long running operations. In this case we are updating the UI so would need to move to the Event Dispatching Thread anyway.

		proxy.addRecordListener(new IRecordListener() {
			
			@Override
			public void onChange(IRecord record,
					IRecordChange atomicChange) {
				//take a snapshot of the balance here as the record is only
				//valid in this thread.
				IValue val = record.get(CardTopupService.CARD_BALANCE);
				if(val != null){
					final Double balance = val.doubleValue();
					//move to a different thread so as not to block rpc.
					SwingUtilities.invokeLater(new Runnable() {
						
						@Override
						public void run() {
							currentBalanceFld.setText(balance.toString());
						}
					});
				}
			}
		}, CardTopupUI.this.id);

 

We also need to add a call to the RPC to topup the card. In this case the service does not send a reply so we can use the executeRpcNoResponse method, if we wanted to listen to the response we would just use the executeRpc method which returns an IValue. Once this RPC has been fired the service will update the record and we will get a call back on our record listener above.

		final JButton topupButton = new JButton("Topup");
		topupButton.addActionListener(new ActionListener() {
			
			@Override
			public void actionPerformed(ActionEvent e) {
				double credit = Double.parseDouble(topupAmountFld.getText());
				try {
					/*
					 * Fire the rpc to update the card.
					 * In this case we know the rpc exists, but you can also
					 * add an rpc available listener if you need to wait until
					 * the rpc has been published.
					 */
					proxy.executeRpcNoResponse(5000, CardTopupService.CARD_TOPUP_RPC, TextValue.valueOf(id), DoubleValue.valueOf(credit));
				} catch (TimeOutException e1) {
					/*
					 * The platform was unable to locate the rpc after 5 seconds, 
					 * probably means the service hasn't published the RPC
					 */
					JOptionPane.showMessageDialog(CardTopupUI.this, "Update Failed - there was no response from the server after 5 seconds");
				} catch (ExecutionException e1) {
					/*
					 * There was an error in the RPC code, check your service to ensure
					 * it has been implemented correctly.
					 */
					JOptionPane.showMessageDialog(CardTopupUI.this, "Update Failed");
				}
			}
		});

 

This is all that is required to connect your UI to the ClearConnect platform.

 

The Code

Use the button on the right to download the code that was used for this demo.

Fimtra - post author

Fimtra is an organisation that specialises in writing real-time, distributed software using innovative solutions. Fimtra's core framework is ClearConnect.